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.
<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>
import { Table } from 'inertiaui/table'
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.