Easy Data Table Component For Vue 3

An easy yet full-featured data table/grid component for Vue.js 3 applications.

It supports both fixed and dynamic data sources and has a lot of advanced features, such as live search, row sorting, column filtering, pagination, and more.

How to use it:

1. Import and register the data table component.

import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';
const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);

2. Create a basic data table and define your header & body data as follows:

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
</template>
import type { Header, Item } from "vue3-easy-data-table";
export default defineComponent({
  setup() {
    const headers: Header[] = [
      { text: "Name 1", value: "name 1" },
      // ...
    ];
    const items: Item[] = [
      { "name": "Item 1", "height": 178, "weight": 77, "age": 20 },
      // ...
    ];
    return {
      headers,
      items
    };
  },
});

3. Available data table props.

alternating: {
  type: Boolean,
  default: false,
},
buttonsPagination: {
  type: Boolean,
  default: false,
},
rowBorderColor: {
  type: String,
  default: '#e0e0e0',
},
tableBorderColor: {
  type: String,
  default: '#e0e0e0',
},
rowBackgroundColor: {
  type: String,
  default: '#fff',
},
footerBackgroundColor: {
  type: String,
  default: '#fff',
},
rowFontColor: {
  type: String,
  default: '#212121',
},
footerFontColor: {
  type: String,
  default: '#212121',
},
emptyMessage: {
  type: String,
  default: 'No Available Data',
},
fixedHeader: {
  type: Boolean,
  default: true,
},
headerFontColor: {
  type: String,
  default: '#373737',
},
headerBackgroundColor: {
  type: String,
  default: '#fff',
},
tableFontSize: {
  type: Number,
  default: 12,
},
evenRowBackgroundColor: {
  type: String,
  default: '#fafafa',
},
evenRowFontColor: {
  type: String,
  default: '#212121',
},
headers: {
  type: Array as PropType<Header[]>,
  required: true,
},
hoverToChangeColor: {
  type: Boolean,
  default: true,
},
items: {
  type: Array as PropType<Item[]>,
  required: true,
},
tableHeight: {
  type: Number,
  default: () => null,
},
itemsSelected: {
  type: Array as PropType<Item[]> | null,
  default: null,
},
searchField: {
  type: String,
  default: '',
},
searchValue: {
  type: String,
  default: '',
},
rowsPerPage: {
  type: Number,
  default: 25,
},
rowsItems: {
  type: Array as PropType<number[]>,
  default: () => [25, 50, 100],
},
rowHoverBackgroundColor: {
  type: String,
  default: '#eee',
},
rowHoverFontColor: {
  type: String,
  default: '#212121',
},
loading: {
  type: Boolean,
  deault: false,
},
serverOptions: {
  type: Object as PropType<ServerOptions> | null,
  default: null,
},
serverItemsLength: {
  type: Number,
  default: 0,
},
sortBy: {
  type: String,
  default: '',
},
sortType: {
  type: String as PropType<SortType>,
  default: 'asc',
},
themeColor: {
  type: String,
  default: '#42b883',
},
dense: {
  type: Boolean,
  default: false,
},
showIndex: {
  type: Boolean,
  default: false,
},
hideFooter: {
  type: Boolean,
  default: false,
},
filterOptions: {
  type: Array as PropType<FilterOption[]>,
  default: null,
},
fixedCheckbox: {
  type: Boolean,
  default: false,
},
fixedIndex: {
  type: Boolean,
  default: false,
},
indexColumnWidth: {
  type: Number,
  default: 60,
},
checkboxColumnWidth: {
  type: Number,
  default: null,
},
hideRowsPerPage: {
  type: Boolean,
  default: false,
},
noThPadding: {
  type: Boolean,
  default: false,
},
noTdPadding: {
  type: Boolean,
  default: false,
},

Preview:

Easy Data Table Component For Vue 3

Changelog:

v1.2.27 (07/01/2022)

  • Optimize header sort click area.

v1.2.25 (06/29/2022)

  • New slots and props.

v1.2.20 (06/28/2022)

  • Support use via CDN

v1.2.19 (06/27/2022)

  • Fix extra rows when using single field sorting feature

v1.2.18 (06/25/2022)

  • Fix empty message background color.

v1.2.17 (06/24/2022)

  • Fix table hover color

v1.2.16 (06/24/2022)

  • update show-footer prop to hide-footer

v1.2.15 (06/23/2022)

  • Fix column width bug in safari when using fixed-columns feature

v1.2.11 (06/23/2022)

  • Added Column width and Fixed columns

v1.2.9 (06/18/2022)

  • Fix current pagination not work in server-side mode

v1.2.8 (06/17/2022)

  • support nested value in item and header value with ‘.’ character.

v1.2.5 (06/15/2022)

  • Fixed init currentPaginationNumber to 1 when items updates

v1.2.4 (06/14/2022)

  • Add click-row feature

v1.2.3 (06/12/2022)

  • New filtering feature

v1.1.22 (06/09/2022)

  • optimize source code
  • fix loading mask style

v1.1.11 (06/07/2022)

  • added show-footer
  • added footer customization

v1.1.3 (06/07/2022)

  • optimized

v1.1.0 (06/07/2022)

  • fix the confliction between multiple selecting feature and show index feature

v1.0.27 (06/06/2022)

  • color customization
  • pagination slot
  • bugfixes

v1.0.13 (06/04/2022)

  • Optimized code

v1.0.11 (06/02/2022)

  • Add alternating prop to color alternating (even and odd) rows.
  • Add show-index prop to show index of item.

Download Details:

Author: HC200ok

Live Demo: https://codesandbox.io/s/theme-color-89ps64?file=/src/App.vue

Download Link: https://github.com/HC200ok/vue3-easy-data-table/archive/refs/heads/main.zip

Official Website: https://github.com/HC200ok/vue3-easy-data-table

Install & Download:

# Yarn
$ yarn add vue3-easy-data-table

# NPM
$ npm i vue3-easy-data-table

Add Comment