vue3-easy-data-table

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. Color customization
9. Loading slot
10. Footer customization
11. Filtering (new feature since version 1.2.3)
12. Click row (new feature since version 1.2.4)
13. Column width (new feature since version 1.2.10)
14. Fixed columns (new feature since version 1.2.10)

Getting started

Install

npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-table

Regist

import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

const app = createApp(App);
app.component('EasyDataTable', Vue3EasyDataTable);

Use

<template>
  <EasyDataTable
    :headers="headers"
    :items="items"
  />
</template>

<script lang="ts">
import type { Header, Item } from "vue3-easy-data-table";

export default defineComponent({
  setup() {
    const headers: Header[] = [
      { text: "Name", value: "name" },
      { text: "Height (cm)", value: "height", sortable: true },
      { text: "Weight (kg)", value: "weight", sortable: true },
      { text: "Age", value: "age", sortable: true }
    ];

    const items: Item[] = [
      { "name": "Curry", "height": 178, "weight": 77, "age": 20 },
      { "name": "James", "height": 180, "weight": 75, "age": 21 },
      { "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
    ];

    return {
      headers,
      items
    };
  },
});
</script>

Todo

1. refactory (use render function instead of slot)
2. Migrate from color properties to css variables.
3. Make table header customizable 🎛️.
4. Vitual table rows.

⭐ Stargazers

Contribution

If you find any bug or demand any other features, plese let me know by reporting issues.

And making pull requests is also very welcomed!