所以我在一个react项目中有一个材料表,默认的过滤选项只是在数据上方放一行,你可以在上面输入任何你想要的内容。我需要的是在表格上面做一个按钮,我可以点击,然后点击复选框来选择我想要过滤掉的内容。我想知道是否有一种方法可以通过修改material-table提供给您的内容来做到这一点,或者我是否应该将复选框选项链接到一个函数,该函数将再次获取数据并用.filter将它们过滤掉?这似乎是一个很长的距离,虽然,这样做的每一个复选框,但我还没有真正找到解决我的问题的任何地方。我只看到有人用反应表做过这种事。如果有任何建议,我将不胜感激。这是一个可怜的gimp绘图如何我想我的过滤器盒看起来像
读你我明白你想要克里特自定义过滤器。因此您可以根据RowData定义按钮和筛选器。我找到了一个例子。我希望有帮助:
<MaterialTable
columns={[
{
title: "Adı",
field: "name"
},
{ title: "Soyadı", field: "surname" },
{ title: "Doğum Yılı", field: "birthYear", type: "numeric" },
{
title: "Doğum Yeri",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
]}
options={{
filtering: true
}}
title="Demo Title"
icons={tableIcons}
components={{
FilterRow: props => <FilterRow {...props} /> <---- your modified filter row component
}}
/>
使用该示例,您可以覆盖所有的过滤器,我认为这是您想要做的。您可以在列DEF中定义筛选器。之后,使您自定义过滤器组件和获取道具数据,以获得您想要的。
在同一篇文章中,您有关于如何管理筛选器更改的更详细示例:
const CustomDatePicker = (props) => {
const [date, setDate] = useState(null);
return (
<DatePicker
label="Select Date"
inputVariant="outlined"
variant="inline"
format="dd/MM/yyyy"
value={date}
ampm
autoOk
allowKeyboardControl
style={{ minWidth: 175 }}
onChange={(event) => {
setDate(event);
props.onFilterChanged(props.columnDef.tableData.id, event);
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton>
<EventIcon />
</IconButton>
</InputAdornment>
),
}}
/>
);
};
如果只想在一列中重写:
{
title: "Created Date",
field: "order_created_date",
searchable: false,
grouping: false,
sorting: true,
type: "datetime",
filterComponent: (props) => <CustomDatePicker {...props} />,
}