Enhanced table with Typescript

[RochezBaptiste]

Hi there 👋

I'm trying to do an MUI enhanced table following this example https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table except my project is in typescript using Eslint.

I encountered many errors due to that.

interface ICheckBoxProps extends CheckboxProps {
    indeterminate?: boolean;
}

const IndeterminateCheckbox = forwardRef<HTMLInputElement, ICheckBoxProps>((props, ref) => {
    const { indeterminate, ...rest } = props;
    const defaultRef = useRef<HTMLInputElement>(null);
    const resolvedRef = ref || defaultRef;

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

    return <Checkbox inputRef={resolvedRef} {...rest} />;
});

Error:

• For indeterminate
  const { indeterminate, ...rest } = props;
• For getToggleAllRowsSelectedProps
  Header: ({ getToggleAllRowsSelectedProps }) => (...
• For getToggleRowSelectedProps
  <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />

Output:
Eslint: indeterminate is missing in props validation(react/prop-types)
Eslint: getToggleRowSelectedProps is missing in props validation(react/prop-types)
Eslint: getToggleAllRowsSelectedProps is missing in props validation(react/prop-types)

• For current
  resolvedRef.current.indeterminate = indeterminate;

Output
TS2339: Property 'current' does not exist on type '((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement>'. Property 'current' does not exist on type '(instance: HTMLInputElement | null) => void'.

Version:
"react-table": "^7.0.0"
"@types/react-table": "^7.0.10",

Config
Using this example file
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table

Code
C&P of this example https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table
except for the IndeterminateCheckbox const that I wrote above

Thanks for your help!

[riceboyler]

You need to update your @types/react-table package to 7.0.11 as it should have the updated versions of props you need.

Also, it looks like you need to play around with your typing for the Ref on the Indeterminate Checkbox. Let me see if I can whip up a quick CodeSandbox with what I'm using for a typed Indeterminate Checkbox.

[riceboyler]

Actually, I'll just toss the code in here:

import React, { useEffect, forwardRef } from 'react';

interface Props {
  indeterminate?: boolean;
  name: string;
}

const useCombinedRefs = (...refs): React.MutableRefObject<any> => {
  const targetRef = React.useRef();

  React.useEffect(() => {
    refs.forEach(ref => {
      if (!ref) return;

      if (typeof ref === 'function') {
        ref(targetRef.current);
      } else {
        ref.current = targetRef.current;
      }
    });
  }, [refs]);

  return targetRef;
};

const IndeterminateCheckbox = forwardRef<HTMLInputElement, Props>(
  ({ indeterminate, ...rest }, ref: React.Ref<HTMLInputElement>) => {
    const defaultRef = React.useRef(null);
    const combinedRef = useCombinedRefs(ref, defaultRef);

    useEffect(() => {
      if (combinedRef?.current) {
        combinedRef.current.indeterminate = indeterminate ?? false;
      }
    }, [combinedRef, indeterminate]);

    return (
      <React.Fragment>
        <input type="checkbox" ref={combinedRef} {...rest} />
      </React.Fragment>
    );
  }
);

export default IndeterminateCheckbox;

That's what I'm using in our current codebase and it works as expected. Note that I am using nullish coalescing, so you'll need to be on at least TS 3.7.

[davidjmstewart]

This gives a syntax error when I use it.

Unexpected token, expected ";" (27:64)     

  25 | };
  26 | 
