feat(react-data-grid): support autoFitColumns: false

change/@fluentui-contrib-react-data-grid-react-window-747478a4-550c-42d9-82de-22685c0db8db.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Keep header and body in sync when the DataGrid columns are overflowing #176",
+  "packageName": "@fluentui-contrib/react-data-grid-react-window",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { useDataGrid_unstable } from './useDataGrid';
+import { renderDataGrid_unstable } from './renderDataGrid';
+
 import {
-  renderDataGrid_unstable,
-  useDataGridStyles_unstable,
   useDataGridContextValues_unstable,
   DataGridProps,
 } from '@fluentui/react-components';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useDataGridStyles_unstable } from './useDataGridStyles.styles';
 
 export const DataGrid: ForwardRefComponent<DataGridProps> = React.forwardRef(
   (props, ref) => {

packages/react-data-grid-react-window/src/components/DataGrid/renderDataGrid.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {
+  DataGridContextValues,
+  DataGridState,
+  renderDataGrid_unstable as baseRender,
+} from '@fluentui/react-components';
+import { HeaderRefContextProvider } from '../../contexts/headerRefContext';
+import { BodyRefContextProvider } from '../../contexts/bodyRefContext';
+
+/**
+ * Render the final JSX of DataGrid
+ */
+export const renderDataGrid_unstable = (
+  state: DataGridState,
+  contextValues: DataGridContextValues
+) => {
+  const headerRef = React.useRef<HTMLDivElement | null>(null);
+  const bodyRef = React.useRef<HTMLDivElement | null>(null);
+
+  return (
+    <HeaderRefContextProvider value={headerRef}>
+      <BodyRefContextProvider value={bodyRef}>
+        {baseRender(state, contextValues)}
+      </BodyRefContextProvider>
+    </HeaderRefContextProvider>
+  );
+};

packages/react-data-grid-react-window/src/components/DataGrid/useDataGridStyles.styles.ts

@@ -0,0 +1,27 @@
+import {
+  DataGridState,
+  makeStyles,
+  mergeClasses,
+  useDataGridStyles_unstable as useDataGridStylesBase_unstable,
+} from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    // DataGrid gets min-width: fit-content applied directly to the element, thus the need for !important
+    // without auto width, the DataGrid will not scroll
+    minWidth: 'auto !important',
+  },
+});
+
+/**
+ * Apply styling to the DataGrid slots based on the state
+ */
+export const useDataGridStyles_unstable = (
+  state: DataGridState
+): DataGridState => {
+  const classes = useStyles();
+  state.root.className = mergeClasses(classes.root, state.root.className);
+
+  useDataGridStylesBase_unstable(state);
+  return state;
+};

packages/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.types.ts

@@ -72,4 +72,6 @@ export type DataGridBodyState = Omit<DataGridBodyStateBase, 'renderRow'> &
     virtualizedRow: (props: ListChildComponentProps) => React.ReactElement;
   } & {
     listProps?: Partial<FixedSizeListProps>;
+
+    outerRef?: React.Ref<unknown>;
   };

packages/react-data-grid-react-window/src/components/DataGridBody/renderDataGridBody.tsx

