Simple Datatable - Datatables for Laravel [ Datatables for Laravel ](/) Toggle main menu [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) Search ⌘ K [ Log in ](/login) [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) Search docs and demos Type at least 2 characters to search. Demos menu ### Use Cases - [ Simple Datatable ](/demos) - [ Products Datatable ](/demos/use-case-products) - [ Sales Operations ](/demos/use-case-sales) ### Features - [ Accessibility ](/demos/features-accessibility) - [ Advanced Filtering ](/demos/features-advanced-filtering) - [ Column Reordering ](/demos/features-column-reordering) - [ Directionality (LTR / RTL) ](/demos/features-directionality) - [ Export ](/demos/features-export) - [ Pagination ](/demos/features-pagination) - [ Frozen Columns ](/demos/features-frozen-columns) - [ Frozen Header ](/demos/features-frozen) - [ Frozen Header & Columns ](/demos/features-frozen-both) - [ Responsive Mobile ](/demos/features-responsive-mobile) - [ Row Grouping ](/demos/features-row-grouping) - [ Aggregate Totals ](/demos/features-aggregate-totals) - [ Row Selection & Bulk Actions ](/demos/features-row-selection-bulk-actions) - [ Custom Controls ](/demos/features-custom-controls) ### Cell Renderer - [ Action Buttons ](/demos/cell-renderer-action-buttons) - [ Avatar ](/demos/cell-renderer-avatar) - [ Checkmark ](/demos/cell-renderer-checkmark) - [ Color Sample ](/demos/cell-renderer-color-sample) - [ Email Link ](/demos/cell-renderer-email) - [ External Link ](/demos/cell-renderer-external) - [ Friendly Timestamp ](/demos/cell-renderer-friendly-timestamp) - [ Image ](/demos/cell-renderer-image) - [ Long Text ](/demos/cell-renderer-long-text) - [ Phone Link ](/demos/cell-renderer-phone-link) - [ Progress Bar ](/demos/cell-renderer-progress-bar) - [ Status Badge ](/demos/cell-renderer-status-badge) - [ Url Link ](/demos/cell-renderer-url) - [ Wire Link ](/demos/cell-renderer-wire) ### Value Formatter - [ Compact Number ](/demos/value-formatter-compact-number) - [ Currency ](/demos/value-formatter-currency) - [ Duration ](/demos/value-formatter-duration) - [ Friendly Filesize ](/demos/value-formatter-friendly-filesize) - [ Friendly Timestamp ](/demos/value-formatter-friendly-timestamp) - [ Locale Timestamp ](/demos/value-formatter-locale-timestamp) - [ Number ](/demos/value-formatter-number) - [ Percent ](/demos/value-formatter-percent) Simple Datatable ================ A basic implementation showcasing a Contact table that queries data using an Eloquent data source and a Contact model. The table is configured for column sorting, searching, column re-ordering, frozen header and column and uses custom formatters and renderers out of the box. Related documentation [ Creating a Table ](https://laravel-datatables.com/docs/creating-a-table) [ Displaying Columns ](https://laravel-datatables.com/docs/displaying-columns) [ Freeze Columns and Headers ](https://laravel-datatables.com/docs/feature-freeze-columns-and-headers) [ Column Reordering ](https://laravel-datatables.com/docs/feature-column-reordering) Related demos [ Products Datatable ](https://laravel-datatables.com/demos/use-case-products) [ Sales Operations ](https://laravel-datatables.com/demos/use-case-sales) Items per page Columns 10 Current 25 50 100 ​### Manage Columns ID First Name Last Name Email Company Last Contact Created At Apply Cancel Loading... ID First Name Last Name Email Company Last Contact Created At 1 Ila Powlowski Nienow Inc 8 months ago September 1, 2026 2:16 PM 2 Wilford Corwin Douglas LLC 6 months ago September 1, 2026 2:16 PM 3 Chanel Hermiston Kiehn-Ryan 5 months ago September 1, 2026 2:16 PM 4 Nella Monahan Senger-McLaughlin 7 months ago September 1, 2026 2:16 PM 5 Abby Keeling Batz-Schroeder 1 year ago September 1, 2026 2:16 PM 6 Jaiden Johns O'Connell, Schmeler and Miller 9 months ago September 1, 2026 2:16 PM 7 Mikel Borer Barton Ltd 1 month ago September 1, 2026 2:16 PM 8 Kaitlyn Jenkins Schuppe-Pfannerstill 3 months ago September 1, 2026 2:16 PM 9 Donato Farrell Cummerata, Block and Muller 4 months ago September 1, 2026 2:16 PM 10 Devin Pfannerstill Effertz, Ritchie and Eichmann 1 month ago September 1, 2026 2:16 PM « Previous Next » 1 - 10 of 900 1 2 3 4 5 6 7 8 9 10 ... 89 90 `namespace App\Livewire\Datatables;use App\Models\Contact;use MorrowIt\LaravelDatatable\Http\Livewire\Datatable;use MorrowIt\LaravelDatatable\Contracts\DataSourceInterface;use MorrowIt\LaravelDatatable\DataSources\EloquentDataSource;use MorrowIt\LaravelDatatable\Config\Column;class SimpleDatatable extends Datatable{ public string $tableId = 'use-case-simple-table'; public bool $enableColumnReordering = true; public int $freezeColumns = 1; public bool $freezeHeader = true; public function dataSource(): DataSourceInterface { return new EloquentDataSource(Contact::query()); } public function columns(): array { return [ Column::make('id', 'ID') ->sortable() ->headerClasses('text-right') ->cellClasses('text-right'), Column::make('first_name', 'First Name') ->searchable() ->sortable(), Column::make('last_name', 'Last Name') ->searchable() ->sortable(), Column::make('email', 'Email') ->searchable() ->sortable() ->renderer(new \MorrowIt\LaravelDatatable\Renderers\EmailToLink()), Column::make('company_name', 'Company') ->searchable() ->sortable(), Column::make('last_contact_at', 'Last Contact') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\FriendlyTimestamp()) ->renderer(new \MorrowIt\LaravelDatatable\Renderers\FriendlyTimestamp()), Column::make('created_at', 'Created At') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\FriendlyTimestamp()) ->renderer(new \MorrowIt\LaravelDatatable\Renderers\FriendlyTimestamp()), ]; }}` ``` namespace App\Livewire\Datatables; use App\Models\Contact; use MorrowIt\LaravelDatatable\Http\Livewire\Datatable; use MorrowIt\LaravelDatatable\Contracts\DataSourceInterface; use MorrowIt\LaravelDatatable\DataSources\EloquentDataSource; use MorrowIt\LaravelDatatable\Config\Column; class SimpleDatatable extends Datatable { public string $tableId = 'use-case-simple-table'; public bool $enableColumnReordering = true; public int $freezeColumns = 1; public bool $freezeHeader = true; public function dataSource(): DataSourceInterface { return new EloquentDataSource(Contact::query()); } public function columns(): array { return [ Column::make('id', 'ID') ->sortable() ->headerClasses('text-right') ->cellClasses('text-right'), Column::make('first_name', 'First Name') ->searchable() ->sortable(), Column::make('last_name', 'Last Name') ->searchable() ->sortable(), Column::make('email', 'Email') ->searchable() ->sortable() ->renderer(new \MorrowIt\LaravelDatatable\Renderers\EmailToLink()), Column::make('company_name', 'Company') ->searchable() ->sortable(), Column::make('last_contact_at', 'Last Contact') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\FriendlyTimestamp()) ->renderer(new \MorrowIt\LaravelDatatable\Renderers\FriendlyTimestamp()), Column::make('created_at', 'Created At') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\FriendlyTimestamp()) ->renderer(new \MorrowIt\LaravelDatatable\Renderers\FriendlyTimestamp()), ]; } } ``` © 2026 Copyright (C) [ Morrow IT Consulting & Services ](https://morrow-it.services) [Terms of Service](https://laravel-datatables.com/legal/terms) [Privacy](https://laravel-datatables.com/legal/privacy) [Legal Disclosure](https://laravel-datatables.com/legal/disclosure)