Question

各位，

我有一个带有自定义列的 mat 表作为 "Items" ，它可以有多个值。我可以将它呈现为逗号分隔值，但为了更好的外观和感觉，我将每个项目呈现为芯片。

现在的问题是 mat table 默认搜索在这个字段上不起作用。

任何帮助将不胜感激。

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>
  );
}

Answer 1

有一个名为 customFilterAndSearch 的道具，您可以在其中定义自定义过滤器函数。您可以在其中定义要匹配的行数据。 Here is an example 来自 Github 存储库中创建的问题。

材料表搜索不适用于自定义列

1 个答案: