feat: noNativeElements renders table with flex layout

change/@fluentui-react-table-69a4bbc7-8575-45e4-b339-04032ef3037f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: `noNativeElements` renders a flex layout",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/etc/react-table.api.md

@@ -87,7 +87,7 @@ export type TableBodySlots = {
 };
 
 // @public
-export type TableBodyState = ComponentState<TableBodySlots>;
+export type TableBodyState = ComponentState<TableBodySlots> & Pick<TableContextValue, 'noNativeElements'>;
 
 // @public
 export const TableCell: ForwardRefComponent<TableCellProps>;
@@ -149,7 +149,7 @@ export type TableCellSlots = {
 };
 
 // @public
-export type TableCellState = ComponentState<TableCellSlots>;
+export type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements'>;
 
 // @public (undocumented)
 export const tableClassName = "fui-Table";
@@ -197,9 +197,7 @@ export type TableHeaderCellSlots = {
 };
 
 // @public
-export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & {
-    sortable: boolean;
-};
+export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & Pick<TableContextValue, 'noNativeElements' | 'sortable'>;
 
 // @public (undocumented)
 export const tableHeaderClassName = "fui-TableHeader";
@@ -216,7 +214,7 @@ export type TableHeaderSlots = {
 };
 
 // @public
-export type TableHeaderState = ComponentState<TableHeaderSlots>;
+export type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<TableContextValue, 'noNativeElements'>;
 
 // @public
 export type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
@@ -239,9 +237,7 @@ export type TableRowSlots = {
 };
 
 // @public
-export type TableRowState = ComponentState<TableRowSlots> & {
-    size: TableState['size'];
-};
+export type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'noNativeElements' | 'size'>;
 
 // @public
 export const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps>;
@@ -262,7 +258,7 @@ export type TableSelectionCellSlots = {
 } & Pick<TableCellSlots, 'root'>;
 
 // @public
-export type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked'>;
+export type TableSelectionCellState = ComponentState<TableSelectionCellSlots> & Pick<Required<TableSelectionCellProps>, 'type' | 'checked'> & Pick<TableContextValue, 'noNativeElements'>;
 
 // @public (undocumented)
 export interface TableSelectionState {

packages/react-components/react-table/src/components/Table/Table.types.ts

@@ -5,10 +5,21 @@ export type TableSlots = {
 };
 
 export type TableContextValue = {
+  /**
+   * Affects the sizes of all table subcomponents
+   * @default medium
+   */
   size: 'small' | 'smaller' | 'medium';
 
+  /**
+   * Render all table elements as divs intead of semantic table elements
+   * Using divs no longer uses `display: table` layout but `display: flex`
+   */
   noNativeElements: boolean;
 
+  /**
+   * Whether the table is sortable
+   */
   sortable: boolean;
 };
 

packages/react-components/react-table/src/components/Table/useTableStyles.ts

@@ -8,15 +8,27 @@ export const tableClassNames: SlotClassNames<TableSlots> = {
   root: 'fui-Table',
 };
 
+const useTableLayoutStyles = makeStyles({
+  root: {
+    display: 'table',
+    verticalAlign: 'middle',
+    width: '100%',
+    tableLayout: 'fixed',
+  },
+});
+
+const useFlexLayoutStyles = makeStyles({
+  root: {
+    display: 'block',
+  },
+});
+
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
-    verticalAlign: 'middle',
     borderCollapse: 'collapse',
-    width: '100%',
-    display: 'table',
     backgroundColor: tokens.colorNeutralBackground1,
   },
 });
@@ -26,7 +38,16 @@ const useStyles = makeStyles({
  */
 export const useTableStyles_unstable = (state: TableState): TableState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(tableClassName, styles.root, state.root.className);
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles(),
+  };
+  state.root.className = mergeClasses(
+    tableClassName,
+    styles.root,
+    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+    state.root.className,
+  );
 
   return state;
 };

packages/react-components/react-table/src/components/TableBody/TableBody.types.ts

@@ -1,4 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TableContextValue } from '../Table/Table.types';
 
 export type TableBodySlots = {
   root: Slot<'tbody', 'div'>;
@@ -12,4 +13,4 @@ export type TableBodyProps = ComponentProps<TableBodySlots>;
 /**
  * State used in rendering TableBody
  */
-export type TableBodyState = ComponentState<TableBodySlots>;
+export type TableBodyState = ComponentState<TableBodySlots> & Pick<TableContextValue, 'noNativeElements'>;

packages/react-components/react-table/src/components/TableBody/useTableBody.ts

@@ -25,5 +25,6 @@ export const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTML
       role: rootComponent === 'div' ? 'rowgroup' : undefined,
       ...props,
     }),
+    noNativeElements,
   };
 };

packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts

@@ -2,12 +2,18 @@ import { mergeClasses, makeStyles } from '@griffel/react';
 import type { TableBodySlots, TableBodyState } from './TableBody.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-const useStyles = makeStyles({
+const useTableLayoutStyles = makeStyles({
   root: {
     display: 'table-row-group',
   },
 });
 
+const useFlexLayoutStyles = makeStyles({
+  root: {
+    display: 'block',
+  },
+});
+
 export const tableBodyClassName = 'fui-TableBody';
 export const tableBodyClassNames: SlotClassNames<TableBodySlots> = {
   root: 'fui-TableBody',
@@ -17,8 +23,15 @@ export const tableBodyClassNames: SlotClassNames<TableBodySlots> = {
  * Apply styling to the TableBody slots based on the state
  */
 export const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(tableBodyClassName, styles.root, state.root.className);
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles(),
+  };
+  state.root.className = mergeClasses(
+    tableBodyClassName,
+    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+    state.root.className,
+  );
 
   return state;
 };

