Row Pinning

import { createDataGrid, rowPinning } from '@sv5ui/datagrid';

const grid = createDataGrid<Person>({
  data: people,
  columns,
  getRowId,
  features: [
    filtering(),
    sorting(),
    rowPinning({
      // The starting side for a row, or null to leave it in the flow.
      isRowPinned: (person) => (person.status === 'suspended' ? 'top' : null)
    })
  ]
});

// A pinned row leaves the flow: it is taken from the source rows, so
// filtering and sorting never see it and it stays put while the middle
// section moves.

import { getRowPinning } from '@sv5ui/datagrid';

const pinning = getRowPinning(grid);

pinning?.pinRow('3', 'top');
pinning?.pinRow('3', 'bottom');
pinning?.pinRow('3', null);      // back into the flow

pinning?.topNodes;               // RowNode[] pinned to the top
pinning?.bottomNodes;
pinning?.pinnedCount;
pinning?.sideOf(node);           // 'top' | 'bottom' | null
pinning?.getPinnedRows();        // { top: TRow[], bottom: TRow[] }

// Also on the flat api
grid.api.pinRow?.('3', 'top');

grid.events.on('rowPinnedChanged', ({ id, side }) => save(id, side));

<!-- The feature contributes its own context-menu items: Pin row top,
     Pin row bottom, and Unpin row on a row that is already pinned.
     DataGrid wires the context menu for you; compose it by hand and it is
     Grid.ContextMenu that carries them. -->
<Grid.Root {grid}>
  <Grid.ContextMenu>
    <Grid.Viewport>
      <Grid.Header />
      <Grid.Body />
    </Grid.Viewport>
  </Grid.ContextMenu>
</Grid.Root>

<script lang="ts">
  import { PIPELINE_ORDER, type GridFeature } from '@sv5ui/datagrid';

  // meta belongs to the pipeline, so a stage is what sets it. Six lines is
  // a whole feature: this one flags the rows the snippet draws across.
  const groupRowFeature = (): GridFeature<Row> => ({
    id: 'group-rows',
    pipelineStage: {
      order: PIPELINE_ORDER.flatten,
      transform: (nodes) =>
        nodes.map((node) =>
          node.row.fullWidth ? { ...node, meta: { ...node.meta, fullWidth: true } } : node
        )
    }
  });

  const grid = createDataGrid<Row>({
    data: rows,
    columns,
    getRowId,
    features: [groupRowFeature()]
  });
</script>

{#snippet groupHeader({ row })}
  <span class="font-medium">{row.team} team</span>
{/snippet}

<DataGrid {grid} fullWidthRow={groupHeader} />