vue3-table-lite

A very simple table for vue3.0!


Support

Row check event Support

Custom data display Support

Pagging Support

Sorting Support

Custom message Support

Github

Demo

Example Sample Demo

Get Start

  1. Use NPM
    1. npm install vue3-table-lite --save
    2. add to your project

      import VueTableLite from 'vue3-table-lite'
    3. 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" 
                                      />
                                  
                              

SettingData

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"

Event

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