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.

📦 Installation

``bash
npm install @toniel/laravel-tanstack-datatable @toniel/laravel-tanstack-pagination


or

`bash
npm install vue @tanstack/vue-query @tanstack/vue-table
`

🚀 Quick Start

$3

`vue



`

🎯 Features

$3

| 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 |

$3

#### 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
:enable-row-selection="true"
v-model:row-selection="selectedRows"
...
>


`

📖 Advanced Examples

$3

`vue



`

$3

`vue

`

$3

`vue

`

🎨 Styling

This package uses Tailwind CSS utility classes. Make sure Tailwind is configured in your project.

$3

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'
// ...
}
`

$3

You can override styles using Tailwind classes or custom CSS:

`css
/ Custom table styles /
.data-table {
/ Your custom styles /
}
`

🎨 Theming

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: ...;
}
`

🔗 Related Packages

- @toniel/laravel-tanstack-pagination - Core composables (required)
- @tanstack/vue-query - Data fetching & caching
- @tanstack/vue-table - Table state management

🌟 Show Your Support

If this package helped you, please consider:
- ⭐ Starring the GitHub repository
- 🐛 Reporting bugs
- 💡 Suggesting new features
- 🔧 Contributing code

📄 License

MIT © Toniel

🤝 Contributing

Contributions, issues and feature requests are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

See CONTRIBUTING.md for more details.

🐛 Known Issues

Check the GitHub Issues page for known issues and feature requests.

📮 Contact

- GitHub: @toniel
- NPM: @toniel

🙏 Acknowledgments

Built with these amazing libraries:
- Vue 3
- TanStack Query
- TanStack Table
- Tailwind CSS
- Lucide Icons

---