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
​
This package is abandoned. Premium version is now available publicly for both vue2 and vue 3
npm install vue-tables-2
OR
> npm install vue-tables-2-premium
OR (see here instruction for vue 3)
npm install v-tables-3
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 = {}]);
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 (on premium versions)
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')())
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:
<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);
Previous
Dependencies & Compatability
Next
Vue Version 3
Last modified 8mo ago
Copy link
Outline