A Simple Material Data Table Lite Component for Vue3

Vue3 table lite is a simple and lightweight spreadsheet component for Vue.js 3.

It features sorting, paging, row checking, dynamic data rendering, supported TypeScript, and more.

Support

  • Row check event Support
  • Custom data display Support
  • Pegging Support
  • Sorting Support
  • Custom message Support
  • V-slot Support
  • TypeScript Support

Must Read – Simple and Lightweight Data Table JavaScript Library | Grid.js

How to make use of it:

Install and download:

# NPM
$ npm i vue3-table-lite

1. Import the TableLite component.

import TableLite from “vue3-table-lite”;

2. Add the component to the application.

<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. Component props available.

// 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",
    };
  },
},

Read More – 

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator
jQuery Clone to Copy a Table Row and Increment ID | cloneData.js


See Demo And Download

Officiall Website(linmasahiro): Click Here

This superior jQuery/javascript plugin is developed by linmasahiro. For extra Advanced Usage, please go to the official website.

Share