Skip to content

Move row focus logic to <TreeGrid />, add renderSummaryRow #3976

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
amanmahajan7 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Move row focus logic to <TreeGrid />, add renderSummaryRow #3976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
442e4be
Move row selection logic to TreeGrid, add `renderSummaryRow`
amanmahajan7 Feb 23, 2026
d384712
Merge branch 'main' into am-treegrid
amanmahajan7 Feb 23, 2026
4ca38de
Rename
amanmahajan7 Feb 23, 2026
3b23533
Header row is not focusable
amanmahajan7 Feb 23, 2026
94ae711
Merge branch 'main' into am-treegrid
amanmahajan7 Feb 23, 2026
d45a317
Merge branch 'main' into am-treegrid
nstepien Feb 24, 2026
8e373bd
Merge branch 'main' into am-treegrid
amanmahajan7 Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 30 additions & 37 deletions src/DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ import ScrollToCell from './ScrollToCell';
import { default as defaultRenderSortStatus } from './sortStatus';
import { cellDragHandleClassname, cellDragHandleFrozenClassname } from './style/cell';
import { rootClassname, viewportDraggingClassname } from './style/core';
import SummaryRow from './SummaryRow';
import { defaultRenderSummaryRow } from './SummaryRow';

export interface SelectCellState extends Position {
readonly mode: 'SELECT';
Expand Down Expand Up @@ -298,6 +298,8 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
const headerRowHeight = rawHeaderRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
const summaryRowHeight = rawSummaryRowHeight ?? (typeof rowHeight === 'number' ? rowHeight : 35);
const renderRow = renderers?.renderRow ?? defaultRenderers?.renderRow ?? defaultRenderRow;
const renderSummaryRow =
renderers?.renderSummaryRow ?? defaultRenderers?.renderSummaryRow ?? defaultRenderSummaryRow;
const renderCell = renderers?.renderCell ?? defaultRenderers?.renderCell ?? defaultRenderCell;
const renderSortStatus =
renderers?.renderSortStatus ?? defaultRenderers?.renderSortStatus ?? defaultRenderSortStatus;
Expand Down Expand Up @@ -1127,8 +1129,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
lastFrozenColumnIndex,
onRowChange: handleFormatterRowChangeLatest,
selectCell: selectCellLatest,
selectedCellEditor: getCellEditor(rowIdx),
isTreeGrid
selectedCellEditor: getCellEditor(rowIdx)
})
);
}
Expand Down Expand Up @@ -1242,23 +1243,19 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
const isSummaryRowSelected = selectedPosition.rowIdx === summaryRowIdx;
const top = headerRowsHeight + summaryRowHeight * rowIdx;

return (
<SummaryRow
key={rowIdx}
aria-rowindex={gridRowStart}
rowIdx={summaryRowIdx}
gridRowStart={gridRowStart}
row={row}
top={top}
bottom={undefined}
viewportColumns={getRowViewportColumns(summaryRowIdx)}
lastFrozenColumnIndex={lastFrozenColumnIndex}
selectedCellIdx={isSummaryRowSelected ? selectedPosition.idx : undefined}
isTop
selectCell={selectCellLatest}
isTreeGrid={isTreeGrid}
/>
);
return renderSummaryRow(rowIdx, {
'aria-rowindex': gridRowStart,
rowIdx: summaryRowIdx,
gridRowStart,
row,
top,
bottom: undefined,
viewportColumns: getRowViewportColumns(summaryRowIdx),
lastFrozenColumnIndex,
selectedCellIdx: isSummaryRowSelected ? selectedPosition.idx : undefined,
isTop: true,
selectCell: selectCellLatest
});
})}
<RowSelectionChangeContext value={selectRowLatest}>
{getViewportRows()}
Expand All @@ -1276,23 +1273,19 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
? summaryRowHeight * (bottomSummaryRows.length - 1 - rowIdx)
: undefined;

return (
<SummaryRow
aria-rowindex={ariaRowCount - bottomSummaryRowsCount + rowIdx + 1}
key={rowIdx}
rowIdx={summaryRowIdx}
gridRowStart={gridRowStart}
row={row}
top={top}
bottom={bottom}
viewportColumns={getRowViewportColumns(summaryRowIdx)}
lastFrozenColumnIndex={lastFrozenColumnIndex}
selectedCellIdx={isSummaryRowSelected ? selectedPosition.idx : undefined}
isTop={false}
selectCell={selectCellLatest}
isTreeGrid={isTreeGrid}
/>
);
return renderSummaryRow(rowIdx, {
'aria-rowindex': ariaRowCount - bottomSummaryRowsCount + rowIdx + 1,
rowIdx: summaryRowIdx,
gridRowStart,
row,
top,
bottom,
viewportColumns: getRowViewportColumns(summaryRowIdx),
lastFrozenColumnIndex,
selectedCellIdx: isSummaryRowSelected ? selectedPosition.idx : undefined,
isTop: false,
selectCell: selectCellLatest
});
})}
</>
)}
Expand Down
5 changes: 1 addition & 4 deletions src/GroupRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import type { BaseRenderRowProps, GroupRow } from './types';
import { SELECT_COLUMN_KEY } from './Columns';
import GroupCell from './GroupCell';
import { cell, cellFrozen } from './style/cell';
import { rowClassname, rowSelectedClassname } from './style/row';
import { rowClassname } from './style/row';

