Products Datatable - Datatables for Laravel [ Datatables for Laravel ](/) [ 1.0.5](https://laravel-datatables.com/release-notes "Click to view release notes") 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 ### Use Cases - [ Simple Datatable ](https://laravel-datatables.com/demos/use-case-simple) - [ Products Datatable ](https://laravel-datatables.com/demos/use-case-products) - [ Sales Operations ](https://laravel-datatables.com/demos/use-case-sales) ### Features - [ Accessibility ](https://laravel-datatables.com/demos/features-accessibility) - [ Advanced Filtering ](https://laravel-datatables.com/demos/features-advanced-filtering) - [ Aggregate Totals ](https://laravel-datatables.com/demos/features-aggregate-totals) - [ Column Reordering ](https://laravel-datatables.com/demos/features-column-reordering) - [ Custom Controls ](https://laravel-datatables.com/demos/features-custom-controls) - [ Directionality (LTR / RTL) ](https://laravel-datatables.com/demos/features-directionality) - [ Export ](https://laravel-datatables.com/demos/features-export) - [ Frozen Columns ](https://laravel-datatables.com/demos/features-frozen-columns) - [ Frozen Header ](https://laravel-datatables.com/demos/features-frozen) - [ Frozen Header & Columns ](https://laravel-datatables.com/demos/features-frozen-both) - [ Pagination ](https://laravel-datatables.com/demos/features-pagination) - [ Responsive Mobile ](https://laravel-datatables.com/demos/features-responsive-mobile) - [ Row Grouping ](https://laravel-datatables.com/demos/features-row-grouping) - [ Row Selection & Bulk Actions ](https://laravel-datatables.com/demos/features-row-selection-bulk-actions) ### Cell Renderer - [ Action Buttons ](https://laravel-datatables.com/demos/cell-renderer-action-buttons) - [ Avatar ](https://laravel-datatables.com/demos/cell-renderer-avatar) - [ Checkmark ](https://laravel-datatables.com/demos/cell-renderer-checkmark) - [ Color Sample ](https://laravel-datatables.com/demos/cell-renderer-color-sample) - [ Email Link ](https://laravel-datatables.com/demos/cell-renderer-email) - [ External Link ](https://laravel-datatables.com/demos/cell-renderer-external) - [ Friendly Timestamp ](https://laravel-datatables.com/demos/cell-renderer-friendly-timestamp) - [ Image ](https://laravel-datatables.com/demos/cell-renderer-image) - [ Long Text ](https://laravel-datatables.com/demos/cell-renderer-long-text) - [ Phone Link ](https://laravel-datatables.com/demos/cell-renderer-phone-link) - [ Progress Bar ](https://laravel-datatables.com/demos/cell-renderer-progress-bar) - [ Status Badge ](https://laravel-datatables.com/demos/cell-renderer-status-badge) - [ URL Link ](https://laravel-datatables.com/demos/cell-renderer-url) - [ Wire Link ](https://laravel-datatables.com/demos/cell-renderer-wire) ### Value Formatter - [ Compact Number ](https://laravel-datatables.com/demos/value-formatter-compact-number) - [ Currency ](https://laravel-datatables.com/demos/value-formatter-currency) - [ Duration ](https://laravel-datatables.com/demos/value-formatter-duration) - [ Friendly Filesize ](https://laravel-datatables.com/demos/value-formatter-friendly-filesize) - [ Friendly Timestamp ](https://laravel-datatables.com/demos/value-formatter-friendly-timestamp) - [ Locale Timestamp ](https://laravel-datatables.com/demos/value-formatter-locale-timestamp) - [ Number ](https://laravel-datatables.com/demos/value-formatter-number) - [ Percent ](https://laravel-datatables.com/demos/value-formatter-percent) Products Datatable ================== A basic implementation showcasing a Products table that queries data using an Eloquent data source and a Product 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. This use-case also has state persistence enabled which means any sorting, filtering and other options are stored for this session. Try it out by hiding some columns, searching or sorting and then reloading the page. Items per page Manage Columns 10 Current 25 50 100 ​ ### Manage Columns Drag the handles to reorder columns, or focus a handle and use the up and down arrow keys. Changes are saved when you click Apply. Apply Cancel Loading... ID Active Name Description SKU Stock Price Created At Updated At 1 Cumque et ullam #1 Laboriosam quos quia harum in veniam repellendus dolore accusamus voluptatibus. SKU-00000001 85 $487.94 October 9, 2026 3:21 PM 3 weeks ago 2 Nesciunt doloribus voluptatum #2 Reprehenderit est dolores commodi et ea ut eos. SKU-00000002 982 $375.07 October 9, 2026 3:21 PM 3 weeks ago 3 Et ullam dignissimos #3 At cupiditate ut rem ad a ea laborum est incidunt ipsum. SKU-00000003 290 A$485.74 October 9, 2026 3:21 PM 3 weeks ago 4 Exercitationem sapiente nihil #4 Repellat delectus aut nemo rerum perferendis commodi cumque voluptatem qui est sequi dolorum qui eius architecto sed. SKU-00000004 164 CA$108.78 October 9, 2026 3:21 PM 3 weeks ago 5 Vel tempore dolores #5 Maxime quos veniam voluptatibus facere blanditiis expedita cum culpa tempore repudiandae sed nobis eum quis modi. SKU-00000005 860 CA$211.49 October 9, 2026 3:21 PM 3 weeks ago 6 Qui consequatur sed #6 Necessitatibus sunt eligendi asperiores ducimus consequatur aut exercitationem omnis ipsa unde cupiditate rerum autem est velit. SKU-00000006 0 £422.27 October 9, 2026 3:21 PM 3 weeks ago 7 Sit quae occaecati #7 Qui sit sint delectus eligendi id vero atque magni id provident distinctio eos dolor qui. SKU-00000007 866 $374.05 October 9, 2026 3:21 PM 3 weeks ago 8 Esse nihil quam #8 Minus aut consectetur laborum adipisci itaque atque et ipsa dolore quis quam quod. SKU-00000008 0 £437.97 October 9, 2026 3:21 PM 3 weeks ago 9 Corporis dolorum est #9 Id et doloremque porro rerum voluptatem delectus praesentium quis non aut. SKU-00000009 988 £144.12 October 9, 2026 3:21 PM 3 weeks ago 10 Ut explicabo quia #10 Quis molestiae in dolorum numquam officia ducimus aliquid vel qui nam praesentium et minima accusantium rerum. SKU-00000010 693 A$364.24 October 9, 2026 3:21 PM 3 weeks ago « Previous Next » 1 - 10 of 1000 1 2 3 4 5 6 7 8 9 10 ... 99 100 `namespace App\Livewire\Datatables;use App\Models\Product;use MorrowIt\LaravelDatatable\Http\Livewire\Datatable;use MorrowIt\LaravelDatatable\Contracts\DataSourceInterface;use MorrowIt\LaravelDatatable\DataSources\EloquentDataSource;use MorrowIt\LaravelDatatable\Config\Column;class ProductsDatatable extends Datatable{ public string $tableId = 'use-case-products-table'; public bool $persistTableState = true; public bool $enableColumnReordering = true; public int $perPage = 10; public int $freezeColumns = 1; public bool $freezeHeader = true; public function dataSource(): DataSourceInterface { return new EloquentDataSource(Product::query()); } public function columns(): array { return [ Column::make('id', 'ID') ->sortable() ->headerClasses('text-right') ->cellClasses('text-right'), Column::make('active', 'Active') ->sortable() ->renderer(new \MorrowIt\LaravelDatatable\Renderers\Checkmark(variant: 'round')), Column::make('name', 'Name') ->searchable() ->sortable(), Column::make('description', 'Description') ->removeCellClasses('whitespace-nowrap') ->cellClasses('max-w-[24rem]') ->renderer(new \MorrowIt\LaravelDatatable\Renderers\LongText()), Column::make('sku', 'SKU') ->searchable() ->sortable(), Column::make('stock', 'Stock') ->sortable() ->headerClasses('text-right') ->cellClasses('text-right'), Column::make('price', 'Price') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\Currency(currencyCol: 'currency')), Column::make('created_at', 'Created At') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\LocaleTimestamp()), Column::make('updated_at', 'Updated At') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\FriendlyTimestamp()) ->renderer(new \MorrowIt\LaravelDatatable\Renderers\FriendlyTimestamp()) ]; }}` ``` namespace App\Livewire\Datatables; use App\Models\Product; use MorrowIt\LaravelDatatable\Http\Livewire\Datatable; use MorrowIt\LaravelDatatable\Contracts\DataSourceInterface; use MorrowIt\LaravelDatatable\DataSources\EloquentDataSource; use MorrowIt\LaravelDatatable\Config\Column; class ProductsDatatable extends Datatable { public string $tableId = 'use-case-products-table'; public bool $persistTableState = true; public bool $enableColumnReordering = true; public int $perPage = 10; public int $freezeColumns = 1; public bool $freezeHeader = true; public function dataSource(): DataSourceInterface { return new EloquentDataSource(Product::query()); } public function columns(): array { return [ Column::make('id', 'ID') ->sortable() ->headerClasses('text-right') ->cellClasses('text-right'), Column::make('active', 'Active') ->sortable() ->renderer(new \MorrowIt\LaravelDatatable\Renderers\Checkmark(variant: 'round')), Column::make('name', 'Name') ->searchable() ->sortable(), Column::make('description', 'Description') ->removeCellClasses('whitespace-nowrap') ->cellClasses('max-w-[24rem]') ->renderer(new \MorrowIt\LaravelDatatable\Renderers\LongText()), Column::make('sku', 'SKU') ->searchable() ->sortable(), Column::make('stock', 'Stock') ->sortable() ->headerClasses('text-right') ->cellClasses('text-right'), Column::make('price', 'Price') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\Currency(currencyCol: 'currency')), Column::make('created_at', 'Created At') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\LocaleTimestamp()), Column::make('updated_at', 'Updated At') ->sortable() ->format(new \MorrowIt\LaravelDatatable\Formatters\FriendlyTimestamp()) ->renderer(new \MorrowIt\LaravelDatatable\Renderers\FriendlyTimestamp()) ]; } } ``` ### Related Documentation [Creating a Table Basics Create your very first basic Datatables for Laravel datatable.](https://laravel-datatables.com/docs/basic-creating-a-table) [Displaying Columns Basics Display datatable columns and configure behavior, rendering, formatting and other properties.](https://laravel-datatables.com/docs/basic-displaying-columns) ### Related Demos [Simple Datatable Use Cases Showcase of a Contact table that queries data using an Eloquent data source and a Contact model.](https://laravel-datatables.com/demos/use-case-simple) [Sales Operations Use Cases Showcase of a Sales table that queries data using an Eloquent data source and a Sale model.](https://laravel-datatables.com/demos/use-case-sales) © 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)