Фильтр диапазона дат с датой MUI - PullRequest
Новая
       100

Фильтр диапазона дат с датой MUI

1 голос
/ 16 февраля 2020

Я новичок в mui datatables , и мне было интересно, есть ли способ создать фильтр диапазона дат (от даты до даты), используя mui-datatables?

Любые предложения будут оценили.

1 Ответ

1 голос
/ 16 февраля 2020

Вы можете использовать значение filterOptions в столбце, чтобы настроить способ визуализации компонента фильтра, какие значения доступны в зависимости от текущего состояния и предоставить стратегию влияния фактического фильтра на набор данных таблицы.

Посмотрите пример customize-filter на github, чтобы увидеть, как это работает: https://github.com/gregnb/mui-datatables/blob/master/examples/customize-filter/index.js

В частности, вот конфигурация столбца, которая определяет options.filterOptions.logic как цифру c (ie преобразовать границы даты в эпоху): 

  {
    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,
    },
  },
...