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.
php
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.
vue
<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