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
Generic Concrete Pizza
Sports
1
Generic Concrete Pizza
1
Generic Concrete Pizza
Sports
1
Generic Concrete Pizza
Sports
Sports
463.16
2
Sleek Granite Computer
Sports
2
Sleek Granite Computer
2
Sleek Granite Computer
Sports
2
Sleek Granite Computer
Sports
Sports
286.58
3
Gorgeous Steel Chicken
Sports
3
Gorgeous Steel Chicken
3
Gorgeous Steel Chicken
Sports
3
Gorgeous Steel Chicken
Sports
Sports
14.94
4
Modern Ceramic Cheese
Clothing
4
Modern Ceramic Cheese
4
Modern Ceramic Cheese
Clothing
4
Modern Ceramic Cheese
Clothing
Clothing
358.83
5
Tasty Concrete Ball
Home & Garden
5
Tasty Concrete Ball
5
Tasty Concrete Ball
Home & Garden
5
Tasty Concrete Ball
Home & Garden
Home & Garden
57.13
6
Practical Cotton Chicken
Clothing
6
Practical Cotton Chicken
6
Practical Cotton Chicken
Clothing
6
Practical Cotton Chicken
Clothing
Clothing
345.04
7
Intelligent Bronze Mouse
Electronics
7
Intelligent Bronze Mouse
7
Intelligent Bronze Mouse
Electronics
7
Intelligent Bronze Mouse
Electronics
Electronics
910.28
8
Soft Cotton Chicken
Beauty
8
Soft Cotton Chicken
8
Soft Cotton Chicken
Beauty
8
Soft Cotton Chicken
Beauty
Beauty
450.26
9
Tasty Wooden Salad
Beauty
9
Tasty Wooden Salad
9
Tasty Wooden Salad
Beauty
9
Tasty Wooden Salad
Beauty
Beauty
214.6
10
Ergonomic Steel Keyboard
Beauty
10
Ergonomic Steel Keyboard
10
Ergonomic Steel Keyboard
Beauty
10
Ergonomic Steel Keyboard
Beauty
Beauty
141.71
11
Unbranded Rubber Shirt
Clothing
11
Unbranded Rubber Shirt
11
Unbranded Rubber Shirt
Clothing
11
Unbranded Rubber Shirt
Clothing
Clothing
44.46
12
Refined Steel Car
Electronics
12
Refined Steel Car
12
Refined Steel Car
Electronics
12
Refined Steel Car
Electronics
Electronics
305.75
13
Awesome Bamboo Bike
Clothing
13
Awesome Bamboo Bike
13
Awesome Bamboo Bike
Clothing
13
Awesome Bamboo Bike
Clothing
Clothing
471.25
14
Luxurious Granite Shoes
Sports
14
Luxurious Granite Shoes
14
Luxurious Granite Shoes
Sports
14
Luxurious Granite Shoes
Sports
Sports
280.1
15
Electronic Marble Gloves
Beauty
15
Electronic Marble Gloves
15
Electronic Marble Gloves
Beauty
15
Electronic Marble Gloves
Beauty
Beauty
353.28
16
Ergonomic Bamboo Bike
Home & Garden
16
Ergonomic Bamboo Bike
16
Ergonomic Bamboo Bike
Home & Garden
16
Ergonomic Bamboo Bike
Home & Garden
Home & Garden
165.86
17
Small Wooden Keyboard
Home & Garden
17
Small Wooden Keyboard
17
Small Wooden Keyboard
Home & Garden
17
Small Wooden Keyboard
Home & Garden
Home & Garden
15.78
18
Electronic Rubber Soap
Electronics
18
Electronic Rubber Soap
18
Electronic Rubber Soap
Electronics
18
Electronic Rubber Soap
Electronics
Electronics
1759.67
19
Fantastic Bronze Hat
Sports
19
Fantastic Bronze Hat
19
Fantastic Bronze Hat
Sports
19
Fantastic Bronze Hat
Sports
Sports
251.59
20
Intelligent Bamboo Table
Beauty
20
Intelligent Bamboo Table
20
Intelligent Bamboo Table
Beauty
20
Intelligent Bamboo Table
Beauty
Beauty
349.49
21
Elegant Plastic Soap
Home & Garden
21
Elegant Plastic Soap
21
Elegant Plastic Soap
Home & Garden
21
Elegant Plastic Soap
Home & Garden
Home & Garden
235.74
22
Bespoke Wooden Car
Home & Garden
22
Bespoke Wooden Car
22
Bespoke Wooden Car
Home & Garden
22
Bespoke Wooden Car
Home & Garden
Home & Garden
225.91
23
Ergonomic Bronze Computer
Home & Garden
23
Ergonomic Bronze Computer
23
Ergonomic Bronze Computer
Home & Garden
23
Ergonomic Bronze Computer
Home & Garden
Home & Garden
406.45
24
Bespoke Plastic Soap
Electronics
24
Bespoke Plastic Soap
24
Bespoke Plastic Soap
Electronics
24
Bespoke Plastic Soap
Electronics
Electronics
799.8
25
Handmade Wooden Pants
Beauty
25
Handmade Wooden Pants
25
Handmade Wooden Pants
Beauty
25
Handmade Wooden Pants
Beauty
Beauty
129.27
26
Fantastic Plastic Chicken
Clothing
26
Fantastic Plastic Chicken
26
Fantastic Plastic Chicken
Clothing
26
Fantastic Plastic Chicken
Clothing
Clothing
371.94
27
Awesome Ceramic Shirt
Clothing
27
Awesome Ceramic Shirt
27
Awesome Ceramic Shirt
Clothing
27
Awesome Ceramic Shirt
Clothing
Clothing
28.75
28
Tasty Rubber Fish
Home & Garden
28
Tasty Rubber Fish
28
Tasty Rubber Fish
Home & Garden
28
Tasty Rubber Fish
Home & Garden
Home & Garden
91.67
29
Fresh Cotton Salad
Home & Garden
29
Fresh Cotton Salad
29
Fresh Cotton Salad
Home & Garden
29
Fresh Cotton Salad
Home & Garden
Home & Garden
308.6
30
Frozen Concrete Pizza
Electronics
30
Frozen Concrete Pizza
30
Frozen Concrete Pizza
Electronics
30
Frozen Concrete Pizza
Electronics
Electronics
1559.79
31
Recycled Rubber Chips
Electronics
31
Recycled Rubber Chips
31
Recycled Rubber Chips
Electronics
31
Recycled Rubber Chips
Electronics
Electronics
1566.09
32
Ergonomic Rubber Bike
Beauty
32
Ergonomic Rubber Bike
32
Ergonomic Rubber Bike
Beauty
32
Ergonomic Rubber Bike
Beauty
Beauty
304.54
33
Handcrafted Cotton Chicken
Clothing
33
Handcrafted Cotton Chicken
33
Handcrafted Cotton Chicken
Clothing
33
Handcrafted Cotton Chicken
Clothing
Clothing
427.61
34
Handmade Granite Salad
Electronics
34
Handmade Granite Salad
34
Handmade Granite Salad
Electronics
34
Handmade Granite Salad
Electronics
Electronics
456.23
35
Elegant Aluminum Shoes
Clothing
35
Elegant Aluminum Shoes
35
Elegant Aluminum Shoes
Clothing
35
Elegant Aluminum Shoes
Clothing
Clothing
241.37
36
Elegant Concrete Shirt
Home & Garden
36
Elegant Concrete Shirt
36
Elegant Concrete Shirt
Home & Garden
36
Elegant Concrete Shirt
Home & Garden
Home & Garden
155.85
37
Fresh Granite Computer
Sports
37
Fresh Granite Computer
37
Fresh Granite Computer
Sports
37
Fresh Granite Computer
Sports
Sports
272.22
38
Bespoke Wooden Ball
Beauty
38
Bespoke Wooden Ball
38
Bespoke Wooden Ball
Beauty
38
Bespoke Wooden Ball
Beauty
Beauty
489.74
39
Sleek Marble Chips
Home & Garden
39
Sleek Marble Chips
39
Sleek Marble Chips
Home & Garden
39
Sleek Marble Chips
Home & Garden
Home & Garden
147.53
40
Sleek Plastic Chips
Electronics
40
Sleek Plastic Chips
40
Sleek Plastic Chips
Electronics
40
Sleek Plastic Chips
Electronics
Electronics
1879.02
41
Frozen Aluminum Towels
Beauty
41
Frozen Aluminum Towels
41
Frozen Aluminum Towels
Beauty
41
Frozen Aluminum Towels
Beauty
Beauty
114
42
Fresh Bamboo Keyboard
Home & Garden
42
Fresh Bamboo Keyboard
42
Fresh Bamboo Keyboard
Home & Garden
42
Fresh Bamboo Keyboard
Home & Garden
Home & Garden
146.99
43
Awesome Marble Chicken
Clothing
43
Awesome Marble Chicken
43
Awesome Marble Chicken
Clothing
43
Awesome Marble Chicken
Clothing
Clothing
249.66
44
Bespoke Wooden Fish
Electronics
44
Bespoke Wooden Fish
44
Bespoke Wooden Fish
Electronics
44
Bespoke Wooden Fish
Electronics
Electronics
752.19
45
Elegant Rubber Gloves
Beauty
45
Elegant Rubber Gloves
45
Elegant Rubber Gloves
Beauty
45
Elegant Rubber Gloves
Beauty
Beauty
93.61
46
Recycled Cotton Ball
Sports
46
Recycled Cotton Ball
46
Recycled Cotton Ball
Sports
46
Recycled Cotton Ball
Sports
Sports
300.35
47
Licensed Bronze Keyboard
Beauty
47
Licensed Bronze Keyboard
47
Licensed Bronze Keyboard
Beauty
47
Licensed Bronze Keyboard
Beauty
Beauty
285.73
48
Awesome Wooden Hat
Electronics
48
Awesome Wooden Hat
48
Awesome Wooden Hat
Electronics
48
Awesome Wooden Hat
Electronics
Electronics
1618.88
49
Recycled Steel Gloves
Sports
49
Recycled Steel Gloves
49
Recycled Steel Gloves
Sports
49
Recycled Steel Gloves
Sports
Sports
221.06
50
Elegant Ceramic Soap
Clothing
50
Elegant Ceramic Soap
50
Elegant Ceramic Soap
Clothing
50
Elegant Ceramic Soap
Clothing
Clothing
375.23
{#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}