[data grid] The popover for the GridToolbarFilterButton and GridToolbarColumnsButton should open under their respective button

[mahammahmood]

The problem in depth

When i implement the solution you guys provided i got error on this Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

this is my code. can you please help me to resolve this issue.

interface CustomToolbarProps {
  loadingState?: boolean;
  showCustomMenuButton?: boolean;
  RowSelectionModel?: boolean;
  setFilterButtonEl?: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
}

export const CustomToolbar: React.FC<CustomToolbarProps> = ({
     loadingState = true,
    showCustomMenuButton = false,
    RowSelectionModel = false,
    setFilterButtonEl,
})=> {
return (
<GridToolbarContainer>
    <GridToolbarColumnsButton />
     <GridToolbarFilterButton 
           ref={setFilterButtonEl} />
 </GridToolbarContainer>
  );
}
const Page = () => {
 const [filterButtonEl, setFilterButtonEl] = React.useState<HTMLButtonElement | null>(null);
  <DataGrid
            rows={locationRowsV2}
            columns={columns}
             slots={{
              toolbar: () => (
                <CustomToolbar
                   setFilterButtonEl={setFilterButtonEl}
                   filterButtonEl={filterButtonEl}
                  loadingState={loading}
                  RowSelectionModel={rowSelectionModel}
                  showCustomMenuButton={true}
             }}
           slotProps={{
              panel: {
                anchorEl: filterButtonEl,
              },
              columnsPanel: {
                sx: {
                  [`& .MuiDataGrid-columnsManagement > label:first-child, & .MuiDataGrid-columnsManagement > label:last-child`]:
                    {
                      display: '',
                    },
                },
              },
            }}
}

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data ,Grid , Pro, GridToolbarFilterButton, GridToolbarColumnsButton, version 7
Order ID: 81584

[michelengelen]

Please follow the code example as precisely as possible.
What you did is passing in a function literal as component for the toolbar slot.
This should be memoized, otherwise it will infinitely rerender.
You can then pass the custom slots via the slotProps prop on the data grid.

The example you gave is incorrect jsx syntax as well and not working at all.

This is the code example you gave in a fixed version:

import * as React from 'react';
import {
  DataGrid,
  GridToolbarColumnsButton,
  GridToolbarContainer,
  GridToolbarFilterButton,
  GridToolbarProps
} from "@mui/x-data-grid";
interface CustomToolbarProps extends GridToolbarProps {
  loadingState?: boolean;
  showCustomMenuButton?: boolean;
  rowSelectionModel?: boolean;
  setFilterButtonEl?: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
}

function CustomToolbar ({
  showCustomMenuButton = false,
  setFilterButtonEl,
}: CustomToolbarProps) {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton
        ref={setFilterButtonEl} />
    </GridToolbarContainer>
  );
}

export default function() {
  const [filterButtonEl, setFilterButtonEl] = React.useState<HTMLButtonElement | null>(null);
  return (
    <DataGrid
      rows={[]}
      columns={[]}
      slots={{
        toolbar: CustomToolbar
      }}
      slotProps={{
        panel: {
          anchorEl: filterButtonEl,
        },
        toolbar: {
          setFilterButtonEl,
          showCustomMenuButton: true,
          rowSelectionModel: false,
          loadingState: false,
        },
        columnsPanel: {
          sx: {
            [`& .MuiDataGrid-columnsManagement > label:first-child, & .MuiDataGrid-columnsManagement > label:last-child`]:
              {
                display: '',
              },
          },
        },
      }}
    />
  )
}

It is important that the component passed into the slot is either memoized or a static component, not a function literal.

As a tip for the next time: Providing a live code example really helps in fixing the problem.

[michelengelen]

Reference to the other issue #13186

[michelengelen]

When the provided solution works please feel free to close the issue @mahammahmood
Thanks! 🙇🏼

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@mahammahmood: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.