如何在material-ui datagrid中实现搜索？

Question

我正在尝试在 Material-UI 数据网格中实现快速过滤/搜索选项。截至目前，数据网格没有搜索选项。我正在使用Material-UI-Search-Bar库来添加搜索字段和功能。我在自定义工具栏中有这个，但不幸的是这不起作用，因为它与状态有关。我无法聚焦文本字段。下面是我的代码

...

const requestSearch = (searchedVal: string) => {
    const filteredRows = tableData.filter((o: any) => {
        return Object.keys(o).some((k: any) => {
            return  o[k].toString().toLowerCase().indexOf(searchedVal.toLowerCase()) != -1;
        })
    });
    console.log(filteredRows);
    // setTableData(filteredRows);
};

const cancelSearch = () => {
    setSearchText("");
    requestSearch(searchText);
};

const CustomToolbar = () => {
    <div className='p-6'>
        <div> ... </div>
        <SearchBar
            value={searchText}
            onChange={(searchVal: string) => requestSearch(searchVal)}
            onCancelSearch={() => cancelSearch()}
         />
    </div>
}
...
return (
    <div ... >
        <div style={{ height: 500, width: '100%', backgroundColor: 'white' }}>
            <DataGrid
                rows={tableData}
                columns={columns}
                components={{ Toolbar: CustomToolbar }}
                ...
             />
        </div>
    </div>
)

Answer 1

在MUI数据网格中，快速搜索在文档中并不是很突出，但他们在运行演示示例中添加了这一功能。您只需将此道具添加到数据网格中即可完成。甚至你可以在这里设置去抖时间。

componentsProps={{
   toolbar: {
       showQuickFilter: true,
          quickFilterProps: { debounceMs: 500 },
    },
 }}

Answer 2

有时 Material-UI-Search-Bar 库会崩溃，所以最好使用这个：

\n

import * as React from \'react\';\nimport IconButton from \'@mui/material/IconButton\';\nimport TextField from \'@mui/material/TextField\';\nimport {\n  DataGrid,\n  GridToolbarDensitySelector,\n  GridToolbarFilterButton,\n} from \'@mui/x-data-grid\';\nimport { useDemoData } from \'@mui/x-data-grid-generator\';\nimport ClearIcon from \'@mui/icons-material/Clear\';\nimport SearchIcon from \'@mui/icons-material/Search\';\nimport { createTheme } from \'@mui/material/styles\';\nimport { createStyles, makeStyles } from \'@mui/styles\';\n\nfunction escapeRegExp(value: string): string {\n  return value.replace(/[-[\\]{}()*+?.,\\\\^$|#\\s]/g, \'\\\\$&\');\n}\n\nconst defaultTheme = createTheme();\nconst useStyles = makeStyles(\n  (theme) =>\n    createStyles({\n      root: {\n        padding: theme.spacing(0.5, 0.5, 0),\n        justifyContent: \'space-between\',\n        display: \'flex\',\n        alignItems: \'flex-start\',\n        flexWrap: \'wrap\',\n      },\n      textField: {\n        [theme.breakpoints.down(\'xs\')]: {\n          width: \'100%\',\n        },\n        margin: theme.spacing(1, 0.5, 1.5),\n        \'& .MuiSvgIcon-root\': {\n          marginRight: theme.spacing(0.5),\n        },\n        \'& .MuiInput-underline:before\': {\n          borderBottom: `1px solid ${theme.palette.divider}`,\n        },\n      },\n    }),\n  { defaultTheme },\n);\n\ninterface QuickSearchToolbarProps {\n  clearSearch: () => void;\n  onChange: () => void;\n  value: string;\n}\n\nfunction QuickSearchToolbar(props: QuickSearchToolbarProps) {\n  const classes = useStyles();\n\n  return (\n    <div className={classes.root}>\n      <div>\n        <GridToolbarFilterButton />\n        <GridToolbarDensitySelector />\n      </div>\n      <TextField\n        variant="standard"\n        value={props.value}\n        onChange={props.onChange}\n        placeholder="Search\xe2\x80\xa6"\n        className={classes.textField}\n        InputProps={{\n          startAdornment: <SearchIcon fontSize="small" />,\n          endAdornment: (\n            <IconButton\n              title="Clear"\n              aria-label="Clear"\n              size="small"\n              style={{ visibility: props.value ? \'visible\' : \'hidden\' }}\n              onClick={props.clearSearch}\n            >\n              <ClearIcon fontSize="small" />\n            </IconButton>\n          ),\n        }}\n      />\n    </div>\n  );\n}\n\nexport default function QuickFilteringGrid() {\n  const { data } = useDemoData({\n    dataSet: \'Commodity\',\n    rowLength: 100,\n    maxColumns: 6,\n  });\n  const [searchText, setSearchText] = React.useState(\'\');\n  const [rows, setRows] = React.useState<any[]>(data.rows);\n\n  const requestSearch = (searchValue: string) => {\n    setSearchText(searchValue);\n    const searchRegex = new RegExp(escapeRegExp(searchValue), \'i\');\n    const filteredRows = data.rows.filter((row: any) => {\n      return Object.keys(row).some((field: any) => {\n        return searchRegex.test(row[field].toString());\n      });\n    });\n    setRows(filteredRows);\n  };\n\n  React.useEffect(() => {\n    setRows(data.rows);\n  }, [data.rows]);\n\n  return (\n    <div style={{ height: 400, width: \'100%\' }}>\n      <DataGrid\n        components={{ Toolbar: QuickSearchToolbar }}\n        rows={rows}\n        columns={data.columns}\n        componentsProps={{\n          toolbar: {\n            value: searchText,\n            onChange: (event: React.ChangeEvent<HTMLInputElement>) =>\n              requestSearch(event.target.value),\n            clearSearch: () => requestSearch(\'\'),\n          },\n        }}\n      />\n    </div>\n  );\n}\n

\n

如果演示还不够，需要实现原生版本，请转到# 2842并投票。

\n

Answer 3

https://github.com/mui-org/material-ui-x/blob/master/docs/src/pages/components/data-grid/filtering/QuickFilteringGrid.js

他们现在有一个功能。