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

Question

I am working with React Material Table. Please assist I need to hide a Password column Heading and fields by default in all rows and show it on Edit for a particular row and have it also for Adding new row. I used the property hidden: true but I am unable to show it for a particular row I am editing only, maybe I could also display it with just stars like: -

Password
********

But I am unable to do so. Here's my code below so far:-

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" },
    },

I would like to show it only for specific row I am editing and also on new row being added.

Answer 1

You could define editComponent and render props on the password column definition, likes this:

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

This way the field won't be hidden but the passwords will only be shown during update or creation. Link to working sandbox here .

Answer 2

You can use a state and pass it to hidden.