Table - Merge & Summary

The Table component supports row/column merging and displaying summary rows.

Merge Rows or Columns

Implement row or column merging via the span-method property.

Merge Rows

Merge Header

Define multi-level headers via the children property of columns. Set label and children for parent columns, while leaf children are the actual data columns. The table automatically calculates colspan and rowspan to generate grouped headers.

Merge Header

Case Study: Permission Management Table

Combine span-method row merging with the column render function to implement a common Permission Configuration Matrix. The Module and Feature columns automatically merge rows with identical values. Selection for types and specific permissions are implemented via checkboxes rendered with h(), supporting four-level selection linkage across modules, features, types, and permissions.

Permission Management Table

Summary Footer Row

Configure the summary row via summary-config and set method for custom summary logic.

Summary Footer Row

API

Multi-level Header (Merge Header)

Implement multi-level headers via the children property of column configurations.

Property	Description	Type	Default
label	Title text of the grouped header	string	—
children	Child column configurations (supports nested multi-layers)	TableColumn[]	—
headerAlign	Header alignment	'left' | 'center' | 'right'	'center' (Grouped columns default to center)
headerClassName	Custom header class name	string	—
headerStyle	Custom header style	CSSProperties	—

Note: Parent columns (those with children) only need a label and do not require a prop. colspan and rowspan are automatically calculated by the component.

span-method

Parameter	Description	Type
row	Current row data	Record<string, unknown>
column	Current column configuration	TableColumn
rowIndex	Current row index	number
columnIndex	Current column index	number

Return Value: { rowspan: number, colspan: number } or [rowspan, colspan]

• rowspan: 0, colspan: 0 indicates the cell is merged (not rendered)
• rowspan: n means spanning n rows, colspan: n means spanning n columns

SummaryConfig

Property	Description	Type	Default
text	Text of the first column in the summary row	string	'Total'
position	Summary row position	'top' | 'bottom'	'bottom'
fixed	Whether to fix the summary row	boolean	false
method	Summary calculation method	({ columns, data }) => Array<string | number | VNode>	—
className	Summary row class name	string | ((params) => string)	—
style	Summary row style	CSSProperties | ((params) => CSSProperties)	—

Column render Function

Parameter	Description	Type
row	Current row data	Record<string, unknown>
column	Current column configuration	TableColumn
rowIndex	Current row index	number
cellValue	Current cell value	unknown

Return Value: VNode (Create via Vue h() function)