Shivanshu Anand
Shivanshu Anand

Reputation: 21

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

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.

Upvotes: 2

Views: 483

Answers (0)

Related Questions