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?

Column Templates

PreviousCustom TemplateNextNested Data Structures

Last updated 4 years ago

Was this helpful?

Column templates allow you to wrap your cells with vue-compiled HTML. It can be used in any of the following ways:

Scoped Slots

If you are using Vue 2.1.0 and above, you can use to create templates:

<v-client-table :data="entries" :columns="['id', 'name' ,'age', 'edit']">
      <a v-slot:edit="props" class="fa fa-edit" :href="edit(props.row.id)"></a>
</v-client-table>

You can get the index of the current row relative to the entire data set using `props.index`

Virtual DOM Functions

The syntax for Virtual DOM function is similar to that of `render` functions, as it leverages the virtual DOM to bind the templates into the main table template.

If you choose this option, it is recommended to use JSX, which closely resembles HTML, to write the templates (To compile `jsx` you need to install the ).

E.g.:

data: {
    columns: ['erase'],
    options: {
        ...
        templates: {
            erase: function (h, row, index) {
                return <delete id={row.id}/>
            }
        }
        ...
    }
}

The first parameter is the `h` scope used to compile the element. It MUST be called `h`.

The second parameter gives you access to the row data.

In addition a `this` context will be available, which refers to the root vue instance. This allows you to call your own instance methods directly.

Note: when using a `.vue` file `jsx` must be imported from a dedicated `.jsx` file in order to compile correctly. E.g

edit.jsx:

export default function(h, row, index) {
  return <a class='fa fa-edit' href={'#/' + row.id + '/edit'}></a>
}

App.vue

<script>
  import edit from './edit'

  templates: {
      edit
  }
</script>

Vue Components

Another option for creating templates is to encapsulate the template within a component and pass the name. The component must have a `data` property, which will receive the row object. You can also add an optional `index` prop, to get the non-zero-based index of the current row relative to the entire dataset, and an optional `column` prop to get the current column. E.g:

Vue.component('delete', {
    props: ['data', 'index', 'column'],
    template: `<a class='delete' @click='erase'></a>`,
    methods: {
        erase() {
            let id = this.data.id; // delete the item
        }
    }
});
options: {
    ...
    templates: {
        erase: 'delete'
    }

This method allows you to also use single page .vue files for displaying the template data

E.g:

edit.vue

<template>
  <a class="fa fa-edit" :href="edit(data.id)">Edit</a>
</template>

<script>
  export default {
      props: ['data', 'index'],
  }
</script>

App.vue

<script>
  import edit from './edit'

  templates: {
      edit
  }
</script>
  • Templates must be declared in the `columns` prop

  • Don't include HTML directly in your dataset, as it will be parsed as plain text.

scoped slots
vue jsx transform