How to clear all applied filters in Mui React DataGrid?-CodePudding

There is a component called TableContainer.js it shows the headers of tables. It has 6 buttons. The buttons should be able to do things to the grid it contains eg the first button is 'clear filters'. How can I clear all applied filters to the MUI Datagrid?

TableContainer.js

export default function TableContainer({ title, sx, table, columns, children, clearFilter }) {



    return (
        <Box sx={{ height: '100%', borderRadius: '5px', border: '1px solid gray', boxShadow: '0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%)', overflow: 'hidden', ...sx }} >
            <Stack spacing={2} direction="row" justifyContent="space-between" sx={{ backgroundColor: 'black', color: 'white', padding: '10px' }} >
                <Box  >{title} </Box>
                <Stack spacing={2} direction="row"  >
                    <Box  > <Iconify icon="codicon:filter-filled" sx={{}} onClick={clearFilter}/>X</Box>
                    <Box  > <Iconify icon="charm:chevrons-up-down" sx={{}} />X</Box>
                    <Box  > <Iconify icon="gridicons:not-visible" sx={{}} />13</Box>
                    <Box  >  <Iconify icon="bxs:lock" sx={{}} />5</Box>
                    <Box  > <Iconify icon="fluent:arrow-sort-20-filled" sx={{}} /></Box>
                    <Box  > <Iconify icon="file-icons:microsoft-excel" sx={{}} /></Box>
                </Stack>
            </Stack>
            <Box sx={{ height: 'calc(100% - 44px)' }}>
                {children}
            </Box>
        </Box>
    );
}

MyDataGrid.js

<TableContainer title='My Datagrid'>
        <DataGridPro
          rows={rows}
          columns={columns}
          pagination={false}
          components={{
            LoadingOverlay,
          }}
          selectionModel={selectionModel}
          onSelectionModelChange={setSelectionModel}
        />
      </TableContainer>

CodePudding user response：

here just you need to set <DataGridPro/> key like

export default function TableContainer({
  title,
  sx,
  table,
  columns,
  children,
  clearFilter,
}) {
  return (
    <Box
      sx={{
        height: "100%",
        borderRadius: "5px",
        border: "1px solid gray",
        boxShadow:
          "0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%)",
        overflow: "hidden",
        ...sx,
      }}
    >
      <Stack
        spacing={2}
        direction="row"
        justifyContent="space-between"
        sx={{ backgroundColor: "black", color: "white", padding: "10px" }}
      >
        <Box>{title} </Box>
        <Stack spacing={2} direction="row">
          <Box>
            {" "}
            <Iconify
              icon="codicon:filter-filled"
              sx={{}}
              onClick={clearFilter}
            />
            X
          </Box>
          <Box>
            {" "}
            <Iconify icon="charm:chevrons-up-down" sx={{}} />X
          </Box>
          <Box>
            {" "}
            <Iconify icon="gridicons:not-visible" sx={{}} />
            13
          </Box>
          <Box>
            {" "}
            <Iconify icon="bxs:lock" sx={{}} />5
          </Box>
          <Box>
            {" "}
            <Iconify icon="fluent:arrow-sort-20-filled" sx={{}} />
          </Box>
          <Box>
            {" "}
            <Iconify icon="file-icons:microsoft-excel" sx={{}} />
          </Box>
        </Stack>
      </Stack>
      <Box sx={{ height: "calc(100% - 44px)" }}>{children}</Box>
    </Box>
  );
}

here create one state to set the index key

MyDataGrid.js

const [muiTableKey, setMuiTableKey] = React.useState(0);

<TableContainer
  title="My Datagrid"
  clearFilter={() => setMuiTableKey(muiTableKey   1)}
>
  <DataGridPro
    key={muiTableKey}
    rows={rows}
    columns={columns}
    pagination={false}
    components={{ LoadingOverlay }}
    selectionModel={selectionModel}
    onSelectionModelChange={setSelectionModel}
  />
</TableContainer>