@cbrgpl/vue3-easy-data-table
v1.5.55
Published
A customizable and easy-to-use data table component made with Vue.js 3.x.
Downloads
26
Maintainers
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
- Loading slot
- Footer customization
- Filtering (new feature since version
1.2.3
) - Click row (new feature since version
1.2.4
) - Column width (new feature since version
1.2.10
) - Fixed columns (new feature since version
1.2.10
) - Header slot (new feature since version
1.2.25
) - Expand slot (new feature since version
1.3.2
) - Style customization (new feature since version
1.3.11
) - Border cell (new feature since version
1.3.11
) - Class name customization (new feature since version
1.3.11
)
Getting started
1. ES module
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>
2. CDN:
<link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue3-easy-data-table"></script>
<div id="app">
<easy-data-table
:headers="headers"
:items="items"
/>
</div>
<script>
const App = {
components: {
EasyDataTable: window['vue3-easy-data-table'],
},
data () {
return {
headers:[
{ text: "Name", value: "name" },
{ text: "Height (cm)", value: "height", sortable: true },
{ text: "Weight (kg)", value: "weight", sortable: true },
{ text: "Age", value: "age", sortable: true }
],
items: [
{ "name": "Curry", "height": 178, "weight": 77, "age": 20 },
{ "name": "James", "height": 180, "weight": 75, "age": 21 },
{ "name": "Jordan", "height": 181, "weight": 73, "age": 22 }
],
}
},
};
Vue.createApp(App).mount('#app');
</script>
Todo
- Refactory.
- Make table header customizable 🎛️.
- Vitual table rows.
- Mobile responsive.
Contribution
Shout out to the people who made new feature requests and reported issues to make this component better.