Options API

Options

Options are set in three layers, where the more particular overrides the more general.

  1. Pre-defined component defaults.

  2. Applicable user-defined defaults for the global Vue Instance. Passed as the second paramter to the Use statement.

  3. Options for a single table, passed through the options prop.

Option

Type

Description

Default

addSortedClassToCells

Boolean

Add class indicating column and sort direction to sorted column cells

false

alwaysShowPerPageSelect

Boolean

Show per page select even when there is only one value in the list

false

caption

String

table caption element

false

childRow

Function

See Child Rows

false

childRowTogglerFirst

Boolean

Should the child row be positioned at the first column or the last one

true

clientMultiSorting

Boolean

Enable multiple columns sorting using Shift + Click on the client component

true

toggleGroups (client-side)

Boolean

When using the groupBy option, settings this to true will make group's visibility togglable, by turning the group name into a button

false

cellClasses

Object

See Conditional Cell Styling

{}

columnsClasses

Object

Add class(es) to the specified columns. Takes key-value pairs, where the key is the column name and the value is a string of space-separated classes

{}

columnsDisplay

Object

See Columns Visibility

{}

columnsDropdown

Boolean

See Columns Visibility

false

customFilters

Array

See Custom Filters

[]

customSorting (client-side)

Object

See Custom Sorting

{}

dateColumns

Array

Use daterangepicker as a filter for the specified columns (when filterByColumn is set to true).

Dates should be passed as moment objects, or as strings in conjunction with the toMomentFormat option

[]

dateFormat

String

Format to display date objects (client component). Using momentjs. This will also affect the datepicker on both components

DD/MM/YYYY

dateFormatPerColumn

Object

override the default date format for specific columns

{}

datepickerOptions

Object

Options for the daterangepicker when using a date filter (see dateColumns)

{ locale: { cancelLabel: 'Clear' } }

datepickerPerColumnOptions

Object

additional options for specific columns, to be merged with datepickerOptions. Expects an object where the key is a column name, and the value is an options object

{}

debounce

Number

Number of idle milliseconds (no key stroke) to wait before sending a request. Used to detect when the user finished his query in order to avoid redundant requests (server) or rendering (client)

500

descOrderColumns

Array

By default the initial sort direction is ascending. To override this for specific columns pass them into this option

[]

destroyEventBus

Boolean

Should the plugin destroy the event bus before the table component is destroyed? Since the bus is shared by all instances, only set this to true if you have a single instance in your page

false

editableColumns

Array

Columns that should be editable. See Editable Cells

[]

filterable

Array / Boolean

Filterable columns true - All columns.

Set to false or [] to hide the filter(s). Single filter mode (filterByColumn:false) is also affected

filterAlgorithm

Object

Define custom filtering logic per column. See Filtering Algorithm

{}

footerHeadings

Boolean

Display headings at the bottom of the table too

false

headings

Object

Table headings.

Can be either a string or a function, if you wish to inject vue-compiled HTML. E.g: function(h) { return <h2>Title</h2>} Note that this example uses jsx, and not HTML. The this context inside the function refers to the direct parent of the table instance. Another option is to use a slot, named "h__{column}" If no heading is provided the default rule is to extract it from the first row properties, where underscores become spaces and the first letter is capitalized

hiddenColumns

Array / Boolean

An array of columns to hide initially (can then be added by user using columnsDropdown option). Mutually exclusive with visibleColumns

false

groupBy (client-side)

String

Group rows by a common property. E.g, for a list of countries, group by the continent property

false

groupMeta (client-side)

Array

Meta data associated with each group value. To be used in conjunction with groupBy. See documentation for a full example

[]

headingsTooltips

Object

Table headings tooltips.

Can be either a string or a function, if you wish to inject vue-compiled HTML. Renders as title attribute of <th>. E.g: function(h) { return 'Expanded Title'} The this context inside the function refers to the direct parent of the table instance.

highlightMatches

Boolean

Highlight matches

false

initFilters

Object

Set initial values for all filter types: generic, by column or custom.

Accepts an object of key-value pairs, where the key is one of the following:

a. "GENERIC" - for the generic filter b. column name - for by column filters. c. filter name - for custom filters.

In case of date filters the date range should be passed as an object comprised of start and end properties, each being a moment object.

{}

initialPage

Number

Set the initial page to be displayed when the table loads

1

listColumns

Object

See List Filters

{}

multiSorting (client-side)

Object

See Mutiple Sorting

{}

orderBy.ascending

