Question title
How to add column total information to the list
Problem description
In the list, you hope to display the total information of a column, such as sum, average, etc.
Solution
VTable provides aggregation
configuration for configuring data aggregation rules and display positions in the table. You can configure aggregation
to specify global rules for aggregation in options, or configure aggregation
to specify aggregation rules for each column. The following properties need to be configured in aggregation
:
-
aggregationType:
- Sum, set
aggregationType
toAggregationType. SUM
- Average, set
aggregationType
toAggregationType. AVG
- Maximum value, set
aggregationType
toAggregationType. MAX
- Minimum, set
aggregationType
toAggregationType. MIN
- Count, set
aggregationType
toAggregationType. COUNT
- Custom function, set
aggregationType
toAggregationType. CUSTOM
, set custom aggregation logic throughaggregationFun
- Sum, set
aggregationFun: Custom aggregation logic when
aggregationType is AggregationType. CUSTOM
showOnTop: Controls the display position of the aggregated results. The default is
false
, which means the aggregated results are displayed at the bottom of the body. If set totrue
, the aggregated results are displayed at the top of the body.FormatFun: Set the formatting function of aggregate values, and customize the display format of aggregate values.
Code example
const options = {
//......
columns: [
{
aggregation: [
{
aggregationType: VTable.TYPES.AggregationType.MAX,
// showOnTop: true,
formatFun(value) {
return '最高薪资:' + Math.round(value) + '元';
}
}
]
},
// ......
]
};
Results show
Example code: https://www.visactor.io/vtable/demo/list-table-data-analysis/list-table-aggregation-multiple
Related Documents
Basic Table Data Analysis Tutorial: https://www.visactor.io/vtable/guide/data_analysis/list_table_dataAnalysis
Related api: https://www.visactor.io/vtable/option/ListTable#aggregation
Top comments (0)