React Data GridRow Numbers

The Row Numbers Feature adds a Column that is always present at the start of the grid where each cell of this column will work as a row header. The following example demonstrates the grid with Row Numbers and no additional configuration.

To enable Row Numbers, set the grid option rowNumbers = true.

const rowNumbers = true;

<AgGridReact rowNumbers={rowNumbers} />

Cell Selection

When the grid is configured with Cell Selection, clicking a Row Number will select all the currently visible cells in the row.

const rowNumbers = true;
const cellSelection = true;

<AgGridReact
    rowNumbers={rowNumbers}
    cellSelection={cellSelection}
/>

Suppressing Integration

By default, clicking a row number selects a cell range including all the cells in the row. To prevent this behaviour use the suppressCellSelectionIntegration option.

const rowNumbers = useMemo(() => { 
	return {
        suppressCellSelectionIntegration: true
    };
}, []);
const cellSelection = true;

<AgGridReact
    rowNumbers={rowNumbers}
    cellSelection={cellSelection}
/>

Value Export

By default, when working with exporters such as CSV Export or Excel Export, the value of the Row Numbers column is not exported. This behaviour can be changed by toggling the exportRowNumbers of the export params.

const rowNumbers = true;
const cellSelection = true;
const defaultExcelExportParams = useMemo(() => { 
	return {
        exportRowNumbers: true,
    };
}, []);

<AgGridReact
    rowNumbers={rowNumbers}
    cellSelection={cellSelection}
    defaultExcelExportParams={defaultExcelExportParams}
/>

ExportParams

Customising Row Numbers

Row Numbers can be customised by providing a RowNumbersOptions object to the rowNumbers grid option: