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
.
Configure the Row Numbers Feature. |
const rowNumbers = true;
<AgGridReact rowNumbers={rowNumbers} />
Cell Selection Copy Link
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 Copy Link
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}
/>
Set to true to prevent selecting all the currently visible cells in the row when clicking a Row Number. |
Row Resizing Copy Link
To allow the Row Numbers feature to resize rows, the enableRowResizer
property can be used.
const rowNumbers = useMemo(() => {
return {
enableRowResizer: true
};
}, []);
<AgGridReact rowNumbers={rowNumbers} />
Set to true to add a resizer to each Row Number cell that allows row resizing. |
The Row Resizer feature does not work when columns are configured with Auto Row Height.
Value Export Copy Link
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 defaultCsvExportParams = useMemo(() => {
return {
exportRowNumbers: true,
};
}, []);
const defaultExcelExportParams = useMemo(() => {
return {
exportRowNumbers: true,
};
}, []);
<AgGridReact
rowNumbers={rowNumbers}
cellSelection={cellSelection}
defaultCsvExportParams={defaultCsvExportParams}
defaultExcelExportParams={defaultExcelExportParams}
/>
ExportParams Copy Link
Set to true to allow the contents of the Header Row Column to be exported.
|
Customising Row Numbers Copy Link
Row Numbers can be customised by providing a RowNumbersOptions
object to the rowNumbers
grid option:
Set to true to prevent selecting all the currently visible cells in the row when clicking a Row Number. |
Set to true to add a resizer to each Row Number cell that allows row resizing. |
The minimum width for the row number column. |
The default width for the row number column. |
Whether this column is resizable. |