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 | Return | | :------------------ | :---------------------------------------- | :------------ | :----- | | 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 |

Variables

You can use these variables to customize this component.

| Name | Default | | :---------------------------- | :----------------------------------------------------------- | | $table-sticky-header-height | 300px | | Bulma variables | Link |