Is it possible to have an instance of a component and duplicate/add items inside it?

Ask the community
5

Hi @Justin_Brown :wave:, I’ve also run into this many times with components. I’ve noticed this comes up for pieces of interface where it’s nearly impossible to account for every possible permutation or future use-case. Some other examples that come to mind are modals and cards.

I recently have been using component swapping to get around this dilemma. It’s not without it’s own tradeoffs, but if you take a liberal approach to componentizing things (componentizing almost anything and everything), and build components on atomic design principles, I think it can work well.

Here are the steps I’d recommend based on the file you shared in your original post:

  1. Create a “Row” component made up of a few of your existing cell components. The number of cells does not matter. It is important that the entire row is componentized because this is what you’ll be swapping later to inject more rows into the table instance.
  2. Similar to your current set up, create a few instances of your row component (again, the number of rows doesn’t matter; perhaps keep it small for now, like 3 or 4 rows), and then componentize them all together for your “Starter table” component. This would look like what you currently have, except each row is a component instance rather than a frame of table cell components (forgive me if my assumption is wrong on your set up, I’m just going off of what I can see through the embedded view).
  3. When you create an instance of this “Starter table” component, and you need more rows than the 3 or 4 that exist, make duplicates outside the instance (just as you originally described). Then make any necessary overrides and adjustments, and then componentize this new set of rows… you could name this component something like “Extra rows”, and its sole purpose is to be used in this single instance, and likely no where else.
  4. Finally, choose a row in your instance of “Starter table” and use component swapping to swap it with the newly made “Extra rows” component. You should now have more rows in the instance of “Starter table” than what exist in the main component of “Starter table.”

Hope this is helpful! Happy to explain further, or provide a different example if need be. I know the pain of needing to “expand” upon instances well :sweat_smile:

2 Likes