Column Templates

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 scoped slots 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 vue jsx transform).

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.