A very simple table for vue3.0!
Row check event Support
Custom data display Support
Pagging Support
Sorting Support
Custom message Support
Example Sample Demo
npm install vue3-table-lite --save
add to your project
import VueTableLite from 'vue3-table-lite'
enjoy it!
<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"
/>
name | Type | description | |
---|---|---|---|
has-checkbox | Boolean | Show checkbox on row | |
is-loading | Boolean | Show loading modal | |
is-re-search | Boolean | If reload data, be set true | |
columns | Array | The table columns | |
isKey | Boolean | If field is primary key. set to true | |
label | String | Display field lable | |
field | String | Your data key | |
width | String | Column's width | |
sortable | Boolean | If field can sorting. set to true | |
display | String | You can customize display data in there. (html tag or Etc.) | |
rows | Array | Rows Data | |
total | Integer | Total count | |
sortable | Object | Order field and sort for Sortable | |
order | String | Field key | |
sort | String | "asc" or "desc" | |
messages | Object | Message | |
pagingInfo | String | Default: "Showing {0}-{1} of {2}" | |
pageSizeChangeLabel | String | Default: "Row count:" | |
gotoPageLabel | String | Default: "Go to page:" | |
noDataAvailable | String | Default: "No data" |
name | Type | description | |
---|---|---|---|
do-search | Function | Your search event | |
is-finished | Function | Will be call this function after table rendaring finished | |
return-checked-rows | Function | Will be call this function after table checkbox on checked |