Do you have a UX team? I Would really appreciate their feedback on my new product - UserBit
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 | 3.34% | |
Jane | 24 | Oct 304th 11 | 3.34% |
Susan | 16 | Oct 303rd 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>
keep in mind that you'll need to add the custom columns to your column definition.
{
label: 'Before',
field: 'before'
},
{
label: 'After',
field: 'after'
},
Result
Before | Name | Age | Created On | Percent | After |
---|---|---|---|---|---|
before | John | 20 | 3.34% | after | |
before | Jane | 24 | Oct 304th 11 | 3.34% | after |
before | Susan | 16 | Oct 303rd 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>
Custom pagination
Sometimes you might want to customize the pagination. You can do that in the following way:
<vue-good-table
:columns="columns"
:rows="rows"
:pagination-options="{enabled: true}">
<template slot="pagination-bottom" slot-scope="props">
<custom-pagination
:total="props.total"
:pageChanged="props.pageChanged"
:perPageChanged="props.perPageChanged">
</custom-pagination>
</template>
</vue-good-table>
// within your <custom-pagination> component
props: {
pageChanged: {
type: Function,
},
perPageChanged: {
type: Function,
},
}
// and...
methods: {
customPageChange(customCurrentPage) {
this.pageChanged({currentPage: customCurrentPage});
},
customPerPageChange(customPerPage) {
this.perPageChanged({currentPerPage: customPerPage});
}
}
You will have to implement your own pagination system:
- The total number of rows can be accessed via
props.total
- The function to call when the current page has changed can be accessed via
props.pageChanged
. - The function to call when the per page value has changed can be accessed via
props.perPageChanged
.