I am using react table and created checkboxes. The header checkbox has Indeterminate state when 1 or more checkboxes are selected. Is there a way to modify this behavior to have Indeterminate state when 2+ checkboxes are selected instead of 1?
const IndeterminateCheckbox = forwardRef(
({ indeterminate, ...rest }, ref) => {
const defaultRef = useRef()
const resolvedRef = ref || defaultRef
useEffect(() => {
resolvedRef.current.indeterminate = indeterminate
}, [resolvedRef, indeterminate])
return (
<input type="checkbox" ref={resolvedRef} {...rest} />
)
},
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
visibleColumns,
} = useTable({
columns,
data,
},
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => [
{
id: 'selection',
Header: ({ getToggleAllRowsSelectedProps }) => (
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
),
Cell: ({ row }) => (
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
),
},
...columns,
])
})
Aucun commentaire:
Enregistrer un commentaire