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:
Changelog:
v1.0.15 (03/21/2021)
- update
v1.0.14 (03/17/2021)
- update
v1.0.13 (03/16/2021)
- sorting column added
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