Pinned Rows in a JavaScript Data Grid

Developer guide › Sorting, filtering and find › Pinned Rows in a JavaScript Data Grid

Pinned rows

A pinned row sits outside the scrolling body, against the header or above the status bar, and stays there while the rows scroll past it. Use one for a column-units line, a target or budget to compare against, a precomputed summary, or a note that must not scroll away.

createGrid(element, {
  columns,
  rows,
  pinnedTopRows: [{ product: 'Units', capacity: 'MW', margin: '%' }],
});

// Or at runtime, at either edge:
grid.setPinnedRows([summaryLine], { edge: 'top' });
grid.setPinnedRows([], { edge: 'top' });        // clear

The objects are yours and are rendered through the ordinary column pipeline: value getters, formatters, cell renderers and conditional formatting all run, so a pinned row looks like the data it sits against without you rebuilding any of that.

They are not part of the data, and that separation is the point. A pinned row is not counted by rows.count(), not sorted, not filtered, not grouped, not selectable, not included in a total and not exported. A units row that sorted itself into the middle of the data, or a target line that was added to the sum it is there to be compared against, would be worse than no feature at all. If you want a row that behaves like data, make it data.

A filter that matches nothing still leaves the pinned rows visible, which is usually what you want: an empty grid with its column-units line is readable, and an empty grid without one is not.