React Data GridRow Sorting

react logo

This page describes how to sort row data in the grid and how you can customise that sorting to match your requirements.

Sorting

Sorting is enabled by default for all columns. You can sort a column by clicking on the column header. To enable / disable sorting per column use the sortable column definition attribute.

const [columnDefs, setColumnDefs] = useState([
    { field: 'name' },
    { field: 'age' },
    // disable sorting by address
    { field: 'address', sortable: false },
]);

<AgGridReact columnDefs={columnDefs} />

To disable sorting for all columns, set sorting in the default column definition.

// disable sorting on all columns
const defaultColDef = useMemo(() => { 
	return {
        sortable: false
    };
}, []);
const [columnDefs, setColumnDefs] = useState([
    // Override default to enable sorting by name
    { field: 'name', sortable: true },
    { field: 'age' },
    { field: 'address' },
]);

<AgGridReact
    defaultColDef={defaultColDef}
    columnDefs={columnDefs}
/>

Custom Sorting

Custom sorting is provided at a column level by configuring a comparator on the column definition.