Getting Started
Free version users (GPLv3 license):
> npm install vue-tables-2
Subscribed users (MIT license):
> npm install [email protected]+https://<access-token>@git.xscode.com/matfish2/vue-tables-2.git
Subscribed users can now use the Vue 3 version of the package. Click here for instructions
Require the script:
import {ServerTable, ClientTable, Event} from 'vue-tables-2';
Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [swappables = {}]);
Or/And:
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')
optionssee hereuseVuexis a boolean indicating whether to usevuexfor state management, or manage state on the component itself. If you set it totrueyou must add anameprop to your table, which will be used to register a module on your store. Usevue-devtoolsto 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
themeUse 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:
Vue.use(ServerTable, [options = {}], [useVuex = false], require('./my-theme')())
swappablesSee 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.
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);
