如何自定義材料表“查找”

Question

我為我的 data.tables 使用材料表。

我如何自定義“材料表查找”組件的所有部分？（訪問每個元素以添加額外的邏輯和樣式）

)

const columns = [
  {
    title: "Is_Active",
    field: "is_active",
    cellStyle: { textAlign: "center", padding: "0px", width: "7%" },
    render: (rowData) => {
      return rowData.is_active ? (
        <CheckCircleOutlineIcon style={{ fill: "green" }} />
      ) : (
        <HighlightOffIcon style={{ fill: "red" }} />
      );
    },
    lookup: {
      1: "yes",
      0: "no",
    },
    type: "enum",
  },
];

然后：

 <MaterialTable
          columns={columns}
          // other props...
        />

感謝您的幫助✌

Answer 1

我找到了問題的答案！

您可以在列標識符 object 中使用filterComponent來覆蓋過濾器組件（在這種情況下，我使用 Select Component ），如下所示：

{
    title: 'Is Active',
    field: 'isActive',
    cellStyle: {
        borderColor: '#d4d4d4',
        borderStyle: 'solid',
        borderRightStyle: 'solid',
        borderLeftStyle: 'solid',
        borderWidth: '1px',
        fontSize: '12px',
        textAlign: 'center',
        padding: '0px',
        width: '10%'
    },
    render: (rowData) => {
        return rowData.isActive ? <CheckCircleOutlineIcon style={doneIconStyle}/> :
            <HighlightOffIcon style={dontIconStyle}/>;
    },
    filterComponent: ({ columnDef, onFilterChanged }) => (
        <CustomSelect
            defaultValue={2}
            variant={'standard'}
            onChange={(e) => {
                // Calling the onFilterChanged with the current tableId and the new value
                onFilterChanged(columnDef.tableData.id, e.target);
            }}
        >
            <MenuItem selected={true} key={2} value={2}>All</MenuItem>
            <MenuItem key={1} value={1}>yes</MenuItem>
            <MenuItem key={0} value={0}>no</MenuItem>
        </CustomSelect>
    ),
    lookup: {
        2: 'all',
        1: 'yes',
        0: 'no'
    },
    type: 'enum'
}

希望我的回答能幫助你解決這個問題