Basic Date Table Component For Vue 3

Description:

A basic Vue 3 data table component written in TypeScript and Composition API.

Features:

  • Responsive layout.
  • Pagination.
  • Striped rows.
  • Data filter.
  • Custom loader.
  • Custom row/column.

Basic Usage.

1. Add the component to the template.

<data-table :rows="data"/>

2. Available props.

rows: { type: Array, required: true },
columns: { type: Object, required: false, default: null },
pagination: { type: Object as PropType<PaginationProps>, required: false, default: null },
striped: { type: Boolean, required: false, default: false },
sn: { type: Boolean, required: false, default: false },
filter: { type: Boolean, required: false, default: false },
loading: { type: Boolean, required: false, default: false },
perPageOptions: { type: Array as PropType<Array<string | number>>, required: false, default: () => PER_PAGE_OPTIONS },
query: { type: Object as PropType<QueryProps>, required: false, default: () => ({}) },
topPagination: { type: Boolean, required: false, default: false },
bottomPagination: { type: Boolean, required: false, default: true },

Preview:

Basic Date Table Component For Vue 3

Changelog:

v1.0.10 (09/21/2021)

  • Overflow issue fixed

v1.0.9 (09/14/2021)

  • Clickable and hoverable row
  • empty state

Download Details:

Author: JoBinsJP

Live Demo: https://vue3-datatable.netlify.app/table/basic

Download Link: https://github.com/JoBinsJP/vue3-datatable/archive/refs/heads/master.zip

Official Website: https://github.com/JoBinsJP/vue3-datatable

Install & Download:

# Yarn
$ yarn add @jobinsjp/vue3-datatable

# NPM
$ npm i @jobinsjp/vue3-datatable --save

You Might Be Interested In:

Add Comment