Buff-datatable NPM

Installation

npm install buff-datatable

Individual component as Vue plugin (main.js)

import Vue from 'vue'
import { bTable } from 'buff-datatable'
import 'buefy/dist/buefy.css' // CSS File, override if custom styles will be applied

Vue.use({bTable})

API

Table

Properties

Name	Description	Type	Values	Default
`data`	Table data	Array	—	—
`columns`	Table columns, you can also add `renderHtml: true` on each column object	Array (same as TableColumns props)	—	—
`default-sort`	Sets the default sort column and order — e.g. `['first_name', 'desc']`	String, Array	—	order: `default-sort-direction` prop
`default-sort-direction`	Sets the default sort column direction on the first click	String	`asc`, `desc`	`asc`
`sort-icon`	Sets the header sorting icon	String	-	`arrow-up`
`sort-icon-size`	Sets the size of the sorting icon	String	`is-small`, , `is-medium`, `is-large` \| `is-small`
`bordered`	Border to all cells	Boolean	—	`false`
`striped`	Whether table is striped	Boolean	—	`false`
`narrowed`	Makes the cells narrower	Boolean	—	`false`
`selected`	Set which row is selected, use the `.sync` modifier to make it two-way binding	Object	—	—
`focusable`	Table can be focused and user can navigate with keyboard arrows (require `selected.sync`) and rows are highlighted when hovering	Boolean	—	`false`
`hoverable`	Rows are highlighted when hovering	Boolean	—	`false`
`checkable`	Rows can be checked (multiple), checked rows will have a `.is-checked` class if you want to style	Boolean	—	`false`
`checkbox-position`	Position of the checkbox (if `checkable` is true)	String	`left` or `right`	`left`
`checked-rows`	Set which rows are checked, use the `.sync` modifier to make it two-way binding	Array	—	—
`header-checkable`	Show check/uncheck all checkbox in table header when `checkable`	Boolean	—	`true`
`mobile-cards`	Rows appears as cards on mobile (collapse rows)	Boolean	—	`true`
`backend-sorting`	Columns won't be sorted with Javascript, use with `sort` event to sort in your backend	Boolean	—	`false`
`backend-pagination`	Rows won't be paginated with Javascript, use with `page-change` event to paginate in your backend	Boolean	—	`false`
`total`	Total number of table data if `backend-pagination` is enabled	Number	—	`0`
`current-page`	Current page of table data (if `paginated`), use the `.sync` modifier to make it two-way binding	Number	—	`1`
`loading`	Loading state	Boolean	—	`false`
`paginated`	Adds pagination to the table	Boolean	—	`false`
`pagination-simple`	Simple pagination (if `paginated`)	Boolean	—	`false`
`pagination-size`	Pagination size (if `paginated`)	String	`is-small`, `is-medium`, `is-large`	—
`pagination-position`	Pagination position (if `paginated`)	String	`bottom`, `top`, `both`	`bottom`
`per-page`	How many rows per page (if `paginated`)	Number	—	`20`
`sort-multiple`	Adds multiple column sorting	Boolean	—	`false`
`sort-multiple-data`	Used in combination with `backend-sorting`	Object	`[{field, order}]`	`[]`
`sort-multiple-key`	Adds a key which will be required for multi column sorting to work. Will always be enabled if `null` is selected (default). Requres `sort-multiple`	String	`null`, `shiftKey`, `altKey`, `ctrlKey`	`null`
`row-class`	Add a class to row ( element) based on the return	Function (row: Object, index: Number)	—	—
`detailed`	Allow row details (check scoped slots documentation)	Boolean	—	`false`
`custom-detail-row`	Allow a custom detail row	Boolean	—	`false`
`show-detail-icon`	Allow chevron icon and column to be visible	Boolean	—	`true`
`opened-detailed`	Allow pre-defined opened details. Ideal to open details via vue-router. (A unique key is required; check detail-key prop)	Array	—	`[]`
`has-detailed-visible`	Controls the visibility of the trigger that toggles the detailed rows.	Function (row: Object)	—	`true`
`detail-key`	Use a unique key of your data Object when use detailed or opened detailed. (id recommended)	String	—	—
`custom-is-checked`	Custom method to verify if row is checked, works when is `checkable`. Useful for backend pagination	Function (a: Object, b: Object)	—	—
`is-row-checkable`	Custom method to verify if a row is checkable, works when is `checkable`.	Function (row: Object)	—	true
`is-row-selectable`	Custom method to verify if a row is selectable, works when is `selected`.	Function (row: Object)	—	true
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	`mdi`
`mobile-sort-placeholder`	Text when nothing is selected	String	—	—
`custom-row-key`	Use a unique key of your `data` Object for each row. Useful if your `data` prop has dynamic indices. (id recommended)	String	-	-
`draggable`	Allows rows to be draggable	Boolean	—	`false`
`backend-filtering`	Columns won't be filtered with Javascript, use with `searchable` prop to the columns to filter in your backend	Boolean	—	`false`
`sticky-header`	Show a sticky table header	Boolean	—	`false`
`scrollable`	Add a horizontal scrollbar when table is too wide	Boolean	—	`false`
`height`	Table fixed height in pixels	Number, String	—	—
`filters-event`	Add a native event to filter	String	—	—
`card-layout`	Rows appears as cards (collapse rows)	Boolean	—	`false`
`aria-next-label`	Accessibility label for the next page link (if `paginated`)	String	—	—
`aria-previous-label`	Accessibility label for the previous page link (if `paginated`)	String	—	—
`aria-page-label`	Accessibility label for the page link. If passed, this text will be prepended to the number of the page (if `paginated`)	String	—	—
`aria-current-label`	Accessibility label for the current page link. If passed, this text will be prepended to the current page (if `paginated`)	String	—	—

