From ad8e7e364c0f9c753d4f65a07239a3eec29def80 Mon Sep 17 00:00:00 2001
From: Dmytro Kirpa <dmytrokirpa@microsoft.com>
Date: Sun, 26 Apr 2026 14:46:07 +0200
Subject: [PATCH 1/3] test(react-table): add unit tests for useTable_unstable
 and useDataGrid_unstable hooks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/DataGrid/useDataGrid.test.ts   | 85 +++++++++++++++++++
 .../src/components/Table/useTable.test.ts     | 50 +++++++++++
 2 files changed, 135 insertions(+)
 create mode 100644 packages/react-components/react-table/library/src/components/DataGrid/useDataGrid.test.ts
 create mode 100644 packages/react-components/react-table/library/src/components/Table/useTable.test.ts

diff --git a/packages/react-components/react-table/library/src/components/DataGrid/useDataGrid.test.ts b/packages/react-components/react-table/library/src/components/DataGrid/useDataGrid.test.ts
new file mode 100644
index 0000000000000..3e08bc85f8709
--- /dev/null
+++ b/packages/react-components/react-table/library/src/components/DataGrid/useDataGrid.test.ts
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useDataGrid_unstable } from './useDataGrid';
+import { useDataGridContextValues_unstable } from './useDataGridContextValues';
+import { createTableColumn } from '../../hooks';
+
+const columns = [createTableColumn({ columnId: 'name' }), createTableColumn({ columnId: 'age' })];
+const items = [
+  { name: 'Alice', age: 30 },
+  { name: 'Bob', age: 25 },
+];
+
+describe('useDataGrid_unstable', () => {
+  let ref: React.RefObject<HTMLElement | null>;
+
+  beforeEach(() => {
+    ref = React.createRef<HTMLElement>();
+  });
+
+  it('returns default state with table element and medium size', () => {
+    const { result } = renderHook(() => useDataGrid_unstable({ columns, items }, ref));
+
+    expect(result.current).toMatchObject({
+      components: { root: 'table' },
+      size: 'medium',
+      noNativeElements: false,
+      focusMode: 'cell',
+      selectableRows: false,
+    });
+  });
+
+  it('reflects selectionMode in selectableRows', () => {
+    const { result } = renderHook(() => useDataGrid_unstable({ columns, items, selectionMode: 'multiselect' }, ref));
+
+    expect(result.current.selectableRows).toBe(true);
+  });
+
+  it('exposes sorted rows via tableState', () => {
+    const { result } = renderHook(() => useDataGrid_unstable({ columns, items }, ref));
+
+    expect(result.current.tableState.getRows()).toHaveLength(items.length);
+  });
+
+  it('reflects resizableColumns prop', () => {
+    const { result } = renderHook(() => useDataGrid_unstable({ columns, items, resizableColumns: true }, ref));
+
+    expect(result.current.resizableColumns).toBe(true);
+  });
+});
+
+describe('useDataGridContextValues_unstable', () => {
+  let ref: React.RefObject<HTMLElement | null>;
+
+  beforeEach(() => {
+    ref = React.createRef<HTMLElement>();
+  });
+
+  it('includes table and dataGrid context', () => {
+    const { result } = renderHook(() => {
+      const state = useDataGrid_unstable({ columns, items }, ref);
+      return useDataGridContextValues_unstable(state);
+    });
+
+    expect(result.current).toMatchObject({
+      table: {
+        size: 'medium',
+        noNativeElements: false,
+        sortable: false,
+      },
+      dataGrid: expect.objectContaining({
+        focusMode: 'cell',
+        selectableRows: false,
+      }),
+    });
+  });
+
+  it('reflects selectionMode in dataGrid context', () => {
+    const { result } = renderHook(() => {
+      const state = useDataGrid_unstable({ columns, items, selectionMode: 'single' }, ref);
+      return useDataGridContextValues_unstable(state);
+    });
+
+    expect(result.current.dataGrid.selectableRows).toBe(true);
+  });
+});
diff --git a/packages/react-components/react-table/library/src/components/Table/useTable.test.ts b/packages/react-components/react-table/library/src/components/Table/useTable.test.ts
new file mode 100644
index 0000000000000..2193f03951567
--- /dev/null
+++ b/packages/react-components/react-table/library/src/components/Table/useTable.test.ts
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useTable_unstable } from './useTable';
+
+describe('useTable_unstable', () => {
+  let ref: React.RefObject<HTMLElement | null>;
+
+  beforeEach(() => {
+    ref = React.createRef<HTMLElement>();
+  });
+
+  it('returns default state with table element and medium size', () => {
+    const { result } = renderHook(() => useTable_unstable({}, ref));
+
+    expect(result.current).toMatchObject({
+      components: { root: 'table' },
+      root: expect.objectContaining({ ref }),
+      size: 'medium',
+      noNativeElements: false,
+      sortable: false,
+    });
+  });
+
+  it('renders as div with role="table" when noNativeElements is true', () => {
+    const { result } = renderHook(() => useTable_unstable({ noNativeElements: true }, ref));
+
+    expect(result.current.components.root).toBe('div');
+    expect(result.current.root).toMatchObject({ role: 'table' });
+    expect(result.current.noNativeElements).toBe(true);
+  });
+
+  it('respects explicit as prop', () => {
+    const { result } = renderHook(() => useTable_unstable({ as: 'div' }, ref));
+
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    expect(result.current.components.root).toBe('div');
+  });
+
+  it('passes size prop through to state', () => {
+    const { result } = renderHook(() => useTable_unstable({ size: 'small' }, ref));
+
+    expect(result.current.size).toBe('small');
+  });
+
+  it('reflects sortable prop in state', () => {
+    const { result } = renderHook(() => useTable_unstable({ sortable: true }, ref));
+
+    expect(result.current.sortable).toBe(true);
+  });
+});

From 4768e1130a04d3bddc2eb1ec3fe10fbf5f4e02f3 Mon Sep 17 00:00:00 2001
From: Dmytro Kirpa <dmytrokirpa@microsoft.com>
Date: Sun, 26 Apr 2026 14:46:07 +0200
Subject: [PATCH 2/3] feat(react-table): export useTableContextValues_unstable
 and useTableCellLayoutContextValues_unstable

Required for the headless layer to compose context values without importing
internal module paths.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ...react-table-1149f49d-d982-463f-aff2-2379768240a3.json | 7 +++++++
 .../react-table/library/etc/react-table.api.md           | 6 ++++++
 .../react-components/react-table/library/src/Table.ts    | 1 +
 .../react-table/library/src/TableCellLayout.ts           | 1 +
 .../react-table/library/src/components/Table/index.ts    | 1 +
 .../library/src/components/TableCellLayout/index.ts      | 1 +
 .../react-components/react-table/library/src/index.ts    | 9 ++++++++-
 7 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-react-table-1149f49d-d982-463f-aff2-2379768240a3.json

diff --git a/change/@fluentui-react-table-1149f49d-d982-463f-aff2-2379768240a3.json b/change/@fluentui-react-table-1149f49d-d982-463f-aff2-2379768240a3.json
new file mode 100644
index 0000000000000..f2c5488469e2c
--- /dev/null
+++ b/change/@fluentui-react-table-1149f49d-d982-463f-aff2-2379768240a3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: export useTableContextValues_unstable and useTableCellLayoutContextValues_unstable",
+  "packageName": "@fluentui/react-table",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-table/library/etc/react-table.api.md b/packages/react-components/react-table/library/etc/react-table.api.md
index c17af07451e9a..ceed38f16ab40 100644
--- a/packages/react-components/react-table/library/etc/react-table.api.md
+++ b/packages/react-components/react-table/library/etc/react-table.api.md
@@ -627,6 +627,9 @@ export const useIsInTableHeader: () => boolean;
 // @public
 export const useTable_unstable: (props: TableProps, ref: React_2.Ref<HTMLElement>) => TableState;
 
+// @public
+export function useTableContextValues_unstable(state: TableState): TableContextValues;
+
 // @public
 export const useTableBody_unstable: (props: TableBodyProps, ref: React_2.Ref<HTMLElement>) => TableBodyState;
 
@@ -645,6 +648,9 @@ export const useTableCellActionsStyles_unstable: (state: TableCellActionsState)
 // @public
 export const useTableCellLayout_unstable: (props: TableCellLayoutProps, ref: React_2.Ref<HTMLElement>) => TableCellLayoutState;
 
+// @public
+export function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues;
+
 // @public
 export const useTableCellLayoutStyles_unstable: (state: TableCellLayoutState) => TableCellLayoutState;
 
