ProjectLaravelFeatured

Laravel Inertia Datatable

Learn how to implement server-side pagination, filtering, live search, sorting, and limit the number of records displayed per page in your Laravel application. Enhance performance by fetching only the required data while allowing users to filter results, search in real-time, sort data, and control the number of entries displayed per page.

Stack

Laravel
ReactJS
InertiaJS
Datatable
Year
2026

Laravel Inertia DataTable

A Laravel and Inertia React learning application for raprmdn/laravel-inertia-datatables. It demonstrates server-side search, filters, sorting, relationships, and pagination through one Order Operations dataset.

Examples

  1. Basic Orders: searchable columns, filters, sorting, and pagination.
  2. Relationships: customers, companies, countries, agents, and item counts.
  3. Custom Columns: aliases, JSON fields, callbacks, and custom ordering.
  4. Query Builder: the same request contract with joined query results.
  5. API Explorer: paginated Laravel API resources with interactive parameters.

Request Contract

The examples share a predictable URL contract:

URL
?search=ORD&filters[]=status:pending&col=placed_at&sort=desc&limit=25&page=1
  • search: global search value
  • filters[]: repeatable column:value filters
  • col: public sort key
  • sort: asc or desc
  • limit: rows per page
  • page: current page

Date filters use dd-MM-yyyy values.

Installation

Terminal
git clone https://github.com/raprmdn/laravel-inertia-datatable.git
cd laravel-inertia-datatable
 
composer install
npm install
 
cp .env.example .env
php artisan key:generate

Configure a MySQL database in .env, then build and seed the application:

Terminal
php artisan migrate --seed
npm run build

The Order Operations seeder creates 2,500 orders and their related countries, companies, customers, agents, and order items.

Backend Example

Controllers define the public query keys and their trusted database columns:

Controller
use App\Models\Order;
use Raprmdn\DataTables\Column;
use Raprmdn\DataTables\Facades\DataTable;
 
$orders = DataTable::query(Order::query())
    ->columnDefinitions([
        Column::group(['order' => 'order_number', 'reference'])
            ->searchable(),
        Column::make('order')->sortable('order_number'),
        Column::make('customer', 'customer.name')
            ->searchable()
            ->filterable('customer.id')
            ->sortable(),
        Column::make('placed_at')
            ->dateRange()
            ->sortable(),
    ])
    ->applyFilters($request->query('filters', []))
    ->applySort($request->query('col'))
    ->perPage($request->integer('limit', 10))
    ->make();

Frontend

The React examples compose shared TableToolbar, TablePagination, sorting, debounced search, API option, and date-range components. Query state stays in the URL, so filtered and sorted views can be shared or revisited directly.

Project Structure

File
app/Http/Controllers/                 Lesson and API controllers
app/Http/Resources/                   Inertia and API response resources
config/inertia-datatables.php         Package configuration
database/seeders/                     Order Operations dataset
resources/js/components/data-table/   Shared datatable controls
resources/js/pages/examples/          The six learning examples

Screenshots

Basic Orders DataTable
Basic Orders DataTable
Orders & Customers DataTable
Orders & Customers DataTable
Custom Columns DataTable
Custom Columns DataTable
Query Builders DataTable
Query Builders DataTable
API Explorer
API Explorer

Package Documentation

Installation, complete builder API, filtering details, and upgrade guidance live in the package repository:

https://github.com/raprmdn/laravel-inertia-datatables

License

This example application is open-sourced software licensed under the MIT license.