Comment on page

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

Slots

Last modified 2yr ago

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`