@@ -22,6 +22,7 @@ export const renderDataGridBody_unstable = (state: DataGridBodyState) => {
         height={state.height}
         itemCount={state.rows.length}
         direction={dir}
+        outerRef={state.outerRef}
         {...state.listProps}
       >
         {state.virtualizedRow}

packages/react-data-grid-react-window/src/components/DataGridBody/useDataGridBody.tsx

@@ -10,6 +10,8 @@ import {
 } from '@fluentui/react-components';
 import type { RowRenderFunction } from '@fluentui/react-table';
 import { TableRowIndexContextProvider } from '../../contexts/rowIndexContext';
+import { useBodyRefContext } from '../../contexts/bodyRefContext';
+import { useHeaderRefContext } from '../../contexts/headerRefContext';
 
 /**
  * Create the state required to render DataGridBody.
@@ -33,6 +35,9 @@ export const useDataGridBody_unstable = (
     listProps,
   } = props;
 
+  const bodyRef = useBodyRefContext();
+  const headerRef = useHeaderRefContext();
+
   // cast the row render function to work with unknown args
   const renderRowWithUnknown = children as RowRenderFunction;
   const baseState = useDataGridBodyBase_unstable(
@@ -54,6 +59,28 @@ export const useDataGridBody_unstable = (
     [ariaRowIndexStart, children]
   );
 
+  const onScroll = React.useCallback(() => {
+    if (bodyRef.current && headerRef.current) {
+      headerRef.current.scroll({
+        left: bodyRef.current.scrollLeft,
+        behavior: 'instant',
+      });
+    }
+  }, []);
+
+  // Use a onScroll callback on the outerElement since react-window's onScroll will only work for horizontal scrolls
+  const setupOuterRef = React.useCallback(
+    (outerElement: HTMLElement | null) => {
+      bodyRef.current?.removeEventListener('scroll', onScroll);
+
+      bodyRef.current = outerElement;
+      if (outerElement) {
+        outerElement.addEventListener('scroll', onScroll);
+      }
+    },
+    []
+  );
+
   return {
     ...baseState,
     itemSize,
@@ -62,5 +89,6 @@ export const useDataGridBody_unstable = (
     width,
     ariaRowIndexStart,
     listProps,
+    outerRef: setupOuterRef,
   };
 };

packages/react-data-grid-react-window/src/components/DataGridHeader/DataGridHeader.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import {
+  renderDataGridHeader_unstable,
+  type DataGridHeaderProps,
+  type ForwardRefComponent,
+} from '@fluentui/react-components';
+import { useDataGridHeader_unstable } from './useDataGridHeader';
+import { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles.styles';
+
+/**
+ * DataGridHeader component
+ */
+export const DataGridHeader: ForwardRefComponent<DataGridHeaderProps> &
+  ((props: DataGridHeaderProps) => JSX.Element) = React.forwardRef(
+  (props, ref) => {
+    const state = useDataGridHeader_unstable(props, ref);
+
+    useDataGridHeaderStyles_unstable(state);
+    return renderDataGridHeader_unstable(state);
+  }
+) as ForwardRefComponent<DataGridHeaderProps> &
+  ((props: DataGridHeaderProps) => JSX.Element);
+
+DataGridHeader.displayName = 'DataGridHeader';

packages/react-data-grid-react-window/src/components/DataGridHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './DataGridHeader';
+export * from './useDataGridHeader';

packages/react-data-grid-react-window/src/components/DataGridHeader/useDataGridHeader.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {
+  useDataGridHeader_unstable as useBaseState,
+  DataGridHeaderProps,
+  DataGridHeaderState,
+} from '@fluentui/react-components';
+import { useBodyRefContext } from '../../contexts/bodyRefContext';
+import { useHeaderRefContext } from '../../contexts/headerRefContext';
+
+const setRef = (ref: React.Ref<HTMLElement>, value: HTMLElement | null) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    (ref as React.MutableRefObject<HTMLElement | null>).current = value;
+  }
+};
+
+/**
+ * Create the state required to render DataGridHeader.
+ *
+ * The returned state can be modified with hooks such as useDataGridHeaderStyles_unstable,
+ * before being passed to renderDataGridHeader_unstable.
+ *
+ * @param props - props from this instance of DataGridHeader
+ * @param ref - reference to root HTMLElement of DataGridHeader
+ */
+export const useDataGridHeader_unstable = (
+  props: DataGridHeaderProps,
+  ref: React.Ref<HTMLElement>
+): DataGridHeaderState => {
+  const bodyRef = useBodyRefContext();
+  const headerRef = useHeaderRefContext();
+
+  const onScroll = React.useCallback(() => {
+    if (bodyRef.current && headerRef.current) {
+      bodyRef.current.scroll({
+        left: headerRef.current.scrollLeft,
+        behavior: 'instant',
+      });
+    }
+  }, []);
+
+  const setupRef = React.useCallback((element: HTMLElement | null) => {
+    setRef(ref, element);
+    headerRef.current?.removeEventListener('scroll', onScroll);
+
+    headerRef.current = element;
+    if (element) {
+      element.addEventListener('scroll', onScroll);
+    }
+  }, []);
+
+  const baseState = useBaseState(props, setupRef);
+
+  return {
+    ...baseState,
+  };
+};

packages/react-data-grid-react-window/src/components/DataGridHeader/useDataGridHeaderStyles.styles.ts

@@ -0,0 +1,31 @@
+import {
+  makeStyles,
+  mergeClasses,
+  useDataGridHeaderStyles_unstable as useDataGridHeaderStylesBase_unstable,
+  DataGridHeaderState,
+} from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    overflowX: 'auto',
+    // Hide the scrollbar in the header, it is synced to the scrollbar of the body so shouldn't be shown
+    scrollbarWidth: 'none',
+    '::-webkit-scrollbar': {
+      width: 0,
+      height: 0,
+    },
+  },
+});
+
+/**
+ * Apply styling to the DataGridHeader slots based on the state
+ */
+export const useDataGridHeaderStyles_unstable = (
+  state: DataGridHeaderState
+): DataGridHeaderState => {
+  const classes = useStyles();
+  state.root.className = mergeClasses(classes.root, state.root.className);
+
+  useDataGridHeaderStylesBase_unstable(state);
+  return state;
+};

