@mui/x-data-grid/components/base/GridBody.js

The community edition of the data grid component (MUI X).

import * as React from 'react';
import PropTypes from 'prop-types';
import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
import { GridMainContainer } from '../containers/GridMainContainer';
import { GridAutoSizer } from '../GridAutoSizer';
import { GridOverlays } from './GridOverlays';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { useGridSelector } from '../../hooks/utils/useGridSelector';
import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

function GridBody(props) {
  const {
    children,
    VirtualScrollerComponent,
    ColumnHeadersComponent
  } = props;
  const apiRef = useGridApiContext();
  const rootProps = useGridRootProps();
  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
  const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
  const disableVirtualization = React.useCallback(() => {
    setIsVirtualizationDisabled(true);
  }, []);
  const enableVirtualization = React.useCallback(() => {
    setIsVirtualizationDisabled(false);
  }, []);
  React.useEffect(() => {
    setIsVirtualizationDisabled(rootProps.disableVirtualization);
  }, [rootProps.disableVirtualization]); // The `useGridApiMethod` hook can't be used here, because it only installs the
  // method if it doesn't exist yet. Once installed, it's never updated again.
  // This break the methods above, since their closure comes from the first time
  // they were installed. Which means that calling `setIsVirtualizationDisabled`
  // will trigger a re-render, but it won't update the state. That can be solved
  // by migrating the virtualization status to the global state.

  apiRef.current.unstable_disableVirtualization = disableVirtualization;
  apiRef.current.unstable_enableVirtualization = enableVirtualization;
  const columnHeadersRef = React.useRef(null);
  const columnsContainerRef = React.useRef(null);
  const windowRef = React.useRef(null);
  const renderingZoneRef = React.useRef(null);
  apiRef.current.columnHeadersContainerElementRef = columnsContainerRef;
  apiRef.current.columnHeadersElementRef = columnHeadersRef;
  apiRef.current.windowRef = windowRef; // TODO rename, it's not attached to the window anymore

  apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization

  const handleResize = React.useCallback(size => {
    apiRef.current.publishEvent('resize', size);
  }, [apiRef]);
  return /*#__PURE__*/_jsxs(GridMainContainer, {
    children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(ColumnHeadersComponent, {
      ref: columnsContainerRef,
      innerRef: columnHeadersRef
    }), /*#__PURE__*/_jsx(GridAutoSizer, {
      nonce: rootProps.nonce,
      disableHeight: rootProps.autoHeight,
      onResize: handleResize,
      children: size => {
        const style = {
          width: size.width,
          // If `autoHeight` is on, there will be no height value.
          // In this case, let the container to grow whatever it needs.
          height: size.height ? size.height - totalHeaderHeight : 'auto',
          marginTop: totalHeaderHeight
        };
        return /*#__PURE__*/_jsx(VirtualScrollerComponent, {
          ref: windowRef,
          style: style,
          disableVirtualization: isVirtualizationDisabled
        });
      }
    }), children]
  });
}

process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "yarn proptypes"  |
  // ----------------------------------------------------------------------
  children: PropTypes.node,
  ColumnHeadersComponent: PropTypes.elementType.isRequired,
  VirtualScrollerComponent: PropTypes.elementType.isRequired
} : void 0;
export { GridBody };