MUI 数据网格工具栏中的自定义菜单项

Question

我目前正在使用数据网格工具栏（Material-UI 数据网格组件的一项功能），因为我想要列显示/隐藏组件，但我也想以带有菜单的 IconButton 的形式添加我自己的菜单项单击时打开。问题是，当您单击所述按钮时，工具栏似乎会重新呈现，这会导致菜单失去其锚点并呈现在左上角。是否有一种特殊的方法可以在数据网格工具栏中获得锚点，以便菜单弹出器出现在正确的位置？

  function CustomToolbar() {
    return (
      <GridToolbarContainer>
        <Box
          height="65px"
          width="100%"
          display="flex"
          flexDirection="row"
          justifyContent="center"
        >
          <Box width="300px" display="flex" justifyContent="flex-start" alignItems="center">
            <GridToolbarColumnsButton sx={{ ml: 2 }} />
          </Box>
          <Box width="100%" alignSelf="center" textAlign="center">
            <Typography sx={{ flex: "1 1 100%" }} variant="h6" component="div">
              Title Goes Here
            </Typography>
          </Box>
          <Box width="300px" display="flex" justifyContent="flex-end" alignItems="center">
            <Tooltip title="Filter">
              <IconButton
                color="primary"
                component="span"
                disabled={loading}
                sx={{ mr: 2 }}
                onClick={handleMenuClick}
              >
                <FilterList />
              </IconButton>
            </Tooltip>
            <Menu
              id="basic-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={() => handleClose(menuState, filters)}
              transformOrigin={{ horizontal: "right", vertical: "top" }}
              anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
              PaperProps={MenuProps}
            >
              <MenuItem /> //Clipped
              <MenuItem /> //Clipped
              <MenuItem /> //Clipped
             </Menu>
          </Box>
        </Box>
      </GridToolbarContainer>
    );
  }

Answer 1

您必须在声明 DataGrid 的组件外部创建 Toolbar 组件，并通过 DataGrid 的 ComponentsProps 属性获取所需的属性。

GridToolbar自定义组件：

type Props = {
  selectionModel: GridSelectionModel;
}

const GridToolbarCustom = ({ selectionModel }: Props) => {
  const [anchorElMenu, setAnchorElMenu] = useState<null | HTMLButtonElement>(null);
  const openMenu = Boolean(anchorElMenu);

  return (
    <GridToolbarContainer>
      <Grid container item xs>
        {/* default buttons */}
        <GridToolbarColumnsButton />
        <GridToolbarFilterButton />
        <GridToolbarDensitySelector />
        <GridToolbarExport />
      </Grid>

      <Grid>
        <Button
          variant="contained"
          size="small"
          disabled={selectionModel.length === 0}
          startIcon={<MoreVertIcon />}
          onClick={(event: MouseEvent<HTMLButtonElement>) => {
            setAnchorElMenu(event.currentTarget);
          }}
        >
          Actions
        </Button>

        <Menu
          id="menu-options"
          anchorEl={anchorElMenu}
          open={openMenu}
          onClose={() => {
            setAnchorElMenu(null);
          }}
        >
          <MenuItem /> //Clipped
          <MenuItem /> //Clipped
          <MenuItem /> //Clipped
        </Menu>
      </Grid>
    </GridToolbarContainer>
  );
}

export default GridToolbarCustom;

我的组件：

import GridToolbarCustom from './GridToolbarCustom';

const MyComponent = () => {
  const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);

  return (
    <DataGrid
      //Clipped
      components={{
        Toolbar: GridToolbarCustom,
      }}
      componentsProps={{
        toolbar: {
          selectionModel,
        },
      }}
      checkboxSelection
      onSelectionModelChange={(newSelectionModel) => {
        setSelectionModel(newSelectionModel);
      }}
      selectionModel={selectionModel}
    />
  );
};