Material-table: Adding custom component re-renders? the table

[jonasanx]

There's a modal window that will appear when onRowClick is triggered, I have set a maxBodyHeight so there a scroll will appear when there are many rows. When I scroll to a certain row and and I click on it, the modal will appear, and the scroll will stay in that position. That works as expected, but here is the thing. If I add a custom component as a container, and then I click on the row, the scroll resets? It goes all way up again.

1. Without custom container.

<MaterialTable
  icons={tableIcons}
  columns={columns}
  options={options}
  localization={localization}
  data={data}
  isLoading={loading}
  actions={actions}
  onRowClick={openDialogView}
/>

1. With custom container

<MaterialTable
  components={{ Container: props => <div>{props.children}</div> }}
  icons={tableIcons}
  columns={columns}
  options={options}
  localization={localization}
  data={data}
  isLoading={loading}
  actions={actions}
  onRowClick={openDialogView}
/>

Pretty much changing any state resets the scroll position, but that only happens when I add a custom component.

[jonasanx]

Ok... so, I think It has to do something from the table being inside a context in my App. When the Context changes for some reason causes the scroll position to reset.

<Context.Provider>
  <AnotherComponent />
  <MaterialTableContainer>
     <MaterialTable />
  </MaterialTableContainer>
</Context.Provider>

So just I put the components object inside a useMemo and I think that did the trick, although I am not sure what side effects it may have.
```jsx
const components = useMemo(() => {
return { Container: props => props.children }
}, [])

return (
components={components}
icons={tableIcons}
columns={columns}
options={options}
localization={localization}
data={data}
isLoading={loading}
actions={actions}
onRowClick={openDialogView}
/>
)```

[Kadrangelion]

Great turnaround there! I was looking for it for hours ! :o
I'm gonna add some few keywords so people can find this more easily!

onClick onRowClick onDoubleClick onAction scrollbar top position reset event onEvent action click hooks material-table

[blshort43]

This just saved me a ton of time. Thanks!!!!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.