Access table instance in external components
Is it possible to access the table (
useReactTable) from other components without passing props? I have several components on different levels and separate from the table, such as the search bar, filter, pagination, delete confirmation modal, etc. Within these components, I need to access the table to update it based on these functionalities.
Since there are several components, and some are nested inside others, I want to avoid prop drilling because it would make the structure confusing and awkward, and cause unnecessary re-renders.11 Replies
modern-tealOP•8mo ago
🥲
protestant-coral•8mo ago
I don't believe so. Do you have an example of what you would be looking for? Might be how you have something structured if you are nesting that deeply
modern-tealOP•8mo ago
Would the standard way be to create the table in the parent component (in this case the page component) and pass it via props to the child components, including the table component?
I thought it was possible to access the table in separate components, like with context api
it would be more optimized, since only the necessary components would be re-rendered, not the entire page
protestant-coral•8mo ago
Yea I have custom reusable components that wrap everything and only pass what each thing needs. So my table component accepts the table instance as a prop and then it propagates the required stuff down to each component. But like I said, mine only goes ~1-3 levels deep. An example would help though if you have worries for how you have stuff setup. Fork one of the stack blitz examples on the docs and we can look at it
modern-tealOP•8mo ago
like this?
open the image in browser and zoom in so it's easier to see
modern-tealOP•8mo ago
modern-tealOP•7mo ago
it causes page re-render for each row
it's not possible that the creator of the library didn't think about optimizing this
in some components i need the static table instance, just to change the global filter for example, because it doesn't make sense for this component to have to re-render every time it selects a row, or when it changes the ordering
in other components i need it updated, to access selected rows
but there is simply no middle ground, either i get the static instance and can't access the selected rows and other data in real time or i create a context for the table where the components that use that context are re-rendered by absolutely any action on the table, which doesn't make any sense
robust-apricot•7mo ago
Hey @hlx - I've done some work on the Svelte adapter, so I can't necessarily speak on the architecture of the core table library, but rather how it's implemented by adapters. For the React adapter - the table object is indeed a
state variable: link
So yes, the entire table will re-render for any change to state that happens. If you put the table into a context, then, if I understand React context correctly, all of those children will re-render.GitHub
table/packages/react-table/src/index.tsx at 9763877e329882a8dcd6457...
🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table - TanStack/table
robust-apricot•7mo ago
Some ways you can optimize are:
- Pagination
- Virtualization
- Using the
table-core library alongside some kind of state mgmt library that's more surgical in its approach to re-rendersmodern-tealOP•7mo ago
Hmm, makes sense
I wanted to avoid potential performance issues, but since these re-renders are inevitable because of the library's internal structure, I'll store the instance in a context so I have better control over it in the components that need it
And if any performance issues come up, I'll look for a way to optimize it using one of the methods you mentioned
Thanks for the suggestion 🤙
robust-apricot•7mo ago
Sure thing. Tbh the only time I've run into performance issues with this library is when my component tree is massive (lots of complex components for the browser to parse). In which case I just virtualized the table and it ran smoothly from there.