Getting the error originalRows is undefined

[mjombanorman]

Below is my code that fails:

const table = useMaterialReactTable({
   columns,
   data,
    });
 return (
          <MaterialReactTable
         table={table}
         renderRowActions={({ row }) => (
           <Box sx={{ display: "flex", flexWrap: "nowrap", gap: "8px" }}>
             <IconButton
               color="secondary"
               component={Link}
               to={`edit/${row.original.id}`}>
               <EditIcon />
             </IconButton>
             <IconButton
               color="error"
               component={Link}
               to={`delete/${row.original.id}`}>
               <DeleteIcon />
             </IconButton>
           </Box>/>
        )}
       />);

When using this code below everything works okay.

  return (
    <MaterialReactTable
      columns={columns}
      data={data}
      renderRowActions={({ row }) => (
       <Box sx={{ display: "flex" , flexWrap: "nowrap" , gap: "8px" }}>
          <IconButton color="secondary" component={Link} to={`edit/${row.original.id}`}>
             <EditIcon />
          </IconButton>
          <IconButton color="error" component={Link} to={`delete/${row.original.id}`}>
              <DeleteIcon />
          </IconButton>
   </Box>/>
  )}/>);

Anyone with ideas?

[KevinVandy]

It's because you're combining the MaterialReactTable component and useMatetialReactTable hook the wrong way. Just pass all table options to the useMatetialReactTable hook. This is warned about in several places in the docs.

[mjombanorman]

Thanks for that,I overlooked that part.