repository·master·Indexed 24 days ago
https://github.com/xaksis/vue-good-tableA clean and powerful data table component for VueJS (2.x) version 2.21.11. It provides essential features including sorting, column filtering, pagination, global search, and checkbox selection. The library supports both client-side and remote mode for server-side operations, grouped rows, and customizable themes such as 'nocturnal' and 'black-rhino'. It includes slots for custom row and column templates, as well as table actions and empty states.
vue-good-table repository is designed for Vue 2. For Vue 3 compatibility, use the vue-good-table-next repository maintained by @borisflesch.By default, group headers appear at the top of their respective groups. You can change this behavior using group-options.
headerPosition: 'bottom' in :group-options to move the header/summary row to the end of the group.count: '') while leaving other fields undefined.<vue-good-table
:columns="columns"
:rows="rows"
:group-options="{
enabled: true,
headerPosition: 'bottom'
}"
>
</vue-good-table>The mode option determines how pagination controls are rendered:
'records' (default): Displays pagination based on record ranges.'pages': Displays pagination as individual page numbers. This is recommended for tables with many pages as it allows users to jump to any specific page.<!-- records mode -->
<vue-good-table
:pagination-options="{ enabled: true, mode: 'records' }">
</vue-good-table>
<!-- pages mode -->
<vue-good-table
:pagination-options="{ enabled: true, mode: 'pages' }">
</vue-good-table>To perform server-side operations, you must construct a parameter object to send to your backend. A recommended structure for serverParams includes:
columnFilters: A map of column filters (e.g., { name: 'john', age: '20' }).sort: An array containing a field (string) and type ('asc' or 'desc').page: The current page number.perPage: The number of items to display per page.serverParams: {
// a map of column filters example: {name: 'john', age: '20'}
columnFilters: {},
sort: [
{
field: '', // example: 'name'
type: '' // 'asc' or 'desc'
}
],
page: 1, // what page I want to show
perPage: 10 // how many items I'm showing per page
}Install the package using npm to add it to your project dependencies.
npm install --save vue-good-tableYou can use the table-header-row slot to customize the appearance of group header rows. The slot provides several useful properties via slot-scope:
props.row: The original row object.props.column: The column object.props.formattedRow: The row data with formatting applied (e.g., formatted dates).Behavior based on mode:
mode: 'span' is used: The header row spans all columns. You typically render a single element using props.row.label.mode is NOT 'span': The header row expects a value for every column. You can use props.column.field to conditionally render different content (like buttons) for specific columns.<vue-good-table
:columns="columns"
:rows="rows"
:group-options="{ enabled: true, headerPosition: 'top' }"
>
<template slot="table-header-row" slot-scope="props">
<span v-if="props.column.field == 'action'">
<button class="fancy-btn">Action</button>
</span>
<span v-else>
{{ props.formattedRow[props.column.field] }}
</span>
</template>
</vue-good-table>Vue-Good-Table's styling is written in Sass. To use the library's styles in your project, you can import the root Sass file directly from your node_modules folder. This allows you to leverage the library's Sass variables and mixins for customization.
@import "../node_modules/vue-good-table/src/styles/style.scss";Use the table-column slot to modify the appearance of column headers (e.g., adding icons).
<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>To create a custom filter UI, use the column-filter slot.
customFilter: true) inside filterOptions in your column definition.updateFilters(column, value) method provided by the slot scope to integrate your custom value with the table's filtering logic.slotFilterField: If you want to display one property but filter based on another (e.g., display name.displayName but filter by name.id), set this key in filterOptions.formatValue: A function used to transform the value before it is used for filtering.{
label: 'Name',
field: 'name.displayName',
filterOptions: {
customFilter: true,
slotFilterField: 'name.id',
formatValue: function (value) {
return valueArray.join(',');
}
}
}<vue-good-table
:columns="columns"
:rows="rows">
<template slot="column-filter" slot-scope="{ column, updateFilters }">
<my-custom-filter
v-if="column.filterOptions.customFilter"
@input="(value) => updateFilters(column, value)"/>
</template>
</vue-good-table>You can add columns that do not exist in your source data by using the table-row slot and checking the props.column.field value.
Note: You must still add these custom fields to your columns definition so the table knows to render the header and space for them.
<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>
// In your column definitions:
{
label: 'Before',
field: 'before'
},
{
label: 'After',
field: 'after'
},If you only need the table in a specific component, import the VueGoodTable component and its CSS directly into that component and register it in the components option.
// import the styles
import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';
// add to component
components: {
VueGoodTable,
}