Reputation: 21
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