Reusable Component in React

Great example of a reusable component in React #react #reactjs #reactjsdeveloper #programming #progammer #frontend #devtok #coding #code #cs

[myrat_charyyev]

Can you make a full video on reusable universal components in Typescript?

[henrymussemann]

That is all nice and good as a sandbox example. The cleanliness goes out of the window when you have real life requirements like lazy loading, infinite scroll, virtual scrolling, UX exceptions where that one column actually renders an amount in monospace and green and red and one has an expandable row with a sub list etc. What you show here is fairytale land. Life in practice isn’t that easy.

[Khaenman]

crazy timing, just scribbled out a rough table component structure on paper and then this video shows up LOL

[ptolemyhenson]

I have my components take other components as arguments, requiring the same props for each one. The result is basically render functions, but with less boilerplate.

[husreihn]

No checking on if the data matches the column size. Its prone to error

[azeek]

Be careful not to overuse it. My table has 10+ generic type args and it's sometimes annoying😅

[davidgillies]

Why are columns the same type as data? They're completely independent.

[TheKamieniu]

Whyyyy default export? Its a hell later to find stuff

[tryingtobeproductive]

its kinda good but too many components is a waste of space

[amitd]

How styling can be handled? Do we need to pass that too?

[lleytonmorris]

I think this is probably a fine approach when you have no logic at all inside your table, and for a beginner this may be true.

I also think that if you create the right utility functions or hooks, you could likely create a system for mapping your data into the necessary shape before passing it to this component, but in general, especially for tables, it is my opinion that using compound components is the way to go.

Alternatively, you are realistically going to want to use something like Tanstack Table which handles most of the logic for you in this case.

[nics]

are u serious…? its a default table ui component

[shrin]

Why Table header needs a seperate component?
Hate it

[Rfuge]

There's very little complexity here being abstracted.