const groupRow = css`
@layer rdg.GroupedRow {
Expand Down Expand Up @@ -44,7 +44,6 @@ function GroupedRow<R, SR>({
isRowSelectionDisabled: _isRowSelectionDisabled,
...props
}: GroupRowRendererProps<R, SR>) {
const isPositionOnRow = selectedCellIdx === -1;
Copy link
Collaborator Author

@amanmahajan7 amanmahajan7 Feb 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed it for now as we do not focus on the header row

// Select is always the first column
const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? row.level + 1 : row.level;

Expand All @@ -65,12 +64,10 @@ function GroupedRow<R, SR>({
aria-setsize={row.setSize}
aria-posinset={row.posInSet + 1} // aria-posinset is 1-based
aria-expanded={row.isExpanded}
tabIndex={isPositionOnRow ? 0 : -1}
className={classnames(
rowClassname,
groupRowClassname,
`rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
isPositionOnRow && rowSelectedClassname,
className
)}
onMouseDown={handleSelectGroup}
Expand Down
8 changes: 1 addition & 7 deletions src/HeaderRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import type { CalculatedColumn, Direction, Maybe, Position, ResizedWidth } from
import type { DataGridProps } from './DataGrid';
import HeaderCell from './HeaderCell';
import { cell, cellFrozen } from './style/cell';
import { rowSelectedClassname } from './style/row';

type SharedDataGridProps<R, SR, K extends React.Key> = Pick<
DataGridProps<R, SR, K>,
Expand Down Expand Up @@ -62,7 +61,6 @@ function HeaderRow<R, SR, K extends React.Key>({
direction
}: HeaderRowProps<R, SR, K>) {
const [draggedColumnKey, setDraggedColumnKey] = useState<string>();
const isPositionOnRow = selectedCellIdx === -1;

const cells = [];
for (let index = 0; index < columns.length; index++) {
Expand Down Expand Up @@ -97,11 +95,7 @@ function HeaderRow<R, SR, K extends React.Key>({
<div
role="row"
aria-rowindex={rowIdx} // aria-rowindex is 1 based
className={classnames(
headerRowClassname,
isPositionOnRow && rowSelectedClassname,
headerRowClass
)}
className={classnames(headerRowClassname, headerRowClass)}
>
{cells}
</div>
Expand Down
7 changes: 1 addition & 6 deletions src/Row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { RowSelectionContext, useLatestFunc, type RowSelectionContextValue } fro
import { classnames, getColSpan } from './utils';
import type { CalculatedColumn, RenderRowProps } from './types';
import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
import { rowClassname, rowSelectedClassname } from './style/row';
import { rowClassname } from './style/row';

function Row<R, SR>({
className,
Expand All @@ -18,7 +18,6 @@ function Row<R, SR>({
row,
viewportColumns,
selectedCellEditor,
isTreeGrid,
onCellMouseDown,
onCellClick,
onCellDoubleClick,
Expand All @@ -35,12 +34,9 @@ function Row<R, SR>({
onRowChange(column, rowIdx, newRow);
});

const isPositionOnRow = selectedCellIdx === -1;

className = classnames(
rowClassname,
`rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
isPositionOnRow && rowSelectedClassname,
rowClass?.(row, rowIdx),
className
);
Expand Down Expand Up @@ -88,7 +84,6 @@ function Row<R, SR>({
<RowSelectionContext value={selectionValue}>
<div
role="row"
tabIndex={isTreeGrid ? (isPositionOnRow ? 0 : -1) : undefined}
className={className}
style={{
gridRowStart,
Expand Down
48 changes: 19 additions & 29 deletions src/SummaryRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,10 @@ import { memo } from 'react';
import { css } from 'ecij';

import { classnames, getColSpan } from './utils';
import type { RenderRowProps } from './types';
import {
bottomSummaryRowClassname,
rowClassname,
rowSelectedClassname,
topSummaryRowClassname
} from './style/row';
import type { RenderSummaryRowProps } from './types';
import { bottomSummaryRowClassname, rowClassname, topSummaryRowClassname } from './style/row';
import SummaryCell from './SummaryCell';

type SharedRenderRowProps<R, SR> = Pick<
RenderRowProps<R, SR>,
'viewportColumns' | 'rowIdx' | 'gridRowStart' | 'selectCell' | 'isTreeGrid'
>;

interface SummaryRowProps<R, SR> extends SharedRenderRowProps<R, SR> {
'aria-rowindex': number;
row: SR;
top: number | undefined;
bottom: number | undefined;
lastFrozenColumnIndex: number;
selectedCellIdx: number | undefined;
isTop: boolean;
}

const summaryRow = css`
@layer rdg.SummaryRow {
position: sticky;
Expand All @@ -36,6 +16,8 @@ const summaryRow = css`
const summaryRowClassname = `rdg-summary-row ${summaryRow}`;

function SummaryRow<R, SR>({
tabIndex,
className,
rowIdx,
gridRowStart,
row,
Expand All @@ -46,11 +28,8 @@ function SummaryRow<R, SR>({
selectedCellIdx,
isTop,
selectCell,
isTreeGrid,
'aria-rowindex': ariaRowIndex
}: SummaryRowProps<R, SR>) {
const isPositionOnRow = selectedCellIdx === -1;

}: RenderSummaryRowProps<R, SR>) {
const cells = [];

for (let index = 0; index < viewportColumns.length; index++) {
Expand Down Expand Up @@ -79,13 +58,13 @@ function SummaryRow<R, SR>({
<div
role="row"
aria-rowindex={ariaRowIndex}
tabIndex={isTreeGrid ? (isPositionOnRow ? 0 : -1) : undefined}
tabIndex={tabIndex}
className={classnames(
rowClassname,
`rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
summaryRowClassname,
isTop ? topSummaryRowClassname : bottomSummaryRowClassname,
isPositionOnRow && rowSelectedClassname
className
)}
style={{
gridRowStart,
Expand All @@ -98,4 +77,15 @@ function SummaryRow<R, SR>({
);
}

export default memo(SummaryRow) as <R, SR>(props: SummaryRowProps<R, SR>) => React.JSX.Element;
const SummaryRowComponent = memo(SummaryRow) as <R, SR>(
props: RenderSummaryRowProps<R, SR>
) => React.JSX.Element;

export default SummaryRowComponent;

export function defaultRenderSummaryRow<R, SR>(
key: React.Key,
props: RenderSummaryRowProps<R, SR>
) {
return <SummaryRowComponent key={key} {...props} />;
}
40 changes: 35 additions & 5 deletions src/TreeDataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
import type { Key } from 'react';

import { useLatestFunc } from './hooks';
import { assertIsValidKeyGetter, getLeftRightKey } from './utils';
import { assertIsValidKeyGetter, classnames, getLeftRightKey } from './utils';
import type {
CellClipboardEvent,
CellCopyArgs,
Expand All @@ -14,6 +14,7 @@ import type {
Maybe,
Omit,
RenderRowProps,
RenderSummaryRowProps,
RowHeightArgs,
RowsChangeData
} from './types';
Expand All @@ -24,6 +25,8 @@ import type { DataGridProps } from './DataGrid';
import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
import GroupedRow from './GroupRow';
import { defaultRenderRow } from './Row';
import { rowFocusable, rowSelectedClassname } from './style/row';
import SummaryRowComponent from './SummaryRow';
Copy link
Collaborator

@nstepien nstepien Feb 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import SummaryRowComponent from './SummaryRow';
import SummaryRow from './SummaryRow';


export interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit<
DataGridProps<R, SR, K>,
Expand Down Expand Up @@ -380,17 +383,23 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
lastFrozenColumnIndex,
draggedOverCellIdx,
selectedCellEditor,
isTreeGrid,
className,
...rowProps
}: RenderRowProps<R, SR>
) {
const isPositionOnRow = rowProps.selectedCellIdx === -1;
const tabIndex = isPositionOnRow ? 0 : -1;
className = classnames(className, rowFocusable, isPositionOnRow && rowSelectedClassname);

if (isGroupRow(row)) {
const { startRowIndex } = row;
return (
<GroupedRow
key={key}
{...rowProps}
aria-rowindex={headerAndTopSummaryRowsCount + startRowIndex + 1}
className={className}
tabIndex={tabIndex}
row={row}
groupBy={groupBy}
toggleGroup={toggleGroupLatest}
Expand All @@ -411,15 +420,16 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
'aria-rowindex': ariaRowIndex,
row,
rowClass,
className,
tabIndex,
onCellMouseDown,
onCellClick,
onCellDoubleClick,
onCellContextMenu,
onRowChange,
lastFrozenColumnIndex,
draggedOverCellIdx,
selectedCellEditor,
isTreeGrid
selectedCellEditor
});
}

Expand All @@ -442,7 +452,8 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
onCellPaste={rawOnCellPaste ? handleCellPaste : undefined}
renderers={{
...renderers,
renderRow
renderRow,
renderSummaryRow
}}
/>
);
Expand All @@ -452,6 +463,25 @@ function defaultGroupIdGetter(groupKey: string, parentId: string | undefined) {
return parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
}

function renderSummaryRow<R, SR>(
key: React.Key,
{ selectedCellIdx, className, ...props }: RenderSummaryRowProps<R, SR>
) {
const isPositionOnRow = selectedCellIdx === -1;
const tabIndex = isPositionOnRow ? 0 : -1;
className = classnames(className, rowFocusable, isPositionOnRow && rowSelectedClassname);

return (
<SummaryRowComponent
key={key}
tabIndex={tabIndex}
selectedCellIdx={selectedCellIdx}
className={className}
{...props}
/>
);
}

function isReadonlyArray(arr: unknown): arr is readonly unknown[] {
return Array.isArray(arr);
}
Loading