Lite Data Table Component For Vue 3

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

Preview:

Changelog:

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