Multiple Tables

Query String

The state of a Table, like filtering, sorting, and pagination, is passed to the Laravel backend via the query string. So say you have a table with a sort, the URL might look like this:

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

This is great until you have multiple tables on the same page, as you don't want the query string to affect all tables.

Table Names

To solve this, you can name Tables by using the as() method. Though there are no hard rules, you only have 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'),
        ]);
    }
}

On the front-end side, you don't have to do anything different. The Table component will automatically use the table name to generate 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>
    );
}

Now, if you sort both tables by different columns, the URL will look like this:

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

If you'd name the Cronjobs table as well, the URL would look like this:

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

Scroll Position

When the user changes the page, the browser will scroll to the top of the page, just like it does during a regular page load. This might be annoying if you have multiple tables on the same page. Check out the Pagination documentation to learn how to maintain the scroll position or scroll to the top of the table.