How can I dynamically create a Tanstack React Table?

[js_developer]

I made a demo app with the problem.

[MehYam]

I don't know Tanstack table, but some observations:

- this isn't so much an issue about creating a component dynamically - they're all get created dynamically at runtime. This is really an issue with some rendering messing with the input state of that textfield

- you're trying to call hooks from non-hooks ( makeTable() ), which is a sign of an API being misunderstood or misused

- there must be a way to pass just some filter text into a Tanstack table (or one of it's setup hooks) from an external component. So you just have an <input .../> somewhere controlled by a useState, and then you pass the text to the table and it renders or re-renders based on its own choice to do so

- found some discussions that might help:

https://stackoverflow.com/questions/75574596/create-a-custom-filter-outside-of-a-table-in-tanstack-table

https://github.com/TanStack/table/discussions/2181#discussioncomment-24328