diff --git a/change/@fluentui-react-table-de6b4151-670a-4292-8e84-bd8a4e72f175.json b/change/@fluentui-react-table-de6b4151-670a-4292-8e84-bd8a4e72f175.json
new file mode 100644
index 0000000000000..88c7027de200b
--- /dev/null
+++ b/change/@fluentui-react-table-de6b4151-670a-4292-8e84-bd8a4e72f175.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING(DataGrid): render functions need to by typed",
+  "packageName": "@fluentui/react-table",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md
index c9cc0909700b3..00b194abd2edc 100644
--- a/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md
+++ b/packages/react-components/react-data-grid-react-window/etc/react-data-grid-react-window.api.md
@@ -6,22 +6,22 @@
 
 /// <reference types="react" />
 
-import type { DataGridBodyProps as DataGridBodyProps_2 } from '@fluentui/react-components/unstable';
-import type { DataGridBodySlots as DataGridBodySlots_2 } from '@fluentui/react-components/unstable';
-import type { DataGridBodyState as DataGridBodyState_2 } from '@fluentui/react-components/unstable';
-import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { DataGridBodyProps as DataGridBodyProps_2 } from '@fluentui/react-table';
+import type { DataGridBodySlots as DataGridBodySlots_2 } from '@fluentui/react-table';
+import type { DataGridBodyState as DataGridBodyState_2 } from '@fluentui/react-table';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import type { TableRowData } from '@fluentui/react-components/unstable';
+import type { TableRowData } from '@fluentui/react-table';
 
 // @public
-export const DataGridBody: ForwardRefComponent<DataGridBodyProps>;
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 // @public
-export type DataGridBodyProps = Omit<DataGridBodyProps_2, 'children'> & {
+export type DataGridBodyProps<TItem = unknown> = Omit<DataGridBodyProps_2, 'children'> & {
     itemSize: number;
     height: number;
     width?: string | number;
-    children: RowRenderFunction;
+    children: RowRenderFunction<TItem>;
 };
 
 // @public (undocumented)
diff --git a/packages/react-components/react-data-grid-react-window/package.json b/packages/react-components/react-data-grid-react-window/package.json
index 52b4f3ba76c7d..85c85b1a3c2eb 100644
--- a/packages/react-components/react-data-grid-react-window/package.json
+++ b/packages/react-components/react-data-grid-react-window/package.json
@@ -32,6 +32,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-table": "9.0.0-alpha.19",
+    "@fluentui/react-utilities": "^9.4.0",
     "react-window": "^1.8.6",
     "tslib": "^2.1.0"
   },
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
index 2daf505f218c4..754782dcc6881 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles';
 import { useDataGridBody_unstable } from './useDataGridBody';
 import { renderDataGridBody_unstable } from './renderDataGridBody';
@@ -8,11 +8,12 @@ import type { DataGridBodyProps } from './DataGridBody.types';
 /**
  * DataGridBody component
  */
-export const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
   const state = useDataGridBody_unstable(props, ref);
 
   useDataGridBodyStyles_unstable(state);
   return renderDataGridBody_unstable(state);
-});
+}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 DataGridBody.displayName = 'DataGridBody';
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts
index 8405d38788955..227cdb7c96488 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts
@@ -4,19 +4,19 @@ import type {
   DataGridBodyProps as DataGridBodyPropsBase,
   DataGridBodySlots as DataGridBodySlotsBase,
   DataGridBodyState as DataGridBodyStateBase,
-} from '@fluentui/react-components/unstable';
+} from '@fluentui/react-table';
 
 export type DataGridBodySlots = DataGridBodySlotsBase;
 
-// Use any here since we can't know the user types
-// The user is responsible for narrowing the type downstream
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type RowRenderFunction = (row: TableRowData<any>, style: React.CSSProperties) => React.ReactNode;
+export type RowRenderFunction<TItem = unknown> = (
+  row: TableRowData<TItem>,
+  style: React.CSSProperties,
+) => React.ReactNode;
 
 /**
  * DataGridBody Props
  */
