reactjs - How in the Mui Datatable is possible to make a custom reset behaviour

Question

I built a Mui datatable in React which has default filters. When I press to reset the filters are going away in the filter dropdown menu.

What I need is that when I press reset I should go back to my default filters and not without filters at all as it is happening now.

I don't know how to override the reset functionality to make my own or to reset to my custom filters as the initial state.

MY initial state should the filter applied on the Status column and Country column as you see my code below how the things look for e now.

Where or how I should make the reset based on my requirements.

My options look like this now:

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

Columns:

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

Answer 1

等待大神答复