如何在所有行中隐藏 REACT Material table 上的列，并在我正在编辑的特定行的编辑中显示它，并在添加新行时添加操作？

Question

我正在使用 React Material Table。请协助我需要在所有行中默认隐藏 密码列标题和字段 ，并在特定行的编辑中显示它，并在添加新行时也使用它。我使用了属性 hidden: true 但我无法为我正在编辑的特定行显示它，也许我也可以只用星星显示它：-

Password
********

但是我做不到。到目前为止，这是我的代码：-

const [columns, setColumns] = useState<any>([
    {
      title: "Username",
      field: "username",
      draggable: false,
      cellStyle: { textAlign: "left" },
    },
    {
       title: "Password",
       field: "password",
       hidden: true,
       draggable: false,
       cellStyle: { textAlign: "left" },
    },

我只想为我正在编辑的特定行以及正在添加的新行显示它。

Answer 1

您可以在密码列定义中定义 editComponent 和 render 属性，例如：

  const tableColumns = [
   // ..other columns
  {
    title: "Password",
    field: "password",
    editComponent: ({ value, onChange }) => (
      <input
        type="text"
        value={value || ""}
        onChange={(e) => onChange(e.target.value)}
      />
    ),

    render: (rowData) => (
      <input
        type="password"
        value={rowData.password}
        readOnly />
    )
  }
];

这样字段就不会被隐藏，但密码只会在更新或创建时显示。 Link 到工作沙箱 here。

如何在所有行中隐藏 REACT Material table 上的列，并在我正在编辑的特定行的编辑中显示它，并在添加新行时添加操作？

How to hide a column on REACT Material table in all rows and show it on Edit for the Particular Row I am editing and Add Operations on new row adding?

javascript

reactjs

material-table