Basic Usage

This guide walks through the smallest possible Inertia Table integration: a Laravel controller that builds a Table from your Eloquent model, and an Inertia page that renders it with the matching Vue or React component. From here, every other feature in the docs (sorting, filtering, exports, actions) layers on top of this same pattern.

Controller

Once you've configured your table with columns, filters, and other options, call the static make() method to create a new table instance and pass it as a prop to the page.

use App\Tables\Users;

class UsersController
{
    public function index()
    {
        return inertia('Users', [
            'users' => Users::make(),
        ]);
    }
}

Page

In your page component, import the Table component and pass the users prop as its resource.

Vue

<script setup>
import { Table } from '@inertiaui/table-vue'

defineProps(['users']);
</script>

<template>
    <AppLayout title="Users">
        <Table :resource="users" />
    </AppLayout>
</template>

React

import { Table } from '@inertiaui/table-react'

export default function Users({ users }) {
    return (
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <Table resource={users} />
        </div>
    )
}