Your first datatable
1
Define your datatable
app/Datatables/Users.php
2
Expose the datatable via the Inertia response
app/Http/Controllers/UsersController.php
3
Render it using the DataTable react component
resources/js/pages/users.tsx
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Define your datatable
use App\Models\User;
use Eklundlabs\InertiaDatatable\Table;
use Eklundlabs\InertiaDatatable\Actions\Action;
use Eklundlabs\InertiaDatatable\Columns\TextColumn;
class Users extends Table
{
protected ?string $resource = User::class;
public function columns(): array
{
return [
TextColumn::make('name', 'Namn')
->searchable()
->url(fn(User $user) => route('users.show', $user->id)),
TextColumn::make('email', 'Email'),
];
}
public function actions(): array
{
return [
Action::make('Delete', fn (User $user) => $user->delete())
->confirm('Are you sure you want to delete this user?'),
];
}
}
Expose the datatable via the Inertia response
use Inertia\Inertia;
use App\DataTables\Users;
class UsersController extends Controller
{
public function __invoke(Request $request)
{
return Inertia::render('users', [
'users' => Users::make()
]);
}
}
Render it using the DataTable react component
import { usePage } from '@inertiajs/react';
import { DataTable, type DataTableResource } from '@eklundlabs/inertia-datatable-react';
export default function UsersListing() {
const { props } = usePage<{
users: DataTableResource;
}>();
return (<DataTable resource={props.users} />);
}