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

I am having a similar issue, I need to dispatch some action when all filters are cleared. Their API does not provide something like onFiltersClear option. I tried to use DOM API to get that button and listen to onClick, but it is a very dirty approach. Other things did not come to mind.

Little update: Found a solution.

Mui datatables options object has a function onFilterChange, which accepts these parameters:

function(changedColumn: string, filterList: array, type: enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom', 'chip', 'reset'), changedColumnIndex, displayData) => void

and you can check, if type === 'reset' do something