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
- Item slot
- Buttons pagination
- Multiple selecting
- Pagination slot
- Single field sorting
- Searching
- Server side paginate and sort
- Color customization
- Loading slot
- Footer customization
- Filtering (new feature since version
1.2.3) - Click row (new feature since version
1.2.4)
Getting started
Install
npm install vue3-easy-data-table
// or
yarn add vue3-easy-data-tableRegist
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
- Fixed specific columns
- Make table header customizable 🎛️.
⭐ 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!