1.0.1 • Published 2 years ago
@iyogesharma/vue-datatables v1.0.1
Vue DataTables
A light weight component for rendering data tables for VueJS aapplications.
Features
x Pagination
x PageSize
x Search
x Provide an Action Button component
x Work with both Client as well as Server side
Installation
npm install @iyogesharma/vue-datatables
In your main.js
import { YsDatatable } from '@iyogesharma/vue-datatables';
Vue.use(YsDatatable);
If you don't want to reference entire plugin, you can define the component from your component
import { YsDatatable } from '@iyogesharma/vue-datatables';
export default {
components: { YsDatatable }
}
Props
sr no | Prop | Description | Default |
---|---|---|---|
1 | server-side | indicate whether to use server side data tables or not | false |
2 | url | url to get data for server side data tables. required if server-side is true | null |
3 | option | prop object containing options set datatable config | {} |
4 | option.index | if false remove index column(#) | true |
5 | columns | array of objects containing two properties label and sortable { label: "name", sortable: true } | [] |
6 | data | data to be displayed in table | [] |
7 | page | current selected page | 1 |
8 | limit | number of records to be displayed per page | 10 |
9 | length-menu | list of option to decide number of records per page | 10, 15, 20, 40, 80, 100, 200, 500, 1000 |
11 | order | define default ordering ( works only with server side ) | { column: 'name', direction: 'ascending'} |
12 | params | additional parameter to be send along with request like headers or csrf token | {} |
13 | filters | define default filtering ( works only with server side ) | { 'users.active' : 1} |
14 | filename | name of the file to be exported from datatable | report |
15 | extension | extension of the file to be exported from datatable ( server-side ) | csv (currently supported csv,xls,json) |
16 | footer | whether to display table footer or not | true |
17 | id | id of the html table element | ys-datatable |