v
v
vue-tables-2
Search…
Dependencies & Compatability
Getting Started
Vue Version 3
Client Table
Server Table
Virtual Pagination
Custom Template
Column Templates
Nested Data Structures
Selectable Rows
Date Columns
List Filters
Custom Filters
Custom Sorting
Multiple Sorting
Child Rows
Conditional Cell Styling
Columns Visibility
Methods
Properties
Events
Slots
Options API
Powered By GitBook
Getting Started
Free version users (GPLv3 license):
1
> npm install vue-tables-2
Copied!
​Subscribed users (MIT license):
1
> npm install [email protected]+https://<access-token>@git.xscode.com/matfish2/vue-tables-2.git
Copied!
Subscribed users can now use the Vue 3 version of the package. Click here for instructions​
Require the script:
1
import {ServerTable, ClientTable, Event} from 'vue-tables-2';
Copied!

Register the component(s)

1
Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]);
Copied!
Or/And:
1
Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]);
Copied!
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​
    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 preserveStateoption totrue
    theme Use this option to select a CSS framework. Options:
      bootstrap3
      bootstrap4
      bulma
      tailwind (Premium only)
You can also pass you own theme. Use a file from the themes folder as boilerplate:
1
Vue.use(ServerTable, [options = {}], [useVuex = false], require('./my-theme')())
Copied!
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.

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:
1
<script src="/path/to/vue-tables-2.min.js"></script>
Copied!
Or, if you prefer, use the CDN version.
This will expose a global VueTables object containing ClientTable, ServerTable and Event as properties.
E.g:
1
Vue.use(VueTables.ClientTable);
Copied!
Previous
Dependencies & Compatability
Next
Vue Version 3
Last modified 8mo ago
Copy link