diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 536fdc43e1..cf7da46374 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -76,7 +76,7 @@ import {
   viewportDraggingClassname,
   frozenColumnShadowTopClassname
 } from './style/core';
-import SummaryRow from './SummaryRow';
+import { defaultRenderSummaryRow } from './SummaryRow';
 
 export type DefaultColumnOptions<R, SR> = Pick<
   Column<R, SR>,
@@ -294,6 +294,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;
@@ -1081,8 +1083,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
           draggedOverCellIdx: getDraggedOverCellIdx(rowIdx),
           onRowChange: handleFormatterRowChangeLatest,
           setActivePosition: setPositionLatest,
-          activeCellEditor: getCellEditor(rowIdx),
-          isTreeGrid
+          activeCellEditor: getCellEditor(rowIdx)
         });
       })
       .toArray();
@@ -1181,22 +1182,18 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
               const isSummaryRowActive = activePosition.rowIdx === summaryRowIdx;
               const top = headerRowsHeight + summaryRowHeight * rowIdx;
 
-              return (
-                <SummaryRow
-                  key={rowIdx}
-                  aria-rowindex={gridRowStart}
-                  rowIdx={summaryRowIdx}
-                  gridRowStart={gridRowStart}
-                  row={row}
-                  top={top}
-                  bottom={undefined}
-                  iterateOverViewportColumnsForRow={iterateOverViewportColumnsForRow}
-                  activeCellIdx={isSummaryRowActive ? activePosition.idx : undefined}
-                  isTop
-                  setActivePosition={setPositionLatest}
-                  isTreeGrid={isTreeGrid}
-                />
-              );
+              return renderSummaryRow(rowIdx, {
+                'aria-rowindex': gridRowStart,
+                rowIdx: summaryRowIdx,
+                gridRowStart,
+                row,
+                top,
+                bottom: undefined,
+                iterateOverViewportColumnsForRow,
+                activeCellIdx: isSummaryRowActive ? activePosition.idx : undefined,
+                isTop: true,
+                setActivePosition: setPositionLatest
+              });
             })}
             <RowSelectionChangeContext value={selectRowLatest}>
               {getViewportRows()}
@@ -1214,22 +1211,18 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
                   ? summaryRowHeight * (bottomSummaryRowsCount - 1 - rowIdx)
                   : undefined;
 
-              return (
-                <SummaryRow
-                  aria-rowindex={ariaRowCount - bottomSummaryRowsCount + rowIdx + 1}
-                  key={rowIdx}
-                  rowIdx={summaryRowIdx}
-                  gridRowStart={gridRowStart}
-                  row={row}
-                  top={top}
-                  bottom={bottom}
-                  iterateOverViewportColumnsForRow={iterateOverViewportColumnsForRow}
-                  activeCellIdx={isSummaryRowActive ? activePosition.idx : undefined}
-                  isTop={false}
-                  setActivePosition={setPositionLatest}
-                  isTreeGrid={isTreeGrid}
-                />
-              );
+              return renderSummaryRow(rowIdx, {
+                'aria-rowindex': ariaRowCount - bottomSummaryRowsCount + rowIdx + 1,
+                rowIdx: summaryRowIdx,
+                gridRowStart,
+                row,
+                top,
+                bottom,
+                iterateOverViewportColumnsForRow,
+                activeCellIdx: isSummaryRowActive ? activePosition.idx : undefined,
+                isTop: false,
+                setActivePosition: setPositionLatest
+              });
             })}
           </>
         )}
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 6c02310b47..77f449fa3b 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -7,7 +7,7 @@ import type { BaseRenderRowProps, GroupRow, Omit } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
 import GroupCell from './GroupCell';
 import { cell, cellFrozen } from './style/cell';