packages/react-components/react-table/src/components/TableCell/TableCell.types.ts

@@ -1,4 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TableContextValue } from '../Table/Table.types';
 
 export type TableCellSlots = {
   root: Slot<'td', 'div'>;
@@ -12,4 +13,4 @@ export type TableCellProps = ComponentProps<TableCellSlots> & {};
 /**
  * State used in rendering TableCell
  */
-export type TableCellState = ComponentState<TableCellSlots>;
+export type TableCellState = ComponentState<TableCellSlots> & Pick<TableContextValue, 'noNativeElements'>;

packages/react-components/react-table/src/components/TableCell/useTableCell.ts

@@ -26,5 +26,6 @@ export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTML
       role: rootComponent === 'div' ? 'cell' : undefined,
       ...props,
     }),
+    noNativeElements,
   };
 };

packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts

@@ -8,14 +8,28 @@ export const tableCellClassNames: SlotClassNames<TableCellSlots> = {
   root: tableCellClassName,
 };
 
+const useTableLayoutStyles = makeStyles({
+  root: {
+    display: 'table-cell',
+    verticalAlign: 'middle',
+  },
+});
+
+const useFlexLayoutStyles = makeStyles({
+  root: {
+    display: 'flex',
+    minWidth: '0px',
+    alignItems: 'center',
+    ...shorthands.flex(1, 1, '0px'),
+  },
+});
+
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
     position: 'relative',
-    verticalAlign: 'middle',
-    display: 'table-cell',
     ...shorthands.padding('0px', tokens.spacingHorizontalS),
   },
 });
@@ -25,6 +39,15 @@ const useStyles = makeStyles({
  */
 export const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className);
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles(),
+  };
+  state.root.className = mergeClasses(
+    tableCellClassNames.root,
+    styles.root,
+    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+    state.root.className,
+  );
   return state;
 };

packages/react-components/react-table/src/components/TableHeader/TableHeader.types.ts

@@ -1,4 +1,5 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TableContextValue } from '../Table/Table.types';
 
 export type TableHeaderSlots = {
   root: Slot<'thead', 'div'>;
@@ -12,4 +13,4 @@ export type TableHeaderProps = ComponentProps<TableHeaderSlots> & {};
 /**
  * State used in rendering TableHeader
  */
-export type TableHeaderState = ComponentState<TableHeaderSlots>;
+export type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<TableContextValue, 'noNativeElements'>;

packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts

@@ -28,5 +28,6 @@ export const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<
       ...(sortable && keyboardNavAttr),
       ...props,
     }),
+    noNativeElements,
   };
 };

packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts

@@ -7,7 +7,21 @@ export const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {
   root: 'fui-TableHeader',
 };
 
-const useStyles = makeStyles({
+const useFlexLayoutStyles = makeStyles({
+  root: {
+    display: 'block',
+  },
+
+  roottable: {
+    display: 'table-row-group',
+  },
+
+  rootFlex: {
+    display: 'block',
+  },
+});
+
+const useTableLayoutStyles = makeStyles({
   root: {
     display: 'table-row-group',
   },
@@ -17,8 +31,15 @@ const useStyles = makeStyles({
  * Apply styling to the TableHeader slots based on the state
  */
 export const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(tableHeaderClassName, styles.root, state.root.className);
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles(),
+  };
+  state.root.className = mergeClasses(
+    tableHeaderClassName,
+    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+    state.root.className,
+  );
 
   return state;
 };

packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.types.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import { ARIAButtonSlotProps } from '@fluentui/react-aria';
-import { SortDirection } from '../Table/Table.types';
+import { SortDirection, TableContextValue } from '../Table/Table.types';
 
 export type TableHeaderCellSlots = {
   root: Slot<'th', 'div'>;
@@ -23,4 +23,5 @@ export type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>>
 /**
  * State used in rendering TableHeaderCell
  */
-export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & { sortable: boolean };
+export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> &
+  Pick<TableContextValue, 'noNativeElements' | 'sortable'>;

packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx

@@ -55,5 +55,6 @@ export const useTableHeaderCell_unstable = (
       },
     }),
     sortable,
+    noNativeElements,
   };
 };

packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts

@@ -10,13 +10,26 @@ export const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {
   sortIcon: 'fui-TableHeaderCell__sortIcon',
 };
 
+const useTableLayoutStyles = makeStyles({
+  root: {
+    display: 'table-cell',
+    verticalAlign: 'middle',
+  },
+});
+
+const useFlexLayoutStyles = makeStyles({
+  root: {
+    display: 'flex',
+    ...shorthands.flex(1, 1, '0px'),
+    minWidth: '0px',
+  },
+});
+
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
-    display: 'table-cell',
-    verticalAlign: 'middle',
     ...shorthands.padding('0px', tokens.spacingHorizontalS),
   },
 
@@ -60,7 +73,16 @@ const useStyles = makeStyles({
  */
 export const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.root.className);
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles(),
+  };
+  state.root.className = mergeClasses(
+    tableHeaderCellClassNames.root,
+    styles.root,
+    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
+    state.root.className,
+  );
   state.button.className = mergeClasses(
     tableHeaderCellClassNames.button,
     styles.resetButton,