反应 MUI 数据表日期范围筛选器

Question

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

任何建议将不胜感激。

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