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 Vue side, you don't have to do anything different. The Table component will automatically use the table name to generate the query string.

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

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

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

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

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