diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 2fd76b06aa..7f52cd0f65 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -178,7 +178,7 @@ export interface DataGridProps extends Sha * Miscellaneous */ renderers?: Maybe>; - rowClass?: Maybe<(row: R) => Maybe>; + rowClass?: Maybe<(row: R, rowIdx: number) => Maybe>; /** @default 'ltr' */ direction?: Maybe; 'data-testid'?: Maybe; diff --git a/src/Row.tsx b/src/Row.tsx index d0bd42f5ee..f6163dfe98 100644 --- a/src/Row.tsx +++ b/src/Row.tsx @@ -50,7 +50,7 @@ function Row( { [rowSelectedClassname]: selectedCellIdx === -1 }, - rowClass?.(row), + rowClass?.(row, rowIdx), className ); diff --git a/src/types.ts b/src/types.ts index 3e9049cb44..79780150e1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -183,7 +183,7 @@ export interface RowRendererProps selectedCellDragHandle: ReactElement> | undefined; skipCellFocusRef: MutableRefObject; onRowChange: (column: CalculatedColumn, rowIdx: number, newRow: TRow) => void; - rowClass: Maybe<(row: TRow) => Maybe>; + rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe>; setDraggedOverRowIdx: ((overRowIdx: number) => void) | undefined; selectCell: (position: Position, enableEditor?: Maybe) => void; } diff --git a/website/demos/AllFeatures.tsx b/website/demos/AllFeatures.tsx index 879903f772..26c4d4872c 100644 --- a/website/demos/AllFeatures.tsx +++ b/website/demos/AllFeatures.tsx @@ -213,7 +213,9 @@ export default function AllFeatures({ direction }: Props) { selectedRows={selectedRows} onSelectedRowsChange={setSelectedRows} className="fill-grid" - rowClass={(row) => (row.id.includes('7') ? highlightClassname : undefined)} + rowClass={(row, index) => + row.id.includes('7') || index === 0 ? highlightClassname : undefined + } direction={direction} onCellClick={(args, event) => { if (args.column.key === 'title') {