Table - Grouped Header

When the data structure is complex, grouped headers can be used to display hierarchical relationships.

Basic Grouped Header

Simply add the children property in column configuration to easily implement grouped headers. The underlying layer automatically calculates rowspan and colspan based on data nesting depth.

Date	Delivery Info
	Name	Address
		Province	City	Detail Address	Zip

2024-05-01	John	Guangdong	Shenzhen	Nanshan	518000
2024-05-02	Jane	Beijing	Beijing	Chaoyang	100000
2024-05-03	Mike	Shanghai	Shanghai	Pudong	200120
2024-05-04	Sarah	Guangdong	Guangzhou	Tianhe	510000

Basic Grouped Header

Multi-Level Header (3+)

children supports unlimited nesting levels for extremely complex header structures. The table uses a high-performance recursive restructuring algorithm internally, ensuring smooth rendering performance even with deep nesting.

Project Name	R&D Metrics
	Progress Tracking		Quality Assurance
	Dev Progress (%)	Test Progress (%)	Bug Count	Quality Level

Core Engine	88	75	12	A
UI Framework	95	90	3	S
Data Center	70	45	25	B

Multi-Level Nested Header

Grouped Header with Row/Column Merge

Grouped headers work perfectly with span-method. Often used to display categorized data with hierarchical relationships, making reports more readable through header grouping and cell merging.

Product Category		Product Details
Category	Subcategory	Name	Price (USD)	Stock

Office Supplies	Writing Tools	Pen	5	100
		Ballpoint Pen	2	200
	Paper	A4 Paper	25	50
Electronics	Peripherals	Mouse	50	80
		Keyboard	120	30

Grouped Header with Row Merge

Collapsible Grouped Header

Using Vue reactive features and computed properties, you can implement dynamically expandable/collapsible grouped headers. This is very useful for reports that need to display many detailed metrics while keeping the interface clean.

Employee Name	Performance Details
	Total Score

John	88
Jane	85
Mike	95

Dynamic Expand/Collapse Header

API

The following properties are supported in the TableColumn interface:

Property	Description	Type	Default
key	Column unique identifier	string	—
prop	Column field name	string	—
label	Column title	string	—
width	Column width	number | string	—
minWidth	Min column width	number | string	—
maxWidth	Max column width	number | string	—
align	Content alignment	'left' | 'center' | 'right'	'left'
headerAlign	Header alignment	'left' | 'center' | 'right'	—
fixed	Fixed column	'left' | 'right' | true	—
sortable	Whether sortable	boolean | 'custom'	false
resizable	Whether column width is resizable	boolean	true
showOverflowTooltip	Whether to show overflow tooltip	boolean | object	false
className	Column class name	string	—
headerClassName	Header class name	string	—
style	Column style	CSSProperties	—
headerStyle	Header style	CSSProperties	—
visible	Whether visible	boolean	true
children	Sub-column configuration (for grouped headers)	TableColumn[]	—
type	Column type	'selection' | 'index' | 'expand' | 'radio'	—
render	Custom cell render	(params) => VNode	—
headerRender	Custom header render	(params) => VNode	—
indexMethod	Custom method for index column	(index: number) => number | string	—
selectable	Checkbox selectable function	(row, index) => boolean	—
sortBy	Specify sort field	string | ((row) => unknown)	—
sortMethod	Custom sort method	(a, b, order) => number	—
ellipsis	Ellipsis configuration	boolean | EllipsisConfig	false
formatter	Cell formatter method	(row, column, cellValue, index) => string | VNode	—

Notes:

1. Columns with children set will have their prop property ignored, as the column only serves as a grouping container.
2. The fixed property is recommended to be set on the outermost layer (e.g., "Date" column in the example) or the bottom-most data columns; do not repeat the fixed property for middle grouping columns.