10 Best Data Table/Grid Components For Vue.js

Vue Easytable

Vue table components, support for cell edit,multi-head fixed, multi-column fixed, clumn drag, sort,conditional filter, custom column

Features

• Adaptive, you can automatically adapt to the browser window changes
• Fixed column, header fixed
• Support column width drag
• Supports single field sorting and multiple field sorting
• Custom columns, custom cell styles
• Loading effects, custom loading, etc
• Own paging component
• Cell Editing
• Support cell merge (colSpan and rowSpan)
• Support checkbox selection
• Footer summary
• Conditional filter

View on GitHub

Vuetable 2

data table simplify! – datatable component for Vue 2.x. See documentation at https://vuetable.com

Features

• Work with data from API endpont or existing data array/object
• Define fields to map your JSON data structure for display
• Customize your field data display with formatter if needed
• Advanced field customization can be done via scoped slot and field component
• Single sort or multi-sort if your API is supported
• Pagination components included, swappable and extensible, or write your own
• Optional detail row to display additional data for each row
• Adaptable to any CSS framework if it supports HTML table.
• And a lot more!

View on GitHub

Vue Good Table

An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc https://xaksis.github.io/vue-good-table/

Features

• Table Search
• Sorting
• Column Filtering
• Pagination
• Highly Customizable
• Checkbox Table
• Grouped Rows Table
• Server Powered Table
• Customizable Style and Themes

View on GitHub

Vue Tables 2

Vue.js 2 grid components https://matanya.gitbook.io/vue-tables-2/

Premium Features

• Sticky Headers
• Multiple-level grouping with data layer backing
• Tailwind theme
• Request failed message
• Virtual Pagination
• Selectable rows
• Axios: automatically cancel pending requests when a new request is sent
• Server Side: Draw Counter to render only latest request
• Feel free to suggest more premium features and I’ll consider adding them

View on GitHub

Vue Table Dynamic

A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.https://theoxiong.github.io/vue-table-dynamic/

vue-table-dynamic is a vue component of dynamic table. It’s designed to respond to data changes in real time, and oriented to the runtime.

Features

• Multiple Select
• Search
• Sort
• Filter
• Pagination
• Edit
• Border
• Stripe
• Highlight
• Column Width
• Configure Header
• Fixed Header
• Fixed Columns

View on GitHub

Vue Datatables Net

Vue jQuery DataTables.net wrapper component https://niiknow.github.io/vue-datatables-net/

This library is a Vue 2 wrapper for jQuery DataTables. It’s a tiny wrapper that doesn’t include anything, not even the datatables.net core library.

View on GitHub

Food Table

the app loads data from products.json. The component ProductTable gets this data as a prop. You can get error during loading data. You can delete data from table and also can get error during deleting. The app uses Vue + Vuex + Vuetify.

View on GitHub

Prot Table

A customizable table component in vue. Intended to be used as a web-component or as a component in vue projects.

View on GitHub

V Datatable Light

A lightweight, simple and easy data table for Vue.

Features

• Lightweight
• Provide a Pagination component
• Provide a Items-per-page component
• No dependencies
• Event driven (all the events will be emitted to you, and you will decide how to react to them)
• Css flexible (is possible to add classes to almost all elements generated)
• Order by events
• Fix header possibility
• Custom columns
• Custom headers
• Row selection

View on GitHub

#vue #vuejs #javascript #vue-js