Introduction

vue3-easy-data-table is a customizable and easy-to-use data table component made with Vue.js 3.x.

Website

https://hc200ok.github.io/vue3-easy-data-table-doc/

Features

1. Item slot
2. Buttons pagination
3. Multiple selecting
4. Pagination slot
5. Single field sorting
6. Searching
7. Server side paginate and sort
8. Loading slot
9. Footer customization
10. Filtering (new feature since version 1.2.3)
11. Click row (new feature since version 1.2.4)
12. Column width (new feature since version 1.2.10)
13. Fixed columns (new feature since version 1.2.10)
14. Header slot (new feature since version 1.2.25)
15. Expand slot (new feature since version 1.3.2)
16. Style customization (new feature since version 1.3.11)
17. Border cell (new feature since version 1.3.11)
18. Class name customization (new feature since version 1.3.11)

Getting started

1. ES module

Install

1npm install vue3-easy-data-table
2// or
3yarn add vue3-easy-data-table

Regist

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

Use

1<template>
2  <EasyDataTable
3    :headers="headers"
4    :items="items"
5  />
6</template>
7
8<script lang="ts">
9import type { Header, Item } from "vue3-easy-data-table";
10
11export default defineComponent({
12  setup() {
13    const headers: Header[] = [
14      { text: "Name", value: "name" },
15      { text: "Height (cm)", value: "height", sortable: true },
16      { text: "Weight (kg)", value: "weight", sortable: true },
17      { text: "Age", value: "age", sortable: true }
18    ];
19
20    const items: Item[] = [
21      { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
22      { "name": "James", "height": 180, "weight": 75, "age": 21 },
23      { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
24    ];
25
26    return {
27      headers,
28      items
29    };
30  },
31});
32</script>

2. CDN:

1<link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
2<script src="https://cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global.js"></script>
3<script src="https://unpkg.com/vue3-easy-data-table"></script>
4
5<div id="app">
6  <easy-data-table
7    :headers="headers"
8    :items="items"
9  />
10</div>
11
12<script>
13  const App = {
14    components: {
15      EasyDataTable: window['vue3-easy-data-table'],
16    },
17    data () {
18      return {
19        headers:[
20          { text: "Name", value: "name" },
21          { text: "Height (cm)", value: "height", sortable: true },
22          { text: "Weight (kg)", value: "weight", sortable: true },
23          { text: "Age", value: "age", sortable: true }
24        ],
25        items: [
26          { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
27          { "name": "James", "height": 180, "weight": 75, "age": 21 },
28          { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
29        ],
30      }
31    },
32  };
33  Vue.createApp(App).mount('#app');
34</script>

Todo

1. Refactory.
2. Make table header customizable 🎛️.
3. Vitual table rows.
4. Mobile responsive.

Contribution

Shout out to the people who made new feature requests and reported issues to make this component better.