Creating a Table - 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. Documentation menu ### Getting Started - [ Installation ](https://laravel-datatables.com/docs) - [ Dark Mode ](https://laravel-datatables.com/docs/dark-mode) ### Basics - [ Creating a Table ](https://laravel-datatables.com/docs/creating-a-table) - [ Displaying Columns ](https://laravel-datatables.com/docs/displaying-columns) - [ Data Sources ](https://laravel-datatables.com/docs/data-sources) - [ Internationalisation ](https://laravel-datatables.com/docs/internationalisation) - [ Multi-Language ](https://laravel-datatables.com/docs/multi-language) - [ Styling ](https://laravel-datatables.com/docs/styling) ### Customization - [ Columns ](https://laravel-datatables.com/docs/customization-columns) - [ Cell Renderer ](https://laravel-datatables.com/docs/customization-cell-renderer) - [ Value Formatter ](https://laravel-datatables.com/docs/customization-value-formatter) - [ Filters ](https://laravel-datatables.com/docs/customization-filters) - [ Pagination ](https://laravel-datatables.com/docs/customization-pagination) - [ Sorting Icons ](https://laravel-datatables.com/docs/customization-sorting-icons) - [ Row Actions ](https://laravel-datatables.com/docs/customization-row-actions) - [ Multi Row Actions ](https://laravel-datatables.com/docs/customization-multi-row-actions) - [ Loading Indicator ](https://laravel-datatables.com/docs/customization-loading-indicator) - [ Exporting ](https://laravel-datatables.com/docs/customization-exporting) - [ Components ](https://laravel-datatables.com/docs/customization-components) - [ Data Sources ](https://laravel-datatables.com/docs/customization-data-sources) - [ State Persistence ](https://laravel-datatables.com/docs/customization-state-persistence) ### Features - [ Accessibility ](https://laravel-datatables.com/docs/feature-accessibility) - [ Actions and Forms ](https://laravel-datatables.com/docs/actions-and-forms) - [ Aggregate Columns ](https://laravel-datatables.com/docs/feature-aggregate-columns) - [ Column Reordering ](https://laravel-datatables.com/docs/feature-column-reordering) - [ Column Visibility ](https://laravel-datatables.com/docs/feature-column-visibility) - [ Custom Filters ](https://laravel-datatables.com/docs/feature-custom-filters) - [ Custom Controls ](https://laravel-datatables.com/docs/feature-custom-controls) - [ Exporting ](https://laravel-datatables.com/docs/feature-exporting) - [ Freeze Columns and Headers ](https://laravel-datatables.com/docs/feature-freeze-columns-and-headers) - [ Pagination ](https://laravel-datatables.com/docs/feature-pagination) - [ Responsive Mobile ](https://laravel-datatables.com/docs/feature-responsive-mobile) - [ Row Grouping ](https://laravel-datatables.com/docs/feature-row-grouping) - [ Row Selection ](https://laravel-datatables.com/docs/feature-row-selection) - [ Sorting and Searching ](https://laravel-datatables.com/docs/sorting-and-searching) - [ State Persistence ](https://laravel-datatables.com/docs/feature-state-persistence) - [ Value Preparation ](https://laravel-datatables.com/docs/feature-value-preparation) ### Cell Renderer - [ Action Buttons ](https://laravel-datatables.com/docs/renderer-action-buttons) - [ Avatar ](https://laravel-datatables.com/docs/renderer-avatar) - [ Checkmark ](https://laravel-datatables.com/docs/renderer-checkmark) - [ Color Sample ](https://laravel-datatables.com/docs/renderer-color-sample) - [ Email Link ](https://laravel-datatables.com/docs/renderer-email-to-link) - [ External Link ](https://laravel-datatables.com/docs/renderer-external-link) - [ Friendly Timestamp ](https://laravel-datatables.com/docs/renderer-friendly-timestamp) - [ Image ](https://laravel-datatables.com/docs/renderer-image) - [ Long Text ](https://laravel-datatables.com/docs/renderer-long-text) - [ Phone Link ](https://laravel-datatables.com/docs/renderer-phone-link) - [ Progress Bar ](https://laravel-datatables.com/docs/renderer-progress-bar) - [ Status Badge ](https://laravel-datatables.com/docs/renderer-status-badge) - [ URL Link ](https://laravel-datatables.com/docs/renderer-url-link) - [ Wire Link ](https://laravel-datatables.com/docs/renderer-wire-link) ### Value Formatter - [ Compact Number ](https://laravel-datatables.com/docs/formatter-compact-number) - [ Currency ](https://laravel-datatables.com/docs/formatter-currency) - [ Duration ](https://laravel-datatables.com/docs/formatter-duration) - [ Friendly Filesize ](https://laravel-datatables.com/docs/formatter-friendly-filesize) - [ Friendly Timestamp ](https://laravel-datatables.com/docs/formatter-friendly-timestamp) - [ Locale Timestamp ](https://laravel-datatables.com/docs/formatter-locale-timestamp) - [ Number ](https://laravel-datatables.com/docs/formatter-number) - [ Percent ](https://laravel-datatables.com/docs/formatter-percent) Create Your First Datatable =========================== A datatable class is a Livewire component that extends MorrowIt\\LaravelDatatable\\Http\\Livewire\\Datatable. You implement two required methods: dataSource() and columns(). 1. Create the Livewire Class ---------------------------- Start by creating a new livewire (class-based) component which will show a list of all users. We only need a Livewire class-based component as the rendering of the component is already handled in the base Datatable - which is why we add the --class attribute to the artisan command. terminal `php artisan make:livewire user-datatable --class` ``` php artisan make:livewire user-datatable --class ``` Next copy and paste the below code into your newly created datatable class. The class defines where data comes from and how each column behaves. 2. Update Livewire code ----------------------- Next copy and paste the below code into your newly created datatable class. The class defines where data comes from and how each column behaves. app/Livewire/UserDatatable.php PHP `namespace App\Livewire;use App\Models\User;use MorrowIt\LaravelDatatable\Config\Column;use MorrowIt\LaravelDatatable\Contracts\DataSourceInterface;use MorrowIt\LaravelDatatable\DataSources\EloquentDataSource;use MorrowIt\LaravelDatatable\Http\Livewire\Datatable;class UserDatatable extends Datatable{ public function dataSource(): DataSourceInterface { return new EloquentDataSource(User::query()); } public function columns(): array { return [ Column::make('id', 'ID')->sortable(), Column::make('name', 'Name')->searchable()->sortable(), Column::make('email', 'Email')->searchable()->sortable(), Column::make('created_at', 'Created At')->sortable(), ]; }}` ``` namespace App\Livewire; use App\Models\User; use MorrowIt\LaravelDatatable\Config\Column; use MorrowIt\LaravelDatatable\Contracts\DataSourceInterface; use MorrowIt\LaravelDatatable\DataSources\EloquentDataSource; use MorrowIt\LaravelDatatable\Http\Livewire\Datatable; class UserDatatable extends Datatable { public function dataSource(): DataSourceInterface { return new EloquentDataSource(User::query()); } public function columns(): array { return [ Column::make('id', 'ID')->sortable(), Column::make('name', 'Name')->searchable()->sortable(), Column::make('email', 'Email')->searchable()->sortable(), Column::make('created_at', 'Created At')->sortable(), ]; } } ``` 3. Use the Component -------------------- Place the datatable component in any Blade page and open it in your browser: resources/views/example.blade.php BLADE ` ` ``` ``` 4. Optional: Array Data Source ------------------------------ If you want to test against a fixed dataset before connecting to a database, use ArrayDataSource for static or generated in-memory datasets: ArrayDataSource example PHP `use MorrowIt\LaravelDatatable\DataSources\ArrayDataSource;public function dataSource(): DataSourceInterface{ return new ArrayDataSource([ ['id' => 1, 'name' => 'Alice', 'email' => 'alice@example.com'], ['id' => 2, 'name' => 'Bob', 'email' => 'bob@example.com'], ]);}` ``` use MorrowIt\LaravelDatatable\DataSources\ArrayDataSource; public function dataSource(): DataSourceInterface { return new ArrayDataSource([ ['id' => 1, 'name' => 'Alice', 'email' => 'alice@example.com'], ['id' => 2, 'name' => 'Bob', 'email' => 'bob@example.com'], ]); } ``` 5. What Happens at Runtime -------------------------- On each interaction, the datatable component reads table state, queries the data source, applies filters/search/sorts, and renders rows using the active theme. Request flow TEXT `1) Resolve table state (search, filters, sorting, page)2) Build row set from dataSource()3) Apply column rules and value pipeline4) Render theme view with paginated rows` ``` 1) Resolve table state (search, filters, sorting, page) 2) Build row set from dataSource() 3) Apply column rules and value pipeline 4) Render theme view with paginated rows ``` Start with a minimal columns() definition first, then add formatters, renderers, and advanced filters incrementally to keep behavior easy to verify. Related documentation [Displaying Columns](https://laravel-datatables.com/docs/displaying-columns) [Data Sources](https://laravel-datatables.com/docs/data-sources) Related demos [Simple Datatable](https://laravel-datatables.com/demos) © 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)