0

I use react-table latest version. My table:

const MaterialTable = ({
 onClick,
 ...
}) => {
...
 const { getTableProps, headerGroups, rows, prepareRow, selectedFlatRows } = useTable(
  {
   columns: head,
   data,
   defaultColumn,
  },
  useRowSelect,
  useBlockLayout,
  useResizeColumns,
  (hooks) => {
   if (isSelectable) {
    hooks.visibleColumns.push((columns) => [
     {
      id: 'selection',
      width: 5,
      maxWidth: 5,
      // The header can use the table's getToggleAllRowsSelectedProps method
      // to render a checkbox
      Header: ({ getToggleAllRowsSelectedProps }) => (
       <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
      ),
      // The cell can use the individual row's getToggleRowSelectedProps method
      // to the render a checkbox
      Cell: ({ row }) => <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />,
     },
     ...columns,
    ]);
   }
  }
 );
 const renderTableBody = (row) => {
  prepareRow(row);
  return (
   <TableRow
    role="checkbox"
    onClick={() => onClick(row.original)}
   >
    {row.cells.map((cell) => (
     <TableCell
      {...cell.getCellProps()}
     >
      {cell.render('Cell')}
     </TableCell>
    ))}
   </TableRow>
  );
 };
...
};

And my IndeterminateCheckbox component:

const IndeterminateCheckbox = React.forwardRef(({ indeterminate, ...rest }, ref) => {
 const defaultRef = React.useRef();
 const resolvedRef = ref || defaultRef;
 React.useEffect(() => {
  resolvedRef.current.indeterminate = indeterminate;
 }, [resolvedRef, indeterminate]);
 return <Checkbox ref={resolvedRef} {...rest} />;
});

And question is: How to prevent onClick function when I click to checkbox?

1
  • did you have any luck? It's easy normally but with react-table abstracting away the method it's hard to see where to insert any code... Commented Nov 20, 2020 at 11:04

1 Answer 1

1

Look in the documentation about event.preventDefault()

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.