# 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](https://matanya.gitbook.io/vue-tables-2/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](https://matanya.gitbook.io/vue-tables-2/child-rows#disabling-specific-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](https://matanya.gitbook.io/vue-tables-2/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](https://matanya.gitbook.io/vue-tables-2/columns-visibility) | `{}` |
| columnsDropdown | Boolean | See [Columns Visibility](https://matanya.gitbook.io/vue-tables-2/columns-visibility) | `false` |
| customFilters | Array | See [Custom Filters](https://matanya.gitbook.io/vue-tables-2/custom-filters) | `[]` |
| customSorting (client-side) | Object | See [Custom Sorting](https://matanya.gitbook.io/vue-tables-2/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](https://momentjs.com/). 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](https://matanya.gitbook.io/vue-tables-2/client-table/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](https://matanya.gitbook.io/vue-tables-2/client-table/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 \Title\
}
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 \.
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](https://matanya.gitbook.io/vue-tables-2/list-filters) | {} |
| multiSorting (client-side) | Object | See [Mutiple Sorting](https://matanya.gitbook.io/vue-tables-2/multiple-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](https://matanya.gitbook.io/vue-tables-2/selectable-rows) | |
| selectable.only (premium) | Function | Decides which rows should be [selectable](https://matanya.gitbook.io/vue-tables-2/selectable-rows) | |
| selectable.selectAllMode (premium) | String | Decides whether to [select](https://matanya.gitbook.io/vue-tables-2/selectable-rows) 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](https://matanya.gitbook.io/vue-tables-2/templates) | {} |
| texts | Object | see the `texts` object in [defaults.js](https://github.com/matfish2/vue-tables-2/blob/master/lib/config/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` |
|