JSPM

  • Created
  • Published
  • Downloads 18944
  • Score
    100M100P100Q139718F
  • License MIT

A data table component made with vue.js 3.x

Package Exports

  • vue3-easy-data-table
  • vue3-easy-data-table/dist/style.css

Readme

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

Stargazers repo roster for @HC200ok/vue3-easy-data-table