Vue 3 DataTable components for Laravel pagination with TanStack Query and shadcn-vue
npm install @toniel/laravel-tanstack-datatable



Vue 3 DataTable components for Laravel pagination with TanStack Query and TanStack Table.
> 🔗 Companion Package: This package works together with @toniel/laravel-tanstack-pagination - the core composables library.
``bash`
npm install @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-paginationor
yarn add @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-paginationor
pnpm add @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-paginationor
bun add @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-pagination
This package requires the following peer dependencies:
`bash`
npm install vue @tanstack/vue-query @tanstack/vue-table
`vue
:columns="columns"
:pagination="pagination"
:is-loading="isLoading"
:error="error"
:search="search"
:current-per-page="currentPerPage"
:sort-by="sortBy"
:sort-direction="sortDirection"
title="Users"
item-name="users"
@page-change="handlePageChange"
@per-page-change="handlePerPageChange"
@search-change="handleSearchChange"
@sort-change="handleSortChange"
@retry="refetch"
/>
`
#### DataTable Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | Array | [] | Table data array |columns
| | ColumnDef[] | required | TanStack Table column definitions |pagination
| | LaravelPaginationResponse | null | Laravel pagination response |isLoading
| | boolean | false | Loading state |error
| | Error | null | Error object |search
| | string | '' | Search query |currentPerPage
| | number | 10 | Current items per page |perPageOptions
| | number[] | [10,15,25,50,100] | Per page options |sortBy
| | string | null | Current sort column |sortDirection
| | 'asc'\|'desc' | 'asc' | Sort direction |enableRowSelection
| | boolean | false | Enable row selection |rowSelection
| | RowSelectionState | {} | Selected rows state |getRowId
| | Function | (row) => row.id | Get unique row ID |showSearch
| | boolean | true | Show search input |showCaption
| | boolean | true | Show table caption |showPerPageSelector
| | boolean | true | Show per page selector |title
| | string | 'Items' | Table title |itemName
| | string | 'items' | Item name for pluralization |loadingText
| | string | 'Loading...' | Loading text |errorTitle
| | string | 'Error loading data' | Error title |emptyStateText
| | string | '📭 No items found' | Empty state text |
#### DataTable Events
| Event | Payload | Description |
|-------|---------|-------------|
| pageChange | number | Emitted when page changes |perPageChange
| | number | Emitted when per page changes |searchChange
| | string | Emitted when search input changes |sortChange
| | string | Emitted when sort column changes |retry
| | - | Emitted when retry button clicked |update:rowSelection
| | RowSelectionState | Emitted when row selection changes |
#### filters Slot
Add custom filters next to search input:
`vue`
#### header Slot
Add action buttons (e.g., Create button):
`vue`
#### bulk-actions Slot
Add bulk action buttons when rows are selected:
`vue`
v-model:row-selection="selectedRows"
...
>
`vue
v-model:row-selection="selectedRows"
...
>
`
`vue`
`vue`
This package uses Tailwind CSS utility classes. Make sure Tailwind is configured in your project.
Dark mode is automatically supported via Tailwind's dark: classes. Configure dark mode in your tailwind.config.js:
`js`
module.exports = {
darkMode: 'class', // or 'media'
// ...
}
You can override styles using Tailwind classes or custom CSS:
`css`
/ Custom table styles /
.data-table {
/ Your custom styles /
}
The components use Tailwind CSS and support dark mode out of the box. You can customize colors by:
1. Using Tailwind Config:
`js`
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// Customize colors here
}
}
}
}
2. CSS Variables:
`css`
:root {
--color-primary: ...;
--color-border: ...;
}
- @toniel/laravel-tanstack-pagination - Core composables (required)
- @tanstack/vue-query - Data fetching & caching
- @tanstack/vue-table - Table state management
If this package helped you, please consider:
- ⭐ Starring the GitHub repository
- 🐛 Reporting bugs
- 💡 Suggesting new features
- 🔧 Contributing code
Contributions, issues and feature requests are welcome!
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature'
3. Commit your changes ()git push origin feature/amazing-feature`)
4. Push to the branch (
5. Open a Pull Request
See CONTRIBUTING.md for more details.
Check the GitHub Issues page for known issues and feature requests.
- GitHub: @toniel
- NPM: @toniel
Built with these amazing libraries:
- Vue 3
- TanStack Query
- TanStack Table
- Tailwind CSS
- Lucide Icons
---