# Table of Contents - [Dependencies & Compatability | vue-tables-2](#dependencies-compatability-vue-tables-2) - [Getting Started | vue-tables-2](#getting-started-vue-tables-2) - [Vue Version 3 | vue-tables-2](#vue-version-3-vue-tables-2) - [Client Table | vue-tables-2](#client-table-vue-tables-2) - [Editable Cells | vue-tables-2](#editable-cells-vue-tables-2) - [Grouping | vue-tables-2](#grouping-vue-tables-2) - [Asynchronous Loading | vue-tables-2](#asynchronous-loading-vue-tables-2) - [Filtering Algorithm | vue-tables-2](#filtering-algorithm-vue-tables-2) - [Implementations | vue-tables-2](#implementations-vue-tables-2) - [Virtual Pagination | vue-tables-2](#virtual-pagination-vue-tables-2) - [Server Table | vue-tables-2](#server-table-vue-tables-2) - [Draw Counter | vue-tables-2](#draw-counter-vue-tables-2) - [Setting Multiple Request Parameters | vue-tables-2](#setting-multiple-request-parameters-vue-tables-2) - [Custom Request Function | vue-tables-2](#custom-request-function-vue-tables-2) - [Error Message | vue-tables-2](#error-message-vue-tables-2) - [Nested Data Structures | vue-tables-2](#nested-data-structures-vue-tables-2) - [Custom Sorting | vue-tables-2](#custom-sorting-vue-tables-2) - [List Filters | vue-tables-2](#list-filters-vue-tables-2) - [Date Columns | vue-tables-2](#date-columns-vue-tables-2) - [Multiple Sorting | vue-tables-2](#multiple-sorting-vue-tables-2) - [Custom Filters | vue-tables-2](#custom-filters-vue-tables-2) - [Column Templates | vue-tables-2](#column-templates-vue-tables-2) - [Columns Visibility | vue-tables-2](#columns-visibility-vue-tables-2) - [Properties | vue-tables-2](#properties-vue-tables-2) - [Selectable Rows | vue-tables-2](#selectable-rows-vue-tables-2) - [Child Rows | vue-tables-2](#child-rows-vue-tables-2) - [Methods | vue-tables-2](#methods-vue-tables-2) - [Conditional Cell Styling | vue-tables-2](#conditional-cell-styling-vue-tables-2) - [Slots | vue-tables-2](#slots-vue-tables-2) - [Events | vue-tables-2](#events-vue-tables-2) - [Custom Template | vue-tables-2](#custom-template-vue-tables-2) - [Options API | vue-tables-2](#options-api-vue-tables-2) --- # Dependencies & Compatability | vue-tables-2 ### [](https://matanya.gitbook.io/vue-tables-2/#dependencies) Dependencies * Vue.js (>=2.0) or Vue.js(>=3.0) * Server Side: axios OR vue-resource (>=0.9.0) OR jQuery OR a custom request function for the AJAX requests ### [](https://matanya.gitbook.io/vue-tables-2/#compatibility) Compatibility * Vuex (>=2.0). Not supported on Vue 3 version * Bootstrap 3 / Bootstrap 4 / Bulma / Tailwind (on previously premium packages) [NextGetting Started](https://matanya.gitbook.io/vue-tables-2/installation) Last updated 3 years ago Was this helpful? This site uses cookies to deliver its service and to analyze traffic. By browsing this site, you accept the [privacy policy](https://policies.gitbook.com/privacy/cookies) . AcceptReject --- # Getting Started | vue-tables-2 This package is abandoned. Premium version is now available publicly for both vue2 and vue 3 Copy npm install vue-tables-2 OR Copy > npm install vue-tables-2-premium OR (see [here](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3) instruction for vue 3) Copy npm install v-tables-3 Require the script: Copy import {ServerTable, ClientTable, Event} from 'vue-tables-2'; #### [](https://matanya.gitbook.io/vue-tables-2/installation#register-the-component-s) Register the component(s) Copy Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]); Or/And: Copy Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]); The above code is only for the purpose of documentation. The actual code would look something like this: `Vue.use(ServerTable, {}, false, 'bootstrap4')` * `options` see [here](https://matanya.gitbook.io/vue-tables-2/options-api) * `useVuex` is a boolean indicating whether to use `vuex` for state management, or manage state on the component itself. If you set it to `true` you **must** add a `name` prop to your table, which will be used to register a module on your store. Use `vue-devtools` to look under the hood and see the current state. If you are using `vue-router` or simply toggling the table with `v-if set the preserveState`option to`true` * `theme` Use this option to select a CSS framework. Options: * bootstrap3 * bootstrap4 * bulma * tailwind (on premium versions) You can also pass you own theme. Use a file from the `themes` folder as boilerplate: Copy Vue.use(ServerTable, [options = {}], [useVuex = false], require('./my-theme')()) * `swappables` See [Custom Template](https://matanya.gitbook.io/vue-tables-2/custom-template) You may need to add a little styling of your own. If you come up with some improvments to the templates or themes, which brings them closer to the optimum, you are welcome to send a PR. #### [](https://matanya.gitbook.io/vue-tables-2/installation#using-a-script-tag) Using a Script Tag If you are not using NPM you can also import the minified version found in `dist/vue-tables-2.min.js`. Copy the file into your project and import it: Copy Or, if you prefer, use the [CDN version](https://www.jsdelivr.com/package/npm/vue-tables-2?path=dist) . This will expose a global `VueTables` object containing `ClientTable`, `ServerTable` and `Event` as properties. E.g: Copy Vue.use(VueTables.ClientTable); [PreviousDependencies & Compatability](https://matanya.gitbook.io/vue-tables-2) [NextVue Version 3](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3) Last updated 3 years ago Was this helpful? --- # Vue Version 3 | vue-tables-2 While the migrated package has been tested, this is still an alpha version. Install the `vue3` branch: Copy > npm install v-tables-3 Require scripts: Copy import {ServerTable, ClientTable, EventBus} from 'v-tables-3'; Initialize app: Copy import { createApp } from 'vue' const app = createApp(App) Register component(s): Copy app.use(ClientTable, [options = {}], [theme = 'bootstrap3'], [swappables = {}],[themeOverride = {}]) // AND / OR app.use(ServerTable, [options = {}], [theme = 'bootstrap3'], [swappables = {}],[themeOverride = {}]) The above code is only for the purpose of documentation. The actual code would look something like this: `app.use(ServerTable, {}, 'bootstrap4')` Note that the `useVuex` option was removed The new \`themeOverride\` parameter allows you to customize the existing theme (for reference theme files are located under lib/themes) ### [](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3#breaking-changes) Breaking Changes There are almost no breaking changes, so in case you are migrating for v2, you can continue using your old code base with the following in mind: 1. The event bus now uses the [`mitt`](https://www.npmjs.com/package/mitt) package: a. to avoid naming collisions the import is now `EventBus`. instead of `Event`. b. Instead of `Event.$on`, use `EventBus.on` c. instead of `Event.$emit` use `EventBus.emit` 2. `Vuex` option was removed. See above. 3. When using a [custom template](https://matanya.gitbook.io/vue-tables-2/custom-template) refer to the `templates` folder of the premium package, as there are some minor changes 4. When using a custom template use \`markRaw\`, e.g: Copy import {markRaw} from 'vue' Vue.use(ClientTable, {}, 'bootstrap4',{ genericFilter: markRaw(MyGenericFilter) } 1. [Editable cells](https://matanya.gitbook.io/vue-tables-2/client-table/editable-cells) : due to changes in v-model behavior use the following syntax instead (add an \`input\` event listener and assign the payload to your data property): Copy Be sure to also change the format of the cell template to accord with Vue 3 syntax. E.g: Copy ### [](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3#known-warnings) Known Warnings During development Vue will issue some warnings, which you can safely ignore. They will not be displayed on the production build. Expect to see the following warning in the console while developing: 1. Vue 3 expects you to define emitted events in advance. This is not possible for dynamic event names, such as `filter::[columnName].` For example: `Component emitted event "filter::id" but it is neither declared in the emits option nor as an "onFilter::id" prop.` [PreviousGetting Started](https://matanya.gitbook.io/vue-tables-2/installation) [NextClient Table](https://matanya.gitbook.io/vue-tables-2/client-table) Last updated 3 years ago Was this helpful? --- # Client Table | vue-tables-2 Add the following element to your page wherever you want it to render. Make sure to wrap it with a parent element you can latch your vue instance into. Copy
Create a new Vue instance (You can also nest it within other components). An example works best to illustrate the syntax: Copy new Vue({ el: "#people", data: { columns: ['id', 'name', 'age'], tableData: [\ { id: 1, name: "John", age: "20" },\ { id: 2, name: "Jane", age: "24" },\ { id: 3, name: "Susan", age: "16" },\ { id: 4, name: "Chris", age: "55" },\ { id: 5, name: "Dan", age: "40" }\ ], options: { // see the options API } } }); You can access the filtered dataset at any given moment by fetching the \`filteredData\` computed property of the table, using \`ref\` as a pointer (\`this.$refs.myTable.filteredData\`); This will return the current page. To access the entire filtered dataset use \`allFilteredData\` instead. When loading data asynchronously add a \`v-if\` conditional to the component along with some \`loaded\` flag, so it will only compile once the data is attached. [PreviousVue Version 3](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3) [NextAsynchronous Loading](https://matanya.gitbook.io/vue-tables-2/client-table/asynchronous-loading) Last updated 5 years ago Was this helpful? --- # Editable Cells | vue-tables-2 Editable cells are currently supported only for the client table. To ensure editable data is reflected on your original dataset you must use \`v-model\` instead of the \`data\` prop. Each row in dataset must have a unique identifier. By default its key is set to \`id\`. Use the \`uniqueKey\` option if your dataset has a different identifier. As always examples work best to illustrate the syntax: Start by declaring the column(s) you wish to be editable using the \`editableColumns\` option: Copy { editableColumns:['text','text2','checkbox'] } Then use scoped slots to build the logic: Copy // update text on the fly // update a checkbox // update text on submit + toggle editable state + revert to original value on cancel
{{row.text2}}
In addition to the \`input\` event which is responsible - in conjunction with \`v-model\` - for updating the dataset, an additional \`update\` event is triggered with the following payload: `{row, column, oldVal, newVal}` [PreviousFiltering Algorithm](https://matanya.gitbook.io/vue-tables-2/client-table/filtering-algorithm) [NextServer Table](https://matanya.gitbook.io/vue-tables-2/server-table) Last updated 5 years ago Was this helpful? --- # Grouping | vue-tables-2 The client component supports simple grouping of rows by a common value. By simple we mean that the grouping is merely _presentational_, and not backed by a real model-level data grouping (i.e the data is NOT divided into distinct arrays). you can group by any property on your dataset. For example, for a table of countries you can group by a \`continent\` property. Simply declare in your options `groupBy:'continent'`. If you want to present some additional meta-data realted to each value, you can use the \`groupMeta\` option, along with the dedicated `__group_meta` scoped slot. For example: Copy { groupBy:'continent', groupMeta:[\ {\ value:'Africa',\ data:{\ population:1216,\ countries:54\ }\ },\ {\ value:'Asia',\ data:{\ population:4436\ countries:48\ }\ },\ {\ value:'Europe',\ data:{\ population:741.4,\ countries:50\ }\ }\ // etc...\ ] } Copy {value} has {data.countries} countries and a population of {data.population} million ### [](https://matanya.gitbook.io/vue-tables-2/client-table/grouping#multiple-level-grouping) Multiple Level Grouping This feature is only available on vue-tables-2-premium and v-tables-3 To employ _data-level_ _nested grouping,_ pass an array to `groupBy,` e.g `groupBy: ['country','city'] and you're good to go. The filteredData` computed property will reflect the nested presentation. ![](https://matanya.gitbook.io/vue-tables-2/~gitbook/image?url=https%3A%2F%2F586759306-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LvLZTEPltFXFjjkPQ3F%252F-M5AeblIlKmlX4eXxLQN%252F-M5AhCs-ZgbZVMjLaRHB%252FScreenshot%25202020-04-18%252008.12.49.png%3Falt%3Dmedia%26token%3D3c9998a6-08bb-43ad-abc4-8bb110ef51c6&width=768&dpr=4&quality=100&sign=f935fc7d&sv=2) use the `` VueTables__group-row--{level}` ``classes to apply background and padding to group rows [PreviousAsynchronous Loading](https://matanya.gitbook.io/vue-tables-2/client-table/asynchronous-loading) [NextFiltering Algorithm](https://matanya.gitbook.io/vue-tables-2/client-table/filtering-algorithm) Last updated 3 years ago Was this helpful? --- # Asynchronous Loading | vue-tables-2 Sometimes you may not have the data at hand immediately when the table is mounted, and instead you perform an API call to retrieve the data for the client table. In this case you can use the following pattern to notify the `VtNoResults` component that you are currently loading the data: Copy async mounted() { this.$refs.myTable.setLoadingState(true); const {data} = await axios.get('api/data'); this.data = data; this.$refs.myTable.setLoadingState(false); } [PreviousClient Table](https://matanya.gitbook.io/vue-tables-2/client-table) [NextGrouping](https://matanya.gitbook.io/vue-tables-2/client-table/grouping) Last updated 5 years ago Was this helpful? --- # Filtering Algorithm | vue-tables-2 You can modify the default filtering algorithm per column using the `filterAlgorithm` option. For "fake" template columns which are not backed up by a real corresponding property this is a necessity, if you wish the column to be included in the search (either in generic mode or by column). E.g, Say you have template column called `full_name` which combines first and last names; you can define the search algorithm like so: Copy filterAlgorithm: { full_name(row, query) { return (row.first_name + ' ' + row.last_name).includes(query); } } You can use the `this` keyword inside the function to refer to the vue instance where the table is embedded [PreviousGrouping](https://matanya.gitbook.io/vue-tables-2/client-table/grouping) [NextEditable Cells](https://matanya.gitbook.io/vue-tables-2/client-table/editable-cells) Last updated 5 years ago Was this helpful? --- # Implementations | vue-tables-2 While implementing the server-side code is entierly up to the user, I have included a basic [Eloquent implementation](https://raw.githubusercontent.com/matfish2/vue-tables-2/master/server/PHP/EloquentVueTables.php) for Laravel Users. If you happen to write other implementations for PHP or other languages, a pull request would be most welcome, under the following guidelines: 1. Include the class under \`./server/{language}\`. 2. Name it according to convention: \`{concrete}VueTables\`. 3. if this is the first implementation in this language add an interface similar to the one found in the PHP folder. 4. Have it implement the interface. 5. Test It [PreviousServer Table](https://matanya.gitbook.io/vue-tables-2/server-table) [NextCustom Request Function](https://matanya.gitbook.io/vue-tables-2/server-table/custom-request-function) Last updated 5 years ago Was this helpful? --- # Virtual Pagination | vue-tables-2 This feature is only available on vue-tables-2-premium and v-tables-3 With virtual pagination you can keep scrolling down to incrementally load more and more records, thus dispensing with the classic "explicit" pagination. To use this feature declare the option: Copy options: { pagination:{ virtual: true } } And set your table max-height: Copy .VueTables__wrapper { max-height: 500px; // or whatever suits your needs overflow-y: scroll; } It is recommended to use the `stickyHeader` option in conjunction with this feature [PreviousDraw Counter](https://matanya.gitbook.io/vue-tables-2/server-table/draw-counter) [NextCustom Template](https://matanya.gitbook.io/vue-tables-2/custom-template) Last updated 3 years ago Was this helpful? --- # Server Table | vue-tables-2 Copy
Copy new Vue({ el: "#people", data: { columns: ['id', 'name', 'age'], options: { // see the options API } } }); All request data is passed in the following GET parameters: * query * limit * page * orderBy * ascending * byColumn You need to return a JSON object containing two properties: * `data` : `array` - An array of row objects with identical keys. * `count`: `integer` - Total count before limit. If you are calling a foreign API or simply want to use your own keys, refer to the \`responseAdapter\` option. If you want to get the request parameters and send them to a different URL (e.g in order to export to Excel) use `this.$refs.myTable.getRequestParams()` [PreviousEditable Cells](https://matanya.gitbook.io/vue-tables-2/client-table/editable-cells) [NextImplementations](https://matanya.gitbook.io/vue-tables-2/server-table/implementations) Last updated 4 years ago Was this helpful? --- # Draw Counter | vue-tables-2 This feature is only available on vue-tables-2-premium and v-tables-3 Since the table sends asynchronous requests, the received response might not correspond to the latest request. To solve this problem you can employ the \`useDrawCounter\` option like so: Copy { useDrawCounter: true } This will add an incrementing `draw` parameter to the each request. On the server-side you should return this parameter with the response, using the same `draw` key. E.g in Laravel: Copy return [\ 'data'=>[],\ 'count'=>0,\ 'draw'=>request('draw')\ ] The table will then compare the response `draw` value with its own `draw` counter and only process the response if the two match. If you are using axios pending requests will be automatically [canceled](https://github.com/axios/axios#cancellation) when a new request is sent [PreviousError Message](https://matanya.gitbook.io/vue-tables-2/server-table/error-message) [NextVirtual Pagination](https://matanya.gitbook.io/vue-tables-2/virtual-pagination) Last updated 3 years ago Was this helpful? --- # Setting Multiple Request Parameters | vue-tables-2 While there are [methods](https://matanya.gitbook.io/vue-tables-2/methods) for setting each parameter of the table (e.g \`setLimit\`, \`setFilter\`, \`setOrder\` etc.), each of those methods would trigger a request to the server. Sometimes you may wish to set multiple parameters at once with a single request. The `setRequestParams` method allows for that. E.g: Copy this.$refs.myTable.setRequestParams({ page:2, limit:10, order:{column:'created_at',ascending:false}, filters: 'Some value', customFilters:{ myCustomFilter:100 } }) Each key on this object maps to the [method](https://matanya.gitbook.io/vue-tables-2/methods) used to set this specific key: page: `setPage` limit: `setLimit` order: `setOrder` filters: `setFilter` customFilters: `setCustomFilters` So for example, if you use `filterByColumn:true you would pass to the filters` key an object of key-value pairs, rather than a string. [PreviousCustom Request Function](https://matanya.gitbook.io/vue-tables-2/server-table/custom-request-function) [NextError Message](https://matanya.gitbook.io/vue-tables-2/server-table/error-message) Last updated 4 years ago Was this helpful? --- # Custom Request Function | vue-tables-2 by default the library supports \`JQuery\`, \`vue-resource\` and \`axios\` as ajax libraries. If you wish to use a different library, or somehow alter the request (e.g add auth headers, or manipulate the data) use the \`requestFunction\` option. E.g: Copy options: { requestFunction(data) { return axios.get(this.url, { params: data }).catch(function (e) { this.dispatch('error', e); }); } } When using a custom request function, the \`url\` prop is not required. [PreviousImplementations](https://matanya.gitbook.io/vue-tables-2/server-table/implementations) [NextSetting Multiple Request Parameters](https://matanya.gitbook.io/vue-tables-2/server-table/setting-multiple-request-parameters) Last updated 5 years ago Was this helpful? --- # Error Message | vue-tables-2 This feature is only available on vue-tables-2-premium and v-tables-3 In case the request fails (i.e 4xx or 5xx status) the loading message will be replaced by the (default) message: 'Error loading results' You can modify this message using the `texts.loadingError` property: Copy options:{ texts:{ loadingError: 'Oops! Something went wrong' } } The `tr` will have the class 'VueTables\_\_error' which you can use to style the message, e.g: Copy .VueTables__error { color:red; } [PreviousSetting Multiple Request Parameters](https://matanya.gitbook.io/vue-tables-2/server-table/setting-multiple-request-parameters) [NextDraw Counter](https://matanya.gitbook.io/vue-tables-2/server-table/draw-counter) Last updated 3 years ago Was this helpful? --- # Nested Data Structures | vue-tables-2 Oftentimes your dataset will consist of _objects_, rather than primitive types. By default, the package has no knowledge of how those objects should be presented. To tell the package how to handle those fields you can use one of two options, depending on your needs: 1\. Decide which _primitive_ property you would like to refer to as the relevant piece of data, by using the dot notation when declaring your \`columns\` prop. E.g: `['name','age','meta.education.degree']` 2\. Use [Templates](https://matanya.gitbook.io/vue-tables-2/templates) Option 1 is more simple and straight-forward. However, it disregards all the other properties, which means that sorting, filtering and presentation will all refer to the single piece of primitive data at the "end of the chain". If you want to use the entire object, option 2 is your best route. This will allow you to incorporate all the properties in the presentation. When using the client component note that: * Default filtering behaviour will recursively scan the entire object for the query. * If the column is sortable, you will need to define a sorting algorithm, using the [customSorting](https://matanya.gitbook.io/vue-tables-2/custom-sorting) option. [PreviousColumn Templates](https://matanya.gitbook.io/vue-tables-2/templates) [NextSelectable Rows](https://matanya.gitbook.io/vue-tables-2/selectable-rows) Last updated 5 years ago Was this helpful? --- # Custom Sorting | vue-tables-2 ### [](https://matanya.gitbook.io/vue-tables-2/custom-sorting#client-side-sorting) Client Side Sorting Sometimes you may wish to override the default sorting logic which is applied uniformly to all columns. To do so use the `customSorting` option. This is an object that recieves custom logic for specific columns. E.g, to sort the `name` column by the last character: Copy customSorting: { name: function (ascending) { return function (a, b) { var lastA = a.name[a.name.length - 1].toLowerCase(); var lastB = b.name[b.name.length - 1].toLowerCase(); if (ascending) return lastA >= lastB ? 1 : -1; return lastA <= lastB ? 1 : -1; } } } ### [](https://matanya.gitbook.io/vue-tables-2/custom-sorting#server-side-sorting) Server Side Sorting This depends entirely on your backend implemetation as the library sends the sorting directions through the request. [PreviousCustom Filters](https://matanya.gitbook.io/vue-tables-2/custom-filters) [NextMultiple Sorting](https://matanya.gitbook.io/vue-tables-2/multiple-sorting) Last updated 5 years ago Was this helpful? --- # List Filters | vue-tables-2 When filtering by column (option `filterByColumn:true`), the `listColumns` option allows for filtering columns whose values are part of a list, using a select box instead of the default free-text filter. For example: Copy options: { filterByColumn: true, listColumns: { animal: [{\ id: 1,\ text: 'Dog'\ },\ {\ id: 2,\ text: 'Cat',\ hide:true\ },\ {\ id: 3,\ text: 'Tiger'\ },\ {\ id: 4,\ text: 'Bear'\ }\ ] } } The values of this column should correspond to the id's passed to the list. They will be automatically converted to their textual representation. Adding `hide:true` to an item, will exclude it from the options presented to the user [PreviousDate Columns](https://matanya.gitbook.io/vue-tables-2/date-columns) [NextCustom Filters](https://matanya.gitbook.io/vue-tables-2/custom-filters) Last updated 5 years ago Was this helpful? --- # Date Columns | vue-tables-2 For date columns you can use `daterangepicker` as a filter instead of the normal free-text input. Note that you must import all the dependencies (JQuery + moment.js + daterangepicker) **GLOBALLY**, i.e on the `window` scope. You can check if this is so by typing `typeof $().daterangepicker` in the console. If it returns function you are good to go. To tell the plugin which columns should be treated as date columns use the `dateColumns` option. (E.g: `dateColumns:['created_at','executed_at']`). For the client component the date must be rendered as a `moment` object for the filtering to work. You can use the `toMomentFormat` helper option to do that for you. It accepts the current format of the dates in your dataset, and uses it to convert those dates to moment objects. E.g, if you have a `created_at` column with a date like 2017-12-31, you can use `toMomentFormat: 'YYYY-MM-DD'`. To determine the presentation of the dates use the `dateFormat` option. On the server component the filter will be sent along with the request in the following format: Copy { query:{ created_at:{ start: '2010-12-31 00:00:00', end: '2011-12-31 00:00:00' } } } Date presentation on the server component is completely up to you. If you are unable to control the server response, you can use the `templates` option to "massage" the date you get from the server into the desired format. [PreviousSelectable Rows](https://matanya.gitbook.io/vue-tables-2/selectable-rows) [NextList Filters](https://matanya.gitbook.io/vue-tables-2/list-filters) Last updated 5 years ago Was this helpful? --- # Multiple Sorting | vue-tables-2 Multiple sorting allows you to sort recursively by multiple columns. Simply put, when the primary column (i.e the column the user is currently sorting) has two or more identical items, their order will be determined by a secondary column, and so on, until the list of columns is exhausted. Example usage: Copy { ... multiSorting: { name: [\ {\ column: 'age',\ matchDir: false\ },\ {\ column: 'birth_date',\ matchDir: true\ }\ ] } ... } The above code means that when the user is sorting by `name` and identical names are compared, their order will be determined by the `age` column. If the ages are also identical the `birth_date` column will determine the order. The `matchDir` property tells the plugin whether the secondary sorting should match the direction of the primary column (i.e ascending/descending), or not. In addition to programmatically setting the sorting in advance, by default the user can also use `Shift+Click` to build his own sorting logic in real time. To disable this option set `clientMultiSorting` to false. On the server component this behaviour is disabled by default, because it requires addtional server logic to handle the request. To enable it set `serverMultiSorting` to `true`. The request will then contain a `multiSort` array, if applicable. [PreviousCustom Sorting](https://matanya.gitbook.io/vue-tables-2/custom-sorting) [NextChild Rows](https://matanya.gitbook.io/vue-tables-2/child-rows) Last updated 5 years ago Was this helpful? --- # Custom Filters | vue-tables-2 Custom filters allow you to integrate your own filters into the plugin using Vue's events system. #### [](https://matanya.gitbook.io/vue-tables-2/custom-filters#client-side-filters) Client Side Filters A. use the `customFilters` option to declare your filters, following this syntax: Copy customFilters: [{\ name: 'alphabet',\ callback: function (row, query) {\ return row.name[0] == query;\ }\ }] B. Then emit the event when appropriate: Using the event bus: Copy Event.$emit('vue-tables.filter::alphabet', query); [Vue 3](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3) Event Bus: Copy EventBus.emit('vue-tables.filter::alphabet', query); Using Vuex: Copy this.$store.commit('myTable/SET_CUSTOM_FILTER', {filter:'alphabet', value:query}) #### [](https://matanya.gitbook.io/vue-tables-2/custom-filters#server-side-filters) Server Side Filters A. use the customFilters option to declare your filters, following this syntax: Copy customFilters: ['alphabet','age-range'] B. the same as in the client component. C. Custom filters will be sent as request parameters. Implement the necessary logic on the server side. [PreviousList Filters](https://matanya.gitbook.io/vue-tables-2/list-filters) [NextCustom Sorting](https://matanya.gitbook.io/vue-tables-2/custom-sorting) Last updated 4 years ago Was this helpful? --- # Column Templates | vue-tables-2 Column templates allow you to wrap your cells with vue-compiled HTML. It can be used in any of the following ways: #### [](https://matanya.gitbook.io/vue-tables-2/templates#scoped-slots) Scoped Slots If you are using Vue 2.1.0 and above, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) to create templates: Copy You can get the index of the current row relative to the entire data set using \`props.index\` #### [](https://matanya.gitbook.io/vue-tables-2/templates#virtual-dom-functions) Virtual DOM Functions The syntax for Virtual DOM function is similar to that of \`render\` functions, as it leverages the virtual DOM to bind the templates into the main table template. If you choose this option, it is recommended to use JSX, which closely resembles HTML, to write the templates (To compile \`jsx\` you need to install the [vue jsx transform](https://github.com/vuejs/babel-plugin-transform-vue-jsx) ). E.g.: Copy data: { columns: ['erase'], options: { ... templates: { erase: function (h, row, index) { return } } ... } } The first parameter is the \`h\` scope used to compile the element. It MUST be called \`h\`. The second parameter gives you access to the row data. In addition a \`this\` context will be available, which refers to the root vue instance. This allows you to call your own instance methods directly. Note: when using a \`.vue\` file \`jsx\` must be imported from a dedicated \`.jsx\` file in order to compile correctly. E.g edit.jsx: Copy export default function(h, row, index) { return } App.vue Copy #### [](https://matanya.gitbook.io/vue-tables-2/templates#vue-components) Vue Components Another option for creating templates is to encapsulate the template within a component and pass the name. The component must have a \`data\` property, which will receive the row object. You can also add an optional \`index\` prop, to get the non-zero-based index of the current row relative to the entire dataset, and an optional \`column\` prop to get the current column. E.g: Copy Vue.component('delete', { props: ['data', 'index', 'column'], template: ``, methods: { erase() { let id = this.data.id; // delete the item } } }); Copy options: { ... templates: { erase: 'delete' } This method allows you to also use single page .vue files for displaying the template data E.g: edit.vue Copy App.vue Copy * Templates must be declared in the \`columns\` prop * Don't include HTML directly in your dataset, as it will be parsed as plain text. [PreviousCustom Template](https://matanya.gitbook.io/vue-tables-2/custom-template) [NextNested Data Structures](https://matanya.gitbook.io/vue-tables-2/nested-data-structures) Last updated 5 years ago Was this helpful? --- # Columns Visibility | vue-tables-2 #### [](https://matanya.gitbook.io/vue-tables-2/columns-visibility#columns-dropdown) Columns Dropdown If you would like to enable the user to control the columns' visibility set the `columnsDropdown` option to `true`. This will add a dropdown button to the left of the per-page control. The drop down will contain a list of the columns with checkboxes to toggle visibility. #### [](https://matanya.gitbook.io/vue-tables-2/columns-visibility#responsive-columns-display) Responsive Columns Display The `columnsDisplay` option allows you control over columns visibility depending on window size. Columns will only be shown when the window width is within the defined limits. It accepts key-value pairs of column name and device. Possible values are: * mobile (x < 480) * mobileP (x < 320) * mobileL (320 <= x < 480) * tablet (480 <= x < 1024) * tabletP (480 <= x < 768) * tabletL (768 <= x < 1024) * desktop (1024 <= x < 1280) * desktopLarge (1280 <= x < 1920) * desktopHuge (x >= 1920) All options can be preceded by the logical operators `min`,`max`, and `not` followed by an underscore. For example, a column which is set to `not_mobile` will be shown when the width of the window is greater than or equal to 480px, while a column set to `max_tabletP` will only be shown when the width is under 768px This option can work in conjunction with the `columnsDropdown` option, so by default only visible columns will be checked in the dropdown list The `columnsDropdown` option can work in conjunction with `columnsDisplay`. The rule is that as long as the user hasn't toggled a column himself, the rules you have declared in `columnsDisplay` takes precedence. Once the user toggled a column, he is in charge of columns' visibility, and the settings of `columnsDisplay` are disregarded. [PreviousConditional Cell Styling](https://matanya.gitbook.io/vue-tables-2/conditional-cell-styling) [NextMethods](https://matanya.gitbook.io/vue-tables-2/methods) Last updated 4 years ago Was this helpful? --- # Properties | vue-tables-2 Get properties off your instance using the [`ref`](http://vuejs.org/api/#ref) attribute. * `openChildRows` `array` The ids of all the currently open child rows * `filteredData` `array` (client table only) the data currently shown in the table after filtering, sorting and pagination * `allFilteredData` `array` (client table only) similar to `filteredData` but before pagination * `filtersCount` `integer` number of active filters * `selectedRows` `array` all selected rows when using the `selectable` option [PreviousMethods](https://matanya.gitbook.io/vue-tables-2/methods) [NextEvents](https://matanya.gitbook.io/vue-tables-2/events) Last updated 5 years ago Was this helpful? --- # Selectable Rows | vue-tables-2 This feature is only available on vue-tables-2-premium and v-tables-3 This feature requires a unique id for each row. By default the key is set to `id`. If you are using a different key use the `uniqueKey` option to set it Selectable rows allow you to add a checkbox before each row, thus letting the user select rows. In your options object declare it like so: Copy { selectable:{ mode: 'single', // or 'multiple' only: function(row) { return true // any condition }, selectAllMode: 'all' // or 'page', programmatic: false } } `mode` determines whether a single row can be selected or multiple rows In `multiple` mode there will be an extra checkbox in the headings row, which is used to toggle all rows in the table. In addition, the user can select multiple rows at once using `Shift+Click` `only` is an optional callback used to determine which rows are selectable based on the content of the row. The checkbox of non-selectable rows will be disabled `selectAllMode` applies only to `multiple` select mode on the client component. By default it is set to `all`, which means that when checking the checkbox on top of the table all filtered rows will be selected. Set to `page` in order to select only the visible rows on the current page. The above applies to the client table, which has all of the data available. On the server component, only the currently visible dataset will be selected. `programmatic` when set to `true` the plugin will not add the UI for selecting rows (i.e the checkbox/radio button). In this mode, you handle row selection by listening to the row click event and calling the appropriate method yourself (see **Programmatic Manipulation** below) Selected rows will have a `VueTables__row--selected` class, which you can use to style them #### [](https://matanya.gitbook.io/vue-tables-2/selectable-rows#fetching-selected-rows) Fetching Selected Rows Currently selected rows can be fetched in two ways: a. By listening to the `select` event which will contain the selected subset b. By fetching the selected rows directly off the table using \`ref\`: `this.$refs.myTable.selectedRows` #### [](https://matanya.gitbook.io/vue-tables-2/selectable-rows#programmatic-manipulation) Programmatic Manipulation `toggleRow(rowId)` toggle a row by its unique identifier `selectRow(rowId)` select a single row by its unique identifier `selectRows(rowIds)` select multiple rows by their unique identifiers `unselectRow(rowId)` unselect a single row by its unique identifier `unselectRows(rowIds)` unselect multiple rows by their unique identifiers `selectAllRows()` select all rows All of the above methods return the up-to-date selected rows array `resetSelectedRows()` reset all selected rows [PreviousNested Data Structures](https://matanya.gitbook.io/vue-tables-2/nested-data-structures) [NextDate Columns](https://matanya.gitbook.io/vue-tables-2/date-columns) Last updated 3 years ago Was this helpful? --- # Child Rows | vue-tables-2 Child rows allow for a custom designed output area, namely a hidden child row underneath each row, whose content you are free to set yourself. When using the \`childRow\` option you must pass a unqiue \`id\` property for each row, which is used to track the current state. If your identifier key is not \`id\`, use the \`uniqueKey\` option to set it. The syntax is identical to that of templates: Using Scoped Slots: Copy Using a function and (optional) JSX: Copy options:{ ... childRow: function(h, row) { return
My custom content for row {row.id}
} ... } Using a component name or a \`.vue\` file: (See [Templates](https://matanya.gitbook.io/vue-tables-2/templates#vue-components) for a complete example) Copy options:{ ... childRow: 'row-component' ... } When the plugin detects a \`childRow\` function it appends the child rows and prepends to each row an additional toggler column with a \`span\` you can design to your liking. Example styling (also found in \`style.css\`): Copy .VueTables__child-row-toggler { width: 16px; height: 16px; line-height: 16px; display: block; margin: auto; text-align: center; } .VueTables__child-row-toggler--closed::before { content: "+"; } .VueTables__child-row-toggler--open::before { content: "-"; } You can also trigger the child row toggler programmtically. E.g, to toggle the row with an id of 4: Copy this.$refs.myTable.toggleChildRow(4); // replace myTable with your own ref Alternatively, you can use the \`showChildRowToggler\` option to prevent the child row toggler cells from being rendered. (See [Options API](https://matanya.gitbook.io/vue-tables-2/options-api) ) #### [](https://matanya.gitbook.io/vue-tables-2/child-rows#disabling-specific-child-rows) Disabling Specific Child Rows Sometimes there are some child rows that have no content. You can disable the togglers for these rows by providing the logic to the `disabledChildRows` option, e.g: Copy disabledChildRows: function(row) { return row.noContent } [PreviousMultiple Sorting](https://matanya.gitbook.io/vue-tables-2/multiple-sorting) [NextConditional Cell Styling](https://matanya.gitbook.io/vue-tables-2/conditional-cell-styling) Last updated 4 years ago Was this helpful? --- # Methods | vue-tables-2 Call methods on your instance using the [`ref`](http://vuejs.org/api/#ref) attribute. * `setPage(page)` * `setLimit(recordsPerPage)` * `setOrder(column, isAscending)` * `setFilter(query)` - `query` should be a string, or an object if `filterByColumn` is set to `true`. * `resetQuery()` - Resets all query inputs (user-request filters) to empty strings. * `getData()` Get table data using the existing request parameters. Server component only. * `refresh()` Refresh the table. This method is simply a wrapper for the `serverSearch` method, and thus resets the pagination. Server component only * `getOpenChildRows(rows = null)` If no argument is supplied returns all open child row components in the page. To limit the returned dataset you can pass the `rows` arguemnt, which should be an array of unique identifiers. * `setCustomFilters(params)` set custom filters values. Expects an object with key-value pairs * `resetCustomFilters()` (server component) resets all custom filters to `null` * `getRequestParams()` (server component) get current request parameters * `setRequestParams(params)` (server component) - see [here](https://matanya.gitbook.io/vue-tables-2/server-table/setting-multiple-request-parameters) * `downloadCsv(filename = 'table.csv')` (client component) - [premium version](https://xscode.com/matfish2/vue-tables-2) - download CSV of current table state (i.e filtered and sorted, without pagination limit) * The `getOpenChildRows` method is only to be used when the child row is a **component** * In order for this method to work you need to set the `name` property on your component to `ChildRow` [PreviousColumns Visibility](https://matanya.gitbook.io/vue-tables-2/columns-visibility) [NextProperties](https://matanya.gitbook.io/vue-tables-2/properties) Last updated 4 years ago Was this helpful? --- # Conditional Cell Styling | vue-tables-2 The \`cellClasses\` option allows you to conditionally add class(es) to the \`td\` element based on predefined conditions. For example, say you want to add a \`low-balance\` class to cells in a \`balance\` column that has a value of less than 100: Copy cellClasses:{ balance: [\ {\ class:'low-balance',\ condition: row => row.balance < 100\ }\ ] } [PreviousChild Rows](https://matanya.gitbook.io/vue-tables-2/child-rows) [NextColumns Visibility](https://matanya.gitbook.io/vue-tables-2/columns-visibility) Last updated 5 years ago Was this helpful? --- # Slots | vue-tables-2 Slots allow you to insert you own custom HTML in predefined positions within the component: * `beforeTable`: Before the table wrapper. After the controls row * `afterTable`: After the table wrapper. * `beforeFilter`: Before the global filter (`filterByColumn: false`) * `afterFilter`: After the global filter * `afterFilterWrapper`: After the global filter wrapper * `beforeLimit`: Before the per page control * `afterLimit`: After the per page control * `beforeFilters`: Before the filters row (`filterByColumn: true`) * `afterFilters`: After the filters row * `prependHead`: After the `` tag * `beforeBody`: Before the `` tag * `afterBody`: After the `` tag * `prependBody`: Prepend to the `` tag * `appendBody`: Append to the `` tag In addition to these slots you can insert your own filter HTML in the filters row, or add content to the existing filter, e.g a button (When `filterByColumn` is set to `true`): A. If you just want your own content make sure that the column is not filterable by omitting it from the `filterable` array. Otherwise the slot content will be appended to the native filter. B. Create a slot whose name is formatted `filter__{column}` (double underscore). For example, to insert a checkbox on the `id` column instead of the normal input filter: Copy { filterable:["name","age"] // omit the `id` column } Copy
[](https://matanya.gitbook.io/vue-tables-2/slots#undefined) --------------------------------------------------------------- [PreviousEvents](https://matanya.gitbook.io/vue-tables-2/events) [NextOptions API](https://matanya.gitbook.io/vue-tables-2/options-api) Last updated 5 years ago Was this helpful? --- # Events | vue-tables-2 #### [](https://matanya.gitbook.io/vue-tables-2/events#listening-for-events) Listening for Events Using Custom Events (For child-parent communication): Copy Using the event bus: Copy Event.$on('vue-tables.loaded', function (data) { // Do something }); If you are using the bus and want the event to be "namespaced", so you can distinguish bewteen different tables on the same page, use the `name` prop. The event name will then take the shape of `vue-tables.tableName.eventName` If you are using the [Vue 3](https://matanya.gitbook.io/vue-tables-2/installation/vue-version-3) version use `EventBus.on` instead Using Vuex: Copy mutations: { ['tableName/LOADED'](state, data) { // Do something } } #### [](https://matanya.gitbook.io/vue-tables-2/events#list-of-available-events) List of Available Events * `vue-tables.filter` / `tableName/FILTER` : Fires off when a filter is changed. Sends through the name and value in case of column filter, or just the value in case of the general filter * `vue-tables.filter::colName` : Same as above, only this one has the name attached to the event itself, and only sends through the value. Releveant only for non-vuex tables with `filterByColumn` set to `true`. * `vue-tables.sorted` / `tableName/SORTED` : Fires off when the user sorts the table. Sends through the column and direction. In case of multisorting (Shift+Click) an array will be sent sorted by precedence. * `vue-tables.loading` / `tableName/LOADING` Server : Fires off when a request is sent to the server. Sends through the request data. Client: Fires off at the beginning of any interaction with the table. * `vue-tables.loaded` / `tableName/LOADED` Server : Fires off after the response data has been attached to the table. Sends through the response. Client: Fires off when the new dataset is retrieved. You can listen to those complementary events (`loading` and `loaded`) on a parent component and use them to add and remove a loading indicator, respectively. * `vue-tables.pagination` / `tableName/PAGINATION` : Fires off whenever the user changes a page. Send through the page number. * `vue-tables.limit` / `tableName/LIMIT` : Fires off when the per page limit is changed * `vue-tables.error` / `tableName/ERROR` (server) : Fires off if the server returns an invalid code. Sends through the error * `vue-tables.row-click` / `tableName/ROW_CLICK` : Fires off after a row was clicked. sends through the row and the mouse event. When using the client component, if you want to recieve the original row, so that it can be directly mutated, you must have a unique row identifier. The key defaults to `id`, but can be changed using the `uniqueKey` option [PreviousProperties](https://matanya.gitbook.io/vue-tables-2/properties) [NextSlots](https://matanya.gitbook.io/vue-tables-2/slots) Last updated 4 years ago Was this helpful? --- # Custom Template | vue-tables-2 when using this advanced feature please take extra care not to break any existing functionality (e.g do not remove events or essential attributes like `value` or `ref`) As of version 2 the package offers the ability to seamlessly swap any table component with your own UI implementation. [](https://matanya.gitbook.io/vue-tables-2/custom-template#usage) Usage ---------------------------------------------------------------------------- Swapped components are declared as the fifth argument you pass when registering the component: Copy Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], { [componentAKey]: ComponentA, [componentBKey]: ComponentB, //etc... }); Each component has its current template stored in the Github repo under the [templates](https://github.com/matfish2/vue-tables-2/tree/master/templates) folder. All components have a single `props` prop, which is an object containing all contextual data needed to build the component. More on this in the examples section. The full structure of the components tree, along with the corresponding keys is listed below: * [VtDataTable](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtDataTable.vue) : dataTable * [VtGenericFilter](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtGenericFilter.vue) : genericFilter * [VtPerPageSelector](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtPerPageSelector.vue) : perPageSelector * [VtDropdownPagination](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtDropdownPagination.vue) : dropdownPagination * [VtColumnsDropdown](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtColumnsDropdown.vue) : columnsDropdown * [VtTable](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtTable.vue) : table * [VtTableHead](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtTableHead.vue) : tableHead * [VtHeadingsRow](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtHeadingsRow.vue) : headingsRow * [VtTableHeading](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtTableHeading.vue) : tableHeading * [VtSortControl](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtSortControl.vue) : sortControl * [VtFiltersRow](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtFiltersRow.vue) : filtersRow * [VtTextFilter](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtTextFilter.vue) : textFilter * [VtListFilter](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtListFilter.vue) : listFilter * [VtDateFilter](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtDateFilter.vue) : dateFilter * [VtTableBody](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtTableBody.vue) : tableBody * [VtNoResultsRow](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtNoResultsRow.vue) : noResultsRow * [VtTableRow](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtTableRow.vue) : tableRow * [VtTableCell](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtTableCell.vue) : tableCell * [VtChildRowToggler](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtChildRowToggler.vue) : childRowToggler * [VtChildRow](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtChildRow.vue) : childRow * [VtGroupRow](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtGroupRow.vue) : groupRow * [VtPagination](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtPagination.vue) : pagination All components provide an `opts` property, referencing the full `options` object (i.e the merged default, global and local options) Users of premium version, use the template folder of the private repository instead`(node_modules/vue-tables-2/templates),`as there might be some differences in some of the templates [](https://matanya.gitbook.io/vue-tables-2/custom-template#examples) Examples ---------------------------------------------------------------------------------- ### [](https://matanya.gitbook.io/vue-tables-2/custom-template#custom-pagination) Custom Pagination Let's swap the default pagination, which uses [vue-pagination-2](https://www.npmjs.com/package/vue-pagination-2) , with some other 3rd party implementaion, say [vue-plain-pagination](https://www.npmjs.com/package/vue-plain-pagination) . Copy the existing pagination template: Copy Modify it like so, and save to your project: **MyPagination.vue** Copy Register it: Copy Vue.use(ClientTable, {}, false, 'bootstrap3', { pagination: MyPagination }); Et Voila! In this example we used the `totalPages` prop, which wasn't used in the original component. If you encounter a use-case for other props which are not exposed through the `props` object, let me know and I'll consider adding it to the provided properties ### [](https://matanya.gitbook.io/vue-tables-2/custom-template#font-awesome-sort-icon) Font Awesome Sort Icon Let's use [vue-fontawesome](https://www.npmjs.com/package/@fortawesome/vue-fontawesome) Install the icons: Copy import { library } from '@fortawesome/fontawesome-svg-core' import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faSort); library.add(faSortUp); library.add(faSortDown); Copy the original template: Copy Modify and save to your project: **MySortControl.vue** Copy As in the example above, note we are using the `sortStatus` property. which wasn't used in the original template Register it: Copy Vue.use(ClientTable, {}, false, 'bootstrap3', { sortControl: MySortControl }); ### [](https://matanya.gitbook.io/vue-tables-2/custom-template#footer-pagination) Footer Pagination In this example we will reposition the pagination element inside the table by moving it from `VtDataTable` to `VtTable`: Remove pagination from `VtDataTable`: **MyDataTable.vue** Copy Add pagination to `VtTable`: **MyTable.vue** Copy Register Components: Copy Vue.use(ClientTable, {}, false,'bootstrap3', { dataTable: MyDataTable, table: MyTable }); ### [](https://matanya.gitbook.io/vue-tables-2/custom-template#footer-headings) Footer Headings Add `vtHeadingsRow` to `vtTable`: MyTable.vue Copy Register the component: Copy Vue.use(ClientTable, {}, false,'bootstrap3', { table: MyTable }); ### [](https://matanya.gitbook.io/vue-tables-2/custom-template#numeric-field-pagination) Numeric Field Pagination Say you have a huge number of pages in your server table, which prevents you from using dropdown pagination due to memory limitations. Let's replace dropdown pagination ([VtDropdownPagination](https://github.com/matfish2/vue-tables-2/blob/modular/templates/VtDropdownPagination.vue) ) with a numeric field. **NumericFieldPagination.vue** Copy Register the component: Copy Vue.use(ServerTable, {}, false,'bootstrap3', { dropdownPagination: NumericFieldPagination }); ### [](https://matanya.gitbook.io/vue-tables-2/custom-template#select2-list-filter) Select2 List Filter Replace [VtListFilter](https://github.com/matfish2/vue-tables-2/blob/master/templates/VtListFilter.vue) with the following: Copy Register the component: Copy Vue.use(ServerTable, {}, false,'bootstrap3', { listFilter: MyListFilter }); ### [](https://matanya.gitbook.io/vue-tables-2/custom-template#vuetify) Vuetify This is NOT a complete example. It's what I used recently for a project I was working on, and can serve as a solid starting point for further modifications. VtDataTable: Copy VtTable: Copy VtPagination: Copy VtPerPageSelector: Copy VtGenericFilter (remove label): Copy VtSortControl: Copy Register the components: Copy Vue.use(ClientTable, {}, false, 'bootstrap4', { table: VtTable, genericFilter: VtGenericFilter, dataTable: VtDataTable, sortControl: VtSortControl, pagination: VtPagination, perPageSelector: VtPerPageSelector }) ### [](https://matanya.gitbook.io/vue-tables-2/custom-template#filter-on-button-click) Filter on button click By default, the generic filter is triggered on key up. Here is how to trigger it on click instead: VtGenericFilter.vue: Copy Register the component: Copy Vue.use(ClientTable, {}, false, 'bootstrap4', { genericFilter: VtGenericFilter }) [PreviousVirtual Pagination](https://matanya.gitbook.io/vue-tables-2/virtual-pagination) [NextColumn Templates](https://matanya.gitbook.io/vue-tables-2/templates) Last updated 4 years ago Was this helpful? --- # Options API | vue-tables-2 [](https://matanya.gitbook.io/vue-tables-2/options-api#options) 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` [PreviousSlots](https://matanya.gitbook.io/vue-tables-2/slots) Last updated 3 years ago Was this helpful? ---