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, }, checkedReturnType: { type: String, default: "key", }, // table title title: { type: String, default: "", }, isFixedFirstColumn: { type: Boolean, default: false, }, // column data columns: { type: Array, default: () => { return []; }, }, // tabular data rows: { type: Array, default: () => { return []; }, }, rowClasses: { type: [Array, Function], 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", }; }, }, isStaticMode: { type: Boolean, default: false, }, isSlotMode: { type: Boolean, default: false, }, isHidePaging: { type: Boolean, default: false, }, pageOptions: { type: Array, default: () => [ { value: 10, text: 10, }, { value: 25, text: 25, }, { value: 50, text: 50, }, ], }, groupingKey: { type: String, default: "", }, hasGroupToggle: { type: Boolean, default: false, }, groupingDisplay: { type: Function, default: null, }, maxHeight: { default: "auto", }, startCollapsed: { type: Boolean, default: false, }, isKeepCollapsed: { type: Boolean, default: false, },
Preview:
Changelog:
v1.3.2 (02/04/2023)
- Bugfixes
- Removed href=javascript:void(0); in links
v1.3.1 (01/10/2023)
- Bugfix
v1.3.0 (12/15/2022)
- Bugfix
v1.2.9 (12/12/2022)
- Added keep collapsed status option
v1.2.8 (12/07/2022)
- Bugfix
v1.2.7 (11/08/2022)
- Bugfix
v1.2.6 (10/18/2022)
- Bugfix
v1.2.5 (10/04/2022)
- Added new option to set table’s max height
- Fixed bugs
v1.2.4 (08/02/2022)
- Added grouping options.
v1.2.3 (06/02/2022)
- Added new option for fixed first column on horizontal scrolling
v1.2.2 (05/25/2022)
- Fixed: Result of sorting number as string was wrong on “static-mode”
v1.2.1 (05/21/2022)
- Bugfix
v1.2.0 (05/06/2022)
- Added new event ‘row-clicked’ to get row data after row clicked.
v1.1.9 (04/10/2022)
- Added option to change Return checked row data’s type
- Added option to set <tr> classes(support dynamic classes for the row)
v1.1.8-2 (03/23/2022)
- Removed unnecessary style-class and changed something class-name
v1.1.8 (03/15/2022)
- Add option to set headers/columns class and style(in-line)
v1.1.6 (02/10/2022)
- Bugfix
v1.1.5 (01/09/2022)
- Better Semnatics for easier Styling
v1.1.3 (12/02/2021)
- Changed different import statement
v1.1.0 (11/28/2021)
- removed core-js dependency and not bundle compiler-core.esm-bundler.js
v1.0.9 (11/25/2021)
- column v-slot is not to be required on v-slot mode
v1.0.8 (10/31/2021)
- Fixed bugs.
v1.0.7 (10/08/2021)
- Support v-slot
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