vue3-easy-data-table v1.5.47
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/vue@3.2.1/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.
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago