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
Sleek Plastic Computer
Beauty
1
Sleek Plastic Computer
1
Sleek Plastic Computer
Beauty
1
Sleek Plastic Computer
Beauty
Beauty
114.71
2
Generic Bronze Towels
Clothing
2
Generic Bronze Towels
2
Generic Bronze Towels
Clothing
2
Generic Bronze Towels
Clothing
Clothing
215.7
3
Incredible Granite Chair
Home & Garden
3
Incredible Granite Chair
3
Incredible Granite Chair
Home & Garden
3
Incredible Granite Chair
Home & Garden
Home & Garden
372.47
4
Oriental Metal Pants
Electronics
4
Oriental Metal Pants
4
Oriental Metal Pants
Electronics
4
Oriental Metal Pants
Electronics
Electronics
490.23
5
Fantastic Ceramic Bacon
Sports
5
Fantastic Ceramic Bacon
5
Fantastic Ceramic Bacon
Sports
5
Fantastic Ceramic Bacon
Sports
Sports
260.04
6
Luxurious Ceramic Gloves
Clothing
6
Luxurious Ceramic Gloves
6
Luxurious Ceramic Gloves
Clothing
6
Luxurious Ceramic Gloves
Clothing
Clothing
477.12
7
Gorgeous Steel Bacon
Home & Garden
7
Gorgeous Steel Bacon
7
Gorgeous Steel Bacon
Home & Garden
7
Gorgeous Steel Bacon
Home & Garden
Home & Garden
267.37
8
Tasty Silk Fish
Electronics
8
Tasty Silk Fish
8
Tasty Silk Fish
Electronics
8
Tasty Silk Fish
Electronics
Electronics
1722.59
9
Fresh Silk Shoes
Electronics
9
Fresh Silk Shoes
9
Fresh Silk Shoes
Electronics
9
Fresh Silk Shoes
Electronics
Electronics
1404.24
10
Practical Aluminum Mouse
Electronics
10
Practical Aluminum Mouse
10
Practical Aluminum Mouse
Electronics
10
Practical Aluminum Mouse
Electronics
Electronics
1948.73
11
Fresh Bamboo Salad
Clothing
11
Fresh Bamboo Salad
11
Fresh Bamboo Salad
Clothing
11
Fresh Bamboo Salad
Clothing
Clothing
217.56
12
Modern Bamboo Towels
Sports
12
Modern Bamboo Towels
12
Modern Bamboo Towels
Sports
12
Modern Bamboo Towels
Sports
Sports
96.43
13
Generic Cotton Salad
Clothing
13
Generic Cotton Salad
13
Generic Cotton Salad
Clothing
13
Generic Cotton Salad
Clothing
Clothing
159.33
14
Rustic Concrete Gloves
Home & Garden
14
Rustic Concrete Gloves
14
Rustic Concrete Gloves
Home & Garden
14
Rustic Concrete Gloves
Home & Garden
Home & Garden
165.69
15
Modern Rubber Pants
Sports
15
Modern Rubber Pants
15
Modern Rubber Pants
Sports
15
Modern Rubber Pants
Sports
Sports
371.23
16
Sleek Steel Chicken
Clothing
16
Sleek Steel Chicken
16
Sleek Steel Chicken
Clothing
16
Sleek Steel Chicken
Clothing
Clothing
200.27
17
Gorgeous Cotton Mouse
Beauty
17
Gorgeous Cotton Mouse
17
Gorgeous Cotton Mouse
Beauty
17
Gorgeous Cotton Mouse
Beauty
Beauty
78.89
18
Awesome Rubber Cheese
Clothing
18
Awesome Rubber Cheese
18
Awesome Rubber Cheese
Clothing
18
Awesome Rubber Cheese
Clothing
Clothing
265.11
19
Unbranded Silk Chips
Beauty
19
Unbranded Silk Chips
19
Unbranded Silk Chips
Beauty
19
Unbranded Silk Chips
Beauty
Beauty
183.68
20
Small Steel Shirt
Beauty
20
Small Steel Shirt
20
Small Steel Shirt
Beauty
20
Small Steel Shirt
Beauty
Beauty
446.24
21
Elegant Bronze Table
Home & Garden
21
Elegant Bronze Table
21
Elegant Bronze Table
Home & Garden
21
Elegant Bronze Table
Home & Garden
Home & Garden
466.11
22
Incredible Wooden Keyboard
Electronics
22
Incredible Wooden Keyboard
22
Incredible Wooden Keyboard
Electronics
22
Incredible Wooden Keyboard
Electronics
Electronics
469.46
23
Luxurious Bamboo Fish
Beauty
23
Luxurious Bamboo Fish
23
Luxurious Bamboo Fish
Beauty
23
Luxurious Bamboo Fish
Beauty
Beauty
443.38
24
Elegant Concrete Sausages
Sports
24
Elegant Concrete Sausages
24
Elegant Concrete Sausages
Sports
24
Elegant Concrete Sausages
Sports
Sports
174.17
25
Awesome Plastic Tuna
Beauty
25
Awesome Plastic Tuna
25
Awesome Plastic Tuna
Beauty
25
Awesome Plastic Tuna
Beauty
Beauty
170.54
26
Oriental Aluminum Chicken
Electronics
26
Oriental Aluminum Chicken
26
Oriental Aluminum Chicken
Electronics
26
Oriental Aluminum Chicken
Electronics
Electronics
1790.59
27
Oriental Plastic Ball
Home & Garden
27
Oriental Plastic Ball
27
Oriental Plastic Ball
Home & Garden
27
Oriental Plastic Ball
Home & Garden
Home & Garden
404.68
28
Luxurious Bronze Soap
Sports
28
Luxurious Bronze Soap
28
Luxurious Bronze Soap
Sports
28
Luxurious Bronze Soap
Sports
Sports
352.5
29
Tasty Silk Chair
Beauty
29
Tasty Silk Chair
29
Tasty Silk Chair
Beauty
29
Tasty Silk Chair
Beauty
Beauty
331.38
30
Awesome Ceramic Shoes
Clothing
30
Awesome Ceramic Shoes
30
Awesome Ceramic Shoes
Clothing
30
Awesome Ceramic Shoes
Clothing
Clothing
270.15
31
Soft Plastic Computer
Home & Garden
31
Soft Plastic Computer
31
Soft Plastic Computer
Home & Garden
31
Soft Plastic Computer
Home & Garden
Home & Garden
125.79
32
Awesome Steel Chicken
Clothing
32
Awesome Steel Chicken
32
Awesome Steel Chicken
Clothing
32
Awesome Steel Chicken
Clothing
Clothing
302.95
33
Licensed Metal Table
Clothing
33
Licensed Metal Table
33
Licensed Metal Table
Clothing
33
Licensed Metal Table
Clothing
Clothing
403.71
34
Bespoke Granite Table
Beauty
34
Bespoke Granite Table
34
Bespoke Granite Table
Beauty
34
Bespoke Granite Table
Beauty
Beauty
189.04
35
Handcrafted Ceramic Mouse
Clothing
35
Handcrafted Ceramic Mouse
35
Handcrafted Ceramic Mouse
Clothing
35
Handcrafted Ceramic Mouse
Clothing
Clothing
166.38
36
Frozen Marble Mouse
Electronics
36
Frozen Marble Mouse
36
Frozen Marble Mouse
Electronics
36
Frozen Marble Mouse
Electronics
Electronics
830.08
37
Frozen Concrete Cheese
Home & Garden
37
Frozen Concrete Cheese
37
Frozen Concrete Cheese
Home & Garden
37
Frozen Concrete Cheese
Home & Garden
Home & Garden
349.59
38
Recycled Silk Soap
Sports
38
Recycled Silk Soap
38
Recycled Silk Soap
Sports
38
Recycled Silk Soap
Sports
Sports
36.46
39
Luxurious Gold Fish
Sports
39
Luxurious Gold Fish
39
Luxurious Gold Fish
Sports
39
Luxurious Gold Fish
Sports
Sports
128.11
40
Generic Plastic Car
Electronics
40
Generic Plastic Car
40
Generic Plastic Car
Electronics
40
Generic Plastic Car
Electronics
Electronics
117.1
41
Oriental Silk Shirt
Clothing
41
Oriental Silk Shirt
41
Oriental Silk Shirt
Clothing
41
Oriental Silk Shirt
Clothing
Clothing
84.18
42
Recycled Metal Pizza
Sports
42
Recycled Metal Pizza
42
Recycled Metal Pizza
Sports
42
Recycled Metal Pizza
Sports
Sports
340.24
43
Handmade Cotton Salad
Sports
43
Handmade Cotton Salad
43
Handmade Cotton Salad
Sports
43
Handmade Cotton Salad
Sports
Sports
482.18
44
Soft Wooden Soap
Electronics
44
Soft Wooden Soap
44
Soft Wooden Soap
Electronics
44
Soft Wooden Soap
Electronics
Electronics
719.76
45
Oriental Silk Bacon
Beauty
45
Oriental Silk Bacon
45
Oriental Silk Bacon
Beauty
45
Oriental Silk Bacon
Beauty
Beauty
83.61
46
Electronic Wooden Car
Home & Garden
46
Electronic Wooden Car
46
Electronic Wooden Car
Home & Garden
46
Electronic Wooden Car
Home & Garden
Home & Garden
197.6
47
Licensed Metal Ball
Electronics
47
Licensed Metal Ball
47
Licensed Metal Ball
Electronics
47
Licensed Metal Ball
Electronics
Electronics
738.75
48
Intelligent Aluminum Salad
Clothing
48
Intelligent Aluminum Salad
48
Intelligent Aluminum Salad
Clothing
48
Intelligent Aluminum Salad
Clothing
Clothing
43.59
49
Electronic Rubber Chips
Electronics
49
Electronic Rubber Chips
49
Electronic Rubber Chips
Electronics
49
Electronic Rubber Chips
Electronics
Electronics
1045.5
50
Awesome Aluminum Keyboard
Clothing
50
Awesome Aluminum Keyboard
50
Awesome Aluminum Keyboard
Clothing
50
Awesome Aluminum Keyboard
Clothing
Clothing
173.66
{#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}