-export type DataGridBodyProps = Omit<DataGridBodyPropsBase, 'children'> & {
+export type DataGridBodyProps<TItem = unknown> = Omit<DataGridBodyPropsBase, 'children'> & {
   /**
    * The size of each row
    */
@@ -33,7 +33,7 @@ export type DataGridBodyProps = Omit<DataGridBodyPropsBase, 'children'> & {
   /**
    * Children render function for rows
    */
-  children: RowRenderFunction;
+  children: RowRenderFunction<TItem>;
 };
 
 /**
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx
index 1eb32a9d2e82a..bb0b233768b6c 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { DataGridBodyState, DataGridBodySlots } from './DataGridBody.types';
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
-import { getSlots } from '@fluentui/react-components';
-import { TableRowData, TableRowIdContextProvider } from '@fluentui/react-components/unstable';
+import { getSlots } from '@fluentui/react-utilities';
+import { TableRowData, TableRowIdContextProvider } from '@fluentui/react-table';
 
 /**
  * Render the final JSX of DataGridVirtualizedBody
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts
index 88104effe8c6a..5f945f12f5b79 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { DataGridBodyProps, DataGridBodyState } from './DataGridBody.types';
-import { useDataGridBody_unstable as useDataGridBodyBase_unstable } from '@fluentui/react-components/unstable';
+import { useDataGridBody_unstable as useDataGridBodyBase_unstable, RowRenderFunction } from '@fluentui/react-table';
 
 /**
  * Create the state required to render DataGridBody.
@@ -12,14 +12,17 @@ import { useDataGridBody_unstable as useDataGridBodyBase_unstable } from '@fluen
  * @param ref - reference to root HTMLElement of DataGridBody
  */
 export const useDataGridBody_unstable = (props: DataGridBodyProps, ref: React.Ref<HTMLElement>): DataGridBodyState => {
-  const { height, itemSize, width = '100%' } = props;
-  const baseState = useDataGridBodyBase_unstable(props, ref);
+  const { height, itemSize, width = '100%', children } = props;
+
+  // cast the row render function to work with unknown args
+  const renderRowWithUnknown = children as RowRenderFunction;
+  const baseState = useDataGridBodyBase_unstable({ ...props, children: renderRowWithUnknown }, ref);
 
   return {
     ...baseState,
     itemSize,
     height,
-    renderRow: props.children,
+    renderRow: children,
     width,
   };
 };
diff --git a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts
index 17dad476c4122..3624babfbb5c8 100644
--- a/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts
+++ b/packages/react-components/react-data-grid-react-window/src/components/DataGridBody/useDataGridBodyStyles.ts
@@ -1,5 +1,5 @@
 import type { DataGridBodyState } from './DataGridBody.types';
-import { useDataGridBodyStyles_unstable as useDataGridBodyStylesBase_unstable } from '@fluentui/react-components/unstable';
+import { useDataGridBodyStyles_unstable as useDataGridBodyStylesBase_unstable } from '@fluentui/react-table';
 
 /**
  * Apply styling to the DataGridBody slots based on the state
diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md
index 34d2e649cfc0d..3867e3db98e5e 100644
--- a/packages/react-components/react-table/etc/react-table.api.md
+++ b/packages/react-components/react-table/etc/react-table.api.md
@@ -20,7 +20,7 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public (undocumented)
-export type CellRenderFunction = (column: TableColumnDefinition<any>) => React_2.ReactNode;
+export type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React_2.ReactNode;
 
 // @public
 export function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): {
@@ -40,14 +40,14 @@ export interface CreateTableColumnOptions<TItem> extends Partial<TableColumnDefi
 export const DataGrid: ForwardRefComponent<DataGridProps>;
 
 // @public
-export const DataGridBody: ForwardRefComponent<DataGridBodyProps>;
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 // @public (undocumented)
 export const dataGridBodyClassNames: SlotClassNames<DataGridBodySlots>;
 
 // @public
-export type DataGridBodyProps = Omit<TableBodyProps, 'children'> & {
-    children: RowRenderFunction;
+export type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {
+    children: RowRenderFunction<TItem>;
 };
 
 // @public (undocumented)
@@ -55,7 +55,7 @@ export type DataGridBodySlots = TableBodySlots;
 
 // @public
 export type DataGridBodyState = TableBodyState & {
-    rows: TableRowData<any>[];
+    rows: TableRowData<unknown>[];
     renderRow: RowRenderFunction;
 };
 
@@ -131,14 +131,14 @@ export type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'c
 };
 
 // @public
-export const DataGridRow: ForwardRefComponent<DataGridRowProps>;
+export const DataGridRow: ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 // @public (undocumented)
 export const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
 
 // @public
-export type DataGridRowProps = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
-    children: CellRenderFunction;
+export type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
+    children: CellRenderFunction<TItem>;
 };
 
 // @public (undocumented)
@@ -224,7 +224,7 @@ export const renderTableRow_unstable: (state: TableRowState) => JSX.Element;
 export const renderTableSelectionCell_unstable: (state: TableSelectionCellState) => JSX.Element;
 
 // @public (undocumented)
-export type RowRenderFunction = (row: TableRowData<any>, ...rest: any[]) => React_2.ReactNode;
+export type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React_2.ReactNode;
 
 // @public (undocumented)
 export type SortDirection = 'ascending' | 'descending';
diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx
index 35b2022006c05..2eb29a856c9a8 100644
--- a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx
+++ b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.tsx
@@ -8,11 +8,12 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
  * DataGridBody component
  */
-export const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
   const state = useDataGridBody_unstable(props, ref);
 
   useDataGridBodyStyles_unstable(state);
   return renderDataGridBody_unstable(state);
-});
+}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 DataGridBody.displayName = 'DataGridBody';
diff --git a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts
index 2999def5ed71e..abd37ed9bbadf 100644
--- a/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts
+++ b/packages/react-components/react-table/src/components/DataGridBody/DataGridBody.types.ts
@@ -4,27 +4,23 @@ import type { TableBodySlots, TableBodyProps, TableBodyState } from '../TableBod
 
 export type DataGridBodySlots = TableBodySlots;
 
