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

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>

⭐ Stargazers

Contribution

If you find any bug or demand Andany other features, plese let me know by reporting issues. I will solve it as fast as I can.

And making pull requests is also very welcomed!