FreeComponent · Data tables
Data Table
Generic, typed Vue 3 data table with click-to-sort columns, search, checkbox row selection and pagination. Tailwind CSS, dark mode, mobile scroll.
by Vueplay
Vue data table components
Data tables are where admin screens and dashboards spend most of their time. These Vue 3 table components cover sortable headers, filters, pagination, row selection and responsive layouts, built with Tailwind CSS 4.
Columns and rows are typed props, so the table adapts to your data rather than the other way round. Every component has class-based dark mode and no dependencies besides vue.
FreeGood to know
Building data tables that hold up
- Keep semantic table markup
- Use <table>, <thead>, <th scope="col"> and a <caption> rather than a grid of divs. Screen readers can then announce column headers as users move across cells.
- Expose sort state
- Put the sort control inside a button in the header cell and set aria-sort on the <th>. Emit sort changes so the parent can sort on the server for large datasets.
- Type columns with generics
- Vue 3.3+ supports generic="T" on <script setup>, so a column definition can be typed as keyof T. That catches typos in column keys at build time.
- Paginate or virtualize large lists
- Rendering thousands of rows at once is slow. Paginate on the server, or virtualize rows if users need to scroll through everything.
FAQ
Questions
Can these tables sort and filter on the server?
Yes. The components emit sort, filter and page events, so you can handle them locally for small datasets or pass them to your API for large ones.
How do the tables behave on mobile?
Tables scroll horizontally inside a wrapper by default, and some variants collapse rows into stacked cards on small screens.