Using ag-Grid with React: Rows

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:


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

componentDidMount() {
      .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();

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

// App.js
// AgGridReact component props

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


I finished! On to the next chapter