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.

data table design, data table design templates, datatable, datatable example, react data table component, material data table, vue 3 data table component

Support

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

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

Lite Data Table Component For Vue 3, vue3-table-lite Plugin/Github, data table vuetify