React
Using ag-Grid with React: Rows
  •  

Basic Row Sorting

To sort rows, we can add a sortable property to a column definition:

// App.js
this.state = {
// rest of state is unchanged
 columnDefs: [
   // other column defs unchanged
    {
     headerName: "Last",
     field: "lastName",
     colId: "lastName",
     sortable: true
    },
 ]
}

Notice that the default sorting order is ascending, then descending, then nothing (null). We can change theat by adding a sortingOrder property:

// App.js
this.state = {
// rest of state is unchanged
 columnDefs: [
   // other column defs unchanged
    {
     headerName: "Last",
     field: "lastName",
     colId: "lastName",
     sortable: true
     sortingOrder: ['desc', 'asc', null]
    },
 ]
}

We can also just move that sortable property to our default column definition:

// App.js
this.state = {
   // rest of state is unchanged
    columnDefs: [
     // other column defs unchanged
      {
      headerName: "Last",
      field: "lastName",
      colId: "lastName",
      sortingOrder: ['desc', 'asc', null]
      },
    ],
  defaultColDef: {
     resizable: true,
     sortable: true,
 },
}

We can do the same thing with sortingOrder. We'll make a sortingOrder piece of state:

// App.js
// this.state
sortingOrder: ["desc", "asc", null],

And then add it to our props on the AgGridReact component:

// App.js
// AgGridReact component props
sortingOrder={this.state.sortingOrder}

Check out the ag-Grid docs on row sorting to learn more.