如何实现MUI X Data Grid工具栏与表格列头同步横向滚动？

需求说明 #

需要实现自定义工具栏和DataGrid表格内容的横向滚动双向同步：

• 滚动工具栏时，表格内容同步横向滚动
• 滚动表格内容时，工具栏同步横向滚动

解决方案 #

通过监听工具栏和表格滚动容器的scroll事件，同步两者的scrollLeft属性来实现双向滚动联动。具体步骤：

1. 使用useRef分别获取自定义工具栏的滚动容器和DataGrid的主滚动容器
2. 在useEffect中为两个容器添加scroll事件监听，同步滚动位置
3. 组件卸载时移除事件监听，避免内存泄漏

修改后的完整代码 #

import * as React from "react";
import { DataGrid, useGridApiRef } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";

function CustomToolbar({ scrollRef }: { scrollRef: React.RefObject<HTMLDivElement> }) {
  return (
    <div ref={scrollRef} style={{ display: "flex", overflow: "auto" }}>
      <p style={{ minWidth: "30%" }}>Course Name1:</p>
      <p style={{ minWidth: "30%" }}>Course Name2:</p>
      <p style={{ minWidth: "30%" }}>Course Name3:</p>
      <p style={{ minWidth: "30%" }}>Course Name4:</p>
      <p style={{ minWidth: "30%" }}>Course Name5:</p>
      <p style={{ minWidth: "30%" }}>Course Name6:</p>
    </div>
  );
}

export default function CustomToolbarGrid() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 10,
    maxColumns: 10
  });
  const apiRef = useGridApiRef();
  const toolbarScrollRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    const gridScrollContainer = apiRef.current?.getRootElement()?.querySelector('.MuiDataGrid-main') as HTMLElement;
    const toolbarContainer = toolbarScrollRef.current;

    if (!gridScrollContainer || !toolbarContainer) return;

    // 表格滚动时同步工具栏
    const handleGridScroll = () => {
      toolbarContainer.scrollLeft = gridScrollContainer.scrollLeft;
    };

    // 工具栏滚动时同步表格
    const handleToolbarScroll = () => {
      gridScrollContainer.scrollLeft = toolbarContainer.scrollLeft;
    };

    gridScrollContainer.addEventListener('scroll', handleGridScroll);
    toolbarContainer.addEventListener('scroll', handleToolbarScroll);

    // 清理事件监听
    return () => {
      gridScrollContainer.removeEventListener('scroll', handleGridScroll);
      toolbarContainer.removeEventListener('scroll', handleToolbarScroll);
    };
  }, [apiRef]);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        {...data}
        apiRef={apiRef}
        components={{
          Toolbar: () => <CustomToolbar scrollRef={toolbarScrollRef} />
        }}
      />
    </div>
  );
}

代码说明 #

• useGridApiRef用于获取DataGrid的API实例，从而获取表格的滚动容器
• toolbarScrollRef引用自定义工具栏的滚动容器
• 在useEffect中获取两个滚动容器，添加滚动事件监听，同步scrollLeft值
• 组件卸载时移除事件监听，防止内存泄漏

内容的提问来源于stack exchange，提问作者Rana Faraz