Boolean

initial order direction

orderBy: { ascending:true }

orderBy.column

String

initial column to sort by

Original dataset order

pagination.chunk

Number

maximum pages in a chunk of pagination

pagination: { chunk:10 }

pagination.dropdown

Boolean

use a dropdown select pagination next to the records-per-page list, instead of links at the bottom of the table.

pagination: { dropdown:false }

pagination.nav

String

Which method to use when navigating outside of chunk boundries. Options are : scroll - the range of pages presented will incrementally change when navigating to a page outside the chunk (e.g 1-10 will become 2-11 once the user presses the next arrow to move to page 11). fixed - navigation will occur between fixed chunks (e.g 1-10, 11-20, 21-30 etc.). Double arrows will be added to allow navigation to the beginning of the previous or next chunk

pagination: { nav: 'fixed' }

pagination.edge

Boolean

Show 'First' and 'Last' buttons

pagination: { edge: false }

pagination.show

Boolean

Should pagination be displayed?

true

pagination.virtual (Premium)

Boolean

Enable virtual (infinite/continuous) pagination

false

params (server-side)

Object

Additional parameters to send along with the request

{}

perPage

number

Initial records per page

10

perPageValues

Array

Records per page options

[10,25,50,100]

preserveState

Boolean

Preserve dynamically created vuex module when the table is destroyed

false

requestAdapter (server-side)

Function

Set a custom request format

function(data) { return data; }

requestFunction (server-side)

Function

Set a custom request function

See documentation

requestKeys (server-side)

Object

Set your own request keys

{ query:'query', limit:'limit', orderBy:'orderBy', ascending:'ascending', page:'page', byColumn:'byColumn' }

resizableColumns

Boolean / Array

3 options: a. false - no resizable columns b. true - all columns resizable c. array of resizable columns

true

responseAdapter (server-side)

Function

Transform the server response to match the format expected by the client. This is especially useful when calling a foreign API, where you cannot control the response on the server-side

function(resp) { var data = this.getResponseData(resp); return { data: data.data, count: data.count } }

rowAttributesCallback

Function

Add dynamic attributes to table rows.

E.g function(row) { return {id: row.id}}

This can be useful for manipulating the attributes of rows based on the data they contain

{}

rowClassCallback

Function

Add dynamic classes to table rows.

E.g function(row) { return row-${row.id}}

This can be useful for manipulating the appearance of rows based on the data they contain

false

saveState

Boolean

Constantly save table state and reload it each time the component mounts. When setting it to true, use the name prop to set an identifier for the table

false

sendEmptyFilters (server-side)

Boolean

When filtering by column send all request keys, including empty ones

false

sendInitialRequest (server-side)

Boolean

Should a request to fetch the data be sent immediately when the table renders

true

selectable.mode (Premium)

String

Enables selectable rows

selectable.only (Premium)

Function

Decides which rows should be selectable

selectable.selectAllMode (Premium)

String

Decides whether to select all filtered rows, or only the current page

all

serverMultiSorting

Boolean

Enable multiple columns sorting using Shift + Click on the server component

false

showChildRowToggler

Boolean

Enable render of child row toggler cell

true

skin

String

Space separated table styling classes

table-striped table-bordered table-hover

sortIcon

String

Sort icon classes

{ base:'glyphicon', up:'glyphicon-chevron-up', down:'glyphicon-chevron-down', is:'glyphicon-sort' }

sortable

Array

Sortable columns

All columns

sortingAlgorithm

Function

define your own sorting algorithm

function (data, column) { return data.sort(this.getSortFn(column));}

summary

String

Table's summary attribute for accessibility reasons

false

stickyHeader (Premium)

Boolean

Make the table head sticky

false

stickyHeaderBackground (Premium)

String

th background color when using sticky headers. Set to an empty string to remove, or set your own color

white

storage

String

Which persistance mechanism should be used when saveState is set to true: local - localStorage. session - sessionStorage

local

tabbable

Boolean

Allow table navigation using the tab key

true

templates

Object

See Templates

{}

texts

Object

see the texts object in defaults.js

toMomentFormat (client-side)

String

transform date columns string values to momentjs objects using this format. If this option is not used the consumer is expected to pass momentjs objects himself

false

uniqueKey

String

The key of a unique identifier in your dataset, used to track the child rows, and return the original row in row click event

id

visibleColumns

Array / Boolean

An array of columns to show initially (can then be altered by user using columnsDropdown option). Mutually exclusive with hiddenColumns

false