-// Use any here since we can't know the user types
-// The user is responsible for narrowing the type downstream
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type RowRenderFunction = (row: TableRowData<any>, ...rest: any[]) => React.ReactNode;
+export type RowRenderFunction<TItem = unknown> = (row: TableRowData<TItem>, ...rest: unknown[]) => React.ReactNode;
 
 /**
  * DataGridBody Props
  */
-export type DataGridBodyProps = Omit<TableBodyProps, 'children'> & {
+export type DataGridBodyProps<TItem = unknown> = Omit<TableBodyProps, 'children'> & {
   /**
    * Render function for rows
    */
-  children: RowRenderFunction;
+  children: RowRenderFunction<TItem>;
 };
 
 /**
  * State used in rendering DataGridBody
  */
 export type DataGridBodyState = TableBodyState & {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  rows: TableRowData<any>[];
+  rows: TableRowData<unknown>[];
 
   renderRow: RowRenderFunction;
 };
diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx
index 688326d3652d7..f1824c47ae9b7 100644
--- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx
+++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.tsx
@@ -8,11 +8,12 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
  * DataGridRow component
  */
-export const DataGridRow: ForwardRefComponent<DataGridRowProps> = React.forwardRef((props, ref) => {
+export const DataGridRow: ForwardRefComponent<DataGridRowProps> &
+  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
   const state = useDataGridRow_unstable(props, ref);
 
   useDataGridRowStyles_unstable(state);
   return renderDataGridRow_unstable(state);
-});
+}) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 DataGridRow.displayName = 'DataGridRow';
diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts
index c06e07be11cf1..fa1191682867c 100644
--- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts
+++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts
@@ -12,17 +12,14 @@ export type DataGridRowSlots = TableRowSlots & {
   selectionCell?: Slot<typeof TableSelectionCell>;
 };
 
-// Use any here since we can't know the user types
-// The user is responsible for narrowing the type downstream
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type CellRenderFunction = (column: TableColumnDefinition<any>) => React.ReactNode;
+export type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>) => React.ReactNode;
 
 /**
  * DataGridRow Props
  */
-export type DataGridRowProps = Omit<TableRowProps, 'children'> &
+export type DataGridRowProps<TItem = unknown> = Omit<TableRowProps, 'children'> &
   Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
