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

Question

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

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

我不知道如何覆盖重置功能，使其成为我自己的功能，或者将自定义过滤器重置为初始状态。

我的初始状态应该是在"状态"列和"国家/地区"列上应用的过滤器，正如你在下面的代码中看到的那样，现在情况如何。

我应该在哪里或如何根据我的要求进行重置。

我现在的选择是这样的：

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

我遇到了类似的问题，我需要在清除所有过滤器后调度一些操作。他们的API没有提供类似onFiltersClear选项的内容。我试图使用DOM API来获取该按钮并收听onClick，但这是一种非常肮脏的方法。其他的事情没有想到。

小更新：找到了解决方案。

Mui datatables选项对象有一个函数onFilterChange，它接受以下参数：

函数(changedColumn：字符串，filterList：数组，类型：enum("复选框"、"下拉列表"、"多选"、"textField"、"自定义"，'chip'，'reset'(，changedColumnIndex，displayData(=>无效

并且您可以检查，如果类型=="重置"，则执行