React singleRowSelect makes trouble with types

Question

I am using react-table and try to make a single row selectable.

That is my table definition:

const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        selectedFlatRows,
        state: {selectedRowIds}
    } = useTable({
        columns: projectColumns,
        data,
            stateReducer: (newState, action) => {
                if (action.type === "toggleRowSelected") {
                    newState.selectedRowIds = {
                        [action.id]: true
                    }
                }

                return newState;
            },
        },
        useRowSelect,
        (hooks) => {
            hooks.visibleColumns.push((projectColumns) => [
                {
                    id: "selection",
                    Header: ({getToggleRowSelectedProps}) => (
                        <div></div>
                    ),
                    Cell: ({row}) => (
                        <div>
                            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
                        </div>
                    ),
                },
                ...projectColumns,
            ]);
            }
        );

But with that I get an error on the row variable:

Binding element 'row' implicitly has an 'any' type

With the IndertimateCheckbox I have similar problems the type

const IndeterminateCheckbox = React.forwardRef(
    ({ indeterminate, ...rest }, ref) => {
        const defaultRef = React.useRef()
        const resolvedRef = ref || defaultRef

        React.useEffect(() => {
            resolvedRef.current.indeterminate = indeterminate
        }, [resolvedRef, indeterminate])

        return (
            <>
                <input type="checkbox" ref={resolvedRef} {...rest} />
            </>
        )
    }
)

Here I get the error:

Property 'indeterminate' does not exist on type '{ children?: ReactNode; }'.

How to resolve this issues?

Answer 1

You have to add an explicit type for the callback in your Cell property. Based on your code, I'm not sure what the correct type should be, but if you want the error to be gone (at the cost of type safety) you can use the any type:

            hooks.visibleColumns.push((projectColumns) => [
                {
                    id: "selection",
                    Header: ({getToggleRowSelectedProps}) => (
                        <div></div>
                    ), // `: any` added here to make the "any" type explicit; should be replaced with the proper parameter type that gets passed to the `Cell` callback
                    Cell: ({row}: any) => (
                        <div>
                            <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
                        </div>
                    ),
                },
                ...projectColumns,

As for the other type error, React doesn't know what the type of the ref is in your resolvedRef type. To fix that, you should add a generic parameter to your useRef call:

       const defaultRef = React.useRef<HTMLInputElement>()