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 do this, we'll keep track of an array of pinned data in our state:

// App.js
// this.state
pinnedTopRowData: [],

We also need to add a corresponding prop to the AgGridReact component:

pinnedTopRowData={this.state.pinnedTopRowData}

Let's pick a row and set it as a pinned row in componentDidMount to see how pinning works:

componentDidMount() {
    fetch("/api/accounts")
      .then((result) => result.json())
      .then((rowData) =>
        this.setState({ rowData, pinnedTopRowData: [rowData[0]] })
      );
  }

We can also pin rows by selecting them. Let's enable checkbox selection on the ID column definition:

{
  headerName: "ID",
  field: "id",
  width: 80,
  lockPosition: true,
  rowDrag: true,
  checkboxSelection: true,
},

To set the selected row to pinned, we just need to define a callback called onSelectionChanged:

// App.js
onSelectionChanged = () => {
   const selected = this.gridApi.getSelectedRows();
   this.gridApi.setPinnedTopRowData(selected);
};

Then, we just need to pass that callback into the AgGridReact component as a prop:

// App.js
// AgGridReact component props
onSelectionChanged={this.onSelectionChanged}

Now when you select a row using the checkbox, the row pins to the bottom of the grid. Nice!