Column pinning
Pin columns to the left or right for improved data visibility while scrolling.
Example
Id
Name
Price Retail
Category
1
Practical Plastic Soap
255.41
Clothing
2
Intelligent Gold Table
250.12
Home & Garden
3
Modern Rubber Cheese
236.6
Sports
4
Soft Marble Cheese
443.87
Home & Garden
5
Electronic Marble Hat
413.91
Beauty
6
Bespoke Bamboo Car
1553.96
Electronics
7
Refined Bronze Chicken
66.97
Sports
8
Handmade Metal Chips
219.03
Sports
9
Oriental Steel Bike
229.53
Clothing
10
Incredible Granite Shirt
134.63
Home & Garden
Per page:
Page 1 of 100
Showing
1
to
10
of 1000 rows
{#each datagrid.columns.getLeafColumnsInOrder() as column}
{@render LeafHeader(column)}
{/each}
{#each datagrid.rows.getPaginatedRows() as row}
{#each datagrid.columns.getLeafColumnsInOrder() as column}
{#if !row.isGroupRow()}
{/each}
{getCellContent(column, row.original)}
{:else}{/if}
{/each}
{column.header}
{#if column.options.pinnable}