Column pinning detached
Example demonstrating column pinning with detached functionality for flexible table layouts.
Example
left
center
Id
Name
Price Retail
right
Category
1
Electronic Concrete Cheese
35.04
Clothing
2
Small Steel Sausages
419.74
Beauty
3
Licensed Silk Table
347.56
Beauty
4
Tasty Marble Fish
432.39
Sports
5
Soft Concrete Pants
107.54
Home & Garden
6
Luxurious Ceramic Pizza
229.65
Home & Garden
7
Bespoke Aluminum Salad
207.15
Home & Garden
8
Handmade Wooden Hat
167.68
Sports
9
Modern Plastic Pants
456.36
Clothing
10
Modern Plastic Fish
45.59
Sports
Per page:
Page 1 of 100
Showing
1
to
10
of 1000 rows
{@render RenderHeaderCell(cols.left, 'left')}
{@render RenderHeaderCell(cols.center, 'center')}
{@render RenderHeaderCell(cols.right, 'right')}
{#each datagrid.rows.getPaginatedRows() as row}
{@render RenderCell(cols.left, row)}
{@render RenderCell(cols.center, row)}
{@render RenderCell(cols.right, row)}
{/each}
{side}
{#if columns.length > 0}
{#each columns as column}
{#if column.type !== 'group'}
{@render LeafHeader(column)}
{:else}{/if}
{/each}
{/if}
{#if columns.length > 0}
{/snippet}
{#snippet LeafHeader(column: LeafColumn)}
{#each columns as column}
{#if !row.isGroupRow()}
{/if}
{getCellContent(column, row.original)}
{:else}{/if}
{/each}
{column.header}
{#if column.options.pinnable}