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')
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 preserveState
option 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:
Vue.use(ServerTable, [options = {}], [useVuex = false], require('./my-theme')())
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.
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);