Building a Laravel-First Data Table with Inertia.js and Vue 3
How we approached server-side tables, searching, sorting, pagination, actions, and table state without duplicating logic between Laravel and Vue. If you've built a Laravel application with Inertia.js and Vue, you've probably built a data table more than once. At first, it looks simple: Get some records Display them in Vue Add pagination Add sorting Add search Then the requirements start growing.…
When constructing data tables in Laravel applications using Inertia.js and Vue 3, it's essential to keep the table logic close to Laravel while allowing Vue to focus on rendering and user interaction. This approach helps avoid duplicating logic between the two frameworks. The basic flow involves the Laravel Table Class handling the query and table configuration, while Vue receives the resulting data to render it and manage interactions.
The Laravel side defines columns, query, and table configuration, while Vue focuses on the UI. For example, a UsersTable class extends ZonTable, with methods for defining the query and columns. Inertia.js serves as a middle ground, allowing the use of Vue for the interface while Laravel continues handling queries, authorizations, sorting, pagination, and data preparation.
The current Vue version of Zonvoir Table includes features like searching, sorting, pagination, typed columns, column visibility, row actions, bulk actions, Excel exports, URL-synced state, and customizable UI. The team is focusing on the Laravel + Inertia.js + Vue 3 ecosystem, avoiding reinventing every table feature. Instead, they aim to provide a Laravel-first data table solution for applications built with Inertia.js and Vue.
The package is still actively developing, and feedback from Laravel and Vue developers is welcome. Developers can explore the project on the website, documentation, and GitHub repositories. By addressing the specific needs of applications built with these frameworks, Zonvoir Table seeks to offer an efficient and reusable solution for data tables.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
