Vjs-datatable NPM

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

npm install vjs-datatable --save

Import

Global

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

<script>
import DataTable from "vjs-datatable";

export default {
  components: {
    DataTable
  }
};
</script>

CDN

<!-- peer dependency -->
<script src="https://cdn.jsdelivr.net/npm/vue@^2.6.11/dist/vue.min.js"></script>
<!-- vjs-datatable -->
<script src="https://cdn.jsdelivr.net/npm/vjs-datatable@0.1.0/dist/vjs-datatable.umd.min.js"></script>

<script>
  new Vue({
    el: "#app",
    components: {
      DataTable: window["vjs-datatable"]
    }
  });
</script>

Usage

SFC

<template>
  <DataTable :data="rows" :columns="columns" />
</template>

DOM

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

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

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

vue vue-component vue-datatable datatable table table-component component

@infinitebrahmanuniverse/nolb-vj @everything-registry/sub-chunk-3063

0.1.0

3 years ago