Selection

Enable checkboxes with selection():

Laravel

UsersTable::make('users')->data($users)->selection();

Select one row

Laravel

use InertiaX\Table\Enums\SelectionMode;

UsersTable::make('users')
    ->data($users)
    ->selection()
    ->selectionMode(SelectionMode::Single);

The default mode is SelectionMode::Multiple. The fluent method also accepts 'single' or 'multiple'.

Read the selected IDs

React

<AppTable
  prop="users"
  customization={{
    events: {
      selectionChange({ selection }) {
        console.log(selection);
      },
    },
  }}
/>

Selection is local to the current result page. A new result removes IDs that are no longer present, so it does not persist as a cross-page list. An empty selection is valid.

Use the controller to set or clear selection. To observe changes caused by a server result as well as user interaction, listen to stateChange.

Act on the selected rows

Selection does not perform an action. Handle a bulk action, such as archiving the selected users, in an ordinary route that authorizes it like any other request; see Authorization & security. A toolbar region receives the table’s state and controller, so it can send the selected IDs there:

Laravel

routes/web.php

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Gate;

Route::post('users/archive', function (Request $request) {
    $ids = $request->validate(['ids' => ['required', 'array'], 'ids.*' => ['integer']])['ids'];
    // The selection only names the ticked rows: authorize the operation here.
    Gate::authorize('archive-users');
    User::query()->whereKey($ids)->update(['archived_at' => now()]);

    return back();
})->middleware(['auth']);

React

import { router } from '@inertiajs/react';
import type { TableRegionProps } from '@inertiax/react-table';
import { AppTable } from '@/components/app-table';

function ArchiveSelected({ state, controller }: TableRegionProps) {
  return (
    <button
      type="button"
      disabled={state.selection.length === 0}
      onClick={() =>
        router.post('/users/archive', { ids: [...state.selection] }, {
          preserveScroll: true,
          onSuccess: () => controller.clearSelection(),
        })
      }
    >
      Archive {state.selection.length} selected
    </button>
  );
}

<AppTable prop="users" customization={{ regions: { beforeToolbar: ArchiveSelected } }} />;

This example assumes an archived_at column and an archive-users gate in your application. After the redirect, the page receives the table’s new result.