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