reactjs - 如何在 Mui 数据表中进行自定义重置行为

Question

我在 React 中构建了一个具有默认过滤器的 Mui 数据表。当我按下重置时，过滤器下拉菜单中的过滤器将消失。

我需要的是，当我按下重置时，我应该回到我的默认过滤器，而不是像现在这样完全没有过滤器。

我不知道如何覆盖重置功能以制作我自己的或重置为我的自定义过滤器作为初始状态。

我的初始状态应该在状态列和国家列上应用过滤器，因为您在下面看到我的代码现在看起来如何。

根据我的要求，我应该在哪里或如何进行重置。

我的选项现在看起来像这样：

const options = useMemo(
    () => ({
      rowsSelected: usingLocation && [0],
      filter: true,
      filterType: 'dropdown',
      responsive: 'standard',
      tableBodyHeight: '90%',
      tableBodyWith: '100%',
      tableBodyMaxHeight: '100%',
      selectableRowsOnClick: true,
      selectableRows: 'single',
      search: false,
      viewColumns: false,
      download: false,
      print: false,
      sortOrder: sortOrderOption,
      customToolbarSelect: () => {},
      isRowSelectable: dataIndex => {
        if (
          preparedSites[dataIndex][5] === 'INACTIVE' ||
          preparedSites[dataIndex][0] === site.siteId
        ) {
          return false;
        }
        return true;
      },
      setRowProps: (row, dataIndex) => {
        if (preparedSites[dataIndex][0] === site.siteId)
          return {
            style: { backgroundColor: 'rgba(0, 168, 238, .1)' },
          };
        else if (preparedSites[dataIndex][5] === 'INACTIVE')
          return {
            style: {
              opacity: '.5',
            },
          };
        return '';
      },
      setFilterChipProps: () => {
        return {
          color: 'primary',
          variant: 'outlined',
        };
      },
      onRowSelectionChange: rowsSelectedData => {
        const id = preparedSites[rowsSelectedData[0].dataIndex][0];
        const status = preparedSites[rowsSelectedData[0].dataIndex][5];
        if (status === 'ACTIVE') selectSite(id);
      },
    }),
    [sites, site, usingLocation],
  );

列：

const columnStatus = value => {
    if (value === 'ACTIVE')
      return (
        <Tooltip
          title={intl.formatMessage({
            id: 'SitesColumn.active',
            defaultMessage: 'ACTIVE',
          })}
        >
          <ActiveIcon className={classes.active} />
        </Tooltip>
      );
    else
      return (
        <Tooltip
          title={intl.formatMessage({
            id: 'SitesColumn.inactive',
            defaultMessage: 'INACTIVE',
          })}
        >
          <ActiveIcon className={classes.notActive} />
        </Tooltip>
      );
  };

  const columnDistance = value => {
    return !value ? 'N/A' : `${value} ${DISTANCE_MEASURE}`;
  };

  const columns = useMemo(
    () => [
      'Id',
      {
        name: intl.formatMessage({
          id: 'SitesColumn.city',
          defaultMessage: 'City',
        }),
      },
      {
        name: intl.formatMessage({
          id: 'SitesColumn.state',
          defaultMessage: 'State',
        }),
      },
      {
        name: intl.formatMessage({
          id: 'SitesColumn.country',
          defaultMessage: 'Country',
        }),
        options: {
          filter: true,
          filterList: [site.countryCode],
          filterType: 'custom',
          filterOptions: {
            logic(country, filters) {
              if (filters.length) return filters[0] !== country.code;
              return false;
            },
            display: (filterList, onChange, index, column) => (
              <MuiTableForm
                preparedSites={preparedSites}
                filterList={filterList}
                onChange={onChange}
                index={index}
                column={column}
              />
            ),
          },
          customBodyRender: value => <Flag siteCountry={value} />,
        },
      },
      {
        name: intl.formatMessage({
          id: 'SitesColumn.address',
          defaultMessage: 'Address',
        }),
      },
      {
        name: intl.formatMessage({
          id: 'SitesColumn.status',
          defaultMessage: 'Status',
        }),
        options: {
          customBodyRender: value => columnStatus(value),
          filter: true,
          filterList: ['ACTIVE'],
        },
      },
      {
        name: intl.formatMessage({
          id: 'SitesColumn.distance',
          defaultMessage: 'Distance',
        }),
        options: {
          display: !!usingLocation,
          filter: false,
          customBodyRender: value => columnDistance(value),
        },
      },
    ],
    [sites, site, usingLocation, DISTANCE_MEASURE],
  );