How do I customize a specific column header in Vueye Table?

Use the `headerCell. ` slot to override the content. For example, define a slot named `headerCell.name` in your template to customize the 'name' column header as shown in the README's slot documentation.

Vueye Table vs PrimeVue DataTable for Vue 3: which should I use?

Vueye Table is lighter and focuses on customization via slots, ideal for tailored implementations. PrimeVue offers more features like sorting and filtering out-of-the-box but with a larger bundle size and less slot flexibility.

Can Vueye Table handle server-side pagination?

No, Vueye Table's pagination is client-side based on the `perPage` and `currentPage` props. You need to manage data fetching externally and update the `data` prop for server-driven scenarios.

How to enable row selection in Vueye Table?

Set the `selectMode` prop to 'page' or 'all', and bind the `selected` prop with the `update:selected` emit to manage selected rows reactively, as documented in the props and emits tables.

Is Vueye Table accessible for screen readers?

Yes, it supports accessibility through configurable `caption` and `summary` props, which provide context for screen readers, making it suitable for accessible web applications.

How to add sorting to Vueye Table?

Vueye Table doesn't include built-in sorting. You need to implement it manually by sorting the data array before passing it to the `data` prop and using custom slots for interactive controls.

Open-Awesome

vueye-datatable

MITVue1.4.1

A Vue 3 component library for building feature-rich, customizable data tables with pagination and selection.

Visit Website GitHub

111 stars14 forks0 contributors

What is vueye-datatable?

Vueye Table is a Vue 3 component library for creating interactive, accessible data tables in web applications. It solves the problem of building feature-rich tables with pagination, selection, and customization without requiring extensive boilerplate code. The library provides a structured component with typed props and emits for predictable data handling.

Target Audience

Vue 3 developers building applications that need to display and interact with tabular data, such as admin dashboards, data management interfaces, or reporting tools.

Value Proposition

Developers choose Vueye Table for its balance of out-of-the-box functionality (pagination, selection) and deep customization via slots, all with full TypeScript support. It integrates seamlessly into Vue 3 or Nuxt projects with minimal configuration.

Overview

A data table created using Vue.js

Use Cases

Best For

Adding paginated data tables to Vue 3 admin dashboards
Building interactive data grids with row selection capabilities
Creating accessible tables with screen reader support
Customizing table cell rendering with slot-based overrides
Integrating tables into Nuxt applications via the official module
Managing table state (loading, selection) with Vue's reactivity system

Not Ideal For

Applications requiring out-of-the-box sorting, filtering, or inline editing features
Projects with extremely large datasets needing server-side pagination and data management
Teams that prefer pre-styled, themeable components without additional CSS work

Pros & Cons

Pros

Flexible Slot System

Offers extensive slots like headerCell.<ColumnKey> and itemCell.<ItemKey>, enabling deep customization of table structure and content without overriding core functionality.

Built-in Accessibility

Includes configurable caption and summary attributes for screen readers, ensuring compliance with accessibility standards right out of the box.

TypeScript Integration

Fully typed with generic props for data and columns, providing type safety and enhanced developer experience in TypeScript projects.

Essential Features Included

Comes with pagination, row selection, and loading states out-of-the-box, reducing boilerplate code for common table interactions.

Cons

Missing Advanced Functionality

Lacks built-in features like column sorting, filtering, or cell editing, which are standard in more comprehensive table libraries, requiring manual implementation.

Slot-Based Complexity

The detailed slot API, while powerful, can be overwhelming for simple use cases and adds a learning curve compared to more straightforward component APIs.

No Default Styling

Requires custom CSS for visual design, as there are no pre-styled themes or design systems, increasing initial setup effort for teams wanting polished tables.

Frequently Asked Questions

Related Projects

tanstack-table

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

Stars28,222

Forks3,553

Last commit6 days ago

vxe-table

vxe table 支持 vue2, vue3 的表格解决方案

The fastest open-source data table for web.

Stars1,527

Forks122

Last commit2 months ago

Vue Datatable

Bulma themed, VueJS powered Datatable with server-side loading and JSON template setup

Stars635

Forks76

Last commit1 month ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub