Products 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) 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. Related documentation [ Creating a Table ](https://laravel-datatables.com/docs/creating-a-table) [ Displaying Columns ](https://laravel-datatables.com/docs/displaying-columns) [ State Persistence ](https://laravel-datatables.com/docs/feature-state-persistence) Related demos [ Simple Datatable ](https://laravel-datatables.com/demos/use-case-simple) [ Sales Operations ](https://laravel-datatables.com/demos/use-case-sales) Items per page Columns 10 Current 25 50 100 ​### Manage Columns ID Active Name Description SKU Price Created At Updated At Apply Cancel Loading... ID Active Name Description SKU Price Created At Updated At 1 Culpa itaque ut Voluptas maxime laborum tempore esse officia voluptatem voluptatem sit quia. PRD-691IW-ITKF €453.80 September 1, 2026 2:16 PM 2 weeks ago 2 Ullam non magni Voluptas impedit molestiae molestiae labore quod quo autem rem. PRD-555OY-HSIX €423.23 September 1, 2026 2:16 PM 2 weeks ago 3 Voluptatibus eos esse et Sunt facilis ut quaerat aliquid maiores recusandae blanditiis et esse. PRD-008ER-N3LC €779.98 September 1, 2026 2:16 PM 2 weeks ago 4 Eum rerum harum Ipsam voluptas necessitatibus assumenda sunt aut nisi dicta quidem aut eaque velit consequatur quisquam repudiandae harum sequi. PRD-429SP-ZHNX €674.33 September 1, 2026 2:16 PM 2 weeks ago 5 Corporis velit sit Sunt aut maiores vero possimus vel aperiam corrupti mollitia non inventore. PRD-108MT-6CWH €1,137.90 September 1, 2026 2:16 PM 2 weeks ago 6 Ex illo sed quia Ad omnis distinctio dolore non consequatur molestias amet. PRD-901CI-KDBH €343.38 September 1, 2026 2:16 PM 2 weeks ago 7 Molestias ea repellendus Magnam nostrum eum quis qui pariatur adipisci totam necessitatibus autem. PRD-196XK-X0QS €314.46 September 1, 2026 2:16 PM 2 weeks ago 8 Qui veniam qui Pariatur numquam sit assumenda tenetur quos quam non aut laborum eius omnis accusamus dolor veritatis animi numquam. PRD-888FU-TMVT €1,138.13 September 1, 2026 2:16 PM 2 weeks ago 9 Deleniti aliquid dolorem Ut itaque cum dolor dolores autem nam ea impedit dolore esse doloremque aut nulla. PRD-264YI-YR1O €11.81 September 1, 2026 2:16 PM 2 weeks ago 10 Est debitis blanditiis iure Voluptas et culpa quam mollitia soluta dolores est unde corporis ullam voluptas molestiae excepturi nemo optio. PRD-800FF-XDN4 €819.16 September 1, 2026 2:16 PM 2 weeks ago « Previous Next » 1 - 10 of 320 1 2 3 4 5 6 7 8 9 10 ... 31 32 `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('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('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()) ]; } } ``` © 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)