各位,
我有一个垫表,其中自定义列为“Items”,它可以有多个值。 我可以将其渲染为逗号分隔值,但是为了更好的外观和感觉,我将每个项目渲染为芯片。
现在的问题是 mat 表默认搜索不适用于该字段。
任何帮助将不胜感激。
import React, { Fragment, useState } from "react";
import MaterialTable from "material-table";
import { Box, makeStyles, Chip } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
chip: {
margin: 2
},
noLabel: {
marginTop: theme.spacing(3)
},
}));
const originalData = [
{
id: "1",
productName: "Meat",
items: [
{id : 1, name : "chicken"},
{id : 2, name : "pork" },
{id : 3, name : "lamb" }
]
},
{
id: "2",
productName: "Vegetables",
items: [
{id : 1, name : "Okra"},
{id : 2, name : "Pumpkin" },
{id : 3, name : "Onion" }
]
},
];
export default function MatTableTest(props) {
const [data, setData] = useState(originalData);
const classes = useStyles();
const tableColumns = [
{ title: "id", field: "id", editable : "never" },
{ title: "Product Name", field: "productName" , editable : "never" },
{ title: "Item", field: "items", editable : "never",
render: rowData => {
return (
<Box className="box" id="style-7">
{ rowData.items.map((exprt) => <Chip
key={exprt.id}
label={exprt.name}
className={classes.chip}
/>)}
</Box>
);
}
},
];
return (
<Fragment>
<MaterialTable
columns={tableColumns}
data={data}
title="Material Table - Custom Colum Search"
/>
</Fragment>
);
}
最佳答案
有一个名为 customFilterAndSearch
的属性,您可以在其中定义自定义过滤器函数。您可以在其中定义要匹配的行数据。 Here is an example来自 Github 存储库中创建的问题。
关于reactjs - Material 表搜索不适用于自定义列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66523045/