README

Server-driven data tables for Laravel, Inertia.js, and Vue. Declare columns, search, filters, actions, and exports in PHP, then render the result with one Vue component.

The server remains authoritative: browser input can use only capabilities declared by the table. Each table keeps isolated URL state, and Spatie Laravel Query Builder executes the allowlisted query.

Warning

The package is under active development before v1.0. Minor releases may contain API changes.

Features

Capability	Included
Querying	Server-side search and filters, sorting, relationships, and pagination
Layout	Visibility, order, resizing, and sticky columns
Workflows	Row and bulk actions, all-matching selection, queues, and progress
Reporting	Complete-result summaries and CSV, XLSX, or PDF exports
Preferences	Namespaced URL state and scoped Saved Views
Rendering	Vue renderer, typed composables, slots, and CSS hooks, plus English and Vietnamese

Explore the documentation or the playground source.

Requirements

Layer	Requirement
PHP	8.3+
Laravel	12 or 13
Inertia	Laravel 2 or 3; Vue 3.4+
Query engine	Spatie Laravel Query Builder 7
Frontend peers	Tailwind CSS 4.1+, Reka UI 2.10+, `@lucide/vue` 1.30+

Installation

composer require musing/inertia-table
npm install @musing/inertia-table-vue

Add the package's Vue source to the host application's Tailwind stylesheet:

/* resources/css/app.css */
@source '../../node_modules/@musing/inertia-table-vue/resources/js/**/*.vue';

Import the renderer stylesheet once in the application entry point:

import "@musing/inertia-table-vue/style.css";

Quick start

Generate a table:

php artisan make:inertia-table TopicsTable --model=Topic

Declare the query and its browser-facing capabilities:

<?php

namespace App\Tables;

use App\Models\Topic;
use Illuminate\Database\Eloquent\Builder;
use Musing\InertiaTable\Columns\DateTimeColumn;
use Musing\InertiaTable\Columns\TextColumn;
use Musing\InertiaTable\Filters\SetFilter;
use Musing\InertiaTable\Table;

final class TopicsTable extends Table
{
    protected ?string $defaultSort = 'name';

    public function query(): Builder
    {
        return Topic::query();
    }

    public function columns(): array
    {
        return [
            TextColumn::make('name')->searchable()->sortable(),
            DateTimeColumn::make('created_at', 'Created')->sortable(),
        ];
    }

    public function filters(): array
    {
        return [
            SetFilter::make('status')->options([
                'published' => 'Published',
                'draft' => 'Draft',
            ]),
        ];
    }
}

Return the table from an Inertia controller:

use App\Tables\TopicsTable;

return inertia('Topics/Index', [
    'topics' => TopicsTable::make(),
]);

Render it in Vue:

<script setup lang="ts">
import { DataTable, type TableResource } from "@musing/inertia-table-vue";

type Topic = {
    id: number;
    name: string;
    status: string;
    created_at: string;
};

defineProps<{ topics: TableResource<Topic> }>();
</script>

<template>
    <DataTable :resource="topics" />
</template>

This provides server-side search, sorting, filtering, pagination, URL state, column controls, and the standard empty-state UI. Continue with the getting started guide.

Documentation

Packages and project links

Development

See the contributor guide for local setup, test suites, contract fixtures, and documentation commands.

License

Musing Inertia Table is open-source software licensed under the MIT license.

toolbelt / inertia-table

Package info

Security

Fund package maintenance!

Statistics