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
Oriental Silk Bacon
Home & Garden
1
Oriental Silk Bacon
1
Oriental Silk Bacon
Home & Garden
1
Oriental Silk Bacon
Home & Garden
Home & Garden
351.72
2
Gorgeous Gold Fish
Home & Garden
2
Gorgeous Gold Fish
2
Gorgeous Gold Fish
Home & Garden
2
Gorgeous Gold Fish
Home & Garden
Home & Garden
70
3
Ergonomic Plastic Cheese
Sports
3
Ergonomic Plastic Cheese
3
Ergonomic Plastic Cheese
Sports
3
Ergonomic Plastic Cheese
Sports
Sports
25.47
4
Oriental Bronze Shirt
Electronics
4
Oriental Bronze Shirt
4
Oriental Bronze Shirt
Electronics
4
Oriental Bronze Shirt
Electronics
Electronics
659.57
5
Fresh Ceramic Sausages
Electronics
5
Fresh Ceramic Sausages
5
Fresh Ceramic Sausages
Electronics
5
Fresh Ceramic Sausages
Electronics
Electronics
1430.55
6
Soft Steel Mouse
Sports
6
Soft Steel Mouse
6
Soft Steel Mouse
Sports
6
Soft Steel Mouse
Sports
Sports
221.6
7
Ergonomic Steel Mouse
Sports
7
Ergonomic Steel Mouse
7
Ergonomic Steel Mouse
Sports
7
Ergonomic Steel Mouse
Sports
Sports
299.3
8
Modern Ceramic Table
Home & Garden
8
Modern Ceramic Table
8
Modern Ceramic Table
Home & Garden
8
Modern Ceramic Table
Home & Garden
Home & Garden
274.36
9
Sleek Concrete Car
Clothing
9
Sleek Concrete Car
9
Sleek Concrete Car
Clothing
9
Sleek Concrete Car
Clothing
Clothing
124.56
10
Refined Plastic Towels
Electronics
10
Refined Plastic Towels
10
Refined Plastic Towels
Electronics
10
Refined Plastic Towels
Electronics
Electronics
1695.04
11
Incredible Wooden Gloves
Electronics
11
Incredible Wooden Gloves
11
Incredible Wooden Gloves
Electronics
11
Incredible Wooden Gloves
Electronics
Electronics
1014.38
12
Handmade Concrete Hat
Beauty
12
Handmade Concrete Hat
12
Handmade Concrete Hat
Beauty
12
Handmade Concrete Hat
Beauty
Beauty
456.37
13
Bespoke Granite Computer
Clothing
13
Bespoke Granite Computer
13
Bespoke Granite Computer
Clothing
13
Bespoke Granite Computer
Clothing
Clothing
211.92
14
Handcrafted Aluminum Towels
Electronics
14
Handcrafted Aluminum Towels
14
Handcrafted Aluminum Towels
Electronics
14
Handcrafted Aluminum Towels
Electronics
Electronics
1447.97
15
Frozen Wooden Bacon
Home & Garden
15
Frozen Wooden Bacon
15
Frozen Wooden Bacon
Home & Garden
15
Frozen Wooden Bacon
Home & Garden
Home & Garden
56.68
16
Bespoke Cotton Pizza
Sports
16
Bespoke Cotton Pizza
16
Bespoke Cotton Pizza
Sports
16
Bespoke Cotton Pizza
Sports
Sports
191.31
17
Practical Concrete Shoes
Beauty
17
Practical Concrete Shoes
17
Practical Concrete Shoes
Beauty
17
Practical Concrete Shoes
Beauty
Beauty
212.74
18
Oriental Metal Salad
Sports
18
Oriental Metal Salad
18
Oriental Metal Salad
Sports
18
Oriental Metal Salad
Sports
Sports
21.39
19
Elegant Steel Ball
Home & Garden
19
Elegant Steel Ball
19
Elegant Steel Ball
Home & Garden
19
Elegant Steel Ball
Home & Garden
Home & Garden
166.33
20
Fresh Gold Hat
Clothing
20
Fresh Gold Hat
20
Fresh Gold Hat
Clothing
20
Fresh Gold Hat
Clothing
Clothing
276.24
21
Bespoke Aluminum Salad
Sports
21
Bespoke Aluminum Salad
21
Bespoke Aluminum Salad
Sports
21
Bespoke Aluminum Salad
Sports
Sports
72.36
22
Fantastic Ceramic Cheese
Sports
22
Fantastic Ceramic Cheese
22
Fantastic Ceramic Cheese
Sports
22
Fantastic Ceramic Cheese
Sports
Sports
340.51
23
Awesome Cotton Pants
Sports
23
Awesome Cotton Pants
23
Awesome Cotton Pants
Sports
23
Awesome Cotton Pants
Sports
Sports
50.67
24
Bespoke Rubber Bike
Sports
24
Bespoke Rubber Bike
24
Bespoke Rubber Bike
Sports
24
Bespoke Rubber Bike
Sports
Sports
348.38
25
Fantastic Granite Hat
Electronics
25
Fantastic Granite Hat
25
Fantastic Granite Hat
Electronics
25
Fantastic Granite Hat
Electronics
Electronics
881.81
26
Soft Marble Tuna
Electronics
26
Soft Marble Tuna
26
Soft Marble Tuna
Electronics
26
Soft Marble Tuna
Electronics
Electronics
1274.35
27
Electronic Granite Chips
Sports
27
Electronic Granite Chips
27
Electronic Granite Chips
Sports
27
Electronic Granite Chips
Sports
Sports
141.72
28
Ergonomic Bamboo Fish
Beauty
28
Ergonomic Bamboo Fish
28
Ergonomic Bamboo Fish
Beauty
28
Ergonomic Bamboo Fish
Beauty
Beauty
271.11
29
Intelligent Wooden Soap
Electronics
29
Intelligent Wooden Soap
29
Intelligent Wooden Soap
Electronics
29
Intelligent Wooden Soap
Electronics
Electronics
1903.76
30
Elegant Steel Bacon
Beauty
30
Elegant Steel Bacon
30
Elegant Steel Bacon
Beauty
30
Elegant Steel Bacon
Beauty
Beauty
380.98
31
Generic Silk Hat
Beauty
31
Generic Silk Hat
31
Generic Silk Hat
Beauty
31
Generic Silk Hat
Beauty
Beauty
394.59
32
Gorgeous Plastic Hat
Home & Garden
32
Gorgeous Plastic Hat
32
Gorgeous Plastic Hat
Home & Garden
32
Gorgeous Plastic Hat
Home & Garden
Home & Garden
303.63
33
Practical Cotton Ball
Sports
33
Practical Cotton Ball
33
Practical Cotton Ball
Sports
33
Practical Cotton Ball
Sports
Sports
301.62
34
Electronic Gold Ball
Sports
34
Electronic Gold Ball
34
Electronic Gold Ball
Sports
34
Electronic Gold Ball
Sports
Sports
418.12
35
Frozen Ceramic Keyboard
Home & Garden
35
Frozen Ceramic Keyboard
35
Frozen Ceramic Keyboard
Home & Garden
35
Frozen Ceramic Keyboard
Home & Garden
Home & Garden
39.15
36
Oriental Metal Hat
Clothing
36
Oriental Metal Hat
36
Oriental Metal Hat
Clothing
36
Oriental Metal Hat
Clothing
Clothing
156.82
37
Awesome Ceramic Mouse
Home & Garden
37
Awesome Ceramic Mouse
37
Awesome Ceramic Mouse
Home & Garden
37
Awesome Ceramic Mouse
Home & Garden
Home & Garden
64.01
38
Fresh Cotton Towels
Clothing
38
Fresh Cotton Towels
38
Fresh Cotton Towels
Clothing
38
Fresh Cotton Towels
Clothing
Clothing
406.72
39
Refined Silk Bacon
Sports
39
Refined Silk Bacon
39
Refined Silk Bacon
Sports
39
Refined Silk Bacon
Sports
Sports
50.91
40
Soft Bronze Chicken
Sports
40
Soft Bronze Chicken
40
Soft Bronze Chicken
Sports
40
Soft Bronze Chicken
Sports
Sports
471.38
41
Small Granite Chips
Clothing
41
Small Granite Chips
41
Small Granite Chips
Clothing
41
Small Granite Chips
Clothing
Clothing
98.05
42
Bespoke Gold Salad
Electronics
42
Bespoke Gold Salad
42
Bespoke Gold Salad
Electronics
42
Bespoke Gold Salad
Electronics
Electronics
1712.74
43
Elegant Rubber Sausages
Sports
43
Elegant Rubber Sausages
43
Elegant Rubber Sausages
Sports
43
Elegant Rubber Sausages
Sports
Sports
169.43
44
Elegant Steel Salad
Sports
44
Elegant Steel Salad
44
Elegant Steel Salad
Sports
44
Elegant Steel Salad
Sports
Sports
418.69
45
Unbranded Ceramic Keyboard
Sports
45
Unbranded Ceramic Keyboard
45
Unbranded Ceramic Keyboard
Sports
45
Unbranded Ceramic Keyboard
Sports
Sports
495.45
46
Handmade Bamboo Chicken
Electronics
46
Handmade Bamboo Chicken
46
Handmade Bamboo Chicken
Electronics
46
Handmade Bamboo Chicken
Electronics
Electronics
1741.22
47
Awesome Wooden Salad
Sports
47
Awesome Wooden Salad
47
Awesome Wooden Salad
Sports
47
Awesome Wooden Salad
Sports
Sports
395.81
48
Refined Gold Car
Clothing
48
Refined Gold Car
48
Refined Gold Car
Clothing
48
Refined Gold Car
Clothing
Clothing
184.22
49
Unbranded Bamboo Towels
Home & Garden
49
Unbranded Bamboo Towels
49
Unbranded Bamboo Towels
Home & Garden
49
Unbranded Bamboo Towels
Home & Garden
Home & Garden
26.09
50
Soft Ceramic Chicken
Sports
50
Soft Ceramic Chicken
50
Soft Ceramic Chicken
Sports
50
Soft Ceramic Chicken
Sports
Sports
476.55
{#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}