Header groups
Organize columns under grouped headers to improve table structure and clarity.
Example
Product
Id
Name
Category
Inventory
Id
Name
Informations
Id
Name
Category
Something else
Id
Name
Category
Category
Price Retail
1
Luxurious Bamboo Tuna
Clothing
1
Luxurious Bamboo Tuna
1
Luxurious Bamboo Tuna
Clothing
1
Luxurious Bamboo Tuna
Clothing
Clothing
266.92
2
Fantastic Bronze Table
Sports
2
Fantastic Bronze Table
2
Fantastic Bronze Table
Sports
2
Fantastic Bronze Table
Sports
Sports
124.8
3
Handcrafted Concrete Cheese
Home & Garden
3
Handcrafted Concrete Cheese
3
Handcrafted Concrete Cheese
Home & Garden
3
Handcrafted Concrete Cheese
Home & Garden
Home & Garden
480.58
4
Ergonomic Steel Cheese
Clothing
4
Ergonomic Steel Cheese
4
Ergonomic Steel Cheese
Clothing
4
Ergonomic Steel Cheese
Clothing
Clothing
127.56
5
Sleek Concrete Hat
Sports
5
Sleek Concrete Hat
5
Sleek Concrete Hat
Sports
5
Sleek Concrete Hat
Sports
Sports
77.61
6
Modern Gold Salad
Home & Garden
6
Modern Gold Salad
6
Modern Gold Salad
Home & Garden
6
Modern Gold Salad
Home & Garden
Home & Garden
321.32
7
Gorgeous Aluminum Cheese
Clothing
7
Gorgeous Aluminum Cheese
7
Gorgeous Aluminum Cheese
Clothing
7
Gorgeous Aluminum Cheese
Clothing
Clothing
41.82
8
Handmade Plastic Shirt
Sports
8
Handmade Plastic Shirt
8
Handmade Plastic Shirt
Sports
8
Handmade Plastic Shirt
Sports
Sports
487.32
9
Ergonomic Wooden Keyboard
Sports
9
Ergonomic Wooden Keyboard
9
Ergonomic Wooden Keyboard
Sports
9
Ergonomic Wooden Keyboard
Sports
Sports
485.29
10
Frozen Bamboo Soap
Electronics
10
Frozen Bamboo Soap
10
Frozen Bamboo Soap
Electronics
10
Frozen Bamboo Soap
Electronics
Electronics
165.47
11
Modern Gold Car
Beauty
11
Modern Gold Car
11
Modern Gold Car
Beauty
11
Modern Gold Car
Beauty
Beauty
38.59
12
Fresh Granite Tuna
Beauty
12
Fresh Granite Tuna
12
Fresh Granite Tuna
Beauty
12
Fresh Granite Tuna
Beauty
Beauty
39.8
13
Sleek Marble Gloves
Home & Garden
13
Sleek Marble Gloves
13
Sleek Marble Gloves
Home & Garden
13
Sleek Marble Gloves
Home & Garden
Home & Garden
437.72
14
Sleek Granite Table
Beauty
14
Sleek Granite Table
14
Sleek Granite Table
Beauty
14
Sleek Granite Table
Beauty
Beauty
117.18
15
Incredible Gold Bacon
Electronics
15
Incredible Gold Bacon
15
Incredible Gold Bacon
Electronics
15
Incredible Gold Bacon
Electronics
Electronics
1595.73
16
Bespoke Gold Soap
Electronics
16
Bespoke Gold Soap
16
Bespoke Gold Soap
Electronics
16
Bespoke Gold Soap
Electronics
Electronics
1918.79
17
Fresh Gold Car
Home & Garden
17
Fresh Gold Car
17
Fresh Gold Car
Home & Garden
17
Fresh Gold Car
Home & Garden
Home & Garden
163.19
18
Rustic Cotton Gloves
Sports
18
Rustic Cotton Gloves
18
Rustic Cotton Gloves
Sports
18
Rustic Cotton Gloves
Sports
Sports
33.81
19
Fantastic Metal Shoes
Beauty
19
Fantastic Metal Shoes
19
Fantastic Metal Shoes
Beauty
19
Fantastic Metal Shoes
Beauty
Beauty
146.86
20
Incredible Bronze Chips
Clothing
20
Incredible Bronze Chips
20
Incredible Bronze Chips
Clothing
20
Incredible Bronze Chips
Clothing
Clothing
479.11
21
Generic Gold Salad
Beauty
21
Generic Gold Salad
21
Generic Gold Salad
Beauty
21
Generic Gold Salad
Beauty
Beauty
422.6
22
Bespoke Bamboo Shirt
Clothing
22
Bespoke Bamboo Shirt
22
Bespoke Bamboo Shirt
Clothing
22
Bespoke Bamboo Shirt
Clothing
Clothing
167.28
23
Sleek Granite Fish
Clothing
23
Sleek Granite Fish
23
Sleek Granite Fish
Clothing
23
Sleek Granite Fish
Clothing
Clothing
59.31
24
Electronic Rubber Hat
Beauty
24
Electronic Rubber Hat
24
Electronic Rubber Hat
Beauty
24
Electronic Rubber Hat
Beauty
Beauty
422.07
25
Refined Rubber Shoes
Beauty
25
Refined Rubber Shoes
25
Refined Rubber Shoes
Beauty
25
Refined Rubber Shoes
Beauty
Beauty
336.16
26
Intelligent Bamboo Salad
Clothing
26
Intelligent Bamboo Salad
26
Intelligent Bamboo Salad
Clothing
26
Intelligent Bamboo Salad
Clothing
Clothing
192.3
27
Licensed Metal Gloves
Home & Garden
27
Licensed Metal Gloves
27
Licensed Metal Gloves
Home & Garden
27
Licensed Metal Gloves
Home & Garden
Home & Garden
314.98
28
Awesome Granite Pizza
Beauty
28
Awesome Granite Pizza
28
Awesome Granite Pizza
Beauty
28
Awesome Granite Pizza
Beauty
Beauty
481.09
29
Gorgeous Wooden Chicken
Clothing
29
Gorgeous Wooden Chicken
29
Gorgeous Wooden Chicken
Clothing
29
Gorgeous Wooden Chicken
Clothing
Clothing
364.08
30
Tasty Aluminum Ball
Clothing
30
Tasty Aluminum Ball
30
Tasty Aluminum Ball
Clothing
30
Tasty Aluminum Ball
Clothing
Clothing
50.81
31
Sleek Marble Table
Electronics
31
Sleek Marble Table
31
Sleek Marble Table
Electronics
31
Sleek Marble Table
Electronics
Electronics
1250.65
32
Sleek Cotton Mouse
Home & Garden
32
Sleek Cotton Mouse
32
Sleek Cotton Mouse
Home & Garden
32
Sleek Cotton Mouse
Home & Garden
Home & Garden
457.82
33
Luxurious Rubber Shoes
Sports
33
Luxurious Rubber Shoes
33
Luxurious Rubber Shoes
Sports
33
Luxurious Rubber Shoes
Sports
Sports
257.09
34
Electronic Metal Fish
Clothing
34
Electronic Metal Fish
34
Electronic Metal Fish
Clothing
34
Electronic Metal Fish
Clothing
Clothing
34.28
35
Fantastic Concrete Tuna
Sports
35
Fantastic Concrete Tuna
35
Fantastic Concrete Tuna
Sports
35
Fantastic Concrete Tuna
Sports
Sports
60.85
36
Intelligent Cotton Chips
Sports
36
Intelligent Cotton Chips
36
Intelligent Cotton Chips
Sports
36
Intelligent Cotton Chips
Sports
Sports
277.84
37
Fresh Cotton Keyboard
Clothing
37
Fresh Cotton Keyboard
37
Fresh Cotton Keyboard
Clothing
37
Fresh Cotton Keyboard
Clothing
Clothing
376.51
38
Practical Silk Soap
Sports
38
Practical Silk Soap
38
Practical Silk Soap
Sports
38
Practical Silk Soap
Sports
Sports
187.78
39
Fresh Metal Pants
Electronics
39
Fresh Metal Pants
39
Fresh Metal Pants
Electronics
39
Fresh Metal Pants
Electronics
Electronics
380.82
40
Intelligent Cotton Computer
Sports
40
Intelligent Cotton Computer
40
Intelligent Cotton Computer
Sports
40
Intelligent Cotton Computer
Sports
Sports
126.76
41
Awesome Steel Table
Clothing
41
Awesome Steel Table
41
Awesome Steel Table
Clothing
41
Awesome Steel Table
Clothing
Clothing
388.88
42
Luxurious Metal Keyboard
Electronics
42
Luxurious Metal Keyboard
42
Luxurious Metal Keyboard
Electronics
42
Luxurious Metal Keyboard
Electronics
Electronics
1308.57
43
Elegant Aluminum Chicken
Clothing
43
Elegant Aluminum Chicken
43
Elegant Aluminum Chicken
Clothing
43
Elegant Aluminum Chicken
Clothing
Clothing
106.39
44
Luxurious Wooden Bacon
Home & Garden
44
Luxurious Wooden Bacon
44
Luxurious Wooden Bacon
Home & Garden
44
Luxurious Wooden Bacon
Home & Garden
Home & Garden
364.39
45
Fresh Cotton Towels
Beauty
45
Fresh Cotton Towels
45
Fresh Cotton Towels
Beauty
45
Fresh Cotton Towels
Beauty
Beauty
98.64
46
Modern Cotton Bacon
Home & Garden
46
Modern Cotton Bacon
46
Modern Cotton Bacon
Home & Garden
46
Modern Cotton Bacon
Home & Garden
Home & Garden
354.53
47
Incredible Ceramic Keyboard
Home & Garden
47
Incredible Ceramic Keyboard
47
Incredible Ceramic Keyboard
Home & Garden
47
Incredible Ceramic Keyboard
Home & Garden
Home & Garden
270.2
48
Intelligent Aluminum Fish
Home & Garden
48
Intelligent Aluminum Fish
48
Intelligent Aluminum Fish
Home & Garden
48
Intelligent Aluminum Fish
Home & Garden
Home & Garden
198.58
49
Frozen Bamboo Cheese
Clothing
49
Frozen Bamboo Cheese
49
Frozen Bamboo Cheese
Clothing
49
Frozen Bamboo Cheese
Clothing
Clothing
323.63
50
Frozen Metal Bike
Electronics
50
Frozen Metal Bike
50
Frozen Metal Bike
Electronics
50
Frozen Metal Bike
Electronics
Electronics
903.83
{#each datagrid.columns.getColumns() as column}
{#if column.type === 'group'}
{@render GroupHeader(column)}
{:else}
{@render LeafHeader(column)}
{/if}
{/each}
{#each datagrid.rows.getVisibleBasicRows() as row}
{#each datagrid.columns.getLeafColumns() as column}
{@const cellContent = column.cell ? column.cell({ datagrid, column, row }) : null}
{/each}
{#if cellContent}
{#if typeof cellContent === 'string'}
{@html cellContent}
{:else if isCellComponent(cellContent)}
{/if}
{:else}
{@html getCellContent(column, row.original)}
{/if}
{/each}
{column.header}
{#each column.columns ?? [] as subColumn (subColumn.columnId)}
{#if isGroupColumn(subColumn)}
{@render GroupHeader(subColumn)}
{:else if subColumn.state.visible === true}
{@render LeafHeader(subColumn)}
{/if}
{/each}
{column.header}
{/snippet}