使用 Mui 数据网格时，是否可以在 header 列中使用简单过滤器？

Question

我在我的 React 应用程序中使用 Mui data-grid。 PM 表示他想像这样过滤数据：

this image

我不知道这是否可能以及如何实现。

我通过 renderHeader 道具做了一些事情，比如：Problems with renderHeader prop MUI Data Grid Pro component。

代码是https://codesandbox.io/s/Whosebug-mui-data-grid-render-header-xmwf0?file=/src/App.jsx

  const filterOnColumns = [
    {
      field: 'name',
      headerName: 'Name',
      flex: 1,
      minWidth: 200,
      renderHeader: () => (
        <TextField
          variant="standard"
          label="Name"
          type="text"
          name="name"
          // value={filters.name}
          // onChange={handleFiltersChange}
          onKeyDown={event => event.stopPropagation()}
        />
      ),
    },
    {
      field: 'phone',
      headerName: 'Phone',
      flex: 1,
      minWidth: 200,
      renderHeader: () => (
        <TextField
          variant="standard"
          label="Phone"
          type="text"
          name="phone"
          // value={filters.phone}
          // onChange={handleFiltersChange}
          onKeyDown={event => event.stopPropagation()}
        />
      ),
    },
    {
      field: 'email',
      headerName: 'Email',
      flex: 1,
      minWidth: 200,
      renderHeader: () => (
        <FilterInput
          variant="standard"
          label="Email"
          type="text"
          name="email"
          onChange={handleFiltersChange}
          value={filters.email}
          updateFilters={setFilters}
        />
      ),
    },

但是当我点击 header 的输入时，排序也起作用了。

Answer 1

您还需要在 onClick 上调用 stopPropagation：

onClick={(event) => event.stopPropagation()}

接下来要取消控制 TextField，您只能将 defaultValue 传递给它。

仅保留以使用更新的过滤器过滤行变量。

此处更新代码： https://codesandbox.io/s/Whosebug-mui-data-grid-render-header-forked-50yv4d?file=/src/App.jsx

使用 Mui 数据网格时，是否可以在 header 列中使用简单过滤器？

Is it possible to have simple filter in the colmns header when using Mui datagrid?

reactjs

material-ui