Column Pinning

Columns can be pinned to the start or end of the viewport by setting the pinned property in the column definition. Pinned columns remain visible regardless of the scroll position. The pinned property accepts one of these values:

"start": Pins the column to the beginning of the viewport.
"end": Pins the column to the end of the viewport.
null (default): The column will not be pinned.

Info

The terms "start" and "end" are used instead of positional terms like "left" or "right" because the actual pin behavior depends on the grid direction. If the direction is rtl, "start" is the right side, and "end" is the left side.

export function ColumnPinning() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "Ticker Symbol", field: 0 },
        { id: "Open Price", field: 1, pinned: "start" },
        { id: "Close Price", field: 2 },
        { id: "Volume", field: 3, pinned: "end" },
        { id: "Market Cap", field: 4 },
        { id: "PE Ratio", field: 5 },
        { id: "Dividend Yield", field: 6 },
        { id: "52 Week High", field: 7 },
      ],
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 300 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Pinning Considerations

Pinned columns can only be reordered within their pin group (start or end).
Ensure enough space is available for both pinned and unpinned columns.
Start-pinned columns are moved to the beginning of the column definitions.
End-pinned columns are moved to the end of the column definitions.