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
  • Breaking Changes
  • Known Warnings

Was this helpful?

  1. Getting Started

Vue Version 3

v-tables-3

While the migrated package has been tested, this is still an alpha version.

Install the vue3 branch:

> npm install v-tables-3    

Require scripts:

import {ServerTable, ClientTable, EventBus} from 'v-tables-3';

Initialize app:

import { createApp } from 'vue'

const app = createApp(App)

Register component(s):

app.use(ClientTable, [options = {}], [theme = 'bootstrap3'], [swappables = {}],[themeOverride = {}])
// AND / OR
app.use(ServerTable, [options = {}], [theme = 'bootstrap3'], [swappables = {}],[themeOverride = {}])

The above code is only for the purpose of documentation. The actual code would look something like this:

app.use(ServerTable, {}, 'bootstrap4')

Note that the useVuex option was removed

The new `themeOverride` parameter allows you to customize the existing theme (for reference theme files are located under lib/themes)

Breaking Changes

There are almost no breaking changes, so in case you are migrating for v2, you can continue using your old code base with the following in mind:

  1. Vuex option was removed. See above.

  2. When using a custom template use `markRaw`, e.g:

import {markRaw} from 'vue'

Vue.use(ClientTable, {}, 'bootstrap4',{
   genericFilter: markRaw(MyGenericFilter)
}
<v-client-table :columns="columns" :data="data" @input="e=>data=e"></v-client-table>

Be sure to also change the format of the cell template to accord with Vue 3 syntax. E.g:

<template v-slot:text="{row,update}">
   <input type="text" v-model="row.text" @update:modelValue="update">
</template>

Known Warnings

During development Vue will issue some warnings, which you can safely ignore. They will not be displayed on the production build.

Expect to see the following warning in the console while developing:

  1. Vue 3 expects you to define emitted events in advance. This is not possible for dynamic event names, such as filter::[columnName]. For example:

Component emitted event "filter::id" but it is neither declared in the emits option nor as an "onFilter::id" prop.

PreviousGetting StartedNextClient Table

Last updated 3 years ago

Was this helpful?

The event bus now uses the package: a. to avoid naming collisions the import is now EventBus. instead of Event. b. Instead of Event.$on, use EventBus.on c. instead of Event.$emit use EventBus.emit

When using a refer to the templates folder of the premium package, as there are some minor changes

: due to changes in v-model behavior use the following syntax instead (add an `input` event listener and assign the payload to your data property):

mitt
custom template
Editable cells