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
disabledChildRows
Function
See Child Rows
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
{}
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
{}
columnsDropdown
Boolean
false
customFilters
Array
[]
customSorting (client-side)
Object
{}
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
{}
multiSorting (client-side)
Object
{}
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
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
Last modified 3mo ago
Copy link