Basic Usage

Controller

Once you've configured your table with columns, filters, and other options, you can use 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, you must import the Table component and pass the users prop as a resource to the component.

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>
    );
}