如何清除梅花中所有应用的过滤器反应DataGrid？

Question

有一个名为TableContainer.js的组件，它显示表的头。它有6个按钮。按钮应该能够对它包含的网格做一些事情(如第一个按钮是“清除过滤器”)。如何清除MUI数据集的所有应用过滤器？

​

​

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>

Answer 1

在这里，您只需要设置<DataGridPro/>键，就像

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

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>

Answer 2

我们可以在TableContainer组件中使用清晰的过滤器来编写代码，而不需要接触MyDataGrid组件。

TableContainer.js

export default function TableContainer({ title, sx, table, columns, children }) {
    const [filterModel, setFilterModel] = useState({items: []});

    const filterModelChange = (model, details) => {
        setFilterModel(model);
    };

    const newProp = {
        filterModel,
        onFilterModelChange: filterModelChange
    };

    const newChildren = cloneElement(children, newProp, null);

    const clearSearch = () => {
        setFilterModel({items: []});
    };


    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={clearSearch} />X</Box>
                </Stack>
            </Stack>
            <Box sx={{ height: 'calc(100% - 44px)' }}>
                {newChildren}
            </Box>
        </Box>
    );
}