Adding select all checkbox to material-ui table header stopped taking input on each cell - reactjs

Question

First a heads up - This code is handed over to me and I have tried to simplify the problem to present here as much as I could..

Background

There is a 2d table that is getting column header from data array and row header from samples array.

samples.sampletests are cross functional objects and if sample.sampletests[n].testId matches to the testId in table header (data) then it will be checked.

Now I have added Select All function in the header - introduced an object array state variable testSelectAll having testid and isselectall properties which is working fine I am able to check/uncheck the checkboxes per column as I go

To do this I introduced the checked property of checkbox which was not being used before, only onChange and defaultChecked were being used..

Problem

but now the individual cell checkboxes have stopped taking input(check/uncheck) from user - I understand there is a need to implement onchange handler here but the existing code seems confusing (addItems array is adding objects with isselected property) - I am almost there but just need to clear my head around addItems reducer variable

Here is a sneak peek

My complete running code is available in codesandbox selectAllCheckbox_Example

{data.map((test, index) => (
              <StyledTableCell>
                {test?.sampleIds !== null &&
                test?.sampleIds.includes(linkData.id) === true ? (
                  <GreenCheckbox
                    icon={<CircleUnchecked />}
                    checkedIcon={<CircleCheckedFilled />}
                    key={index}
                    defaultChecked={setCheckedData(linkData, test)}
                    onChange={(e) => {
                      linkDataHandler(linkData, test, e);
                    }}
                    inputProps={{ "aria-label": "uncontrolled-checkbox" }}
                    checked={
                      (testSelectAll.filter(
                        (t) => t.testid === test.testListId
                      ).length > 0
                        ? testSelectAll.filter(
                            (t) => t.testid === test.testListId
                          )[0].isSelectAllChecked
                        : false) ||
                      samples
                        .map((elm) => elm.sampleTests)
                        .flat()
                        .some(
                          (elm) =>
                            linkData.id === elm.sampleId &&
                            test.testListId === elm.testList.id
                        )/* ||
                      addItems.filter(
                        (a) =>
                          linkData.id === a.sampleId &&
                          test.testListId === a.TestId
                      ).isSelected*/
                    }
                  />
                ) : (
                  <div style={{ padding: "9px" }}>
                    <Tooltip
                      title={<Typography>Test not applicable</Typography>}
                    >
                      <RemoveCircleTwoToneIcon />
                    </Tooltip>
                  </div>
                )}
              </StyledTableCell>
            ))}

As soon as I uncomment the following code, the default and selectall options would stop working

addItems.filter(
                        (a) =>
                          linkData.id === a.sampleId &&
                          test.testListId === a.TestId
                      ).isSelected

Adding select all checkbox to material-ui table header stopped taking input on each cell - reactjs

0 Answers0