Paginated Table
This module wraps the Shadcn/UI Table components with Laravel's default paginator. The provided integration example uses inertia as the data source.
| ID | Name | Role | Status | Created | |
|---|---|---|---|---|---|
| 1 | Alice Johnson | [email protected] | Admin | Active | 2024-01-15 |
| 2 | Bob Smith | [email protected] | User | Active | 2024-02-20 |
| 3 | Carol Williams | [email protected] | Editor | Active | 2024-03-10 |
| 4 | David Brown | [email protected] | User | Inactive | 2024-04-05 |
| 5 | Eve Davis | [email protected] | User | Active | 2024-05-12 |
Installation
Usage
This usage example loads data via Inertia requests. As you paginate this table the page number would be reflected in the address bar. To load data via JSON fetch requests see the Json Table Module.
Optionally seed your database with test data to see the pagination in action:
artisan tinker
\App\Models\User::factory(100)->create();Props
PaginatedTable
| Prop | Type | Description |
|---|---|---|
columns | string[] | Array of column header labels |
data | (string | number)[][] | 2D array of table data rows |
pagination | PaginatorConfig | Pagination configuration object |
placeholder | React.ReactNode (optional) | Custom content to show when data is empty (loading, errors, empty states) |
PaginatorConfig
| Prop | Type | Description |
|---|---|---|
type | "simple" | "numeric" | The pagination style to use |
currentPage | number | Current page number |
lastPage | number | Total number of pages |
links | PaginationLinkType[] | Array of pagination link objects from Laravel |
onChangePage | (url: string | null) => void | Callback function when page changes |
total | number (optional) | Total number of records |
PaginationLinkType
| Prop | Type | Description |
|---|---|---|
url | string | null | URL for the pagination link |
label | string | Label text for the link |
active | boolean | Whether this link is active |