Multiple Tables

Inertia Table persists every table's state (filters, sort, pagination) in the URL query string. Rendering two or more tables on the same page means each one must be namespaced, so they don't fight over the same query parameters. The as() method gives each table its own URL prefix, allowing you to sort one table without affecting another.

Query String

A table's state (filtering, sorting, pagination) is passed to the Laravel backend via the query string. A table with an active sort might produce a URL like this:

https://example.com/users?sort=name

This works fine for a single table, but with multiple tables on the same page you don't want one query string to affect all of them.

Table Names

To solve this, name your tables via the as() method. There are no hard rules, but in practice you only need to name the second and subsequent tables.

use App\Tables\Crons;
use App\Tables\Daemons;

class UsersController
{
    public function index()
    {
        return inertia('Users', [
            'crons' => Crons::make(),
            'daemons' => Daemons::make()->as('daemons'),
        ]);
    }
}

No frontend changes are required. The Table component automatically uses the table name when generating the query string.

Vue

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

defineProps(['crons', 'daemons'])
</script>

<template>
    <AppLayout title="My Server">
        <h2>Crons</h2>
        <Table :resource="crons" />

        <h2>Daemons</h2>
        <Table :resource="daemons" />
    </AppLayout>
</template>

React

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

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

            <h2>Daemons</h2>
            <Table resource={daemons} />
        </div>
    )
}

Sorting both tables by different columns produces a URL like this:

https://example.com/servers/1?sort=frequency&daemons[sort]=command

Naming the Cronjobs table as well produces:

https://example.com/servers/1?crons[sort]=frequency&daemons[sort]=command

Scroll Position

By default, the browser scrolls to the top of the page after a page change, just like a regular page load. This can be annoying with multiple tables on the same page. See the Pagination documentation for how to preserve the scroll position or scroll to the top of the table.