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

问题描述

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

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

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

我的初始状态应该过滤器应用于 Status 列和 Country 列，正如您在下面看到我的代码现在如何查找 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),filterList: ['ACTIVE'],{
        name: intl.formatMessage({
          id: 'SitesColumn.distance',defaultMessage: 'distance',options: {
          display: !!usingLocation,filter: false,customBodyRender: value => columndistance(value),],usingLocation,disTANCE_MEASURE],);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）