-import { rowClassname, rowActiveClassname } from './style/row';
+import { rowClassname } from './style/row';
 
 const groupRow = css`
   @layer rdg.GroupedRow {
@@ -46,8 +46,6 @@ function GroupedRow<R, SR>({
   toggleGroup,
   ...props
 }: GroupRowRendererProps<R, SR>) {
-  const isPositionOnRow = activeCellIdx === -1;
-
   let idx = row.level;
 
   function handleSelectGroup() {
@@ -67,12 +65,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 && rowActiveClassname,
           className
         )}
         onMouseDown={handleSelectGroup}
diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
index 8c0f140706..e7f63a6b45 100644
--- a/src/HeaderRow.tsx
+++ b/src/HeaderRow.tsx
@@ -13,7 +13,6 @@ import type {
 import type { DataGridProps } from './DataGrid';
 import HeaderCell from './HeaderCell';
 import { cell, cellFrozen } from './style/cell';
-import { rowActiveClassname } from './style/row';
 
 type SharedDataGridProps<R, SR, K extends React.Key> = Pick<
   DataGridProps<R, SR, K>,
@@ -67,7 +66,6 @@ function HeaderRow<R, SR, K extends React.Key>({
   direction
 }: HeaderRowProps<R, SR, K>) {
   const [draggedColumnKey, setDraggedColumnKey] = useState<string>();
-  const isPositionOnRow = activeCellIdx === -1;
 
   const cells = iterateOverViewportColumnsForRow(activeCellIdx, { type: 'HEADER' })
     .map(([column, isCellActive, colSpan], index) => (
@@ -95,11 +93,7 @@ function HeaderRow<R, SR, K extends React.Key>({
     <div
       role="row"
       aria-rowindex={rowIdx} // aria-rowindex is 1 based
-      className={classnames(
-        headerRowClassname,
-        isPositionOnRow && rowActiveClassname,
-        headerRowClass
-      )}
+      className={classnames(headerRowClassname, headerRowClass)}
     >
       {cells}
     </div>
diff --git a/src/Row.tsx b/src/Row.tsx
index 2638890fa2..f8a75511bb 100644
--- a/src/Row.tsx
+++ b/src/Row.tsx
@@ -4,7 +4,7 @@ import { RowSelectionContext, type RowSelectionContextValue } from './hooks';
 import { classnames } from './utils';
 import type { RenderRowProps } from './types';
 import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
-import { rowClassname, rowActiveClassname } from './style/row';
+import { rowClassname } from './style/row';
 
 function Row<R, SR>({
   className,
@@ -17,7 +17,6 @@ function Row<R, SR>({
   row,
   iterateOverViewportColumnsForRow,
   activeCellEditor,
-  isTreeGrid,
   onCellMouseDown,
   onCellClick,
   onCellDoubleClick,
@@ -30,12 +29,9 @@ function Row<R, SR>({
 }: RenderRowProps<R, SR>) {
   const renderCell = useDefaultRenderers<R, SR>()!.renderCell!;
 
-  const isPositionOnRow = activeCellIdx === -1;
-
   className = classnames(
     rowClassname,
     `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
-    isPositionOnRow && rowActiveClassname,
     rowClass?.(row, rowIdx),
     className
   );
@@ -72,7 +68,6 @@ function Row<R, SR>({
     <RowSelectionContext value={selectionValue}>
       <div
         role="row"
-        tabIndex={isTreeGrid ? (isPositionOnRow ? 0 : -1) : undefined}
         className={className}
         style={{
           gridRowStart,
diff --git a/src/SummaryRow.tsx b/src/SummaryRow.tsx
index 42be58d5f2..4a2bd02dee 100644
--- a/src/SummaryRow.tsx
+++ b/src/SummaryRow.tsx
@@ -2,33 +2,10 @@ import { memo } from 'react';
 import { css } from 'ecij';
 
 import { classnames } from './utils';
-import type { RenderRowProps } from './types';
-import {
-  bottomSummaryRowClassname,
-  rowClassname,
-  rowActiveClassname,
-  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>,
-  | 'iterateOverViewportColumnsForRow'
-  | 'rowIdx'
-  | 'gridRowStart'
-  | 'setActivePosition'
-  | 'activeCellIdx'
-  | 'isTreeGrid'
->;
-
-interface SummaryRowProps<R, SR> extends SharedRenderRowProps<R, SR> {
-  'aria-rowindex': number;
-  row: SR;
-  top: number | undefined;
-  bottom: number | undefined;
-  isTop: boolean;
-}
-
 const summaryRow = css`
   @layer rdg.SummaryRow {
     position: sticky;
@@ -39,6 +16,8 @@ const summaryRow = css`
 const summaryRowClassname = `rdg-summary-row ${summaryRow}`;
 
 function SummaryRow<R, SR>({
+  tabIndex,
+  className,
   rowIdx,
   gridRowStart,
   row,
@@ -48,11 +27,8 @@ function SummaryRow<R, SR>({
   top,
   bottom,
   isTop,
-  isTreeGrid,
   'aria-rowindex': ariaRowIndex
-}: SummaryRowProps<R, SR>) {
-  const isPositionOnRow = activeCellIdx === -1;
-
+}: RenderSummaryRowProps<R, SR>) {
   const cells = iterateOverViewportColumnsForRow(activeCellIdx, { type: 'SUMMARY', row })
     .map(([column, isCellActive, colSpan]) => (
       <SummaryCell<R, SR>
@@ -71,13 +47,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 && rowActiveClassname
+        className
       )}
       style={{
         gridRowStart,
@@ -90,4 +66,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} />;
+}
diff --git a/src/TreeDataGrid.tsx b/src/TreeDataGrid.tsx
index 37c366b4fa..0ddf82e56c 100644
--- a/src/TreeDataGrid.tsx
+++ b/src/TreeDataGrid.tsx
@@ -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,
@@ -14,6 +14,7 @@ import type {
   Maybe,
   Omit,
   RenderRowProps,
+  RenderSummaryRowProps,
   RowHeightArgs,
   RowsChangeData
 } from './types';
@@ -24,6 +25,8 @@ import type { DataGridProps } from './DataGrid';
 import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
 import GroupedRow from './GroupRow';
 import { defaultRenderRow } from './Row';
+import { rowFocusable, rowActiveClassname } from './style/row';
+import SummaryRowComponent from './SummaryRow';
 
 export interface TreeDataGridProps<R, SR = unknown, K extends Key = Key> extends Omit<
   DataGridProps<R, SR, K>,
@@ -379,11 +382,15 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       onRowChange,
       draggedOverCellIdx,
       activeCellEditor,
+      className,
       isRowSelectionDisabled,
-      isTreeGrid,
       ...rowProps
     }: RenderRowProps<R, SR>
   ) {
+    const isPositionOnRow = rowProps.activeCellIdx === -1;
+    const tabIndex = isPositionOnRow ? 0 : -1;
+    className = classnames(className, rowFocusable, isPositionOnRow && rowActiveClassname);
+
     if (isGroupRow(row)) {
       const { startRowIndex } = row;
       return (
@@ -391,6 +398,8 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
           key={key}
           {...rowProps}
           aria-rowindex={headerAndTopSummaryRowsCount + startRowIndex + 1}
+          className={className}
+          tabIndex={tabIndex}
           row={row}
           groupBy={groupBy}
           toggleGroup={toggleGroupLatest}
@@ -411,6 +420,8 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       'aria-rowindex': ariaRowIndex,
       row,
       rowClass,
+      className,
+      tabIndex,
       onCellMouseDown,
       onCellClick,
       onCellDoubleClick,
@@ -418,8 +429,7 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       onRowChange,
       draggedOverCellIdx,
       activeCellEditor,
-      isRowSelectionDisabled,
-      isTreeGrid
+      isRowSelectionDisabled
     });
   }
 
@@ -442,7 +452,8 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
       onCellPaste={rawOnCellPaste ? handleCellPaste : undefined}
       renderers={{
         ...renderers,
-        renderRow
+        renderRow,
+        renderSummaryRow
       }}
     />
   );
@@ -452,6 +463,25 @@ function defaultGroupIdGetter(groupKey: string, parentId: string | undefined) {
   return parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
 }
 
+function renderSummaryRow<R, SR>(
+  key: React.Key,
+  { activeCellIdx, className, ...props }: RenderSummaryRowProps<R, SR>
+) {
+  const isPositionOnRow = activeCellIdx === -1;
+  const tabIndex = isPositionOnRow ? 0 : -1;
+  className = classnames(className, rowFocusable, isPositionOnRow && rowActiveClassname);
+
+  return (
+    <SummaryRowComponent
+      key={key}
+      tabIndex={tabIndex}
+      activeCellIdx={activeCellIdx}
+      className={className}
+      {...props}
+    />
+  );
+}
+
 function isReadonlyArray(arr: unknown): arr is readonly unknown[] {
   return Array.isArray(arr);
 }
diff --git a/src/index.ts b/src/index.ts
index d965cdf85f..ac7b114aed 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,7 @@ export { TreeDataGrid, type TreeDataGridProps } from './TreeDataGrid';
 export { DataGridDefaultRenderersContext } from './DataGridDefaultRenderersContext';
 export { default as Row } from './Row';
 export { default as Cell } from './Cell';
+export { default as SummaryRow } from './SummaryRow';
 export * from './Columns';
 export * from './cellRenderers';
 export { renderTextEditor } from './editors/renderTextEditor';
@@ -47,6 +48,7 @@ export type {
   RenderSortPriorityProps,
   RenderSortStatusProps,
   RenderSummaryCellProps,
+  RenderSummaryRowProps,
   RowHeightArgs,
   RowsChangeData,
   SelectHeaderRowEvent,
diff --git a/src/style/row.ts b/src/style/row.ts
index a7feeb7743..0d7d2d929b 100644
--- a/src/style/row.ts
+++ b/src/style/row.ts
@@ -13,6 +13,18 @@ export const row = css`
       background-color: var(--rdg-row-hover-background-color);
     }
 
+    &[aria-selected='true'] {
+      background-color: var(--rdg-row-selected-background-color);
+
+      &:hover {
+        background-color: var(--rdg-row-selected-hover-background-color);
+      }
+    }
+  }
+`;
+
+export const rowFocusable = css`
+  @layer rdg.Row {
     &:focus {
       outline: none;
     }
@@ -36,14 +48,6 @@ export const row = css`
         border-inline-start: var(--rdg-selection-width) solid var(--rdg-selection-color);
       }
     }
-
-    &[aria-selected='true'] {
-      background-color: var(--rdg-row-selected-background-color);
-
-      &:hover {
-        background-color: var(--rdg-row-selected-hover-background-color);
-      }
-    }
   }
 `;
 
diff --git a/src/types.ts b/src/types.ts
index a981e4d915..6195c83005 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -281,7 +281,23 @@ export interface RenderRowProps<TRow, TSummaryRow = unknown> extends BaseRenderR
   activeCellEditor: ReactElement<RenderEditCellProps<TRow>> | undefined;
   onRowChange: (column: CalculatedColumn<TRow, TSummaryRow>, rowIdx: number, newRow: TRow) => void;
   rowClass: Maybe<(row: TRow, rowIdx: number) => Maybe<string>>;
-  isTreeGrid: boolean;
+}
+
+export interface RenderSummaryRowProps<TRow, TSummaryRow = unknown> extends Pick<
+  BaseRenderRowProps<TRow, TSummaryRow>,
+  | 'className'
+  | 'tabIndex'
+  | 'iterateOverViewportColumnsForRow'
+  | 'rowIdx'
+  | 'gridRowStart'
+  | 'setActivePosition'
+  | 'activeCellIdx'
+> {
+  'aria-rowindex': number;
+  row: TSummaryRow;
+  top: number | undefined;
+  bottom: number | undefined;
+  isTop: boolean;
 }
 
 export interface RowsChangeData<R, SR = unknown> {
@@ -364,6 +380,9 @@ export interface Renderers<TRow, TSummaryRow> {
   renderCell?: Maybe<(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;
   renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
   renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
+  renderSummaryRow?: Maybe<
+    (key: Key, props: RenderSummaryRowProps<TRow, TSummaryRow>) => ReactNode
+  >;
   renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
   noRowsFallback?: Maybe<ReactNode>;
 }
diff --git a/test/browser/renderers.test.tsx b/test/browser/renderers.test.tsx
index 54059ee126..3e0d4369bc 100644
--- a/test/browser/renderers.test.tsx
+++ b/test/browser/renderers.test.tsx
@@ -6,6 +6,7 @@ import {
   DataGrid,
   DataGridDefaultRenderersContext,
   Row as DefaultRow,
+  SummaryRow as DefaultSummaryRow,
   renderSortIcon,
   SelectColumn
 } from '../../src';
@@ -14,6 +15,7 @@ import type {
   Column,
   DataGridProps,
   RenderRowProps,
+  RenderSummaryRowProps,
   RenderSortStatusProps,
   SortColumn
 } from '../../src';
@@ -24,15 +26,17 @@ interface Row {
   col1: string;
   col2: string;
 }
+type SummaryRow = undefined;
 
 const noRows: readonly Row[] = [];
 
-const columns: readonly Column<Row>[] = [
+const columns: readonly Column<Row, SummaryRow>[] = [
   SelectColumn,
   {
     key: 'col1',
     name: 'Column1',
-    sortable: true
+    sortable: true,
+    renderSummaryCell: () => 'summary'
   },
   {
     key: 'col2',
@@ -41,22 +45,30 @@ const columns: readonly Column<Row>[] = [
   }
 ];
 
-function renderGlobalCell(key: React.Key, props: CellRendererProps<Row, unknown>) {
+function renderGlobalCell(key: React.Key, props: CellRendererProps<Row, SummaryRow>) {
   return <Cell key={key} {...props} className="global" style={{ fontStyle: 'italic' }} />;
 }
 
-function renderLocalCell(key: React.Key, props: CellRendererProps<Row, unknown>) {
+function renderLocalCell(key: React.Key, props: CellRendererProps<Row, SummaryRow>) {
   return <Cell key={key} {...props} className="local" style={{ fontStyle: 'normal' }} />;
 }
 
-function renderGlobalRow(key: React.Key, props: RenderRowProps<Row>) {
+function renderGlobalRow(key: React.Key, props: RenderRowProps<Row, SummaryRow>) {
   return <DefaultRow key={key} {...props} className="global" />;
 }
 
-function renderLocalRow(key: React.Key, props: RenderRowProps<Row>) {
+function renderLocalRow(key: React.Key, props: RenderRowProps<Row, SummaryRow>) {
   return <DefaultRow key={key} {...props} className="local" />;
 }
 
+function renderGlobalSummaryRow(key: React.Key, props: RenderSummaryRowProps<Row, SummaryRow>) {
+  return <DefaultSummaryRow key={key} {...props} className="global" />;
+}
+
+function renderLocalSummaryRow(key: React.Key, props: RenderSummaryRowProps<Row, SummaryRow>) {
+  return <DefaultSummaryRow key={key} {...props} className="local" />;
+}
+
 function NoRowsFallback() {
   return <div>Local no rows fallback</div>;
 }
@@ -97,7 +109,7 @@ function TestGrid<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>) {
   return <DataGrid {...props} sortColumns={sortColumns} onSortColumnsChange={setSortColumns} />;
 }
 
-function setupContext<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>) {
+function setupContext<R, SR, K extends React.Key = React.Key>(props: DataGridProps<R, SR, K>) {
   return page.render(
     <DataGridDefaultRenderersContext
       value={{
@@ -105,7 +117,8 @@ function setupContext<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>
         renderCheckbox: renderGlobalCheckbox,
         renderSortStatus: renderGlobalSortStatus,
         renderCell: renderGlobalCell,
-        renderRow: renderGlobalRow
+        renderRow: renderGlobalRow,
+        renderSummaryRow: renderGlobalSummaryRow
       }}
     >
       <TestGrid {...props} />
@@ -114,28 +127,36 @@ function setupContext<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>
 }
 
 test('fallback defined using renderers prop with no rows', async () => {
-  await setup({ columns, rows: noRows, renderers: { noRowsFallback: <NoRowsFallback /> } });
+  await setup<Row, SummaryRow>({
+    columns,
+    rows: noRows,
+    renderers: { noRowsFallback: <NoRowsFallback /> }
+  });
 
   await testRowCount(0);
   await expect.element(page.getByText('Local no rows fallback')).toBeInTheDocument();
 });
 
 test('fallback defined using context with no rows', async () => {
-  await setupContext({ columns, rows: noRows });
+  await setupContext<Row, SummaryRow>({ columns, rows: noRows });
 
   await testRowCount(0);
   await expect.element(page.getByText('Global no rows fallback')).toBeInTheDocument();
 });
 
 test('fallback defined using both context and renderers with no rows', async () => {
-  await setupContext({ columns, rows: noRows, renderers: { noRowsFallback: <NoRowsFallback /> } });
+  await setupContext<Row, SummaryRow>({
+    columns,
+    rows: noRows,
+    renderers: { noRowsFallback: <NoRowsFallback /> }
+  });
 
   await testRowCount(0);
   await expect.element(page.getByText('Local no rows fallback')).toBeInTheDocument();
 });
 
 test('fallback defined using renderers prop with a row', async () => {
-  await setup({
+  await setup<Row, SummaryRow>({
     columns,
     rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }],
     renderers: { noRowsFallback: <NoRowsFallback /> }
@@ -146,14 +167,17 @@ test('fallback defined using renderers prop with a row', async () => {
 });
 
 test('fallback defined using context with a row', async () => {
-  await setupContext({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] });
+  await setupContext<Row, SummaryRow>({
+    columns,
+    rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }]
+  });
 
   await testRowCount(1);
   await expect.element(page.getByText('Global no rows fallback')).not.toBeInTheDocument();
 });
 
 test('fallback defined using both context and renderers with a row', async () => {
-  await setupContext({
+  await setupContext<Row, SummaryRow>({
     columns,
     rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }],
     renderers: { noRowsFallback: <NoRowsFallback /> }
@@ -165,21 +189,29 @@ test('fallback defined using both context and renderers with a row', async () =>
 });
 
 test('checkbox defined using renderers prop', async () => {
-  await setup({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } });
+  await setup<Row, SummaryRow>({
+    columns,
+    rows: noRows,
+    renderers: { renderCheckbox: renderLocalCheckbox }
+  });
 
   await testRowCount(0);
   await expect.element(page.getByText('Local checkbox')).toBeInTheDocument();
 });
 
 test('checkbox defined using context', async () => {
-  await setupContext({ columns, rows: noRows });
+  await setupContext<Row, SummaryRow>({ columns, rows: noRows });
 
   await testRowCount(0);
   await expect.element(page.getByText('Global checkbox')).toBeInTheDocument();
 });
 
 test('checkbox defined using both context and renderers', async () => {
-  await setupContext({ columns, rows: noRows, renderers: { renderCheckbox: renderLocalCheckbox } });
+  await setupContext<Row, SummaryRow>({
+    columns,
+    rows: noRows,
+    renderers: { renderCheckbox: renderLocalCheckbox }
+  });
 
   await testRowCount(0);
   await expect.element(page.getByText('Local checkbox')).toBeInTheDocument();
@@ -187,7 +219,7 @@ test('checkbox defined using both context and renderers', async () => {
 });
 
 test('sortPriority defined using both contexts', async () => {
-  await setupContext({ columns, rows: noRows });
+  await setupContext<Row, SummaryRow>({ columns, rows: noRows });
 
   const column1 = page.getHeaderCell({ name: 'Column1' });
   const column2 = page.getHeaderCell({ name: 'Column2' });
@@ -204,7 +236,7 @@ test('sortPriority defined using both contexts', async () => {
 });
 
 test('sortPriority defined using both contexts and renderers', async () => {
-  await setupContext({
+  await setupContext<Row, SummaryRow>({
     columns,
     rows: noRows,
     renderers: { renderSortStatus: renderLocalSortStatus }
@@ -225,7 +257,10 @@ test('sortPriority defined using both contexts and renderers', async () => {
 });
 
 test('renderCell defined using context', async () => {
-  await setupContext({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] });
+  await setupContext<Row, SummaryRow>({
+    columns,
+    rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }]
+  });
 
   const cell1 = page.getCell({ name: 'value 1' });
   const cell2 = page.getCell({ name: 'value 2' });
@@ -239,7 +274,7 @@ test('renderCell defined using context', async () => {
 });
 
 test('renderCell defined using both contexts and renderers', async () => {
-  await setupContext({
+  await setupContext<Row, SummaryRow>({
     columns,
     rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }],
     renderers: { renderCell: renderLocalCell }
@@ -257,7 +292,10 @@ test('renderCell defined using both contexts and renderers', async () => {
 });
 
 test('renderRow defined using context', async () => {
-  await setupContext({ columns, rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }] });
+  await setupContext<Row, SummaryRow>({
+    columns,
+    rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }]
+  });
 
   const row = getRowWithCell(page.getCell({ name: 'value 1' }));
   await expect.element(row).toHaveClass('global');
@@ -265,7 +303,7 @@ test('renderRow defined using context', async () => {
 });
 
 test('renderRow defined using both contexts and renderers', async () => {
-  await setupContext({
+  await setupContext<Row, SummaryRow>({
     columns,
     rows: [{ id: 1, col1: 'value 1', col2: 'value 2' }],
     renderers: { renderRow: renderLocalRow }
@@ -275,3 +313,28 @@ test('renderRow defined using both contexts and renderers', async () => {
   await expect.element(row).toHaveClass('local');
   await expect.element(row).not.toHaveClass('global');
 });
+
+test('renderSummaryRow defined using context', async () => {
+  await setupContext<Row, SummaryRow>({
+    columns,
+    rows: [{ id: 10, col1: 'value 10', col2: 'value 20' }],
+    topSummaryRows: [undefined]
+  });
+
+  const row = getRowWithCell(page.getCell({ name: 'summary' }));
+  await expect.element(row).toHaveClass('global');
+  await expect.element(row).not.toHaveClass('local');
+});
+
+test('renderSummaryRow defined using both contexts and renderers', async () => {
+  await setupContext<Row, SummaryRow>({
+    columns,
+    rows: [{ id: 10, col1: 'value 10', col2: 'value 20' }],
+    bottomSummaryRows: [undefined],
+    renderers: { renderSummaryRow: renderLocalSummaryRow }
+  });
+
+  const row = getRowWithCell(page.getCell({ name: 'summary' }));
+  await expect.element(row).toHaveClass('local');
+  await expect.element(row).not.toHaveClass('global');
+});