feat: Adds layoutType prop to Table with flex option

Native `display: table` is great for column alignment and simplifies
column sizing. However, native table layout is not very virtualization
friendly and does cannot handle any non-compliant element in the markup.

For virtualization and other cases that involve non-compliant table
elements in markup, there is a `layoutType` prop with the `native`and
`flex` layouts.

Flex layout is what was used before microsoft#24762 with fixes to column
alignment for long content.

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

@@ -5,10 +5,27 @@ 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
+ */
  noNativeElements: boolean;
 
+ /**
+ * Uses native browser `display: table` layout or flexbox layout.
+ * Recommended to use flx layout for virtualized tables
+ * @default native
+ */
+ layoutType: 'native' | 'flex';
+
+ /**
+ * Whether the table is sortable
+ */
  sortable: boolean;
 };
 
@@ -27,5 +44,5 @@ export type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>
  * State used in rendering Table
  */
 export type TableState = ComponentState<TableSlots> &
- Pick<Required<TableProps>, 'size' | 'noNativeElements'> &
+ Pick<Required<TableProps>, 'size' | 'noNativeElements' | 'layoutType'> &
  TableContextValue;

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

@@ -26,5 +26,6 @@ export const useTable_unstable = (props: TableProps, ref: React.Ref<HTMLElement>
  size: props.size ?? 'medium',
  noNativeElements: props.noNativeElements ?? false,
  sortable: props.sortable ?? false,
+ layoutType: props.layoutType ?? 'native',
  };
 };

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

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { TableContextValues, TableState } from './Table.types';
 
 export function useTableContextValues_unstable(state: TableState): TableContextValues {
- const { size, noNativeElements, sortable } = state;
+ const { size, noNativeElements, sortable, layoutType } = state;
 
  const tableContext = React.useMemo(
  () => ({
  noNativeElements,
  size,
  sortable,
+ layoutType,
  }),
- [noNativeElements, size, sortable],
+ [noNativeElements, size, sortable, layoutType],
  );
 
  return {

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

@@ -8,15 +8,27 @@ export const tableClassNames: SlotClassNames<TableSlots> = {
  root: 'fui-Table',
 };
 
+const useNativeLayoutStyles = 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 = {
+ native: useNativeLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableClassName,
+ styles.root,
+ layoutStyles[state.layoutType].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, 'layoutType'>;

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

@@ -13,7 +13,7 @@ import { useTableContext } from '../../contexts/tableContext';
  * @param ref - reference to root HTMLElement of TableBody
  */
 export const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTMLElement>): TableBodyState => {
- const { noNativeElements } = useTableContext();
+ const { noNativeElements, layoutType } = useTableContext();
  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tbody';
 
  return {
@@ -25,5 +25,6 @@ export const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTML
  role: rootComponent === 'div' ? 'rowgroup' : undefined,
  ...props,
  }),
+ layoutType,
  };
 };

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 useNativeLayoutStyles = 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,11 @@ 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 = {
+ native: useNativeLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(tableBodyClassName, layoutStyles[state.layoutType].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, 'layoutType'>;

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

@@ -13,7 +13,7 @@ import { useTableContext } from '../../contexts/tableContext';
  * @param ref - reference to root HTMLElement of TableCell
  */
 export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTMLElement>): TableCellState => {
- const { noNativeElements } = useTableContext();
+ const { noNativeElements, layoutType } = useTableContext();
 
  const rootComponent = props.as ?? noNativeElements ? 'div' : 'td';
 
@@ -26,5 +26,6 @@ export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTML
  role: rootComponent === 'div' ? 'cell' : undefined,
  ...props,
  }),
+ layoutType,
  };
 };

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

@@ -8,14 +8,28 @@ export const tableCellClassNames: SlotClassNames<TableCellSlots> = {
  root: tableCellClassName,
 };
 
+const useNativeLayoutStyles = 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 = {
+ native: useNativeLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableCellClassNames.root,
+ styles.root,
+ layoutStyles[state.layoutType].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, 'layoutType'>;

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

@@ -14,7 +14,7 @@ import { useTableContext } from '../../contexts/tableContext';
  * @param ref - reference to root HTMLElement of TableHeader
  */
 export const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {
- const { noNativeElements, sortable } = useTableContext();
+ const { noNativeElements, sortable, layoutType } = useTableContext();
  const keyboardNavAttr = useArrowNavigationGroup({ axis: 'horizontal', circular: true });
 
  const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';
@@ -28,5 +28,6 @@ export const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<
  ...(sortable && keyboardNavAttr),
  ...props,
  }),
+ layoutType,
  };
 };

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',
+ },
+
+ rootNative: {
+ display: 'table-row-group',
+ },
+
+ rootFlex: {
+ display: 'block',
+ },
+});
+
+const useNativeLayoutStyles = makeStyles({
  root: {
  display: 'table-row-group',
  },
@@ -17,8 +31,11 @@ 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 = {
+ native: useNativeLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(tableHeaderClassName, layoutStyles[state.layoutType].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, 'layoutType' | 'sortable'>;

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

@@ -23,7 +23,7 @@ export const useTableHeaderCell_unstable = (
  props: TableHeaderCellProps,
  ref: React.Ref<HTMLElement>,
 ): TableHeaderCellState => {
- const { noNativeElements, sortable } = useTableContext();
+ const { noNativeElements, sortable, layoutType } = useTableContext();
 
  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';
  return {
@@ -55,5 +55,6 @@ export const useTableHeaderCell_unstable = (
  },
  }),
  sortable,
+ layoutType,
  };
 };

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

@@ -10,13 +10,26 @@ export const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {
  sortIcon: 'fui-TableHeaderCell__sortIcon',
 };
 
+const useNativeLayoutStyles = 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 = {
+ native: useNativeLayoutStyles(),
+ flex: useFlexLayoutStyles(),
+ };
+ state.root.className = mergeClasses(
+ tableHeaderCellClassNames.root,
+ styles.root,
+ layoutStyles[state.layoutType].root,
+ state.root.className,
+ );
  state.button.className = mergeClasses(
  tableHeaderCellClassNames.button,
  styles.resetButton,