Inertia::render('Page/Index')->table(function (InertiaTable $table) {
$table->column('name', 'Name')
->column('status', 'Status')
->column('email', 'Email')
->column('created_at', 'Created');
// Associate a select filter with the 'status' column
$table->selectFilter(
key: 'status',
options: [
'active' => 'Active',
'inactive' => 'Inactive',
'pending' => 'Pending'
],
label: 'Status',
column_key: 'status' // 🎯 Associates the filter with the status column
);
// Associate a toggle filter with the 'email' column
$table->toggleFilter(
key: 'email_verified',
label: 'Email Verified',
column_key: 'email'
);
// Associate a number range filter with the 'created_at' column
$table->numberRangeFilter(
key: 'days_since_creation',
max: 365,
min: 0,
label: 'Days Since Creation',
column_key: 'created_at'
);
});
Inertia::render('Page/Index')->table(function (InertiaTable $table) {
$table->column('name', 'User Name');
$table->column(
key: 'name',
label: 'User Name',
canBeHidden: true,
hidden: false,
sortable: true,
searchable: true
headerClass: 'hidden md:table-cell', // This cell will be hidden on small screens
bodyClass: 'hidden md:table-cell', // This cell will be hidden on small screens
);
});
Inertia::render('Page/Index')->table(function (InertiaTable $table) {
$table->withGlobalSearch();
$table->withGlobalSearch('Search through the data...');
});
namespace App\Http\Controllers;
use App\Models\User;
use App\Http\Resources\UserResource;
use AdesinFr\LaravelQueryBuilderInertiaJs\InertiaTable;
use AdesinFr\LaravelQueryBuilderInertiaJs\Filters\NumberFilter;
use Spatie\QueryBuilder\AllowedFilter;
use Spatie\QueryBuilder\QueryBuilder;
class UserIndexController
{
public function __invoke()
{
$globalSearch = AllowedFilter::callback('global', function ($query, $value) {
$query->where(function ($query) use ($value) {
Collection::wrap($value)->each(function ($value) use ($query) {
$query
->orWhere('name', 'LIKE', "%{$value}%")
->orWhere('email', 'LIKE', "%{$value}%");
});
});
});
return InertiaTable::make()
->withQueryBuilder(
QueryBuilder::for(User::class)
->defaultSort('name')
->allowedSorts(['name', 'email', 'created_at'])
->allowedFilters([
'name',
'email',
'status',
NumberFilter::getQueryBuilderFilter('age'),
$globalSearch
])
)
->withGlobalSearch()
->defaultSort('name')
->column('name', 'User Name', canBeHidden: false, sortable: true, searchable: true)
->column('email', 'Email Address', sortable: true, searchable: true)
->column('status', 'Status')
->column('age', 'Age', sortable: true)
->column('created_at', 'Created', sortable: true)
->column('actions', 'Actions', canBeHidden: false, sortable: false)
->selectFilter('status', [
'active' => 'Active',
'inactive' => 'Inactive',
'pending' => 'Pending'
])
->numberFilter('age', 'Filter by Age')
->withResource(UserResource::class)
->handleExport(true)
->render('Users/Index');
}
}
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Support\Collection;
use Inertia\Inertia;
use AdesinFr\LaravelQueryBuilderInertiaJs\InertiaTable;
use Spatie\QueryBuilder\AllowedFilter;
use Spatie\QueryBuilder\QueryBuilder;
class UserIndexController
{
public function __invoke()
{
$globalSearch = AllowedFilter::callback('global', function ($query, $value) {
$query->where(function ($query) use ($value) {
Collection::wrap($value)->each(function ($value) use ($query) {
$query
->orWhere('name', 'LIKE', "%{$value}%")
->orWhere('email', 'LIKE', "%{$value}%");
});
});
});
$users = QueryBuilder::for(User::class)
->defaultSort('name')
->allowedSorts(['name', 'email', 'language_code'])
->allowedFilters(['name', 'email', 'language_code', $globalSearch])
->paginate()
->withQueryString();
return Inertia::render('Users/Index', [
'users' => $users,
])->table(function (InertiaTable $table) {
$table
->withGlobalSearch()
->defaultSort('name')
->column(key: 'name', searchable: true, sortable: true, canBeHidden: false)
->column(key: 'email', searchable: true, sortable: true)
->column(key: 'language_code', label: 'Language')
->column(label: 'Actions')
->selectFilter(key: 'language_code', label: 'Language', options: [
'en' => 'English',
'nl' => 'Dutch',
]);
});
}
}
// With the Fluent API
return InertiaTable::make()
->name('users-table') // Table name is ue)
->column('status', 'Status')
->render('Users/Index');
// With the Traditional API
return Inertia::render('Users/Index')->table(function (InertiaTable $table) {
$table->column('name', 'User Name', sortable: true);
$table->column('email', 'Email', sortable: true);
$table->column('status', 'Status');
});
// With the Fluent API
return InertiaTable::make()
->column('id', 'ID', canBeHidden: false) // This column is pinned and cannot be hidden
->column('name', 'User Name', canBeHidden: true, sortable: true)
->column('email', 'Email', canBeHidden: true, sortable: true)
->column('actions', 'Actions', canBeHidden: false) // Actions column is also pinned
->render('Users/Index');
// With the Traditional API
return Inertia::render('Users/Index')->table(function (InertiaTable $table) {
$table->column(key: 'id', label: 'ID', canBeHidden: false);
$table->column(key: 'name', label: 'User Name', canBeHidden: true, sortable: true);
$table->column(key: 'email', label: 'Email', canBeHidden: true, sortable: true);
$table->column(key: 'actions', label: 'Actions', canBeHidden: false);
});