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
Practical Plastic Soap
Clothing
1
Practical Plastic Soap
1
Practical Plastic Soap
Clothing
1
Practical Plastic Soap
Clothing
Clothing
255.41
2
Intelligent Gold Table
Home & Garden
2
Intelligent Gold Table
2
Intelligent Gold Table
Home & Garden
2
Intelligent Gold Table
Home & Garden
Home & Garden
250.12
3
Modern Rubber Cheese
Sports
3
Modern Rubber Cheese
3
Modern Rubber Cheese
Sports
3
Modern Rubber Cheese
Sports
Sports
236.6
4
Soft Marble Cheese
Home & Garden
4
Soft Marble Cheese
4
Soft Marble Cheese
Home & Garden
4
Soft Marble Cheese
Home & Garden
Home & Garden
443.87
5
Electronic Marble Hat
Beauty
5
Electronic Marble Hat
5
Electronic Marble Hat
Beauty
5
Electronic Marble Hat
Beauty
Beauty
413.91
6
Bespoke Bamboo Car
Electronics
6
Bespoke Bamboo Car
6
Bespoke Bamboo Car
Electronics
6
Bespoke Bamboo Car
Electronics
Electronics
1553.96
7
Refined Bronze Chicken
Sports
7
Refined Bronze Chicken
7
Refined Bronze Chicken
Sports
7
Refined Bronze Chicken
Sports
Sports
66.97
8
Handmade Metal Chips
Sports
8
Handmade Metal Chips
8
Handmade Metal Chips
Sports
8
Handmade Metal Chips
Sports
Sports
219.03
9
Oriental Steel Bike
Clothing
9
Oriental Steel Bike
9
Oriental Steel Bike
Clothing
9
Oriental Steel Bike
Clothing
Clothing
229.53
10
Incredible Granite Shirt
Home & Garden
10
Incredible Granite Shirt
10
Incredible Granite Shirt
Home & Garden
10
Incredible Granite Shirt
Home & Garden
Home & Garden
134.63
11
Incredible Rubber Chair
Sports
11
Incredible Rubber Chair
11
Incredible Rubber Chair
Sports
11
Incredible Rubber Chair
Sports
Sports
141.05
12
Licensed Silk Shoes
Sports
12
Licensed Silk Shoes
12
Licensed Silk Shoes
Sports
12
Licensed Silk Shoes
Sports
Sports
491.17
13
Luxurious Silk Towels
Sports
13
Luxurious Silk Towels
13
Luxurious Silk Towels
Sports
13
Luxurious Silk Towels
Sports
Sports
448.46
14
Small Plastic Pants
Home & Garden
14
Small Plastic Pants
14
Small Plastic Pants
Home & Garden
14
Small Plastic Pants
Home & Garden
Home & Garden
472.57
15
Generic Cotton Soap
Sports
15
Generic Cotton Soap
15
Generic Cotton Soap
Sports
15
Generic Cotton Soap
Sports
Sports
451.16
16
Practical Metal Bacon
Home & Garden
16
Practical Metal Bacon
16
Practical Metal Bacon
Home & Garden
16
Practical Metal Bacon
Home & Garden
Home & Garden
184.97
17
Refined Cotton Computer
Beauty
17
Refined Cotton Computer
17
Refined Cotton Computer
Beauty
17
Refined Cotton Computer
Beauty
Beauty
59.15
18
Oriental Bronze Pants
Beauty
18
Oriental Bronze Pants
18
Oriental Bronze Pants
Beauty
18
Oriental Bronze Pants
Beauty
Beauty
417.95
19
Gorgeous Bronze Car
Beauty
19
Gorgeous Bronze Car
19
Gorgeous Bronze Car
Beauty
19
Gorgeous Bronze Car
Beauty
Beauty
252.36
20
Elegant Marble Salad
Home & Garden
20
Elegant Marble Salad
20
Elegant Marble Salad
Home & Garden
20
Elegant Marble Salad
Home & Garden
Home & Garden
204.72
21
Ergonomic Metal Shirt
Electronics
21
Ergonomic Metal Shirt
21
Ergonomic Metal Shirt
Electronics
21
Ergonomic Metal Shirt
Electronics
Electronics
1976.65
22
Handcrafted Metal Hat
Beauty
22
Handcrafted Metal Hat
22
Handcrafted Metal Hat
Beauty
22
Handcrafted Metal Hat
Beauty
Beauty
270.13
23
Small Granite Tuna
Electronics
23
Small Granite Tuna
23
Small Granite Tuna
Electronics
23
Small Granite Tuna
Electronics
Electronics
1689.65
24
Modern Wooden Table
Beauty
24
Modern Wooden Table
24
Modern Wooden Table
Beauty
24
Modern Wooden Table
Beauty
Beauty
216.8
25
Handmade Concrete Table
Home & Garden
25
Handmade Concrete Table
25
Handmade Concrete Table
Home & Garden
25
Handmade Concrete Table
Home & Garden
Home & Garden
415.02
26
Oriental Marble Mouse
Beauty
26
Oriental Marble Mouse
26
Oriental Marble Mouse
Beauty
26
Oriental Marble Mouse
Beauty
Beauty
464.47
27
Practical Cotton Salad
Beauty
27
Practical Cotton Salad
27
Practical Cotton Salad
Beauty
27
Practical Cotton Salad
Beauty
Beauty
102.56
28
Awesome Metal Bike
Home & Garden
28
Awesome Metal Bike
28
Awesome Metal Bike
Home & Garden
28
Awesome Metal Bike
Home & Garden
Home & Garden
20.06
29
Frozen Silk Pants
Sports
29
Frozen Silk Pants
29
Frozen Silk Pants
Sports
29
Frozen Silk Pants
Sports
Sports
415.12
30
Generic Silk Sausages
Clothing
30
Generic Silk Sausages
30
Generic Silk Sausages
Clothing
30
Generic Silk Sausages
Clothing
Clothing
414.76
31
Generic Bamboo Gloves
Clothing
31
Generic Bamboo Gloves
31
Generic Bamboo Gloves
Clothing
31
Generic Bamboo Gloves
Clothing
Clothing
308.54
32
Fantastic Plastic Ball
Beauty
32
Fantastic Plastic Ball
32
Fantastic Plastic Ball
Beauty
32
Fantastic Plastic Ball
Beauty
Beauty
322.73
33
Tasty Ceramic Towels
Electronics
33
Tasty Ceramic Towels
33
Tasty Ceramic Towels
Electronics
33
Tasty Ceramic Towels
Electronics
Electronics
800.97
34
Electronic Granite Chicken
Home & Garden
34
Electronic Granite Chicken
34
Electronic Granite Chicken
Home & Garden
34
Electronic Granite Chicken
Home & Garden
Home & Garden
324.44
35
Rustic Silk Pizza
Sports
35
Rustic Silk Pizza
35
Rustic Silk Pizza
Sports
35
Rustic Silk Pizza
Sports
Sports
436.93
36
Oriental Wooden Bike
Beauty
36
Oriental Wooden Bike
36
Oriental Wooden Bike
Beauty
36
Oriental Wooden Bike
Beauty
Beauty
366.57
37
Bespoke Ceramic Soap
Beauty
37
Bespoke Ceramic Soap
37
Bespoke Ceramic Soap
Beauty
37
Bespoke Ceramic Soap
Beauty
Beauty
336.15
38
Luxurious Silk Gloves
Sports
38
Luxurious Silk Gloves
38
Luxurious Silk Gloves
Sports
38
Luxurious Silk Gloves
Sports
Sports
233.74
39
Tasty Ceramic Pizza
Home & Garden
39
Tasty Ceramic Pizza
39
Tasty Ceramic Pizza
Home & Garden
39
Tasty Ceramic Pizza
Home & Garden
Home & Garden
437.59
40
Small Cotton Sausages
Beauty
40
Small Cotton Sausages
40
Small Cotton Sausages
Beauty
40
Small Cotton Sausages
Beauty
Beauty
329.42
41
Recycled Concrete Shirt
Clothing
41
Recycled Concrete Shirt
41
Recycled Concrete Shirt
Clothing
41
Recycled Concrete Shirt
Clothing
Clothing
180.93
42
Electronic Ceramic Pants
Sports
42
Electronic Ceramic Pants
42
Electronic Ceramic Pants
Sports
42
Electronic Ceramic Pants
Sports
Sports
397.7
43
Unbranded Wooden Salad
Beauty
43
Unbranded Wooden Salad
43
Unbranded Wooden Salad
Beauty
43
Unbranded Wooden Salad
Beauty
Beauty
328.51
44
Ergonomic Gold Table
Electronics
44
Ergonomic Gold Table
44
Ergonomic Gold Table
Electronics
44
Ergonomic Gold Table
Electronics
Electronics
338.13
45
Sleek Marble Salad
Clothing
45
Sleek Marble Salad
45
Sleek Marble Salad
Clothing
45
Sleek Marble Salad
Clothing
Clothing
392.07
46
Fresh Metal Table
Clothing
46
Fresh Metal Table
46
Fresh Metal Table
Clothing
46
Fresh Metal Table
Clothing
Clothing
294.93
47
Awesome Steel Ball
Beauty
47
Awesome Steel Ball
47
Awesome Steel Ball
Beauty
47
Awesome Steel Ball
Beauty
Beauty
334.85
48
Oriental Bamboo Shirt
Sports
48
Oriental Bamboo Shirt
48
Oriental Bamboo Shirt
Sports
48
Oriental Bamboo Shirt
Sports
Sports
306.31
49
Intelligent Concrete Chicken
Home & Garden
49
Intelligent Concrete Chicken
49
Intelligent Concrete Chicken
Home & Garden
49
Intelligent Concrete Chicken
Home & Garden
Home & Garden
370.05
50
Incredible Rubber Chicken
Clothing
50
Incredible Rubber Chicken
50
Incredible Rubber Chicken
Clothing
50
Incredible Rubber Chicken
Clothing
Clothing
412.62
{#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}