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
Electronic Concrete Cheese
Clothing
1
Electronic Concrete Cheese
1
Electronic Concrete Cheese
Clothing
1
Electronic Concrete Cheese
Clothing
Clothing
35.04
2
Small Steel Sausages
Beauty
2
Small Steel Sausages
2
Small Steel Sausages
Beauty
2
Small Steel Sausages
Beauty
Beauty
419.74
3
Licensed Silk Table
Beauty
3
Licensed Silk Table
3
Licensed Silk Table
Beauty
3
Licensed Silk Table
Beauty
Beauty
347.56
4
Tasty Marble Fish
Sports
4
Tasty Marble Fish
4
Tasty Marble Fish
Sports
4
Tasty Marble Fish
Sports
Sports
432.39
5
Soft Concrete Pants
Home & Garden
5
Soft Concrete Pants
5
Soft Concrete Pants
Home & Garden
5
Soft Concrete Pants
Home & Garden
Home & Garden
107.54
6
Luxurious Ceramic Pizza
Home & Garden
6
Luxurious Ceramic Pizza
6
Luxurious Ceramic Pizza
Home & Garden
6
Luxurious Ceramic Pizza
Home & Garden
Home & Garden
229.65
7
Bespoke Aluminum Salad
Home & Garden
7
Bespoke Aluminum Salad
7
Bespoke Aluminum Salad
Home & Garden
7
Bespoke Aluminum Salad
Home & Garden
Home & Garden
207.15
8
Handmade Wooden Hat
Sports
8
Handmade Wooden Hat
8
Handmade Wooden Hat
Sports
8
Handmade Wooden Hat
Sports
Sports
167.68
9
Modern Plastic Pants
Clothing
9
Modern Plastic Pants
9
Modern Plastic Pants
Clothing
9
Modern Plastic Pants
Clothing
Clothing
456.36
10
Modern Plastic Fish
Sports
10
Modern Plastic Fish
10
Modern Plastic Fish
Sports
10
Modern Plastic Fish
Sports
Sports
45.59
11
Gorgeous Wooden Shirt
Home & Garden
11
Gorgeous Wooden Shirt
11
Gorgeous Wooden Shirt
Home & Garden
11
Gorgeous Wooden Shirt
Home & Garden
Home & Garden
257.86
12
Oriental Marble Ball
Clothing
12
Oriental Marble Ball
12
Oriental Marble Ball
Clothing
12
Oriental Marble Ball
Clothing
Clothing
379.96
13
Practical Metal Ball
Sports
13
Practical Metal Ball
13
Practical Metal Ball
Sports
13
Practical Metal Ball
Sports
Sports
164.82
14
Luxurious Bronze Towels
Sports
14
Luxurious Bronze Towels
14
Luxurious Bronze Towels
Sports
14
Luxurious Bronze Towels
Sports
Sports
256.6
15
Modern Ceramic Computer
Sports
15
Modern Ceramic Computer
15
Modern Ceramic Computer
Sports
15
Modern Ceramic Computer
Sports
Sports
434.26
16
Intelligent Rubber Car
Sports
16
Intelligent Rubber Car
16
Intelligent Rubber Car
Sports
16
Intelligent Rubber Car
Sports
Sports
368.44
17
Electronic Bamboo Fish
Sports
17
Electronic Bamboo Fish
17
Electronic Bamboo Fish
Sports
17
Electronic Bamboo Fish
Sports
Sports
107.27
18
Refined Granite Cheese
Electronics
18
Refined Granite Cheese
18
Refined Granite Cheese
Electronics
18
Refined Granite Cheese
Electronics
Electronics
240
19
Oriental Gold Soap
Sports
19
Oriental Gold Soap
19
Oriental Gold Soap
Sports
19
Oriental Gold Soap
Sports
Sports
206.2
20
Soft Concrete Chips
Home & Garden
20
Soft Concrete Chips
20
Soft Concrete Chips
Home & Garden
20
Soft Concrete Chips
Home & Garden
Home & Garden
131.3
21
Intelligent Metal Hat
Beauty
21
Intelligent Metal Hat
21
Intelligent Metal Hat
Beauty
21
Intelligent Metal Hat
Beauty
Beauty
53.07
22
Practical Metal Car
Electronics
22
Practical Metal Car
22
Practical Metal Car
Electronics
22
Practical Metal Car
Electronics
Electronics
1584.66
23
Unbranded Aluminum Chips
Sports
23
Unbranded Aluminum Chips
23
Unbranded Aluminum Chips
Sports
23
Unbranded Aluminum Chips
Sports
Sports
306.01
24
Fresh Bamboo Chicken
Sports
24
Fresh Bamboo Chicken
24
Fresh Bamboo Chicken
Sports
24
Fresh Bamboo Chicken
Sports
Sports
139.19
25
Soft Gold Salad
Clothing
25
Soft Gold Salad
25
Soft Gold Salad
Clothing
25
Soft Gold Salad
Clothing
Clothing
265.19
26
Generic Bronze Shoes
Home & Garden
26
Generic Bronze Shoes
26
Generic Bronze Shoes
Home & Garden
26
Generic Bronze Shoes
Home & Garden
Home & Garden
88.22
27
Oriental Cotton Fish
Electronics
27
Oriental Cotton Fish
27
Oriental Cotton Fish
Electronics
27
Oriental Cotton Fish
Electronics
Electronics
1208.94
28
Ergonomic Silk Gloves
Beauty
28
Ergonomic Silk Gloves
28
Ergonomic Silk Gloves
Beauty
28
Ergonomic Silk Gloves
Beauty
Beauty
127.14
29
Recycled Concrete Salad
Electronics
29
Recycled Concrete Salad
29
Recycled Concrete Salad
Electronics
29
Recycled Concrete Salad
Electronics
Electronics
886.53
30
Awesome Bronze Sausages
Home & Garden
30
Awesome Bronze Sausages
30
Awesome Bronze Sausages
Home & Garden
30
Awesome Bronze Sausages
Home & Garden
Home & Garden
439.08
31
Gorgeous Granite Chair
Sports
31
Gorgeous Granite Chair
31
Gorgeous Granite Chair
Sports
31
Gorgeous Granite Chair
Sports
Sports
257.54
32
Bespoke Cotton Chair
Clothing
32
Bespoke Cotton Chair
32
Bespoke Cotton Chair
Clothing
32
Bespoke Cotton Chair
Clothing
Clothing
259.4
33
Handcrafted Ceramic Sausages
Home & Garden
33
Handcrafted Ceramic Sausages
33
Handcrafted Ceramic Sausages
Home & Garden
33
Handcrafted Ceramic Sausages
Home & Garden
Home & Garden
24.42
34
Soft Ceramic Bike
Beauty
34
Soft Ceramic Bike
34
Soft Ceramic Bike
Beauty
34
Soft Ceramic Bike
Beauty
Beauty
473.7
35
Handcrafted Gold Chicken
Sports
35
Handcrafted Gold Chicken
35
Handcrafted Gold Chicken
Sports
35
Handcrafted Gold Chicken
Sports
Sports
207.24
36
Elegant Cotton Soap
Home & Garden
36
Elegant Cotton Soap
36
Elegant Cotton Soap
Home & Garden
36
Elegant Cotton Soap
Home & Garden
Home & Garden
456.23
37
Intelligent Aluminum Pizza
Electronics
37
Intelligent Aluminum Pizza
37
Intelligent Aluminum Pizza
Electronics
37
Intelligent Aluminum Pizza
Electronics
Electronics
1465.13
38
Soft Cotton Bacon
Beauty
38
Soft Cotton Bacon
38
Soft Cotton Bacon
Beauty
38
Soft Cotton Bacon
Beauty
Beauty
398.98
39
Unbranded Bronze Soap
Electronics
39
Unbranded Bronze Soap
39
Unbranded Bronze Soap
Electronics
39
Unbranded Bronze Soap
Electronics
Electronics
764.54
40
Intelligent Metal Table
Clothing
40
Intelligent Metal Table
40
Intelligent Metal Table
Clothing
40
Intelligent Metal Table
Clothing
Clothing
398.4
41
Modern Plastic Ball
Home & Garden
41
Modern Plastic Ball
41
Modern Plastic Ball
Home & Garden
41
Modern Plastic Ball
Home & Garden
Home & Garden
266.63
42
Oriental Concrete Chair
Electronics
42
Oriental Concrete Chair
42
Oriental Concrete Chair
Electronics
42
Oriental Concrete Chair
Electronics
Electronics
439.76
43
Frozen Steel Sausages
Electronics
43
Frozen Steel Sausages
43
Frozen Steel Sausages
Electronics
43
Frozen Steel Sausages
Electronics
Electronics
1130.51
44
Luxurious Wooden Chair
Sports
44
Luxurious Wooden Chair
44
Luxurious Wooden Chair
Sports
44
Luxurious Wooden Chair
Sports
Sports
345.71
45
Refined Cotton Sausages
Electronics
45
Refined Cotton Sausages
45
Refined Cotton Sausages
Electronics
45
Refined Cotton Sausages
Electronics
Electronics
779.56
46
Unbranded Granite Ball
Home & Garden
46
Unbranded Granite Ball
46
Unbranded Granite Ball
Home & Garden
46
Unbranded Granite Ball
Home & Garden
Home & Garden
49.4
47
Modern Metal Chair
Clothing
47
Modern Metal Chair
47
Modern Metal Chair
Clothing
47
Modern Metal Chair
Clothing
Clothing
284.6
48
Oriental Concrete Chair
Electronics
48
Oriental Concrete Chair
48
Oriental Concrete Chair
Electronics
48
Oriental Concrete Chair
Electronics
Electronics
962.72
49
Ergonomic Rubber Bike
Clothing
49
Ergonomic Rubber Bike
49
Ergonomic Rubber Bike
Clothing
49
Ergonomic Rubber Bike
Clothing
Clothing
135.92
50
Frozen Bronze Pizza
Clothing
50
Frozen Bronze Pizza
50
Frozen Bronze Pizza
Clothing
50
Frozen Bronze Pizza
Clothing
Clothing
405.21
{#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}