Description:
A simple and lightweight data table component for Vue.js 3. Features sorting, paging, row check, dynamic data rendering, and more.
How to use it:
1. Import the TableLite component.
import TableLite from “vue3-table-lite”;
2. Add the component to the app.
<vue-table-lite :shas-checkbox="true" :is-loading="table.isLoading" :is-re-search="table.isReSearch" :columns="table.columns" :rows="table.rows" :total="table.totalRecordCount" :sortable="table.sortable" :messages="table.messages" @do-search="doSearch" @is-finished="tableLoadingFinish" @return-checked-row="updateCheckedRows" />
3. Available component props.
// is loading
isLoading: {
type: Boolean,
require: true,
},
// is re-search
isReSearch: {
type: Boolean,
require: true,
},
// has checkbox
hasCheckbox: {
type: Boolean,
default: false,
},
// table title
title: {
type: String,
default: "",
},
// column data
columns: {
type: Array,
default: () => {
return [];
},
},
// tabular data
rows: {
type: Array,
default: () => {
return [];
},
},
// number of rows per page
pageSize: {
type: Number,
default: 10,
},
// total number of rows
total: {
type: Number,
default: 100,
},
// current page index
page: {
type: Number,
default: 1,
},
// sorting
sortable: {
type: Object,
default: () => {
return {
order: "id",
sort: "asc",
};
},
},
// display messages
messages: {
type: Object,
default: () => {
return {
pagingInfo: "Showing {0}-{1} of {2}",
pageSizeChangeLabel: "Row count:",
gotoPageLabel: "Go to page:",
noDataAvailable: "No data",
};
},
},Preview:
Changelog:
v1.0.6 (07/14/2021)
- bugfix
v1.0.5 (05/09/2021)
- bugfix
v1.0.4 (05/05/2021)
- fixed css file not load
Download Details:
Author: linmasahiro
Live Demo: https://linmasahiro.github.io/vue3-table-lite/dist/
Download Link: https://github.com/linmasahiro/vue3-table-lite/archive/master.zip
Official Website: https://github.com/linmasahiro/vue3-table-lite
Install & Download:
# NPM
$ npm i vue3-table-lite