Row Pinning

Pinned rows appear either above or below the normal rows of a table. This feature in other grids is also known as
“Frozen Rows” or “Floating Rows”.

To put pinned rows into your grid, set the Grid Options pinnedTopRowData or pinnedBottomRowData in the same way as
you would set normal data into rowData.

dashGridOptions = {
    'pinnedTopRowData': [],
    'pinnedBottomRowData': [],
}

pinnedTopRowData (any [ ]) Data to be displayed as pinned top rows in the grid.
pinnedBottomRowData (any [ ]) Data to be displayed as pinned bottom rows in the grid.

Note that Cell Editing and Cell Rendering can take place as normal on pinned rows.
If you want to use a different Cell Renderer for pinned rows and normal rows, use the Column Definition
parameter cellRendererSelector to specify different Cell Renderers for different rows.
See example Pinned Bottom Rows.

Pinned Top Rows

This example pins the selected row to the top row of the grid.

Pinned Bottom Rows

This example pins a summary row to the bottom of the grid.

The following can be noted:

The averages are calculated in a Dash callback based on the filtered rows.
The pinned row uses a custom cell renderer, setting the text in bold, “Average” text size to 20 and the text color of
means to blue.

View the JavaScript functions used for this example

These JavaScript functions must be added to the dashAgGridFunctions.js file in the assets folder.
See JavaScript Functions
for more information.

var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};

dagfuncs.rowPinningBottom = function (params) {

    if (params.node.rowPinned) {
        // Text of pinned row is bold for all columns
        let style = {fontWeight: "bold"};

        if (params.colDef.field === "country") {
            // Add text size = 25 for "Average"
            style["fontSize"] = 25
        } else if (["lifeExp", "pop", "gdpPercap"].includes(params.colDef.field)) {
            // Add blue text color for means
            style["color"] = "#2186f4"
        }

        return {
            component: window.dashAgGridComponentFunctions.RowPinningBottomComponent,
            params: {style: style},
        };
    } else {
        // rows that are not pinned don't use any cell renderer
        return undefined;
    }
}

View Custom Cell Renderer used for this example

This JavaScript function must be added to the dashAgGridComponentFunctions.js file in the assets folder.
See Custom Components for more
information.

var dagcomponentfuncs = (window.dashAgGridComponentFunctions = window.dashAgGridComponentFunctions || {});

dagcomponentfuncs.RowPinningBottomComponent = function (props) {
    return React.createElement('span', {style: props.style}, props.value)
}

Non Supported Items

Pinned rows are not part of the main row model. For this reason, the following is 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.