vue-tables-2
  • Dependencies & Compatability
  • Getting Started
    • Vue Version 3
  • Client Table
    • Asynchronous Loading
    • Grouping
    • Filtering Algorithm
    • Editable Cells
  • Server Table
    • Implementations
    • Custom Request Function
    • Setting Multiple Request Parameters
    • Error Message
    • Draw Counter
  • 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
On this page

Was this helpful?

Getting Started

PreviousDependencies & CompatabilityNextVue Version 3

Last updated 3 years ago

Was this helpful?

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 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

  • 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>

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

E.g:

Vue.use(VueTables.ClientTable);

swappables See

Or, if you prefer, use the .

here
here
Custom Template
CDN version