Customizations
Custom Row Template
Sometimes you might want to customize exactly how rows are displayed in a table. Vue-good-table also supports dynamic td templates where you dictate how to display the cells. Example:
<vue-good-table
:columns="columns"
:rows="rows">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'age'">
<span style="font-weight: bold; color: blue;">{{props.row.age}}</span>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
Result
Name | Age | Created On | Percent |
---|---|---|---|
John | 20 | Oct 31st 01 | 3.34% |
Jane | 24 | Oct 31st 11 | 3.34% |
Susan | 16 | Oct 30th 11 | 3.34% |
NOTE
- The original row object can be accessed via
props.row
- The currently displayed table row index can be accessed via
props.index
. - The original row index can be accessed via
props.row.originalIndex
. You can then access the original row object by usingrows[props.row.originalIndex]
. - The column object can be accessed via
props.column
- You can access the formatted row data (for example - formatted date) via
props.formattedRow
Adding custom columns
Sometimes you might want to add columns to the table that are not part of your row data. Maybe before or after the other columns.
<vue-good-table
:columns="columns"
:rows="rows">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'before'">
before
</span>
<span v-else-if="props.column.field == 'after'">
after
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
Result
Before | Name | Age | Created On | Percent | After |
---|---|---|---|---|---|
before | John | 20 | Oct 31st 01 | 3.34% | after |
before | Jane | 24 | Oct 31st 11 | 3.34% | after |
before | Susan | 16 | Oct 30th 11 | 3.34% | after |
Custom column headers
Sometimes you might want to customize column headers. You can do that in the following way
<vue-good-table
:columns="columns"
:rows="rows">
<template slot="table-column" slot-scope="props">
<span v-if="props.column.label =='Name'">
<i class="fa fa-address-book"></i> {{props.column.label}}
</span>
<span v-else>
{{props.column.label}}
</span>
</template>
</vue-good-table>