> 27 | const IndeterminateCheckbox = forwardRef<HTMLInputElement, Props>(
     |                                                                 ^
  28 |   ({ indeterminate, ...rest }, ref: React.Ref<HTMLInputElement>) => {
  29 |     const defaultRef = React.useRef(null);
  30 |     const combinedRef = useCombinedRefs(ref, defaultRef);

[victorkvarghese]

@riceboyler I was able make things running using this solution, but checkbox are not getting checked, only header checkbox works

[herdeybayor]

import React from "react";

type Props = {
    indeterminate?: boolean;
};

const TableCheckBox: React.ForwardRefRenderFunction<HTMLInputElement, Props> = ({ indeterminate = false, ...rest }, ref) => {
    const defaultRef = React.useRef<HTMLInputElement>();
    const resolvedRef = (ref || defaultRef) as React.MutableRefObject<HTMLInputElement>;

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

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

export default React.forwardRef(TableCheckBox);

[RochezBaptiste]

Work like a charm thank a lot !

[Luckygirlllll]

I'm getting an error: "Property 'getToggleRowSelectedProps' does not exist on type 'Row<object>'." inside hook inside the file where I'm creating a table with IndeterminateCheckbox, any ideas how to fix it?

hooks => {
        hooks.visibleColumns.push(columns => [
          // Let's make a column for selection
          {
            id: 'selection',
            // The header can use the table's getToggleAllRowsSelectedProps method
            // to render a checkbox
            Header: ({ getToggleAllRowsSelectedProps }) => (
              <div>
                <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
              </div>
            ),
            // The cell can use the individual row's getToggleRowSelectedProps method
            // to the render a checkbox
            
            Cell: ({row }) => (
              <div>
                <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
              </div>
            ),
          },
          ...columns,
        ])

[talgat-ruby]

My solution is

React.useEffect(() => {
    if (typeof resolvedRef === 'object' && resolvedRef.current) {
      resolvedRef.current.indeterminate = Boolean(indeterminate);
    }
  }, [resolvedRef, indeterminate]);

I suppose it is Typescript issue

[riceboyler]

"@types/react-table": "^7.0.19"

I found a quick solution <IndeterminateCheckbox {...(row as any).getToggleRowSelectedProps()} />, but maybe there is a more elegant solution for this.

Sorry for the long delay, I didn't see your response. The "better" way to do it would be to define the row that you're destructuring in your Cell definition.

...
Cell: ({ row }: { row: Row<your row type> }) => (
...

[riceboyler]

Oh, and Row is imported from react-table. It's a base type.

[prasanth94]

Cell: (props: TableInstance) => <IndeterminateCheckbox {...props.row.getToggleRowSelectedProps()} />

[CatPerry]

Very late reply here, but folks who run into this in the future: Here is the full typing that fixed this specific error Property 'getToggleRowSelectedProps' does not exist on type 'Row<{}>'.ts(2339) AND the blow also solves the OP's question of getting a working indeterminate checkbox.

I wanted to fixed this problem without creating a d.ts. file, since I'm adding this to an already-existing React Table implementation in Grafana's codebase, so wanted to avoid a d.ts file if possible. TL;DR: it's possible!

// IndeterminateCheckbox.tsx

import { TableToggleCommonProps, Column, HeaderProps, Hooks, TableToggleAllRowsSelectedProps } from 'react-table';
...

export const useCheckboxes = (hooks: Hooks) => {
  hooks.visibleColumns.push((columns: Column[]) => [
    {
      id: 'selection',
      width: '50px',
      className: 'checkbox',
      /* eslint-disable react/display-name */
      Header: ({ getToggleAllRowsSelectedProps }: HeaderProps<{}>) => (
        <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
      ),
      Cell: ({ row }: { row: { getToggleRowSelectedProps: () => TableToggleCommonProps } }) => (
        <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
      ),
    },
    ...columns,
  ]);
};

export const IndeterminateCheckbox = forwardRef<HTMLInputElement, Props>(
  ({ indeterminate, ...rest }: Partial<TableToggleAllRowsSelectedProps>, ref: React.Ref<HTMLInputElement>) => {
    const [isIndeterminate, setIsIndeterminate] = useState(false);
    const defaultRef = useRef(null);
    const resolvedRef = ref || defaultRef;
    const styles = useStyles2(getStyles);

    useEffect(() => {
      if (typeof resolvedRef === 'object' && resolvedRef.current) {
        resolvedRef.current.indeterminate = Boolean(indeterminate);
        resolvedRef.current.checked = Boolean(indeterminate);
        setIsIndeterminate(resolvedRef.current.indeterminate);
      }
    }, [resolvedRef, indeterminate]);

    const onChange = (e: React.FormEvent<HTMLInputElement>) =>
      rest.onChange ? rest.onChange({ ...e, target: e.currentTarget }) : undefined;

    return (
      <Checkbox
        ref={resolvedRef}
        {...rest}
        onChange={onChange}
        data-testid={isIndeterminate ? 'indeterminate' : 'not-indeterminate'}
        className={isIndeterminate ? styles.indeterminateDash : styles.default}
      />
    );
  }
);

// YourTable.tsx

function ReactTable({ columns, data }: { columns: Column[]; data: FakeData[] }) {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    {
      columns,
      data,
    },
    useRowSelect, // <<<<<
    useCheckboxes // <<<<<
  );
...

Screen.Recording.2022-07-14.at.8.34.46.AM.mov

[r3wt]

The problem is Row is not aware of plugins, so once plugins are involved, Row<MyType> doesn't have typing support for the extra properties added by that plugin.

[ggascoigne]

Take a look at https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table and read the bit about declaration merging. You are correct, Row by itself doesn't know about the plugins, but you can extend that declaration by following the example in the readme.

[EgomL]

Hello,
I'm trying to use the enhace code shown in the react table sandbox with a small modification:
`const IndeterminateCheckbox = forwardRef(
({ indeterminate, ...rest }, ref) => {
const defaultRef = useRef()
const resolvedRef = ref || defaultRef

React.useEffect(() => {
if (typeof resolvedRef === 'object' && resolvedRef.current) {
  resolvedRef.current.indeterminate = Boolean(indeterminate);
}

}, [resolvedRef, indeterminate]);

return (
  <>
    <Checkbox ref={resolvedRef} {...rest} />
  </>
)

}
)`

but my checkbox aren't working(no check). can someone help?

[victorkvarghese]

@riceboyler @tannerlinsley
same issue for me , checkboxes not working

useRowSelect,
hooks => {
  hooks.visibleColumns.push(visibleColumns => [
    // Let's make a column for selection
    {
      id: 'selection',
      // The header can use the table's getToggleAllRowsSelectedProps method
      // to render a checkbox
      Header: ({ getToggleAllRowsSelectedProps }) => (
        <div>
          <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
        </div>
      ),
      // The cell can use the individual row's getToggleRowSelectedProps method
      // to the render a checkbox
      Cell: ({ row }) => (
        <div>
          <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
        </div>
      ),
    },
    ...visibleColumns,
  ]);
}

);

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

React.useEffect(() => {
if (typeof resolvedRef === 'object' && resolvedRef.current) {
resolvedRef.current.indeterminate = Boolean(indeterminate);
}
}, [resolvedRef, indeterminate]);

// eslint-disable-next-line no-console
console.log('IndeterminateCheckbox', indeterminate, rest);

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

[victorkvarghese]

Related to react -window : #2018

[subairadams]

The following code below works like a charm.

import React, { useRef, forwardRef, useEffect } from 'react';

interface IIndeterminateInputProps {
indeterminate?: boolean;
name: string;
}

const CheckBox = forwardRef<HTMLInputElement, IIndeterminateInputProps>(
({ indeterminate, ...rest }, ref: React.Ref) => {
const defaultRef = useRef(null);
const resolvedRef: any = ref || defaultRef;

useEffect(() => {
  resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
  <>
    <input type="checkbox" ref={resolvedRef} {...rest} />
  </>
);

}
);

CheckBox.displayName = 'CheckBox';
export default CheckBox;