CODEWITHSUNDEEP
reactjsmaterial-uimaterial-table
Dev
Dev

Reputation: 257

conditionally disable material-table's column with Switch style

I have a material-table with 4-5 columns.

I allow user to ADD, EDIT and DELETE rows using on onRowAdd, onRowUpdate and onRowDelete functions. Everything seems to be working fine without any issues. The only thing which is missing is a bit of a odd behaviour of the 'status' column which is basically an on and off switch with Materil-ui element. When user deletes a row, the status column (which is of type Swtich) is still enabled and user can change the status which is a bit misleading from UI point of view. i.e. whehn user has deleted a row, I want this Swtich to be disabled. I tried several different options including adding a function and returning 'disabled' text from the function and use it in the column declaration as per below but nothing works...any ideas?

the isDelete() function just returns 'disabled' based on the rawStatus value. The rawStatus value gets set in the onRowDelete() promise.. see towards the end of this post

const isDeleted = (data) => {
    return data.rawStatus === "delete" ? "disabled" : "";
  }

My 'status' column definition is as per below ...

{
      field: "status",
      title: "Status",
      editable: "never",
      headerStyle: {
        width: 50,
        minWidth: 50,
        whiteSpace: "nowrap",
      },
      render: (data, id) => (
        <FormControlLabel
          control={
            <Switch
              disabled={isDeleted(data)}
              checked={data.status}
              onChange={(e) => changeStatus(data, e)}
              name="status"
              color="primary"
            />
          }
          label={data.status ? "Active" : "Disabled"}
        />
      ),
    }

my onRowDelete function is as per below where I set the rowStatus element value (to be used in API to perform required CRUD operations)

onRowDelete: (oldData) =>
                  new Promise((resolve, reject) => {
                    setTimeout(() => {
                      const dataDelete = [...usersData];
                      const index = oldData.tableData.id;
                      if (oldData.recordStatus !== "existing") {
                        dataDelete.splice(index, 1);

                        setUsersData([...dataDelete]);
                      } else {
                        oldData.recordStatus = "delete";
                        oldData.disabled = true;
                        dataDelete[index] = oldData;
                        setUsersData([...dataDelete]);
                      }

                      resolve();
                    }, 1000);
                  }),

Upvotes: 0

Views: 1797

Answers (1)

techipank
techipank

Reputation: 430

Your isDeleted function is returning String but to disable Switch we should be returning true or false modify isDeleted as follows

const isDeleted = (data) => { return data.rawStatus === "delete" ? true : false; }

As I can see in your codesandbox now you are returning true or false from isDeleted which is correct but next issue was your condition in isDeleted Function it was written as

return data.rawStatus==="delete"? true:false

but in your schema there is no value for rawStatus that is the reason it was always returning false and your switch button was not disabled.

Condition should be

return data.recordStatus === "delete" ? true : false;

Corrected codesandbox link

Upvotes: 1

Related Questions