在MUI-DataTables中如何进行自定义重置行为

Question

I在具有默认过滤器的React中构建了一个MUI DataTable。 当我按重置过滤器时，在“滤镜”下拉菜单中会消失。

我需要的是，当我按重置时，我应该返回默认过滤器，而不是完全没有过滤器。

我不知道如何覆盖重置功能以制作我自己或将自定义过滤器重置为初始状态。 我的初始状态应在状态列和国家 /地区列上应用的过滤器，如您在下面的代码现在如何寻找e。

地点或如何根据我的要求重置。 我现在看起来像这样的选项：

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],
  );

我有一个类似的问题，当清除所有过滤器时，我需要派遣一些措施。他们的API不提供诸如OnFiltersClear选项之类的东西。我试图使用DOM API获取该按钮并收听OnClick，但这是一种非常肮脏的方法。其他事情没有想到。

细小更新：找到解决方案。

MUIDATATABLES选项对象具有一个函数

onFilterChange

，该函数接受以下参数：

Answer 1

函数（更改列：字符串，filterList：array，type：type： enum（'复选框'，“下拉”，“多选”，“ textfield”，“ custom”， '芯片'，'reset'），更改columnIndex，displaydata）=>void

您可以检查，如果type ==='reset'做某事