React Data GridRow Pinning

Pinned rows appear either above or below the normal rows of a table. This is sometimes also known as Frozen Rows or Floating Rows. Rows can be pinned via the Context Menu or Grid Options.

Enabling Row Pinning Copy

To enable row pinning, set enableRowPinning to true.

const enableRowPinning = true;

<AgGridReact enableRowPinning={enableRowPinning} />

Pinning Rows via the Context Menu Copy

To pin a row use right-click to bring up the Context Menu and select one of the options in the "Pin Row" submenu. In the example below, try the following:

1. Pin a row to the top.
2. Switch the row to being pinned to the bottom.
3. Unpin the row.

Note that rows that have been pinned also appear greyed-out in the main viewport. All the examples on this page also apply additional styling to visually differentiate the pinned rows from the rows in the main viewport.

const theme = themeQuartz.withParts({
    pinnedRowBorder: { 
        width: 3 
    }
});

<AgGridReact theme={theme} />

Pinning Rows on First Render Copy

To have a row appear as pinned when the grid initially renders data, use the isRowPinned callback. As an example, the snippet below will pin all rows whose country field is null in the top container.

const enableRowPinning = true;
const isRowPinned = (rowNode) => {
    return rowNode.data.country == null ? 'top' : null;
};

<AgGridReact
    enableRowPinning={enableRowPinning}
    isRowPinned={isRowPinned}
/>

This is illustrated in the example below.

Preventing Rows from being Pinnable Copy

To prevent a user from pinning a row via the context menu, use the isRowPinnable callback. As an example, the snippet below will prevent any rows being pinned where the sport field is 'Swimming'.

const enableRowPinning = true;
const isRowPinnable = (rowNode) => {
    return rowNode.data.sport != 'Swimming';
};

<AgGridReact
    enableRowPinning={enableRowPinning}
    isRowPinnable={isRowPinnable}
/>

This is illustrated in the example below. Note that the "Pin Rows" submenu does not appear in the context menu for rows whose sport field is 'Swimming'.

Sorting and Filtering Pinned Rows Copy

When sorts and filters are applied to the grid, they will also be applied to pinned rows.

Selecting Pinned Rows Copy

Pinned rows can be selected just as normal rows can be selected. The selection state of a pinned row will mirror the selection state of the original row.

Pinning the Grand Total Row Copy

The Grand Total Rows can be pinned in two ways.

1. Setting the value of the grandTotalRow grid option to either 'pinnedTop' or 'pinnedBottom'.
2. Manually pin the grand total row via the context menu when grandTotalRow is either 'top' or 'bottom'.
3. Return 'top' or 'bottom' from the isRowPinned callback when it's called on the grand total row node.

Note that when grandTotalRow is 'pinnedTop' or 'pinnedBottom' and the user unpins the grand total row, it will behave as if it were set to 'top' and 'bottom', respectively.

Providing Pinned Row Data Copy

Pinned row data may be provided directly to the grid via Grid Options. Providing pinned rows this way means they cannot be altered by end users.

Set Pinned Rows using grid attributes pinnedTopRowData and pinnedBottomRowData.

Unsupported Features Copy

When providing pinned row data directly via pinnedTopRowData and pinnedBottomRowData, the following are not possible:

• Sorting: Pinned rows cannot be sorted.
• Filtering: Pinned rows are not filtered.
• Row Grouping: Pinned rows cannot be grouped.
• Row Selection: Pinned rows cannot be selected.

API Reference Copy

Next Up Copy

Continue to the next section to learn about Row Height