Basic Date Table Component For Vue 3

Install & Download:

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

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