React-Table, disable all checkboxes after checking first 5 checkboxes?

430 Views Asked by At

Using Indeterminate Checkboxes.I need to disable all the checkboxes dynamically when the threshold of selected checkboxes reaches to 5(any of the five in table).

function IndeterminateCheckbox({
  indeterminate,
  className = "",
  setActionsVisible,
  ...rest
}: { indeterminate?: boolean } & HTMLProps<HTMLInputElement>) {
  const ref = React.useRef<HTMLInputElement>(null!);

  React.useEffect(() => {
    if (typeof indeterminate === "boolean") {
      setActionsVisible(indeterminate)
      ref.current.indeterminate = !rest.checked && indeterminate;
    }
  }, [ref, indeterminate]);

  return (
    <input
      type="checkbox"
      ref={ref}
      className={className + " cursor-pointer"}
      {...rest}
    />
  );
}

And the code/logic for column cell is,

 cell: ({ row, getValue }) => {
              return (
                <div className="custom-checkbox">
                  <IndeterminateCheckbox
                    disabled={
                      row.getAllCells()[5].getValue() === "Cancelled"
                    }
                    {...{
                      checked:
                        row.getIsSelected() &&
                        row.getAllCells()[5].getValue() !== "Cancelled" &&
                        row.getAllCells()[5].getValue() !== "Completed" &&
                        row.getAllCells()[5].getValue() !== "Failed",
                      indeterminate: row.getIsSomeSelected(),
                      setActionsVisible: setActionsVisible,
                      onChange: row.getToggleSelectedHandler(),
                      className: "custom-control-input",
                    }}
                  />
                </div>
              );
            },
            footer: (props) => props.column.id,

Can anybody suggest me where i am going wrong.? Thanks in Advance.

I am able to disable checkboxes on initial condition(eg. disabling all the checkboxes whose status is "Completed"). ButI need to disable all the checkboxes dynamically when the threshold of selected checkboxes reaches to 5.

0

There are 0 best solutions below