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