mardi 4 août 2020

React Table checkbox - change requirements for Indeterminate state

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