MUI-DataTables,如何使用包含图标的额外列自定义过滤器下拉列表 select
MUI-DataTables, How to customize filter dropdown select with extra column containing icon
我正在使用 MUI-DataTables (gregnb) 并想在过滤器选项卡中自定义多 select 下拉列表,方法是向下拉列表添加一个额外的列。
可能吗?会在 filteroptions.display 吗?或 customFilterListOptions(我用它来自定义芯片中的文本),如果是的话,请问如何。
谢谢
我通过以下方式获得它:指定 filterType = 'custom' 并返回 Material-ui 标记。即
filterType = 'custom';
filterOptions = {
names: getMyArray(),
logic: (value, filters) => { ......
},
display: (filterList, onChange, index, column) => {
return (
<FormControl>
<InputLabel htmlFor="select-multiple-chip">Location</InputLabel>
<Select
className ={class1.A}
multiple
value={filterList[index]}
renderValue={(selected) => selected.join(", ")}
onChange={(event) => {
filterList[index] = event.target.value;
onChange(filterList[index], index, column);
}}
>
{locArr.map((name, name2) =>(
<MenuItem key={id} value={name} className ={classesF.A}>
<Checkbox className ={classesF.D} />
<ListItemText primary={name}/>
<ListItemText primary={name2}/>
</MenuItem>
))}
</Select>
</FormControl>
);
}
我正在使用 MUI-DataTables (gregnb) 并想在过滤器选项卡中自定义多 select 下拉列表,方法是向下拉列表添加一个额外的列。
可能吗?会在 filteroptions.display 吗?或 customFilterListOptions(我用它来自定义芯片中的文本),如果是的话,请问如何。
谢谢
我通过以下方式获得它:指定 filterType = 'custom' 并返回 Material-ui 标记。即
filterType = 'custom';
filterOptions = {
names: getMyArray(),
logic: (value, filters) => { ......
},
display: (filterList, onChange, index, column) => {
return (
<FormControl>
<InputLabel htmlFor="select-multiple-chip">Location</InputLabel>
<Select
className ={class1.A}
multiple
value={filterList[index]}
renderValue={(selected) => selected.join(", ")}
onChange={(event) => {
filterList[index] = event.target.value;
onChange(filterList[index], index, column);
}}
>
{locArr.map((name, name2) =>(
<MenuItem key={id} value={name} className ={classesF.A}>
<Checkbox className ={classesF.D} />
<ListItemText primary={name}/>
<ListItemText primary={name2}/>
</MenuItem>
))}
</Select>
</FormControl>
);
}