Feat/use table composition

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

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: Adds layoutType prop to Table with flex option ",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -97,6 +97,7 @@
     "@nrwl/js": "13.10.6",
     "@nrwl/node": "13.10.6",
     "@nrwl/workspace": "13.10.6",
+    "@resembli/react-virtualized-window": "0.8.6",
     "@storybook/addon-a11y": "6.5.5",
     "@storybook/addon-actions": "6.5.5",
     "@storybook/addon-docs": "6.5.5",
@@ -114,6 +115,7 @@
     "@storybook/react": "6.5.5",
     "@storybook/theming": "6.5.5",
     "@swc/core": "1.2.220",
+    "@tanstack/react-virtual": "3.0.0-beta.18",
     "@testing-library/dom": "8.11.3",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
@@ -165,6 +167,7 @@
     "ci-info": "3.2.0",
     "clean-webpack-plugin": "4.0.0",
     "cli-table3": "0.6.1",
+    "content-visibility": "1.2.2",
     "copy-webpack-plugin": "8.1.0",
     "cross-env": "^5.1.4",
     "css-loader": "5.0.1",
@@ -234,6 +237,7 @@
     "react-dom": "17.0.2",
     "react-is": "17.0.2",
     "react-test-renderer": "17.0.2",
+    "recyclerlistview": "3.0.5",
     "sass": "1.49.11",
     "sass-loader": "12.4.0",
     "satisfied": "^1.1.1",

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, 'layoutType'>;
 
 // @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, 'layoutType'>;
 
 // @public (undocumented)
 export const tableClassName = "fui-Table";
@@ -164,6 +164,7 @@ export const TableContextProvider: React_2.Provider<TableContextValue | undefine
 export type TableContextValue = {
     size: 'small' | 'smaller' | 'medium';
     noNativeElements: boolean;
+    layoutType: 'native' | 'flex';
     sortable: boolean;
 };
 
@@ -197,9 +198,7 @@ export type TableHeaderCellSlots = {
 };
 
 // @public
-export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & {
-    sortable: boolean;
-};
+export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & Pick<TableContextValue, 'layoutType' | 'sortable'>;
 
 // @public (undocumented)
 export const tableHeaderClassName = "fui-TableHeader";
@@ -216,7 +215,7 @@ export type TableHeaderSlots = {
 };
 
 // @public
-export type TableHeaderState = ComponentState<TableHeaderSlots>;
+export type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<TableContextValue, 'layoutType'>;
 
 // @public
 export type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
@@ -239,9 +238,7 @@ export type TableRowSlots = {
 };
 
 // @public
-export type TableRowState = ComponentState<TableRowSlots> & {
-    size: TableState['size'];
-};
+export type TableRowState = ComponentState<TableRowSlots> & Pick<TableContextValue, 'layoutType' | 'size'>;
 
 // @public
 export const TableSelectionCell: ForwardRefComponent<TableSelectionCellProps>;
@@ -262,7 +259,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, 'layoutType'>;
 
 // @public (undocumented)
 export interface TableSelectionState {
@@ -292,7 +289,7 @@ export interface TableSortState {
 }
 
 // @public
-export type TableState = ComponentState<TableSlots> & Pick<Required<TableProps>, 'size' | 'noNativeElements'> & TableContextValue;
+export type TableState = ComponentState<TableSlots> & Pick<Required<TableProps>, 'size' | 'noNativeElements' | 'layoutType'> & TableContextValue;
 
 // @public (undocumented)
 export function useTable<TItem, TRowState extends RowState<TItem> = RowState<TItem>>(options: UseTableOptions<TItem, TRowState>): TableState_2<TItem, TRowState>;

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.test.ts

@@ -13,6 +13,7 @@ describe('useTableContextValues', () => {
     expect(result.current).toMatchInlineSnapshot(`
       Object {
         "table": Object {
+          "layoutType": "native",
           "noNativeElements": false,
           "size": "medium",
           "sortable": false,

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,
   };
 };