forjedio/inertia-table

Quick Example

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

    protected function columns(): array
    {
        return [
            LinkColumn::make('name', 'Name')
                ->route('companies.show', ['company' => ':id'])
                ->sortable(),
            TextColumn::make('email', 'Email')->sortable(),
            EnumColumn::make('status', 'Status')->sortable(),
            BooleanColumn::make('active', 'Active'),
            DateTimeColumn::make('created_at', 'Created')->sortable(),
            ActionsColumn::make(),
            Column::data('id'),
        ];
    }

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

Pass it to your Inertia page:

return Inertia::render('Companies/Index', [
    'companies' => CompanyTable::make(Company::query())->paginate(),
]);

Render it on the frontend:

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

export default function Index({ companies }) {
    return <InertiaTable tableData={companies} />;
}

That's it. Search, sorting, pagination, and all cell rendering handled automatically.

Features

• 11 column types - Text, Badge, Boolean, Date, DateTime, Link, Copyable, Enum, Component, Actions, and hidden data columns
• Icon modifiers - withIcon() and asIcon() on any column with map, closure, or fixed icon support
• Sorting - single-column with URL state, three-tier priority, - prefix for descending
• Searching - global full-text search with configurable debounce
• Pagination - full and simple modes with configurable per-page
• Enum integration - PHP enums automatically render as coloured badges
• Table hooks - beforeQuery and afterData hooks for query modification and data transformation
• Frontend hooks - extension system for realtime updates, analytics, and feature flags
• Link routing - Ziggy or server-side URL resolution (configurable)
• Multiple tables - identifier system for independent tables on the same page
• Component columns - register reusable frontend components for custom cell rendering
• Dark mode - all styles include dark: variants out of the box
• Fully customisable - override any cell, header, search, pagination, or toolbar via render props. Compatible with shadcn/ui.

Installation

Install the backend package via Composer:

composer require forjedio/inertia-table

Then install the frontend package for your stack:

# React
npm install @forjedio/inertia-table-react

# Vue
npm install @forjedio/inertia-table-vue

Both frontend packages need Tailwind to scan their dist/ so utility classes used by the table are emitted into your CSS bundle. See the per-package READMEs for the exact @source directive (Tailwind v4) or content entry (Tailwind v3):

• React Tailwind setup
• Vue Tailwind setup

Requirements

• PHP 8.2+
• Laravel 12 or 13
• Inertia.js 2.x or 3.x
• React 18/19 or Vue 3.4+
• Tailwind CSS 3.4+ or 4.0+

Documentation

Full documentation is available at inertia-table.forjed.io.

Live Demo

See it in action at inertia-table-demo.forjed.io.

License

MIT