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.