javascript 如何定制物料表“查找”

af7jpaap 于 2023-01-19 发布在 Java

关注(0)|答案(1)|浏览(79)

我使用material-table作为我的数据表。
我怎样定制“material-tablelookup”组件所有部分？（访问该组件的每个元素以添加额外的逻辑和样式）

）

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...
        />

感谢您的帮助

JavaScript

来源：https://stackoverflow.com/questions/70928221/how-to-customize-material-table-lookup

1条答案

按热度按时间

i7uq4tfw1#

我找到了问题的答案！
您可以在列标识符对象中使用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 }) => (
        <Select
            defaultValue={2}
            variant={'standard'}
            onChange={(e) => {
                // Calling the onFilterChanged with the current tableId and the new value
                onFilterChanged(columnDef.tableData.id, e.target.value);
            }}
        >
            <MenuItem selected={true} key={2} value={2}>All</MenuItem>
            <MenuItem key={1} value={1}>yes</MenuItem>
            <MenuItem key={0} value={0}>no</MenuItem>
        </Select>
    ),
    lookup: {
        2: 'all',
        1: 'yes',
        0: 'no'
    },
    type: 'enum'
}

我希望我的回答能帮助你解决这个问题👍

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 如何定制物料表“查找”

1条答案

相关问题

热门标签

最新问答