-    children: CellRenderFunction;
+    children: CellRenderFunction<TItem>;
   };
 
 /**
diff --git a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx
index 314d010437545..0d03c64e5b274 100644
--- a/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/Default.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
 } from '@fluentui/react-table';
 
@@ -167,15 +166,13 @@ export const Default = () => {
     >
       <DataGridHeader>
         <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
index 630e22c06d728..eef93799f815e 100644
--- a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
 } from '@fluentui/react-table';
 
@@ -162,15 +161,13 @@ export const MultipleSelect = () => {
     <DataGrid items={items} columns={columns} selectionMode="multiselect" defaultSelectedItems={defaultSelectedItems}>
       <DataGridHeader>
         <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx
index 02a2e76ad2519..a323563d30560 100644
--- a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
   TableRowId,
   DataGridProps,
@@ -175,15 +174,13 @@ export const MultipleSelectControlled = () => {
     >
       <DataGridHeader>
         <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx b/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx
index 3798075ba470b..95a61a2564bb6 100644
--- a/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/RowNavigation.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
 } from '@fluentui/react-table';
 
@@ -160,15 +159,13 @@ export const RowNavigation = () => {
     <DataGrid items={items} columns={columns} focusMode="row_unstable">
       <DataGridHeader>
         <DataGridRow>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx
index c5bc42e9f9131..660515e6a7ea0 100644
--- a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
 } from '@fluentui/react-table';
 
@@ -168,15 +167,13 @@ export const SelectionAppearance = () => {
     >
       <DataGridHeader>
         <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx
index b9af98dd98fc3..70ff6b8e33069 100644
--- a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
 } from '@fluentui/react-table';
 
@@ -162,15 +161,13 @@ export const SingleSelect = () => {
     <DataGrid items={items} columns={columns} selectionMode="single" defaultSelectedItems={defaultSelectedItems}>
       <DataGridHeader>
         <DataGridRow>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx
index 738de527d97f8..fbcf584f692a0 100644
--- a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
   TableRowId,
   DataGridProps,
@@ -175,15 +174,13 @@ export const SingleSelectControlled = () => {
     >
       <DataGridHeader>
         <DataGridRow>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx
index b3d0e0986154d..b0f76f29139a2 100644
--- a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
 } from '@fluentui/react-table';
 import { SortState } from '../../src/hooks/types';
@@ -163,15 +162,13 @@ export const Sort = () => {
     <DataGrid items={items} columns={columns} sortable defaultSortState={defaultSortState}>
       <DataGridHeader>
         <DataGridRow>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx
index 2c32274f1802f..d9ce53f21b738 100644
--- a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
   DataGridProps,
 } from '@fluentui/react-table';
@@ -167,15 +166,13 @@ export const SortControlled = () => {
     <DataGrid items={items} columns={columns} sortable sortState={sortState} onSortChange={onSortChange}>
       <DataGridHeader>
         <DataGridRow>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx
index f83797ea151d4..bd59445610ba5 100644
--- a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx
@@ -18,7 +18,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
 } from '@fluentui/react-table';
 
@@ -168,15 +167,13 @@ export const SubtleSelection = () => {
     >
       <DataGridHeader>
         <DataGridRow selectionCell={{ 'aria-label': 'Select all rows' }}>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody>
-        {({ item, rowId }: TableRowData<Item>) => (
-          <DataGridRow key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ 'aria-label': 'Select row' }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>
diff --git a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx
index b8f4a74383c4f..428b41b6e5e2f 100644
--- a/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx
+++ b/packages/react-components/react-table/stories/DataGrid/Virtualization.stories.tsx
@@ -16,7 +16,6 @@ import {
   DataGridHeaderCell,
   DataGridCell,
   TableColumnDefinition,
-  TableRowData,
   createTableColumn,
   TableCellLayout,
 } from '@fluentui/react-components/unstable';
@@ -164,15 +163,13 @@ export const Virtualization = () => {
     <DataGrid items={items} columns={columns} focusMode="cell" sortable selectionMode="multiselect">
       <DataGridHeader style={{ paddingRight: scrollbarWidth }}>
         <DataGridRow>
-          {({ renderHeaderCell }: TableColumnDefinition<Item>) => (
-            <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
-          )}
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
         </DataGridRow>
       </DataGridHeader>
-      <DataGridBody itemSize={50} height={400}>
-        {({ item, rowId }: TableRowData<Item>, style) => (
-          <DataGridRow key={rowId} style={style}>
-            {({ renderCell }: TableColumnDefinition<Item>) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+      <DataGridBody<Item> itemSize={50} height={400}>
+        {({ item, rowId }, style) => (
+          <DataGridRow<Item> key={rowId} style={style}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
           </DataGridRow>
         )}
       </DataGridBody>