pinned

Fixes the column to one side of the grid.

Type	Side | null
Default	null
Live update (update())	Yes — give the columns again (update({ columns }))
Declared in	packages/core/src/columns/defs.ts

What it does

pinned: 'start' keeps the column at the start of the row (the left in English, the right in Arabic), 'end' at the other end; the other columns scroll between them. Sides are logical, never left or right. The user can pin and unpin from the column menu, and that choice is part of the saved state.

Any other value is refused with an invalid-column error, and the column is left out. More than six columns pinned on one side are accepted with a too-many-pinned warning. When the grid is too narrow for its pinned columns, they scroll with the others until there is room again; the state is not changed.

Example

import { createGrid } from '@dzgrid/dom';
import { EN } from '@dzgrid/dom/locales/en';

type Tool = { id: string; name: string; shelf: number; notes: string };

createGrid<Tool>(document.getElementById('tools')!, {
  rows: [{ id: 't1', name: 'Hammer', shelf: 2, notes: 'Claw, 450 g' }],
  columns: [
    { id: 'name', header: 'Tool', pinned: 'start' },
    { id: 'shelf', header: 'Shelf', type: 'number' },
    { id: 'notes', header: 'Notes', width: 600 },
  ],
  getRowId: (r) => r.id,
  messages: EN,
});

Live demo

Scroll sideways: Tool stays at the start.

See also

• movable, width.
• Columns.