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} />"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
ModuleRegistry,
RowNumbersOptions,
enableDevValidations,
} from "ag-grid-community";
import { RowNumbersModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [ClientSideRowModelModule, RowNumbersModule];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
};
}, []);
const { data, loading } = useFetchJson<IOlympicData>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact<IOlympicData>
rowData={data}
loading={loading}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
rowNumbers={true}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
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}
/>"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
CellSelectionOptions,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
ModuleRegistry,
RowNumbersOptions,
enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, RowNumbersModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [
ClientSideRowModelModule,
RowNumbersModule,
CellSelectionModule,
];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
};
}, []);
const { data, loading } = useFetchJson<IOlympicData>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact<IOlympicData>
rowData={data}
loading={loading}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
cellSelection={true}
rowNumbers={true}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
Row Selection Copy Link
When the grid is configured with Row Selection and click selection is enabled via rowSelection.enableClickSelection, clicking a Row Number selects the row.
const rowNumbers = true;
const rowSelection = useMemo(() => {
return {
mode: 'multiRow',
enableClickSelection: true
};
}, []);
<AgGridReact
rowNumbers={rowNumbers}
rowSelection={rowSelection}
/>When Cell Selection is enabled as well, a Row Number click does both: it selects all the cells in the row and the row itself.
Suppressing Cell Selection 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, which leaves only the Row Selection behaviour so that just the row is selected.
const rowNumbers = useMemo(() => {
return {
suppressCellSelectionIntegration: true
};
}, []);
const cellSelection = true;
const rowSelection = useMemo(() => {
return {
mode: 'multiRow',
enableClickSelection: true
};
}, []);
<AgGridReact
rowNumbers={rowNumbers}
cellSelection={cellSelection}
rowSelection={rowSelection}
/> Set to true to prevent selecting all the currently visible cells in the row when clicking a Row Number. |
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
CellSelectionOptions,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
ModuleRegistry,
RowNumbersOptions,
RowSelectionModule,
RowSelectionOptions,
enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, RowNumbersModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [
ClientSideRowModelModule,
RowNumbersModule,
CellSelectionModule,
RowSelectionModule,
];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
};
}, []);
const rowSelection = useMemo<
RowSelectionOptions | "single" | "multiple"
>(() => {
return {
mode: "multiRow",
enableClickSelection: true,
};
}, []);
const rowNumbers = useMemo<boolean | RowNumbersOptions>(() => {
return {
suppressCellSelectionIntegration: true,
};
}, []);
const { data, loading } = useFetchJson<IOlympicData>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact<IOlympicData>
rowData={data}
loading={loading}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
cellSelection={true}
rowSelection={rowSelection}
rowNumbers={rowNumbers}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
Context Menu Copy Link
Right-clicking a Row Number cell opens the Context Menu. As the cell holds no data of its own, the default items are the row-level ones, such as Export. The clipboard items (Cut, Copy and their variants) are included only when there is a cell range or selected rows to copy. Use rowNumbers.contextMenuItems to override the items for the Row Numbers Column only.
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. |
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
ModuleRegistry,
RowNumbersOptions,
enableDevValidations,
} from "ag-grid-community";
import { RowNumbersModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [ClientSideRowModelModule, RowNumbersModule];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
};
}, []);
const rowNumbers = useMemo<boolean | RowNumbersOptions>(() => {
return {
enableRowResizer: true,
};
}, []);
const { data, loading } = useFetchJson<IOlympicData>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact<IOlympicData>
rowData={data}
loading={loading}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
rowNumbers={rowNumbers}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
The Row Resizer feature does not work when columns are configured with Auto Row Height.
Row Resize Events Copy Link
The following events are fired when a row resize operation starts and ends.
The row resize has started (Row Numbers Feature) |
The row resize has ended (Row Numbers Feature) |
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 = useMemo(() => {
return {
enableHeaderHighlight: true,
handle: { mode: 'fill' },
};
}, []);
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 Row Numbers column to be exported. |
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
CellSelectionOptions,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
CsvExportModule,
CsvExportParams,
ExcelExportParams,
GridApi,
GridOptions,
ModuleRegistry,
RowNumbersOptions,
enableDevValidations,
} from "ag-grid-community";
import {
CellSelectionModule,
ContextMenuModule,
ExcelExportModule,
RowNumbersModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [
ClientSideRowModelModule,
RowNumbersModule,
CellSelectionModule,
ExcelExportModule,
CsvExportModule,
ContextMenuModule,
];
const GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: "athlete" },
{ field: "country" },
{ field: "sport" },
{ field: "year" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
flex: 1,
minWidth: 100,
};
}, []);
const defaultCsvExportParams = useMemo<CsvExportParams>(() => {
return {
exportRowNumbers: true,
};
}, []);
const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
return {
exportRowNumbers: true,
};
}, []);
const cellSelection = useMemo<boolean | CellSelectionOptions>(() => {
return {
enableHeaderHighlight: true,
handle: {
mode: "fill",
},
};
}, []);
const { data, loading } = useFetchJson<IOlympicData>(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact<IOlympicData>
rowData={data}
loading={loading}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
rowNumbers={true}
defaultCsvExportParams={defaultCsvExportParams}
defaultExcelExportParams={defaultExcelExportParams}
cellSelection={cellSelection}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
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. When set, the column never auto-sizes narrower than it, unless maxWidth is smaller. Updating rowNumbers keeps a width the user has resized the column to, within its new minWidth and maxWidth, unless the update sets a different width of at least minWidth. |
Whether this column is resizable. |
Customise the list of menu items available in the context menu. @agModule ContextMenuModule
|
Callback called when a cell is clicked. |
Callback called when a cell is right clicked. |
Callback called when a cell is double clicked. |
The custom header component to be used for rendering the component header. If none specified the default AG Grid header component is used. See Header Component for framework specific implementation detail.
|
The parameters to be passed to the headerComponent. |
Set to true if this column is not navigable (i.e. cannot be tabbed into), otherwise false. Can also be a callback function to have different rows navigable. |
Tooltip for the cell. true shows the displayed cell value (valueFormatted when present, otherwise value). false disables tooltip content configured on the Column Definition. TooltipModule
|
Callback to select which tooltip component to be used for a given row within the same column. @agModule TooltipModule
|
Function or expression. Gets the value from your data for display. |
A function or expression to format a value, should return a string. |
Maximum width in pixels for the cell. |
Provide your own cell Renderer component for this column's cells. See Cell Renderer for framework specific implementation details.
|
Callback to select which cell renderer to be used for a given row within the same column. |
Params to be passed to the cellRenderer component. |