Quick Start

1. Generate a Table Class

php artisan make:table ServerTable --model=Server

This creates app/Tables/ServerTable.php. Customise the columns:

use Forjed\InertiaTable\Table;
use Forjed\InertiaTable\Column;
use Forjed\InertiaTable\Columns\{LinkColumn, EnumColumn, DateTimeColumn, ActionsColumn};

class ServerTable extends Table
{
    protected string $defaultSort = '-created_at';

    protected function columns(): array
    {
        return [
            LinkColumn::make('name', 'Name')
                ->route('servers.show', ['server' => ':id'])
                ->sortable(),
            Column::make('ip', 'IP Address')->sortable()->copyable(),
            EnumColumn::make('status', 'Status')->sortable(),
            DateTimeColumn::make('created_at', 'Created')->sortable(),
            ActionsColumn::make(),
            Column::data('id'),
        ];
    }

    protected function searchable(): array
    {
        return ['name', 'ip'];
    }
}

2. Use in a Controller

use App\Tables\ServerTable;
use App\Models\Server;

Route::get('/servers', function () {
    return Inertia::render('Servers', [
        'servers' => ServerTable::make(Server::query())->paginate(),
    ]);
});

3. Render the Table

React

import { InertiaTable } from 'inertia-table-react';
import { usePage } from '@inertiajs/react';

export default function Servers() {
    const { servers } = usePage().props;

    return (
        <InertiaTable
            tableData={servers}
            actions={(row) => (
                <div className="flex gap-2">
                    <button onClick={() => editServer(row)}>Edit</button>
                    <button onClick={() => deleteServer(row)}>Delete</button>
                </div>
            )}
        />
    );
}

Vue

<script setup>
import { InertiaTable } from 'inertia-table-vue';

defineProps({ servers: Object });
</script>

<template>
    <InertiaTable :table-data="servers">
        <template #actions="{ row }">
            <div class="flex gap-2">
                <button @click="editServer(row)">Edit</button>
                <button @click="deleteServer(row)">Delete</button>
            </div>
        </template>
    </InertiaTable>
</template>

Search, sorting, and pagination work automatically - no additional frontend code needed. Clicking a column header sorts it, typing in the search input filters results, and pagination buttons navigate between pages. All state is synchronised with URL query parameters.