Skip to main content

​
Overview

The default row component used by DataGrid. Can be wrapped via the renderers.renderRow prop to add contexts or customize behavior. 
import { DataGrid, Row, type RenderRowProps } from 'react-data-grid';

interface MyRow {
  id: number;
  name: string;
}

function myRowRenderer(key: React.Key, props: RenderRowProps<MyRow>) {
  return (
    <MyContext key={key} value={123}>
      <Row {...props} />
    </MyContext>
  );
}

function MyGrid() {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
      renderers={{ renderRow: myRowRenderer }}
    />
  );
}

​
Props

The Row component accepts RenderRowProps<TRow, TSummaryRow>:
​
row
TRow
required
The row data object.
​
viewportColumns
readonly CalculatedColumn<TRow, TSummaryRow>[]
required
Array of columns currently in the viewport.
​
rowIdx
number
required
Index of the row in the rows array.
​
selectedCellIdx
number | undefined
required
Index of the currently selected cell in this row, or undefined if no cell is selected.
​
isRowSelected
boolean
required
Whether this row is selected.
​
isRowSelectionDisabled
boolean
required
Whether row selection is disabled for this row.
​
gridRowStart
number
required
CSS grid-row-start value for positioning.
​
lastFrozenColumnIndex
number
required
Index of the last frozen column, or -1 if there are no frozen columns.
​
draggedOverCellIdx
number | undefined
required
Index of the cell being dragged over during fill operations, or undefined.
​
selectedCellEditor
ReactElement<RenderEditCellProps<TRow>> | undefined
required
The cell editor component if a cell in this row is being edited, or undefined.
​
onRowChange
(column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void
required
Callback to update the row data.
​
rowClass
(row: TRow, rowIdx: number) => string | undefined
required
Function to determine custom CSS class names for the row.
​
selectCell
(position: Position, options?: SelectCellOptions) => void
required
Function to programmatically select a cell.
​
isTreeGrid
boolean
required
Whether the grid is a TreeDataGrid (role=“treegrid”).
​
onCellMouseDown
CellMouseEventHandler<TRow, TSummaryRow>
required
Callback triggered when a pointer becomes active in a cell.
​
onCellClick
CellMouseEventHandler<TRow, TSummaryRow>
required
Callback triggered when a cell is clicked.
​
onCellDoubleClick
CellMouseEventHandler<TRow, TSummaryRow>
required
Callback triggered when a cell is double-clicked.
​
onCellContextMenu
CellMouseEventHandler<TRow, TSummaryRow>
required
Callback triggered when a cell is right-clicked.
​
aria-rowindex
number
required
ARIA row index (1-based) for accessibility.
​
aria-selected
boolean | undefined
required
ARIA selected state for the row.

​
Custom Row Renderer

To create a completely custom row renderer, implement the renderRow function: 
import type { RenderRowProps } from 'react-data-grid';

function CustomRow({
  row,
  rowIdx,
  viewportColumns,
  selectedCellIdx,
  isRowSelected,
  ...props
}: RenderRowProps<MyRow>) {
  return (
    <div
      role="row"
      aria-rowindex={props['aria-rowindex']}
      aria-selected={isRowSelected}
      className={`custom-row ${isRowSelected ? 'selected' : ''}`}
    >
      {viewportColumns.map((column) => (
        <div key={column.key} role="gridcell">
          {row[column.key]}
        </div>
      ))}
    </div>
  );
}

function MyGrid() {
  return (
    <DataGrid
      renderers={{
        renderRow: (key, props) => <CustomRow key={key} {...props} />
      }}
      columns={columns}
      rows={rows}
    />
  );
}

​
Generics

  • TRow - Row type
  • TSummaryRow - Summary row type (default: unknown)

Build docs developers (and LLMs) love

Get started for freeTalk to us