React MUI 数据表日期范围过滤器

Question

我是mui datatables 的新手，我想知道有没有办法使用 mui-datatables 创建日期范围过滤器（从日期到日期）？

任何建议将不胜感激。

Answer 1

您可以使用列上的 filterOptions 值来自定义过滤器组件的呈现方式、基于当前状态的可用值，并可以提供有关实际过滤器如何影响表数据集的策略。

查看 github 上的 customize-filter 示例以了解其工作原理：https://github.com/gregnb/mui-datatables/blob/master/examples/customize-filter/index.js

具体来说，这是一个将options.filterOptions.logic定义为数字的列配置（即将日期边界转换为纪元）：

  {
    name: 'Age',
    options: {
      filter: true,
      filterType: 'custom',
      filterList: [25, 50],
      customFilterListOptions: {
        render: v => {
          if (v[0] && v[1] && this.state.ageFilterChecked) {
            return [`Min Age: ${v[0]}`, `Max Age: ${v[1]}`];
          } else if (v[0] && v[1] && !this.state.ageFilterChecked) {
            return `Min Age: ${v[0]}, Max Age: ${v[1]}`;
          } else if (v[0]) {
            return `Min Age: ${v[0]}`;
          } else if (v[1]) {
            return `Max Age: ${v[1]}`;
          }
          return false;
        },
        update: (filterList, filterPos, index) => {
          console.log('customFilterListOnDelete: ', filterList, filterPos, index);

          if (filterPos === 0) {
            filterList[index].splice(filterPos, 1, '');
          } else if (filterPos === 1) {
            filterList[index].splice(filterPos, 1);
          } else if (filterPos === -1) {
            filterList[index] = [];
          }

          return filterList;
        },
      },
      filterOptions: {
        names: [],
        logic(age, filters) {
          if (filters[0] && filters[1]) {
            return age < filters[0] || age > filters[1];
          } else if (filters[0]) {
            return age < filters[0];
          } else if (filters[1]) {
            return age > filters[1];
          }
          return false;
        },
        display: (filterList, onChange, index, column) => (
          <div>
            <FormLabel>Age</FormLabel>
            <FormGroup row>
              <TextField
                label='min'
                value={filterList[index][0] || ''}
                onChange={event => {
                  filterList[index][0] = event.target.value;
                  onChange(filterList[index], index, column);
                }}
                style={{ width: '45%', marginRight: '5%' }}
              />
              <TextField
                label='max'
                value={filterList[index][1] || ''}
                onChange={event => {
                  filterList[index][1] = event.target.value;
                  onChange(filterList[index], index, column);
                }}
                style={{ width: '45%' }}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={this.state.ageFilterChecked}
                    onChange={event => this.setState({ ageFilterChecked: event.target.checked })}
                  />
                }
                label='Separate Values'
                style={{ marginLeft: '0px' }}
              />
            </FormGroup>
          </div>
        ),
      },
      print: false,
    },
  },