packages/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
-  useDataGridRowStyles_unstable,
   renderDataGridRow_unstable,
   DataGridRowProps,
 } from '@fluentui/react-components';
 import type { ForwardRefComponent } from '@fluentui/react-components';
-import { useDataGridRow_unstable } from './useDataGridRow.styles';
+import { useDataGridRow_unstable } from './useDataGridRow';
+import { useDataGridRowStyles_unstable } from './useDataGridRow.styles';
 
 /**
  * DataGridRow component

packages/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.styles.ts

@@ -1,24 +1,25 @@
-import * as React from 'react';
-import type {
-  DataGridRowProps,
+import {
+  makeStyles,
+  mergeClasses,
+  useDataGridRowStyles_unstable as useDataGridRowStylesBase_unstable,
   DataGridRowState,
 } from '@fluentui/react-components';
-import { useDataGridRow_unstable as useBaseState } from '@fluentui/react-components';
-import { useTableRowIndexContext } from '../../contexts/rowIndexContext';
+
+const useStyles = makeStyles({
+  root: {
+    minWidth: 'fit-content',
+  },
+});
 
 /**
- * Create the state required to render DataGridRow.
- *
- * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,
- * before being passed to renderDataGridRow_unstable.
- *
- * @param props - props from this instance of DataGridRow
- * @param ref - reference to root HTMLElement of DataGridRow
+ * Apply styling to the DataGridRow slots based on the state
  */
-export const useDataGridRow_unstable = (
-  props: DataGridRowProps,
-  ref: React.Ref<HTMLElement>
+export const useDataGridRowStyles_unstable = (
+  state: DataGridRowState
 ): DataGridRowState => {
-  const rowIndex = useTableRowIndexContext();
-  return useBaseState({ ...props, 'aria-rowindex': rowIndex }, ref);
+  const classes = useStyles();
+  state.root.className = mergeClasses(classes.root, state.root.className);
+
+  useDataGridRowStylesBase_unstable(state);
+  return state;
 };

packages/react-data-grid-react-window/src/components/DataGridRow/useDataGridRow.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type {
+  DataGridRowProps,
+  DataGridRowState,
+} from '@fluentui/react-components';
+import { useDataGridRow_unstable as useBaseState } from '@fluentui/react-components';
+import { useTableRowIndexContext } from '../../contexts/rowIndexContext';
+
+/**
+ * Create the state required to render DataGridRow.
+ *
+ * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,
+ * before being passed to renderDataGridRow_unstable.
+ *
+ * @param props - props from this instance of DataGridRow
+ * @param ref - reference to root HTMLElement of DataGridRow
+ */
+export const useDataGridRow_unstable = (
+  props: DataGridRowProps,
+  ref: React.Ref<HTMLElement>
+): DataGridRowState => {
+  const rowIndex = useTableRowIndexContext();
+  return useBaseState({ ...props, 'aria-rowindex': rowIndex }, ref);
+};

packages/react-data-grid-react-window/src/contexts/bodyRefContext.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+const bodyRefContext: React.Context<
+  React.MutableRefObject<HTMLElement | null>
+> = React.createContext<React.MutableRefObject<HTMLElement | null>>({
+  current: null,
+});
+
+export const bodyRefContextDefaultValue: React.MutableRefObject<HTMLElement | null> =
+  { current: null };
+
+export const useBodyRefContext = () =>
+  React.useContext(bodyRefContext) ?? bodyRefContextDefaultValue;
+
+export const BodyRefContextProvider = bodyRefContext.Provider;

packages/react-data-grid-react-window/src/contexts/headerRefContext.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+const headerRefContext: React.Context<
+  React.MutableRefObject<HTMLElement | null>
+> = React.createContext<React.MutableRefObject<HTMLElement | null>>({
+  current: null,
+});
+
+export const headerRefContextDefaultValue: React.MutableRefObject<HTMLElement | null> =
+  { current: null };
+
+export const useHeaderRefContext = () =>
+  React.useContext(headerRefContext) ?? headerRefContextDefaultValue;
+
+export const HeaderRefContextProvider = headerRefContext.Provider;

packages/react-data-grid-react-window/src/index.ts

@@ -1,10 +1,10 @@
 export { DataGridBody } from './components/DataGridBody';
 export { DataGrid } from './components/DataGrid';
 export { DataGridRow } from './components/DataGridRow';
+export { DataGridHeader } from './components/DataGridHeader';
 
 export {
   DataGridCell,
-  DataGridHeader,
   DataGridHeaderCell,
   DataGridSelectionCell,
 } from '@fluentui/react-components';