diff --git a/packages/react-components/react-table/library/src/Table.ts b/packages/react-components/react-table/library/src/Table.ts
index 2d9ef84cb3e7c..3ee33fe26a4e3 100644
--- a/packages/react-components/react-table/library/src/Table.ts
+++ b/packages/react-components/react-table/library/src/Table.ts
@@ -13,4 +13,5 @@ export {
   tableClassNames,
   useTableStyles_unstable,
   useTable_unstable,
+  useTableContextValues_unstable,
 } from './components/Table/index';
diff --git a/packages/react-components/react-table/library/src/TableCellLayout.ts b/packages/react-components/react-table/library/src/TableCellLayout.ts
index ec11b3ba53860..868177258ba46 100644
--- a/packages/react-components/react-table/library/src/TableCellLayout.ts
+++ b/packages/react-components/react-table/library/src/TableCellLayout.ts
@@ -10,4 +10,5 @@ export {
   tableCellLayoutClassNames,
   useTableCellLayoutStyles_unstable,
   useTableCellLayout_unstable,
+  useTableCellLayoutContextValues_unstable,
 } from './components/TableCellLayout/index';
diff --git a/packages/react-components/react-table/library/src/components/Table/index.ts b/packages/react-components/react-table/library/src/components/Table/index.ts
index 017dd1d3bb8a4..9331e5b78e1c5 100644
--- a/packages/react-components/react-table/library/src/components/Table/index.ts
+++ b/packages/react-components/react-table/library/src/components/Table/index.ts
@@ -9,4 +9,5 @@ export type {
 } from './Table.types';
 export { renderTable_unstable } from './renderTable';
 export { useTable_unstable } from './useTable';
+export { useTableContextValues_unstable } from './useTableContextValues';
 export { tableClassName, tableClassNames, useTableStyles_unstable } from './useTableStyles.styles';
diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/index.ts b/packages/react-components/react-table/library/src/components/TableCellLayout/index.ts
index e675a17a881d9..adf46e1ffad5a 100644
--- a/packages/react-components/react-table/library/src/components/TableCellLayout/index.ts
+++ b/packages/react-components/react-table/library/src/components/TableCellLayout/index.ts
@@ -7,4 +7,5 @@ export type {
 } from './TableCellLayout.types';
 export { renderTableCellLayout_unstable } from './renderTableCellLayout';
 export { useTableCellLayout_unstable } from './useTableCellLayout';