Slots

Slot name	Description	Props (if scoped)
default	Required, table body and header	`row: Object`, `index: Number`
`header`	Table custom header	`column: Vue Object`, `index: Number`
`subheading`	Table subheading	`column: Vue Object`, `index: Number`
`detail`	Row detail (collapsible)	`row: Object`, `index: Number`
`empty`	Replaces table body when `data` array prop is empty	—
`footer`	Table custom footer	—
`bottom-left`	Custom bottom-left (opposite side of bottom pagination)	—
`top-left`	Custom top-left (opposite side of top pagination)	—

Events

Name	Description	Parameters
`click`	Triggers when a row is clicked	`row: Object`
`dblclick`	Triggers when a row is double clicked	`row: Object`
`sort`	Triggers when a sortable column is clicked	`field: String`, `order: String`
`sorting-priority-removed`	Triggers when a multiselect sortable column remove button has been clicked	`field: String`
`select`	Triggers when a row is selected	`row: Object`, `oldRow: Object`
`check`	Triggers when the checkbox in a row is clicked and/or when the header checkbox is clicked	`checkedList: Array`, `row: Object`
`check-all`	Triggers when the header checkbox is clicked	`checkedList: Array`
`page-change`	Triggers when pagination page is changed	`page: Number`
`details-open`	Triggers when details is opened	`row: Object`
`details-close`	Triggers when details is closed	`row: Object`
`contextmenu`	Triggers when right-click on a row	`row: Object`, `contextMenuNativeEvent: Event`
`dragstart`	Triggers when starting to drag a row	`row: Object`, `dragEvent: Event`, `index: Number`
`dragend`	Triggers when ending to drag a row	`row: Object`, `dragEvent: Event`, `index: Number`
`drop`	Triggers when dropping on a row	`row: Object`, `drop: Event`, `index: Number`
`dragover`	Triggers when dragging over a row	`row: Object`, `dragover: Event`, `index: Number`
`dragleave`	Triggers after dragging over a row	`row: Object`, `dragover: Event`, `index: Number`
`mouseenter`	Triggers when mouse enters a row	`row: Object`
`mouseleave`	Triggers when mouse leaves a row	`row: Object`
`filters-change`	Triggers when filter change	`filter: Object`
`filters-event-[filters-event]`	Triggers `filters-event` event from filter (it works only with Vue 2.6.x)	`event: Event`, `filter: Object`

Methods

Name	Description	Parameters
`initSort`	Sort using `default-sort` prop parameters
`focus`	Focus table element if is `focusable`
`toggleDetails`	Toggle row detail if table is `detailed`	`row: Object`
`openDetailRow`	Open row detail if table is `detailed`	`row: Object`
`closeDetailRow`	Close row detail if table is `detailed`	`row: Object`
`resetMultiSorting`	Resets the multi column sorting

Column

Properties

Name	Description	Type	Values	Default
`label`	Column header text, also used to identify column if `custom-key` prop is missing	String	—	—
`custom-key`	Unique identifier, use when `label` is missing or there are duplicate `label` names	String, Number	—	`this.label`
`field`	Property of the object the column is attributed, used for sorting	String	—	—
`meta`	Meta prop to add anything, useful when creating custom headers	Any	—	—
`width`	Column fixed width in any unit, or pixels when none is provided	Number, String	—	—
`numeric`	Align the cell content to the right, sort icon on left	Boolean	—	`false`
`centered`	Align the cell content to the center	Boolean	—	`false`
`sortable`	Whether the column can be sorted	Boolean	—	`false`
`visible`	Whether the column is visible	Boolean	—	`true`
`custom-sort`	Custom sort method, works when is `sortable`	Function (a: Object, b: Object, isAsc: Boolean)	—	—
`searchable`	Add a input below the header to filter data	Boolean	—	`false`
`subheading`	Column subheading text	String, Number	—	—
`sticky`	Show a sticky column	Boolean	—	`false`
`header-selectable`	Prevent text selection of header when setting this to `false`.	Boolean	—	`true`
`header-class`	CSS classes to be applied on header	String	—	-
`cell-class`	CSS classes to be applied on cell	String	—	-

Slots

Slot name	Description	Props (if scoped)
default	Required, table column body	-
`header`	Table column custom header	`column: Vue Object`, `index: Number`
`subheading`	Table column custom subheading	`column: Vue Object`, `index: Number`
`searchable`	This is to customize the search input when searchable.	`column: Vue Object`, `filters: Object`