# vjs-datatable Datatable component for Vue 2.x ## Features - Provides a simple to advanced tabular data - Supports dot notation in field props - Sorting - Typed sorting - Has `no-sort` sorting direction/order - Initial sorting - Reverse sorting - Pagination - Per page options - Setting initial per page - Setting initial page - Goto page input - Page details - Search - Row select - Row detail - Default and Customizable Style ## Install ```bash npm install vjs-datatable --save ``` ## Import > ### Global > > ```js > import Vue from "vue"; > import App from "./App.vue"; > import DataTable from "vjs-datatable"; > > Vue.use(DataTable); > > new Vue({ > render: (h) => h(App), > }).$mount("#app"); > ``` > > ### Component > > ```html > > ``` > > ### CDN > > ```html > > > > > > > ``` ## Usage > ### SFC > > ```html > > ``` > > ### DOM > > ```html > > > > ``` ## Props | Name | Type | Default | Description | | ------------------------- | ---------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data | Array | | Should array of objects accepts non-uniform data structure as long as defined field(s) is/are present. | | columns | Array | | Array of objects describing a column | | columns[].field | String | | Path to an obj key and slot name for providing alternative content | | columns[].label | String | field value | Header name

Note: If field is in dot notation then the default value is the root level | | columns[].sortable | Boolean | false | Allow a column to be sorted | | columns[].type | String(string\|number\|date) | string | Specify data type to be sorted | | columns[].searchable | Boolean | false | Make a column searchable

Note: Searchable columns are all affected by search filter

Note: Search will filter the original data, disregard the transformation made by slot content | | columns[].format | Function | | A function that modifies a data in a specific column

Note: Formatted data affects the sort and search filter

Crit: Be careful of changing the data type if you're going to use a sort feature. If you have a column with type option defined to number and suddenly formats a data to any valid type, then sort might not work | | initialSort | Object | | Object specifying the field and order of column to be sorted initially | | initialSort.field | String | | A sortable column field that going to initially sorted

Note: Specifying the field that didn't set sortable key to true, will not work. | | initialSort.dir | String | | A sorting direction

Note: Even though you didn't specify or skip or emptied or supply invalid value on either fields, it will not throw an error, but initial sorting will not work. | | reverseSort | Boolean | false | Reverse the sort direction, desc to asc | | allowNoSort | Boolean | false | Boolean specifies the none sort order

Info: None sort order returns the original order of data | | rowSelect | Boolean | false | Allows the rows to be selected via checkbox | | rowDetail | Boolean | false | Specifying the ability to provide additional content(accordion) by means of slot(v-slot:row-detail="{row}") | | dtClasses | Object | | An object specifying a class names to be customized | | mergeDefault | Boolean | true | A boolean that determines whether to merge a default class if classes(dtClasses, pagClasses) prop is partially supplied or not | | noRecordMessage | String | No records to show | A message to be display if rows are empty | | pagination | Object | | Object specifying the initial page, per page options and per page value | | pagination.initialPage | Number | 1 | Page number on which the data will start | | pagination.perPageOptions | Array | [10, 25, 50] | Array of per page | | pagination.perPage | Number | 10 | Number of row per page | | pagination.pageGoto | Boolean | false | Specify whether to show/hide pageGoto feature | | pagination.pagClasses | Object | | An object specifying a class names to be customized | ## Events | Name | Data | Description | | --------------------- | -------------------- | ----------------------------------------------- | | on-search | searchKey, rowCount | Fires when a search input value change | | on-sort | field, dir | Fires when a sortable header toggle | | on-select | row, isSelected | Fires when row checkbox value change | | on-select-all | rows | Fires when select all row checkbox value change | | on-row-detail-change | row, isRowDetailOpen | Fires when row toggle button click | | on-page-change | pageNumber | Fires when page change | | on-page-option-change | perPage | Fires when per page dropdown change | ## Slots | Name | Slot Props | Description | | ----------------- | ---------- | ------------------------------------------------------------------------------------------------------- | | field.nameOfField | row | An alternative content for each cell on a particular column

Can be use to provide actions | | row-detail | row | An accordion content for every row

Note: Can only be use if rowDetail option is set to true | | ## Project setup ```bash npm install ``` ### Compiles and hot-reloads for development ```bash npm run serve ``` ### Compiles and minifies for production ```bash npm run build ``` ### Lints and fixes files ```bash npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).