Interactive Table
Full-featured Livewire table component with search, pagination, sorting, bulk selection, and actions.
Are you sure you want to delete 0 selected items? This action cannot be undone.
|
Name
|
Email
|
Created At
|
Actions | |
|---|---|---|---|---|
| Alexandro Terry | [email protected] | 2025-12-01 | ||
| Camron Farrell I | [email protected] | 2025-12-01 | ||
| Manuel Daugherty | [email protected] | 2025-12-01 | ||
| Jarret Blick | [email protected] | 2025-12-01 | ||
| Mr. Mitchell Moen | [email protected] | 2025-12-01 | ||
| Dr. Ivory Weimann IV | [email protected] | 2025-12-01 | ||
| Chauncey Walter MD | [email protected] | 2025-12-01 | ||
| Magdalena Blick DVM | [email protected] | 2025-12-01 | ||
| Ms. Laura Berge | [email protected] | 2025-12-01 | ||
| Mr. Eino Wyman I | [email protected] | 2025-12-01 |
Empty State
Table displays an empty state when no data is available.
| Name | Created At | Actions | ||
|---|---|---|---|---|
|
No users found |
||||
Overview
The Livewire Table component is a fully interactive table with built-in search, pagination, sorting, bulk selection, and row actions.
It automatically handles all user interactions and data management on the server side, providing a seamless user experience.
Features
- Real-time search with debouncing
- Server-side pagination
- Sortable columns (click headers to sort)
- Bulk selection with checkboxes
- Bulk actions (delete selected)
- Individual row actions (view, edit, delete)
- Empty state with icon
- Success messages via session flash
- URL state persistence (search, sort, page)
- Responsive design
- Dark mode support
Component Structure
app/Livewire/Admin/Table.php
Livewire component class
resources/views/livewire/admin/table.blade.php
Component view template
Component Props
model
- string (required)
Model class name (e.g., 'App\Models\User')
columns
- array (required)
Column definitions: ['field' => 'Label'] or ['field' => ['label' => '...', 'sortable' => true]]
searchFields
- array (optional)
Fields to search in (defaults to all column fields)
sortableFields
- array (optional)
Fields that can be sorted (defaults to all column fields)
showActions
- bool (default: true)
Show actions column
actions
- array (default: ['view', 'edit', 'delete'])
Available actions: 'view', 'edit', 'delete'
routePrefix
- string|null (optional)
Route prefix for actions (e.g., 'admin.users' for admin.users.show, admin.users.edit)
searchPlaceholder
- string (default: 'Search...')
Search input placeholder text
perPage
- int (default: 10)
Items per page
showCheckbox
- bool (default: true)
Show checkbox column for selection
showBulkDelete
- bool (default: true)
Show bulk delete button
Component Methods
items()
Computed property that returns paginated, filtered, and sorted items
sortBy($field)
Toggle sort for a column
deleteSelected()
Delete all selected items
delete($id)
Delete a single item by ID
getRoute($action, $id)
Generate route URL for an action (e.g., 'show', 'edit')
How to Use
The component is now fully configurable via props. Simply pass the model class, columns, and other options to use it with any model.
1. Define your columns:
Pass an array of field => label pairs for the columns you want to display.
2. Configure search and sort:
Specify which fields should be searchable and sortable.
3. Set up routes:
If you want view/edit buttons, provide a route prefix (e.g., 'admin.users' for admin.users.show/edit).
4. Customize actions:
Choose which actions to show: 'view', 'edit', 'delete'. Or disable actions entirely with :show-actions="false".