+export { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';
 export { tableCellLayoutClassNames, useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles';
diff --git a/packages/react-components/react-table/library/src/index.ts b/packages/react-components/react-table/library/src/index.ts
index fe4d0922c7139..2ee4beaa2f405 100644
--- a/packages/react-components/react-table/library/src/index.ts
+++ b/packages/react-components/react-table/library/src/index.ts
@@ -57,6 +57,7 @@ export {
   tableClassNames,
   useTableStyles_unstable,
   useTable_unstable,
+  useTableContextValues_unstable,
   renderTable_unstable,
 } from './Table';
 export type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';
@@ -118,9 +119,15 @@ export {
   tableCellLayoutClassNames,
   useTableCellLayoutStyles_unstable,
   useTableCellLayout_unstable,
+  useTableCellLayoutContextValues_unstable,
   renderTableCellLayout_unstable,
 } from './TableCellLayout';
-export type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';
+export type {
+  TableCellLayoutProps,
+  TableCellLayoutSlots,
+  TableCellLayoutState,
+  TableCellLayoutContextValues,
+} from './TableCellLayout';
 
 export {
   DataGridCell,

From 2bbacfbe7ae7ce0e605a159160992039d3611c3a Mon Sep 17 00:00:00 2001
From: Dmytro Kirpa <dmytrokirpa@microsoft.com>
Date: Sun, 26 Apr 2026 14:46:07 +0200
Subject: [PATCH 3/3] feat(react-headless-components-preview): add headless
 Table and DataGrid component families

Adds headless wrappers for the full react-table component families:

Table family: Table, TableBody, TableHeader, TableHeaderCell, TableRow,
TableCell, TableSelectionCell, TableCellActions, TableCellLayout, TableResizeHandle

DataGrid family: DataGrid, DataGridBody, DataGridHeader, DataGridHeaderCell,
DataGridRow, DataGridCell, DataGridSelectionCell

All components are thin wrappers around @fluentui/react-table hooks and render
functions with no Griffel styling applied.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../library/package.json                      |  1 +
 .../library/src/DataGrid.ts                   | 35 +++++++
 .../library/src/Table.ts                      | 39 ++++++++
 .../src/components/DataGrid/DataGrid.test.tsx | 21 +++++
 .../src/components/DataGrid/DataGrid.tsx      | 13 +++
 .../src/components/DataGrid/DataGrid.types.ts | 13 +++
 .../DataGrid/DataGridBody/DataGridBody.tsx    | 11 +++
 .../DataGridBody/DataGridBody.types.ts        | 11 +++
 .../components/DataGrid/DataGridBody/index.ts |  4 +
 .../DataGridBody/renderDataGridBody.ts        |  2 +
 .../DataGrid/DataGridBody/useDataGridBody.ts  |  3 +
 .../DataGrid/DataGridCell/DataGridCell.tsx    | 11 +++
 .../DataGridCell/DataGridCell.types.ts        | 11 +++
 .../components/DataGrid/DataGridCell/index.ts |  9 ++
 .../DataGridCell/renderDataGridCell.ts        |  2 +
 .../DataGrid/DataGridCell/useDataGridCell.ts  |  3 +
 .../DataGridHeader/DataGridHeader.tsx         | 11 +++
 .../DataGridHeader/DataGridHeader.types.ts    |  9 ++
 .../DataGrid/DataGridHeader/index.ts          |  4 +
 .../DataGridHeader/renderDataGridHeader.ts    |  2 +
 .../DataGridHeader/useDataGridHeader.ts       |  3 +
 .../DataGridHeaderCell/DataGridHeaderCell.tsx | 11 +++
 .../DataGridHeaderCell.types.ts               |  9 ++
 .../DataGrid/DataGridHeaderCell/index.ts      |  8 ++
 .../renderDataGridHeaderCell.ts               |  2 +
 .../useDataGridHeaderCell.ts                  |  3 +
 .../DataGrid/DataGridRow/DataGridRow.tsx      | 11 +++
 .../DataGrid/DataGridRow/DataGridRow.types.ts | 11 +++
 .../components/DataGrid/DataGridRow/index.ts  |  4 +
 .../DataGrid/DataGridRow/renderDataGridRow.ts |  2 +
 .../DataGrid/DataGridRow/useDataGridRow.ts    |  3 +
 .../DataGridSelectionCell.tsx                 | 11 +++
 .../DataGridSelectionCell.types.ts            |  9 ++
 .../DataGrid/DataGridSelectionCell/index.ts   |  8 ++
 .../renderDataGridSelectionCell.ts            |  2 +
 .../useDataGridSelectionCell.ts               |  3 +
 .../library/src/components/DataGrid/index.ts  | 32 +++++++
 .../src/components/DataGrid/renderDataGrid.ts |  2 +
 .../src/components/DataGrid/useDataGrid.ts    |  7 ++
 .../src/components/Table/Table.test.tsx       | 32 +++++++
 .../library/src/components/Table/Table.tsx    | 13 +++
 .../src/components/Table/Table.types.ts       | 13 +++
 .../components/Table/TableBody/TableBody.tsx  | 11 +++
 .../Table/TableBody/TableBody.types.ts        |  4 +
 .../src/components/Table/TableBody/index.ts   |  4 +
 .../Table/TableBody/renderTableBody.ts        |  2 +
 .../Table/TableBody/useTableBody.ts           |  3 +
 .../components/Table/TableCell/TableCell.tsx  | 11 +++
 .../Table/TableCell/TableCell.types.ts        |  4 +
 .../src/components/Table/TableCell/index.ts   |  4 +
 .../Table/TableCell/renderTableCell.ts        |  2 +
 .../Table/TableCell/useTableCell.ts           |  3 +
 .../TableCellActions/TableCellActions.tsx     | 11 +++
 .../TableCellActions.types.ts                 |  8 ++
 .../Table/TableCellActions/index.ts           |  4 +
 .../renderTableCellActions.ts                 |  2 +
 .../TableCellActions/useTableCellActions.ts   |  3 +
 .../Table/TableCellLayout/TableCellLayout.tsx | 13 +++
 .../TableCellLayout/TableCellLayout.types.ts  | 10 ++
 .../components/Table/TableCellLayout/index.ts |  9 ++
 .../TableCellLayout/renderTableCellLayout.ts  |  2 +
 .../TableCellLayout/useTableCellLayout.ts     |  7 ++
 .../Table/TableHeader/TableHeader.tsx         | 11 +++
 .../Table/TableHeader/TableHeader.types.ts    |  4 +
 .../src/components/Table/TableHeader/index.ts |  4 +
 .../Table/TableHeader/renderTableHeader.ts    |  2 +
 .../Table/TableHeader/useTableHeader.ts       |  3 +
 .../Table/TableHeaderCell/TableHeaderCell.tsx | 11 +++
 .../TableHeaderCell/TableHeaderCell.types.ts  |  8 ++
 .../components/Table/TableHeaderCell/index.ts |  4 +
 .../TableHeaderCell/renderTableHeaderCell.ts  |  2 +
 .../TableHeaderCell/useTableHeaderCell.ts     |  3 +
 .../TableResizeHandle/TableResizeHandle.tsx   | 11 +++
 .../TableResizeHandle.types.ts                |  8 ++
 .../Table/TableResizeHandle/index.ts          |  4 +
 .../renderTableResizeHandle.ts                |  2 +
 .../TableResizeHandle/useTableResizeHandle.ts |  3 +
 .../components/Table/TableRow/TableRow.tsx    | 11 +++
 .../Table/TableRow/TableRow.types.ts          |  4 +
 .../src/components/Table/TableRow/index.ts    |  4 +
 .../Table/TableRow/renderTableRow.ts          |  2 +
 .../components/Table/TableRow/useTableRow.ts  |  3 +
 .../TableSelectionCell/TableSelectionCell.tsx | 11 +++
 .../TableSelectionCell.types.ts               |  8 ++
 .../Table/TableSelectionCell/index.ts         |  8 ++
 .../renderTableSelectionCell.ts               |  2 +
 .../useTableSelectionCell.ts                  |  3 +
 .../library/src/components/Table/index.ts     | 41 +++++++++
 .../src/components/Table/renderTable.ts       |  2 +
 .../library/src/components/Table/useTable.ts  |  5 +
 .../library/src/index.ts                      | 91 +++++++++++++++++++
 91 files changed, 806 insertions(+)
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/DataGrid.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/Table.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.test.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/renderDataGridBody.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/useDataGridBody.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/renderDataGridCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/useDataGridCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/renderDataGridHeader.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/useDataGridHeader.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/renderDataGridHeaderCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/useDataGridHeaderCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/renderDataGridRow.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/useDataGridRow.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/renderDataGridSelectionCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/useDataGridSelectionCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/renderDataGrid.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/DataGrid/useDataGrid.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/Table.test.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/Table.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/Table.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/renderTableBody.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/useTableBody.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/renderTableCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/useTableCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/renderTableCellActions.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/useTableCellActions.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/renderTableCellLayout.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/useTableCellLayout.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/renderTableHeader.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/useTableHeader.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/renderTableHeaderCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/useTableHeaderCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/renderTableResizeHandle.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/useTableResizeHandle.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/renderTableRow.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/useTableRow.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.tsx
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.types.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/renderTableSelectionCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/useTableSelectionCell.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/index.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/renderTable.ts
 create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/Table/useTable.ts

diff --git a/packages/react-components/react-headless-components-preview/library/package.json b/packages/react-components/react-headless-components-preview/library/package.json
index 9775edbcb1159..8cef6459c58af 100644
--- a/packages/react-components/react-headless-components-preview/library/package.json
+++ b/packages/react-components/react-headless-components-preview/library/package.json
@@ -47,6 +47,7 @@
     "@fluentui/react-spinbutton": "^9.6.0",
     "@fluentui/react-spinner": "^9.8.0",
     "@fluentui/react-switch": "^9.7.0",
+    "@fluentui/react-table": "^9.19.14",
     "@fluentui/react-tabs": "^9.11.2",
     "@fluentui/react-tags": "^9.7.19",
     "@fluentui/react-textarea": "^9.7.0",
diff --git a/packages/react-components/react-headless-components-preview/library/src/DataGrid.ts b/packages/react-components/react-headless-components-preview/library/src/DataGrid.ts
new file mode 100644
index 0000000000000..363299e4d50b0
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/DataGrid.ts
@@ -0,0 +1,35 @@
+export { DataGrid, renderDataGrid, useDataGrid, useDataGridContextValues } from './components/DataGrid';
+export type {
+  DataGridSlots,
+  DataGridProps,
+  DataGridState,
+  DataGridContextValues,
+  DataGridFocusMode,
+} from './components/DataGrid';
+
+export { DataGridBody, renderDataGridBody, useDataGridBody } from './components/DataGrid';
+export type { DataGridBodySlots, DataGridBodyProps, DataGridBodyState, RowRenderFunction } from './components/DataGrid';
+
+export { DataGridHeader, renderDataGridHeader, useDataGridHeader } from './components/DataGrid';
+export type { DataGridHeaderSlots, DataGridHeaderProps, DataGridHeaderState } from './components/DataGrid';
+
+export { DataGridHeaderCell, renderDataGridHeaderCell, useDataGridHeaderCell } from './components/DataGrid';
+export type { DataGridHeaderCellSlots, DataGridHeaderCellProps, DataGridHeaderCellState } from './components/DataGrid';
+
+export { DataGridRow, renderDataGridRow, useDataGridRow } from './components/DataGrid';
+export type { DataGridRowSlots, DataGridRowProps, DataGridRowState, CellRenderFunction } from './components/DataGrid';
+
+export { DataGridCell, renderDataGridCell, useDataGridCell } from './components/DataGrid';
+export type {
+  DataGridCellSlots,
+  DataGridCellProps,
+  DataGridCellState,
+  DataGridCellFocusMode,
+} from './components/DataGrid';
+
+export { DataGridSelectionCell, renderDataGridSelectionCell, useDataGridSelectionCell } from './components/DataGrid';
+export type {
+  DataGridSelectionCellSlots,
+  DataGridSelectionCellProps,
+  DataGridSelectionCellState,
+} from './components/DataGrid';
diff --git a/packages/react-components/react-headless-components-preview/library/src/Table.ts b/packages/react-components/react-headless-components-preview/library/src/Table.ts
new file mode 100644
index 0000000000000..c1628a3762985
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/Table.ts
@@ -0,0 +1,39 @@
+export { Table, renderTable, useTable, useTableContextValues } from './components/Table';
+export type { TableSlots, TableProps, TableState, TableContextValues, SortDirection } from './components/Table';
+
+export { TableBody, renderTableBody, useTableBody } from './components/Table';
+export type { TableBodySlots, TableBodyProps, TableBodyState } from './components/Table';
+
+export { TableHeader, renderTableHeader, useTableHeader } from './components/Table';
+export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './components/Table';
+
+export { TableHeaderCell, renderTableHeaderCell, useTableHeaderCell } from './components/Table';
+export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './components/Table';
+
+export { TableRow, renderTableRow, useTableRow } from './components/Table';
+export type { TableRowSlots, TableRowProps, TableRowState } from './components/Table';
+
+export { TableCell, renderTableCell, useTableCell } from './components/Table';
+export type { TableCellSlots, TableCellProps, TableCellState } from './components/Table';
+
+export { TableSelectionCell, renderTableSelectionCell, useTableSelectionCell } from './components/Table';
+export type { TableSelectionCellSlots, TableSelectionCellProps, TableSelectionCellState } from './components/Table';
+
+export { TableCellActions, renderTableCellActions, useTableCellActions } from './components/Table';
+export type { TableCellActionsSlots, TableCellActionsProps, TableCellActionsState } from './components/Table';
+
+export {
+  TableCellLayout,
+  renderTableCellLayout,
+  useTableCellLayout,
+  useTableCellLayoutContextValues,
+} from './components/Table';
+export type {
+  TableCellLayoutSlots,
+  TableCellLayoutProps,
+  TableCellLayoutState,
+  TableCellLayoutContextValues,
+} from './components/Table';
+
+export { TableResizeHandle, renderTableResizeHandle, useTableResizeHandle } from './components/Table';
+export type { TableResizeHandleSlots, TableResizeHandleProps, TableResizeHandleState } from './components/Table';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.test.tsx
new file mode 100644
index 0000000000000..65ebb4e51837a
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.test.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { DataGrid } from './DataGrid';
+import { createTableColumn } from '@fluentui/react-table';
+
+const columns = [createTableColumn({ columnId: 'name' })];
+const items = [{ name: 'Alice' }];
+
+describe('DataGrid', () => {
+  isConformant({
+    Component: DataGrid,
+    displayName: 'DataGrid',
+    requiredProps: { columns, items },
+  });
+
+  it('renders with role="grid" by default', () => {
+    const { getByRole } = render(<DataGrid columns={columns} items={items} />);
+    expect(getByRole('grid')).toBeInTheDocument();
+  });
+});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.tsx
new file mode 100644
index 0000000000000..ee9bc1088f497
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.tsx
@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridProps } from './DataGrid.types';
+import { useDataGrid, useDataGridContextValues } from './useDataGrid';
+import { renderDataGrid } from './renderDataGrid';
+
+export const DataGrid: ForwardRefComponent<DataGridProps> = React.forwardRef((props, ref) => {
+  const state = useDataGrid(props, ref);
+  const contextValues = useDataGridContextValues(state);
+  return renderDataGrid(state, contextValues);
+});
+DataGrid.displayName = 'DataGrid';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.types.ts
new file mode 100644
index 0000000000000..7dcc4cf316cdb
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGrid.types.ts
@@ -0,0 +1,13 @@
+import type {
+  DataGridSlots as DataGridBaseSlots,
+  DataGridProps as DataGridBaseProps,
+  DataGridState as DataGridBaseState,
+  DataGridContextValues as DataGridBaseContextValues,
+  DataGridFocusMode,
+} from '@fluentui/react-table';
+
+export type DataGridSlots = DataGridBaseSlots;
+export type DataGridProps = DataGridBaseProps;
+export type DataGridState = DataGridBaseState;
+export type DataGridContextValues = DataGridBaseContextValues;
+export type { DataGridFocusMode };
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.tsx
new file mode 100644
index 0000000000000..bb2f153c2a380
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridBodyProps } from './DataGridBody.types';
+import { useDataGridBody } from './useDataGridBody';
+import { renderDataGridBody } from './renderDataGridBody';
+
+export const DataGridBody: ForwardRefComponent<DataGridBodyProps> = React.forwardRef((props, ref) => {
+  return renderDataGridBody(useDataGridBody(props, ref));
+});
+DataGridBody.displayName = 'DataGridBody';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.types.ts
new file mode 100644
index 0000000000000..714e990125e71
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/DataGridBody.types.ts
@@ -0,0 +1,11 @@
+import type {
+  DataGridBodySlots as DataGridBodyBaseSlots,
+  DataGridBodyProps as DataGridBodyBaseProps,
+  DataGridBodyState as DataGridBodyBaseState,
+  RowRenderFunction,
+} from '@fluentui/react-table';
+
+export type DataGridBodySlots = DataGridBodyBaseSlots;
+export type DataGridBodyProps = DataGridBodyBaseProps;
+export type DataGridBodyState = DataGridBodyBaseState;
+export type { RowRenderFunction };
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/index.ts
new file mode 100644
index 0000000000000..0e9f37635c442
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/index.ts
@@ -0,0 +1,4 @@
+export { DataGridBody } from './DataGridBody';
+export { useDataGridBody } from './useDataGridBody';
+export { renderDataGridBody } from './renderDataGridBody';
+export type { DataGridBodySlots, DataGridBodyProps, DataGridBodyState, RowRenderFunction } from './DataGridBody.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/renderDataGridBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/renderDataGridBody.ts
new file mode 100644
index 0000000000000..e2ab5f8798906
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/renderDataGridBody.ts
@@ -0,0 +1,2 @@
+import { renderDataGridBody_unstable } from '@fluentui/react-table';
+export const renderDataGridBody = renderDataGridBody_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/useDataGridBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/useDataGridBody.ts
new file mode 100644
index 0000000000000..4cbe76ee5cf62
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridBody/useDataGridBody.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridBody_unstable } from '@fluentui/react-table';
+export const useDataGridBody = useDataGridBody_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.tsx
new file mode 100644
index 0000000000000..1ccf49627decc
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridCellProps } from './DataGridCell.types';
+import { useDataGridCell } from './useDataGridCell';
+import { renderDataGridCell } from './renderDataGridCell';
+
+export const DataGridCell: ForwardRefComponent<DataGridCellProps> = React.forwardRef((props, ref) => {
+  return renderDataGridCell(useDataGridCell(props, ref));
+});
+DataGridCell.displayName = 'DataGridCell';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.types.ts
new file mode 100644
index 0000000000000..7874ea1c0ab02
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/DataGridCell.types.ts
@@ -0,0 +1,11 @@
+import type {
+  DataGridCellSlots as DataGridCellBaseSlots,
+  DataGridCellProps as DataGridCellBaseProps,
+  DataGridCellState as DataGridCellBaseState,
+  DataGridCellFocusMode,
+} from '@fluentui/react-table';
+
+export type DataGridCellSlots = DataGridCellBaseSlots;
+export type DataGridCellProps = DataGridCellBaseProps;
+export type DataGridCellState = DataGridCellBaseState;
+export type { DataGridCellFocusMode };
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/index.ts
new file mode 100644
index 0000000000000..0952bf7056665
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/index.ts
@@ -0,0 +1,9 @@
+export { DataGridCell } from './DataGridCell';
+export { useDataGridCell } from './useDataGridCell';
+export { renderDataGridCell } from './renderDataGridCell';
+export type {
+  DataGridCellSlots,
+  DataGridCellProps,
+  DataGridCellState,
+  DataGridCellFocusMode,
+} from './DataGridCell.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/renderDataGridCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/renderDataGridCell.ts
new file mode 100644
index 0000000000000..0a0abc60a6c86
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/renderDataGridCell.ts
@@ -0,0 +1,2 @@
+import { renderDataGridCell_unstable } from '@fluentui/react-table';
+export const renderDataGridCell = renderDataGridCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/useDataGridCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/useDataGridCell.ts
new file mode 100644
index 0000000000000..b5a9411a074b0
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridCell/useDataGridCell.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridCell_unstable } from '@fluentui/react-table';
+export const useDataGridCell = useDataGridCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx
new file mode 100644
index 0000000000000..1ae4f34b5c7dd
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridHeaderProps } from './DataGridHeader.types';
+import { useDataGridHeader } from './useDataGridHeader';
+import { renderDataGridHeader } from './renderDataGridHeader';
+
+export const DataGridHeader: ForwardRefComponent<DataGridHeaderProps> = React.forwardRef((props, ref) => {
+  return renderDataGridHeader(useDataGridHeader(props, ref));
+});
+DataGridHeader.displayName = 'DataGridHeader';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.types.ts
new file mode 100644
index 0000000000000..a7e9604d3297d
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/DataGridHeader.types.ts
@@ -0,0 +1,9 @@
+import type {
+  DataGridHeaderSlots as DataGridHeaderBaseSlots,
+  DataGridHeaderProps as DataGridHeaderBaseProps,
+  DataGridHeaderState as DataGridHeaderBaseState,
+} from '@fluentui/react-table';
+
+export type DataGridHeaderSlots = DataGridHeaderBaseSlots;
+export type DataGridHeaderProps = DataGridHeaderBaseProps;
+export type DataGridHeaderState = DataGridHeaderBaseState;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/index.ts
new file mode 100644
index 0000000000000..71f43738df231
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/index.ts
@@ -0,0 +1,4 @@
+export { DataGridHeader } from './DataGridHeader';
+export { useDataGridHeader } from './useDataGridHeader';
+export { renderDataGridHeader } from './renderDataGridHeader';
+export type { DataGridHeaderSlots, DataGridHeaderProps, DataGridHeaderState } from './DataGridHeader.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/renderDataGridHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/renderDataGridHeader.ts
new file mode 100644
index 0000000000000..4adf6c31f94e7
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/renderDataGridHeader.ts
@@ -0,0 +1,2 @@
+import { renderDataGridHeader_unstable } from '@fluentui/react-table';
+export const renderDataGridHeader = renderDataGridHeader_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/useDataGridHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/useDataGridHeader.ts
new file mode 100644
index 0000000000000..edfbfaa762440
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeader/useDataGridHeader.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridHeader_unstable } from '@fluentui/react-table';
+export const useDataGridHeader = useDataGridHeader_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.tsx
new file mode 100644
index 0000000000000..c7db5e9cdf728
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridHeaderCellProps } from './DataGridHeaderCell.types';
+import { useDataGridHeaderCell } from './useDataGridHeaderCell';
+import { renderDataGridHeaderCell } from './renderDataGridHeaderCell';
+
+export const DataGridHeaderCell: ForwardRefComponent<DataGridHeaderCellProps> = React.forwardRef((props, ref) => {
+  return renderDataGridHeaderCell(useDataGridHeaderCell(props, ref));
+});
+DataGridHeaderCell.displayName = 'DataGridHeaderCell';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.ts
new file mode 100644
index 0000000000000..7c46d1c9769c2
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.ts
@@ -0,0 +1,9 @@
+import type {
+  DataGridHeaderCellSlots as DataGridHeaderCellBaseSlots,
+  DataGridHeaderCellProps as DataGridHeaderCellBaseProps,
+  DataGridHeaderCellState as DataGridHeaderCellBaseState,
+} from '@fluentui/react-table';
+
+export type DataGridHeaderCellSlots = DataGridHeaderCellBaseSlots;
+export type DataGridHeaderCellProps = DataGridHeaderCellBaseProps;
+export type DataGridHeaderCellState = DataGridHeaderCellBaseState;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/index.ts
new file mode 100644
index 0000000000000..fbb867b45635f
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/index.ts
@@ -0,0 +1,8 @@
+export { DataGridHeaderCell } from './DataGridHeaderCell';
+export { useDataGridHeaderCell } from './useDataGridHeaderCell';
+export { renderDataGridHeaderCell } from './renderDataGridHeaderCell';
+export type {
+  DataGridHeaderCellSlots,
+  DataGridHeaderCellProps,
+  DataGridHeaderCellState,
+} from './DataGridHeaderCell.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/renderDataGridHeaderCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/renderDataGridHeaderCell.ts
new file mode 100644
index 0000000000000..b5b83ebb72e04
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/renderDataGridHeaderCell.ts
@@ -0,0 +1,2 @@
+import { renderDataGridHeaderCell_unstable } from '@fluentui/react-table';
+export const renderDataGridHeaderCell = renderDataGridHeaderCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/useDataGridHeaderCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/useDataGridHeaderCell.ts
new file mode 100644
index 0000000000000..fe94a8c00df17
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridHeaderCell/useDataGridHeaderCell.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridHeaderCell_unstable } from '@fluentui/react-table';
+export const useDataGridHeaderCell = useDataGridHeaderCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.tsx
new file mode 100644
index 0000000000000..c6c496a8b2a95
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridRowProps } from './DataGridRow.types';
+import { useDataGridRow } from './useDataGridRow';
+import { renderDataGridRow } from './renderDataGridRow';
+
+export const DataGridRow: ForwardRefComponent<DataGridRowProps> = React.forwardRef((props, ref) => {
+  return renderDataGridRow(useDataGridRow(props, ref));
+});
+DataGridRow.displayName = 'DataGridRow';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.types.ts
new file mode 100644
index 0000000000000..1cba12d5f16af
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/DataGridRow.types.ts
@@ -0,0 +1,11 @@
+import type {
+  DataGridRowSlots as DataGridRowBaseSlots,
+  DataGridRowProps as DataGridRowBaseProps,
+  DataGridRowState as DataGridRowBaseState,
+  CellRenderFunction,
+} from '@fluentui/react-table';
+
+export type DataGridRowSlots = DataGridRowBaseSlots;
+export type DataGridRowProps = DataGridRowBaseProps;
+export type DataGridRowState = DataGridRowBaseState;
+export type { CellRenderFunction };
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/index.ts
new file mode 100644
index 0000000000000..b23efc4821992
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/index.ts
@@ -0,0 +1,4 @@
+export { DataGridRow } from './DataGridRow';
+export { useDataGridRow } from './useDataGridRow';
+export { renderDataGridRow } from './renderDataGridRow';
+export type { DataGridRowSlots, DataGridRowProps, DataGridRowState, CellRenderFunction } from './DataGridRow.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/renderDataGridRow.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/renderDataGridRow.ts
new file mode 100644
index 0000000000000..29d171efdcd93
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/renderDataGridRow.ts
@@ -0,0 +1,2 @@
+import { renderDataGridRow_unstable } from '@fluentui/react-table';
+export const renderDataGridRow = renderDataGridRow_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/useDataGridRow.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/useDataGridRow.ts
new file mode 100644
index 0000000000000..ad25910cd1177
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridRow/useDataGridRow.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridRow_unstable } from '@fluentui/react-table';
+export const useDataGridRow = useDataGridRow_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.tsx
new file mode 100644
index 0000000000000..beb86dd04a82a
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';
+import { useDataGridSelectionCell } from './useDataGridSelectionCell';
+import { renderDataGridSelectionCell } from './renderDataGridSelectionCell';
+
+export const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {
+  return renderDataGridSelectionCell(useDataGridSelectionCell(props, ref));
+});
+DataGridSelectionCell.displayName = 'DataGridSelectionCell';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.types.ts
new file mode 100644
index 0000000000000..3ddcfb4179f1b
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/DataGridSelectionCell.types.ts
@@ -0,0 +1,9 @@
+import type {
+  DataGridSelectionCellSlots as DataGridSelectionCellBaseSlots,
+  DataGridSelectionCellProps as DataGridSelectionCellBaseProps,
+  DataGridSelectionCellState as DataGridSelectionCellBaseState,
+} from '@fluentui/react-table';
+
+export type DataGridSelectionCellSlots = DataGridSelectionCellBaseSlots;
+export type DataGridSelectionCellProps = DataGridSelectionCellBaseProps;
+export type DataGridSelectionCellState = DataGridSelectionCellBaseState;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/index.ts
new file mode 100644
index 0000000000000..b6d5a8524b164
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/index.ts
@@ -0,0 +1,8 @@
+export { DataGridSelectionCell } from './DataGridSelectionCell';
+export { useDataGridSelectionCell } from './useDataGridSelectionCell';
+export { renderDataGridSelectionCell } from './renderDataGridSelectionCell';
+export type {
+  DataGridSelectionCellSlots,
+  DataGridSelectionCellProps,
+  DataGridSelectionCellState,
+} from './DataGridSelectionCell.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/renderDataGridSelectionCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/renderDataGridSelectionCell.ts
new file mode 100644
index 0000000000000..97d0014b224be
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/renderDataGridSelectionCell.ts
@@ -0,0 +1,2 @@
+import { renderDataGridSelectionCell_unstable } from '@fluentui/react-table';
+export const renderDataGridSelectionCell = renderDataGridSelectionCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/useDataGridSelectionCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/useDataGridSelectionCell.ts
new file mode 100644
index 0000000000000..5584effac0a90
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/DataGridSelectionCell/useDataGridSelectionCell.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useDataGridSelectionCell_unstable } from '@fluentui/react-table';
+export const useDataGridSelectionCell = useDataGridSelectionCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/index.ts
new file mode 100644
index 0000000000000..6dd92863fc91d
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/index.ts
@@ -0,0 +1,32 @@
+export { DataGrid } from './DataGrid';
+export { renderDataGrid } from './renderDataGrid';
+export { useDataGrid, useDataGridContextValues } from './useDataGrid';
+export type {
+  DataGridSlots,
+  DataGridProps,
+  DataGridState,
+  DataGridContextValues,
+  DataGridFocusMode,
+} from './DataGrid.types';
+
+export { DataGridBody, renderDataGridBody, useDataGridBody } from './DataGridBody';
+export type { DataGridBodySlots, DataGridBodyProps, DataGridBodyState, RowRenderFunction } from './DataGridBody';
+
+export { DataGridHeader, renderDataGridHeader, useDataGridHeader } from './DataGridHeader';
+export type { DataGridHeaderSlots, DataGridHeaderProps, DataGridHeaderState } from './DataGridHeader';
+
+export { DataGridHeaderCell, renderDataGridHeaderCell, useDataGridHeaderCell } from './DataGridHeaderCell';
+export type { DataGridHeaderCellSlots, DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell';
+
+export { DataGridRow, renderDataGridRow, useDataGridRow } from './DataGridRow';
+export type { DataGridRowSlots, DataGridRowProps, DataGridRowState, CellRenderFunction } from './DataGridRow';
+
+export { DataGridCell, renderDataGridCell, useDataGridCell } from './DataGridCell';
+export type { DataGridCellSlots, DataGridCellProps, DataGridCellState, DataGridCellFocusMode } from './DataGridCell';
+
+export { DataGridSelectionCell, renderDataGridSelectionCell, useDataGridSelectionCell } from './DataGridSelectionCell';
+export type {
+  DataGridSelectionCellSlots,
+  DataGridSelectionCellProps,
+  DataGridSelectionCellState,
+} from './DataGridSelectionCell';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/renderDataGrid.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/renderDataGrid.ts
new file mode 100644
index 0000000000000..f963e1b26eea0
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/renderDataGrid.ts
@@ -0,0 +1,2 @@
+import { renderDataGrid_unstable } from '@fluentui/react-table';
+export const renderDataGrid = renderDataGrid_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/useDataGrid.ts b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/useDataGrid.ts
new file mode 100644
index 0000000000000..38658c3a5b0ac
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/DataGrid/useDataGrid.ts
@@ -0,0 +1,7 @@
+'use client';
+import { useDataGrid_unstable, useDataGridContextValues_unstable } from '@fluentui/react-table';
+import type { DataGridState, DataGridContextValues } from './DataGrid.types';
+export const useDataGrid = useDataGrid_unstable;
+export const useDataGridContextValues = useDataGridContextValues_unstable as (
+  state: DataGridState,
+) => DataGridContextValues;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.test.tsx
new file mode 100644
index 0000000000000..0c8e3938b7e46
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.test.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { Table } from './Table';
+
+describe('Table', () => {
+  isConformant({ Component: Table, displayName: 'Table' });
+
+  it('renders a semantic table element by default', () => {
+    const { getByRole } = render(
+      <Table>
+        <tbody>
+          <tr>
+            <td>cell</td>
+          </tr>
+        </tbody>
+      </Table>,
+    );
+    expect(getByRole('table')).toBeInTheDocument();
+  });
+
+  it('renders as div with role="table" when noNativeElements', () => {
+    const { getByRole } = render(
+      <Table noNativeElements>
+        <Table.root />
+      </Table>,
+    );
+    // noNativeElements renders div with explicit role
+    const { container } = render(<Table noNativeElements />);
+    expect(container.querySelector('[role="table"]')).toBeInTheDocument();
+  });
+});
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.tsx
new file mode 100644
index 0000000000000..7cf5ab99876ff
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.tsx
@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableProps } from './Table.types';
+import { useTable, useTableContextValues } from './useTable';
+import { renderTable } from './renderTable';
+
+export const Table: ForwardRefComponent<TableProps> = React.forwardRef((props, ref) => {
+  const state = useTable(props, ref);
+  const contextValues = useTableContextValues(state);
+  return renderTable(state, contextValues);
+});
+Table.displayName = 'Table';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.types.ts
new file mode 100644
index 0000000000000..8a8a13dee76c6
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/Table.types.ts
@@ -0,0 +1,13 @@
+import type {
+  TableSlots as TableBaseSlots,
+  TableProps as TableBaseProps,
+  TableState as TableBaseState,
+  TableContextValues as TableBaseContextValues,
+  SortDirection,
+} from '@fluentui/react-table';
+
+export type TableSlots = TableBaseSlots;
+export type TableProps = TableBaseProps;
+export type TableState = TableBaseState;
+export type TableContextValues = TableBaseContextValues;
+export type { SortDirection };
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.tsx
new file mode 100644
index 0000000000000..8847bbef669fb
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableBodyProps } from './TableBody.types';
+import { useTableBody } from './useTableBody';
+import { renderTableBody } from './renderTableBody';
+
+export const TableBody: ForwardRefComponent<TableBodyProps> = React.forwardRef((props, ref) => {
+  return renderTableBody(useTableBody(props, ref));
+});
+TableBody.displayName = 'TableBody';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.types.ts
new file mode 100644
index 0000000000000..541d8d22f8e40
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/TableBody.types.ts
@@ -0,0 +1,4 @@
+import type { TableBodySlots as B, TableBodyProps as BP, TableBodyState as BS } from '@fluentui/react-table';
+export type TableBodySlots = B;
+export type TableBodyProps = BP;
+export type TableBodyState = BS;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/index.ts
new file mode 100644
index 0000000000000..cf0cdaadec45c
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/index.ts
@@ -0,0 +1,4 @@
+export { TableBody } from './TableBody';
+export { useTableBody } from './useTableBody';
+export { renderTableBody } from './renderTableBody';
+export type { TableBodySlots, TableBodyProps, TableBodyState } from './TableBody.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/renderTableBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/renderTableBody.ts
new file mode 100644
index 0000000000000..545d7d7d15f61
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/renderTableBody.ts
@@ -0,0 +1,2 @@
+import { renderTableBody_unstable } from '@fluentui/react-table';
+export const renderTableBody = renderTableBody_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/useTableBody.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/useTableBody.ts
new file mode 100644
index 0000000000000..ff0cb9ddad3f1
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableBody/useTableBody.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useTableBody_unstable } from '@fluentui/react-table';
+export const useTableBody = useTableBody_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.tsx
new file mode 100644
index 0000000000000..c29a0da6633ef
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableCellProps } from './TableCell.types';
+import { useTableCell } from './useTableCell';
+import { renderTableCell } from './renderTableCell';
+
+export const TableCell: ForwardRefComponent<TableCellProps> = React.forwardRef((props, ref) => {
+  return renderTableCell(useTableCell(props, ref));
+});
+TableCell.displayName = 'TableCell';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.types.ts
new file mode 100644
index 0000000000000..3a8f0af64b31b
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/TableCell.types.ts
@@ -0,0 +1,4 @@
+import type { TableCellSlots as S, TableCellProps as P, TableCellState as ST } from '@fluentui/react-table';
+export type TableCellSlots = S;
+export type TableCellProps = P;
+export type TableCellState = ST;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/index.ts
new file mode 100644
index 0000000000000..2e3d5e510d025
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/index.ts
@@ -0,0 +1,4 @@
+export { TableCell } from './TableCell';
+export { useTableCell } from './useTableCell';
+export { renderTableCell } from './renderTableCell';
+export type { TableCellSlots, TableCellProps, TableCellState } from './TableCell.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/renderTableCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/renderTableCell.ts
new file mode 100644
index 0000000000000..eaeb8d13c68c5
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/renderTableCell.ts
@@ -0,0 +1,2 @@
+import { renderTableCell_unstable } from '@fluentui/react-table';
+export const renderTableCell = renderTableCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/useTableCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/useTableCell.ts
new file mode 100644
index 0000000000000..1a30979a4a0b5
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCell/useTableCell.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useTableCell_unstable } from '@fluentui/react-table';
+export const useTableCell = useTableCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.tsx
new file mode 100644
index 0000000000000..838f9d80c074c
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableCellActionsProps } from './TableCellActions.types';
+import { useTableCellActions } from './useTableCellActions';
+import { renderTableCellActions } from './renderTableCellActions';
+
+export const TableCellActions: ForwardRefComponent<TableCellActionsProps> = React.forwardRef((props, ref) => {
+  return renderTableCellActions(useTableCellActions(props, ref));
+});
+TableCellActions.displayName = 'TableCellActions';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.types.ts
new file mode 100644
index 0000000000000..9568df711859a
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/TableCellActions.types.ts
@@ -0,0 +1,8 @@
+import type {
+  TableCellActionsSlots as S,
+  TableCellActionsProps as P,
+  TableCellActionsState as ST,
+} from '@fluentui/react-table';
+export type TableCellActionsSlots = S;
+export type TableCellActionsProps = P;
+export type TableCellActionsState = ST;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/index.ts
new file mode 100644
index 0000000000000..945257b125ed4
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/index.ts
@@ -0,0 +1,4 @@
+export { TableCellActions } from './TableCellActions';
+export { useTableCellActions } from './useTableCellActions';
+export { renderTableCellActions } from './renderTableCellActions';
+export type { TableCellActionsSlots, TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/renderTableCellActions.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/renderTableCellActions.ts
new file mode 100644
index 0000000000000..634c2efb8f01b
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/renderTableCellActions.ts
@@ -0,0 +1,2 @@
+import { renderTableCellActions_unstable } from '@fluentui/react-table';
+export const renderTableCellActions = renderTableCellActions_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/useTableCellActions.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/useTableCellActions.ts
new file mode 100644
index 0000000000000..aeab277901ee4
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellActions/useTableCellActions.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useTableCellActions_unstable } from '@fluentui/react-table';
+export const useTableCellActions = useTableCellActions_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.tsx
new file mode 100644
index 0000000000000..d093d1ecef298
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.tsx
@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableCellLayoutProps } from './TableCellLayout.types';
+import { useTableCellLayout, useTableCellLayoutContextValues } from './useTableCellLayout';
+import { renderTableCellLayout } from './renderTableCellLayout';
+
+export const TableCellLayout: ForwardRefComponent<TableCellLayoutProps> = React.forwardRef((props, ref) => {
+  const state = useTableCellLayout(props, ref);
+  const ctx = useTableCellLayoutContextValues(state);
+  return renderTableCellLayout(state, ctx);
+});
+TableCellLayout.displayName = 'TableCellLayout';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.types.ts
new file mode 100644
index 0000000000000..7956a5760f12b
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/TableCellLayout.types.ts
@@ -0,0 +1,10 @@
+import type {
+  TableCellLayoutSlots as S,
+  TableCellLayoutProps as P,
+  TableCellLayoutState as ST,
+  TableCellLayoutContextValues as CV,
+} from '@fluentui/react-table';
+export type TableCellLayoutSlots = S;
+export type TableCellLayoutProps = P;
+export type TableCellLayoutState = ST;
+export type TableCellLayoutContextValues = CV;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/index.ts
new file mode 100644
index 0000000000000..bbd995ad47fe8
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/index.ts
@@ -0,0 +1,9 @@
+export { TableCellLayout } from './TableCellLayout';
+export { useTableCellLayout, useTableCellLayoutContextValues } from './useTableCellLayout';
+export { renderTableCellLayout } from './renderTableCellLayout';
+export type {
+  TableCellLayoutSlots,
+  TableCellLayoutProps,
+  TableCellLayoutState,
+  TableCellLayoutContextValues,
+} from './TableCellLayout.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/renderTableCellLayout.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/renderTableCellLayout.ts
new file mode 100644
index 0000000000000..8e5f235de98ee
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/renderTableCellLayout.ts
@@ -0,0 +1,2 @@
+import { renderTableCellLayout_unstable } from '@fluentui/react-table';
+export const renderTableCellLayout = renderTableCellLayout_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/useTableCellLayout.ts
new file mode 100644
index 0000000000000..013326e1c10ad
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableCellLayout/useTableCellLayout.ts
@@ -0,0 +1,7 @@
+'use client';
+import { useTableCellLayout_unstable, useTableCellLayoutContextValues_unstable } from '@fluentui/react-table';
+import type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types';
+export const useTableCellLayout = useTableCellLayout_unstable;
+export const useTableCellLayoutContextValues = useTableCellLayoutContextValues_unstable as (
+  state: TableCellLayoutState,
+) => TableCellLayoutContextValues;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.tsx
new file mode 100644
index 0000000000000..699861c3194d4
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableHeaderProps } from './TableHeader.types';
+import { useTableHeader } from './useTableHeader';
+import { renderTableHeader } from './renderTableHeader';
+
+export const TableHeader: ForwardRefComponent<TableHeaderProps> = React.forwardRef((props, ref) => {
+  return renderTableHeader(useTableHeader(props, ref));
+});
+TableHeader.displayName = 'TableHeader';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.types.ts
new file mode 100644
index 0000000000000..66a02791a5af4
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/TableHeader.types.ts
@@ -0,0 +1,4 @@
+import type { TableHeaderSlots as S, TableHeaderProps as P, TableHeaderState as ST } from '@fluentui/react-table';
+export type TableHeaderSlots = S;
+export type TableHeaderProps = P;
+export type TableHeaderState = ST;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/index.ts
new file mode 100644
index 0000000000000..e29908029b383
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/index.ts
@@ -0,0 +1,4 @@
+export { TableHeader } from './TableHeader';
+export { useTableHeader } from './useTableHeader';
+export { renderTableHeader } from './renderTableHeader';
+export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './TableHeader.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/renderTableHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/renderTableHeader.ts
new file mode 100644
index 0000000000000..6c8bdf5a310e8
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/renderTableHeader.ts
@@ -0,0 +1,2 @@
+import { renderTableHeader_unstable } from '@fluentui/react-table';
+export const renderTableHeader = renderTableHeader_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/useTableHeader.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/useTableHeader.ts
new file mode 100644
index 0000000000000..32314de4ac986
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeader/useTableHeader.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useTableHeader_unstable } from '@fluentui/react-table';
+export const useTableHeader = useTableHeader_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
new file mode 100644
index 0000000000000..297b8070c0cee
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableHeaderCellProps } from './TableHeaderCell.types';
+import { useTableHeaderCell } from './useTableHeaderCell';
+import { renderTableHeaderCell } from './renderTableHeaderCell';
+
+export const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {
+  return renderTableHeaderCell(useTableHeaderCell(props, ref));
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.types.ts
new file mode 100644
index 0000000000000..11fd2a2a29bea
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/TableHeaderCell.types.ts
@@ -0,0 +1,8 @@
+import type {
+  TableHeaderCellSlots as S,
+  TableHeaderCellProps as P,
+  TableHeaderCellState as ST,
+} from '@fluentui/react-table';
+export type TableHeaderCellSlots = S;
+export type TableHeaderCellProps = P;
+export type TableHeaderCellState = ST;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/index.ts
new file mode 100644
index 0000000000000..204e1ccac76d7
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/index.ts
@@ -0,0 +1,4 @@
+export { TableHeaderCell } from './TableHeaderCell';
+export { useTableHeaderCell } from './useTableHeaderCell';
+export { renderTableHeaderCell } from './renderTableHeaderCell';
+export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/renderTableHeaderCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/renderTableHeaderCell.ts
new file mode 100644
index 0000000000000..bd45b03b4c7da
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/renderTableHeaderCell.ts
@@ -0,0 +1,2 @@
+import { renderTableHeaderCell_unstable } from '@fluentui/react-table';
+export const renderTableHeaderCell = renderTableHeaderCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/useTableHeaderCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/useTableHeaderCell.ts
new file mode 100644
index 0000000000000..89840c37d8c54
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableHeaderCell/useTableHeaderCell.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useTableHeaderCell_unstable } from '@fluentui/react-table';
+export const useTableHeaderCell = useTableHeaderCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.tsx
new file mode 100644
index 0000000000000..42f89f30aa97e
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableResizeHandleProps } from './TableResizeHandle.types';
+import { useTableResizeHandle } from './useTableResizeHandle';
+import { renderTableResizeHandle } from './renderTableResizeHandle';
+
+export const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps> = React.forwardRef((props, ref) => {
+  return renderTableResizeHandle(useTableResizeHandle(props, ref));
+});
+TableResizeHandle.displayName = 'TableResizeHandle';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.types.ts
new file mode 100644
index 0000000000000..c3fc186848faf
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/TableResizeHandle.types.ts
@@ -0,0 +1,8 @@
+import type {
+  TableResizeHandleSlots as S,
+  TableResizeHandleProps as P,
+  TableResizeHandleState as ST,
+} from '@fluentui/react-table';
+export type TableResizeHandleSlots = S;
+export type TableResizeHandleProps = P;
+export type TableResizeHandleState = ST;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/index.ts
new file mode 100644
index 0000000000000..ff27b1211af7a
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/index.ts
@@ -0,0 +1,4 @@
+export { TableResizeHandle } from './TableResizeHandle';
+export { useTableResizeHandle } from './useTableResizeHandle';
+export { renderTableResizeHandle } from './renderTableResizeHandle';
+export type { TableResizeHandleSlots, TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/renderTableResizeHandle.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/renderTableResizeHandle.ts
new file mode 100644
index 0000000000000..3a19a0948bcf9
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/renderTableResizeHandle.ts
@@ -0,0 +1,2 @@
+import { renderTableResizeHandle_unstable } from '@fluentui/react-table';
+export const renderTableResizeHandle = renderTableResizeHandle_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/useTableResizeHandle.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/useTableResizeHandle.ts
new file mode 100644
index 0000000000000..285d68f8ed354
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableResizeHandle/useTableResizeHandle.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useTableResizeHandle_unstable } from '@fluentui/react-table';
+export const useTableResizeHandle = useTableResizeHandle_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.tsx
new file mode 100644
index 0000000000000..92d9d5e53009a
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableRowProps } from './TableRow.types';
+import { useTableRow } from './useTableRow';
+import { renderTableRow } from './renderTableRow';
+
+export const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {
+  return renderTableRow(useTableRow(props, ref));
+});
+TableRow.displayName = 'TableRow';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.types.ts
new file mode 100644
index 0000000000000..a6bf6fdf86d2a
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/TableRow.types.ts
@@ -0,0 +1,4 @@
+import type { TableRowSlots as S, TableRowProps as P, TableRowState as ST } from '@fluentui/react-table';
+export type TableRowSlots = S;
+export type TableRowProps = P;
+export type TableRowState = ST;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/index.ts
new file mode 100644
index 0000000000000..4dacdb58d7aec
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/index.ts
@@ -0,0 +1,4 @@
+export { TableRow } from './TableRow';
+export { useTableRow } from './useTableRow';
+export { renderTableRow } from './renderTableRow';
+export type { TableRowSlots, TableRowProps, TableRowState } from './TableRow.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/renderTableRow.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/renderTableRow.ts
new file mode 100644
index 0000000000000..5a0c084c5f60c
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/renderTableRow.ts
@@ -0,0 +1,2 @@
+import { renderTableRow_unstable } from '@fluentui/react-table';
+export const renderTableRow = renderTableRow_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/useTableRow.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/useTableRow.ts
new file mode 100644
index 0000000000000..351657cc5c632
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableRow/useTableRow.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useTableRow_unstable } from '@fluentui/react-table';
+export const useTableRow = useTableRow_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.tsx b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.tsx
new file mode 100644
index 0000000000000..caeb61a8d732f
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.tsx
@@ -0,0 +1,11 @@
+'use client';
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { TableSelectionCellProps } from './TableSelectionCell.types';
+import { useTableSelectionCell } from './useTableSelectionCell';
+import { renderTableSelectionCell } from './renderTableSelectionCell';
+
+export const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps> = React.forwardRef((props, ref) => {
+  return renderTableSelectionCell(useTableSelectionCell(props, ref));
+});
+TableSelectionCell.displayName = 'TableSelectionCell';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.types.ts
new file mode 100644
index 0000000000000..75b57a0bd6a6f
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/TableSelectionCell.types.ts
@@ -0,0 +1,8 @@
+import type {
+  TableSelectionCellSlots as S,
+  TableSelectionCellProps as P,
+  TableSelectionCellState as ST,
+} from '@fluentui/react-table';
+export type TableSelectionCellSlots = S;
+export type TableSelectionCellProps = P;
+export type TableSelectionCellState = ST;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/index.ts
new file mode 100644
index 0000000000000..389feadf7a6a1
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/index.ts
@@ -0,0 +1,8 @@
+export { TableSelectionCell } from './TableSelectionCell';
+export { useTableSelectionCell } from './useTableSelectionCell';
+export { renderTableSelectionCell } from './renderTableSelectionCell';
+export type {
+  TableSelectionCellSlots,
+  TableSelectionCellProps,
+  TableSelectionCellState,
+} from './TableSelectionCell.types';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/renderTableSelectionCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/renderTableSelectionCell.ts
new file mode 100644
index 0000000000000..ad8a5b3f22610
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/renderTableSelectionCell.ts
@@ -0,0 +1,2 @@
+import { renderTableSelectionCell_unstable } from '@fluentui/react-table';
+export const renderTableSelectionCell = renderTableSelectionCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/useTableSelectionCell.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/useTableSelectionCell.ts
new file mode 100644
index 0000000000000..bfa22238b8545
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/TableSelectionCell/useTableSelectionCell.ts
@@ -0,0 +1,3 @@
+'use client';
+import { useTableSelectionCell_unstable } from '@fluentui/react-table';
+export const useTableSelectionCell = useTableSelectionCell_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/index.ts
new file mode 100644
index 0000000000000..268057a9a0cd3
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/index.ts
@@ -0,0 +1,41 @@
+export { Table } from './Table';
+export { renderTable } from './renderTable';
+export { useTable, useTableContextValues } from './useTable';
+export type { TableSlots, TableProps, TableState, TableContextValues, SortDirection } from './Table.types';
+
+export { TableBody, renderTableBody, useTableBody } from './TableBody';
+export type { TableBodySlots, TableBodyProps, TableBodyState } from './TableBody';
+
+export { TableHeader, renderTableHeader, useTableHeader } from './TableHeader';
+export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './TableHeader';
+
+export { TableHeaderCell, renderTableHeaderCell, useTableHeaderCell } from './TableHeaderCell';
+export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell';
+
+export { TableRow, renderTableRow, useTableRow } from './TableRow';
+export type { TableRowSlots, TableRowProps, TableRowState } from './TableRow';
+
+export { TableCell, renderTableCell, useTableCell } from './TableCell';
+export type { TableCellSlots, TableCellProps, TableCellState } from './TableCell';
+
+export { TableSelectionCell, renderTableSelectionCell, useTableSelectionCell } from './TableSelectionCell';
+export type { TableSelectionCellSlots, TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell';
+
+export { TableCellActions, renderTableCellActions, useTableCellActions } from './TableCellActions';
+export type { TableCellActionsSlots, TableCellActionsProps, TableCellActionsState } from './TableCellActions';
+
+export {
+  TableCellLayout,
+  renderTableCellLayout,
+  useTableCellLayout,
+  useTableCellLayoutContextValues,
+} from './TableCellLayout';
+export type {
+  TableCellLayoutSlots,
+  TableCellLayoutProps,
+  TableCellLayoutState,
+  TableCellLayoutContextValues,
+} from './TableCellLayout';
+
+export { TableResizeHandle, renderTableResizeHandle, useTableResizeHandle } from './TableResizeHandle';
+export type { TableResizeHandleSlots, TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle';
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/renderTable.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/renderTable.ts
new file mode 100644
index 0000000000000..3c5391c464442
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/renderTable.ts
@@ -0,0 +1,2 @@
+import { renderTable_unstable } from '@fluentui/react-table';
+export const renderTable = renderTable_unstable;
diff --git a/packages/react-components/react-headless-components-preview/library/src/components/Table/useTable.ts b/packages/react-components/react-headless-components-preview/library/src/components/Table/useTable.ts
new file mode 100644
index 0000000000000..ef5a6f64eeec6
--- /dev/null
+++ b/packages/react-components/react-headless-components-preview/library/src/components/Table/useTable.ts
@@ -0,0 +1,5 @@
+'use client';
+import { useTable_unstable, useTableContextValues_unstable } from '@fluentui/react-table';
+import type { TableState, TableContextValues } from './Table.types';
+export const useTable = useTable_unstable;
+export const useTableContextValues = useTableContextValues_unstable as (state: TableState) => TableContextValues;
diff --git a/packages/react-components/react-headless-components-preview/library/src/index.ts b/packages/react-components/react-headless-components-preview/library/src/index.ts
index 0e55d90452127..08e681bf19224 100644
--- a/packages/react-components/react-headless-components-preview/library/src/index.ts
+++ b/packages/react-components/react-headless-components-preview/library/src/index.ts
@@ -282,3 +282,94 @@ export type {
   ToolbarToggleButtonProps,
   ToolbarToggleButtonState,
 } from './Toolbar';
+
+export {
+  Table,
+  renderTable,
+  useTable,
+  useTableContextValues,
+  TableBody,
+  renderTableBody,
+  useTableBody,
+  TableHeader,
+  renderTableHeader,
+  useTableHeader,
+  TableHeaderCell,
+  renderTableHeaderCell,
+  useTableHeaderCell,
+  TableRow,
+  renderTableRow,
+  useTableRow,
+  TableCell,
+  renderTableCell,
+  useTableCell,
+  TableSelectionCell,
+  renderTableSelectionCell,
+  useTableSelectionCell,
+  TableCellActions,
+  renderTableCellActions,
+  useTableCellActions,
+  TableCellLayout,
+  renderTableCellLayout,
+  useTableCellLayout,
+  useTableCellLayoutContextValues,
+  TableResizeHandle,
+  renderTableResizeHandle,
+  useTableResizeHandle,
+} from './Table';
+export type {
+  TableSlots,
+  TableProps,
+  TableState,
+  TableContextValues,
+  SortDirection,
+  TableBodySlots,
+  TableBodyProps,
+  TableBodyState,
+  TableHeaderSlots,
+  TableHeaderProps,
+  TableHeaderState,
+  TableHeaderCellSlots,
+  TableHeaderCellProps,
+  TableHeaderCellState,
+  TableRowSlots,
+  TableRowProps,
+  TableRowState,
+  TableCellSlots,
+  TableCellProps,
+  TableCellState,
+  TableSelectionCellSlots,
+  TableSelectionCellProps,
+  TableSelectionCellState,
+  TableCellActionsSlots,
+  TableCellActionsProps,
+  TableCellActionsState,
+  TableCellLayoutSlots,
+  TableCellLayoutProps,
+  TableCellLayoutState,
+  TableCellLayoutContextValues,
+  TableResizeHandleSlots,
+  TableResizeHandleProps,
+  TableResizeHandleState,
+} from './Table';
+
+export { DataGrid, renderDataGrid, useDataGrid, useDataGridContextValues } from './DataGrid';
+export type { DataGridSlots, DataGridProps, DataGridState, DataGridContextValues, DataGridFocusMode } from './DataGrid';
+
+export { DataGridBody, renderDataGridBody, useDataGridBody } from './DataGrid';
+export type { DataGridBodySlots, DataGridBodyProps, DataGridBodyState, RowRenderFunction } from './DataGrid';
+
+export { DataGridHeader, renderDataGridHeader, useDataGridHeader } from './DataGrid';
+export type { DataGridHeaderSlots, DataGridHeaderProps, DataGridHeaderState } from './DataGrid';
+
+export { DataGridHeaderCell, renderDataGridHeaderCell, useDataGridHeaderCell } from './DataGrid';
+export type { DataGridHeaderCellSlots, DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGrid';
+
+export { DataGridRow, renderDataGridRow, useDataGridRow } from './DataGrid';
+export type { DataGridRowSlots, DataGridRowProps, DataGridRowState, CellRenderFunction } from './DataGrid';
+
+export { DataGridCell, renderDataGridCell, useDataGridCell } from './DataGrid';
+export type { DataGridCellSlots, DataGridCellProps, DataGridCellState, DataGridCellFocusMode } from './DataGrid';
+
+export { DataGridSelectionCell, renderDataGridSelectionCell, useDataGridSelectionCell } from './DataGrid';
+export type { DataGridSelectionCellSlots, DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGrid';