Musing Inertia Table

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

Explore the documentation or the playground source.

Requirements

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

• Search and filters
• Actions and selection
• Queues
• Exports
• Saved Views
• Relationships
• Customization
• PHP API
• Vue API

Packages and project links

• Packagist: musing/inertia-table
• npm: @musing/inertia-table-vue
• GitHub repository
• Issue tracker

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.