您可以通过定义自己的filterComponent来实现这一点。下面是我基于这个solution做的一个工作示例：

首先，您需要创建用作过滤器的组件，在我的例子中，我使用了 material-ui/pickers 中的KeyboardDatePicker，但它可以是您需要的任何东西吗？

const CustomDatePicker = (props) => {
  const [date, setDate] = useState(null);

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        margin="normal"
        id="date-picker-dialog"
        label="Date picker"
        format="dd/MM/yyyy"
        clearable
        value={date}
        onChange={(event) => {
          console.log("Date picker value: ", event);
          console.log(props.columnDef.tableData.id);

          setDate(event);
          props.onFilterChanged(props.columnDef.tableData.id, event);
        }}
        KeyboardButtonProps={{
          "aria-label": "change date"
        }}
      />
    </MuiPickersUtilsProvider>
  );
};

关键的方面是调用通过props传递的onFilterChanged函数。
然后，在列定义上实现组件，如下所示：

const tableColumns = [
    { title: "Client", field: "id" },
    { title: "Name", field: "name" },

    {
      title: "Date",
      field: "date",
      type: "date",
      dateSetting: { locale: "en-GB" },
      filterComponent: (props) => <CustomDatePicker {...props} />
    }
  ];

完整代码和沙箱here。希望这对你有用！

import "date-fns";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";
import React, { useState } from "react";

const CustomDatePicker = (props) => {
  const [date, setDate] = useState(null);

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        margin="normal"
        id="date-picker-dialog"
        label="Date picker"
        format="dd/MM/yyyy"
        clearable
        value={date}
        onChange={(event) => {
          console.log("Date picker value: ", event);
          console.log(props.columnDef.tableData.id);

          setDate(event);
          props.onFilterChanged(props.columnDef.tableData.id, event);
        }}
        KeyboardButtonProps={{
          "aria-label": "change date"
        }}
      />
    </MuiPickersUtilsProvider>
  );
};
export default CustomDatePicker;

和/或

import React, { Fragment, useState } from "react";
import MaterialTable from "material-table";
import CustomDatePicker from "./customDatePicker";

const originalData = [
  {
    id: "client 1",
    name: "Anna",
    date: new Date("2021-03-01T20:11:54")
  },
  {
    id: "client 2",
    name: "Tom",
    date: new Date("2020-03-30T11:01:54")
  },
  {
    id: "client 3",
    name: "Deb",
    date: new Date("2021-02-28T21:11:54")
  }
];

export default function CustomEditComponent(props) {
  const [data, setData] = useState(originalData);

  const tableColumns = [
    { title: "Client", field: "id" },
    { title: "Name", field: "name" },

    {
      title: "Date",
      field: "date",
      type: "date",
      dateSetting: { locale: "en-GB" },
      filterComponent: (props) => <CustomDatePicker {...props} />
    }
  ];

  return (
    <Fragment>
      <MaterialTable
        columns={tableColumns}
        data={data}
        title="Material Table - Custom Filter Component"
        options={{ search: false, filtering: true }}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                setData([...data, newData]);

                resolve();
              }, 1000);
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                console.log("old:", oldData);
                console.log("new:", newData);
                const dataUpdate = [...data];
                const index = oldData.tableData.id;
                dataUpdate[index] = newData;
                setData([...dataUpdate]);

                resolve();
              }, 1000);
            }),
          onRowDelete: (oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                const dataDelete = [...data];
                const index = oldData.tableData.id;
                dataDelete.splice(index, 1);
                setData([...dataDelete]);

                resolve();
              }, 1000);
            })
        }}
      />
    </Fragment>
  );
}