Installation

Free version users (GPLv3 license):

> npm install vue-tables-2

Subscribed users (MIT license):

> npm install vue-tables-2@git+https://<access-token>@git.xscode.com/matfish2/vue-tables-2.git

Require the script:

import {ServerTable, ClientTable, Event} from 'vue-tables-2';

Register the component(s)

Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]);

Or/And:

Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]);
  • 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'. You can also pass you own theme. Use a file from the themes folder as boilerplate.

  • swappables See 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.

The template is written using `jsx`, so you will need a jsx compiler to modify it (the package is using the compiled version under the `compiled` folder).

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:

<script src="/path/to/vue-tables-2.min.js"></script>

Or, if you prefer, use the CDN version.

This will expose a global VueTables object containing ClientTable, ServerTable and Event as properties.

E.g:

Vue.use(VueTables.ClientTable);