Options
All
  • Public
  • Public/Protected
  • All
Menu

Custom template

Introduction

You can customize the tempplate of the row by using the default slot in the Datatable component.

This slot uses 2 variables:

  1. row: The data object representing the current row.
  2. columns: The array of columns of this datatable.

Demo

Code

Typescript

import Vue from 'vue';
import { TColumnsDefinition } from 'vuejs-datatable';

import { IPeople } from '../utils';

// Defined on window
declare var rows: IPeople[];
const app = new Vue( {
    el:   '#demo-app',
    data: {
        filter:  '',
        columns: [
            { label: 'ID', field: 'id', align: 'center', filterable: false },
            { label: 'Username', field: 'user.username' },
            { label: 'First Name', field: 'user.first_name' },
            { label: 'Last Name', field: 'user.last_name' },
            { label: 'Email', field: 'user.email', align: 'right', sortable: false },
            { label: 'Address', representedAs: row => `${ row.address  }, ${  row.city  }, ${  row.state }`, align: 'right', sortable: false },
        ] as TColumnsDefinition<IPeople>,
        rows,
        page: 1,
    },
} );

HTML

<div id="demo-app">
    <div class="row">
        <div class="col-xs-12 form-inline">
            <div class="form-group">
                <label for="filter" class="sr-only">Filter</label>
                <input type="text" class="form-control" v-model="filter" placeholder="Filter" @keydown="$event.stopImmediatePropagation()">
            </div>
        </div>
        <div class="col-xs-12 table-responsive">
            <datatable :columns="columns" :data="rows" :filter="filter" :per-page="10">
                <template scope="{ row }">
                    <tr>
                        <td>{{ row.id }}</td>
                        <td>{{ row.user.username }}</td>
                        <td>{{ row.user.first_name }}</td>
                        <td>{{ row.user.last_name }}</td>
                        <td>{{ row.user.email }}</td>
                        <td>{{ row.address + ', ' + row.city + ', ' + row.state }}</td>
                    </tr>
                    <tr>
                        <td colspan="7">
                            <p>Some cool content here!</p>
                        </td>
                    </tr>
                </template>
            </datatable>
            <datatable-pager v-model="page"></datatable-pager>
        </div>
    </div>
</div>

Generated using TypeDoc