Complete Guide to Creating Dynamic Table Components on Figma

[@JuanmaAndrea]

you saved me! thanks you because It's all that I need in a simple and clear video, best!

[@skeche]

dude this was perfect no bullshit and only 5min

[@yishmael]

Dude, I really liked your teaching style! This guide helped me a lot, thank you! I would love to see in the future some Figma courses from you, I would definitely buy it

[@mindesigning5468]

Thank you! Happy to help!

[@ЮлияКузнецова-к7у]

Amazing approach, super helpful, thank you a lot!

[@KannanC-z7d]

Excellent ! in 5 min you taught me a lot

[@mindesigning5468]

😉

[@elisauiloa2161]

Thanks for the best tutorial for tables ever!

[@irisgreen9184]

First - many thanks! this is a great video. Clear and short. it changed entirely how I built a table and solved the issue of having a columns sized as the content in cells. Same questions as below: how do you add states such selected and hover? do you need to duplicate each cell for that? use variable? and how you add rows in a quick way that does not requires adding a row to each column? maybe it's better to first create one row from all columns (suggested below also), and duplicate it instead?

[@mindesigning5468]

@@irisgreen9184 Hey, lots of good points. As for the states, it depended on the effect you want to apply, but yes, you can create variants os use variables to change the bg on hover for example. I have this tutorial on prototyping that may help kzbin.info/www/bejne/q6OvpJ2uiM2Uf7Msi=2PC2tjxX6mIqq4oM As for the amount of rows, its done mannualy, my suggestion is creating big columns and deleting the cells you don't need, but you can add component properties to the visibility of the column cell to toggle them on/off (I will explore this in a new video if it works properly, thanks for the idea)

[@Dupdopy]

Great tutorial! In one of the projects a table needed expandable rows and in-line editing. Was a nice challenge. Perhaps and idea for a new video =)

[@JohnRodrigues.]

Thank you, this is very helpful

[@gooddeslex]

Great way! Thnx a lot!

[@Dollsbymoony]

Hi, thanks for the tutorial! I have a question, is it possible to add more rows? without adding them to the original column component?

[@mindesigning5468]

You can never add content to a component , just remove them. What you can do is add to the original and set the visibility (eye icon) to off. So You can turn on just when you need them. Hope this helps

[@genevieveanyanwu440]

Very very helpful Thank you

[@mindesigning5468]

@@genevieveanyanwu440 Happy to help! Stay tuned and share it away 🙂

[@mindesigning5468]

@@genevieveanyanwu440 happy to help! Stay tuned and share it away

[@SehrishMoujahid]

man you earn a subscriber

[@Kaze70707]

This is much better explanation than my mentor in bootcamp 😢.

[@mindesigning5468]

Glad to help! Share it away

[@iCosmictube]

MY RESPECT BRO!!!!

[@tapakbkmz]

Nice dude, love it❤

[@mindesigning5468]

Thanks 🔥

[@RichardPascual-sn4qn]

Thank you for this video. How would you vary the amount of line items in the final component created?

[@mindesigning5468]

You can't add elements to a component, only remove them. So I suggest the columns with all the cells you need and just delete them when not needed

[@palanimathi4493]

Great, I have one question could you please explain, is this possible to give a hover effect for the entire row?

[@mindesigning5468]

Will do

[@CBConstruction-v5c]

Thanks man!

[@mohammadsaeed4511]

That's Great, But my question is, can we add rows in the table from the panel in the right to setup properties for instance???

[@mindesigning5468]

Yes, you can create variants for you table component with different numbers of rows, so they will be available in a dropdown such as the other paramethers. But, to be honest, I think it's not worth it, I prefer creating one table with a buch of rows and simply delete them in the instance if not needed. Remeber, you can always hide content of a intance but you can never add anything

[@raphaelnogueira4412]

You helped a lot, thanks

[@fernandopaiva4100]

Great!! but how can i put a horizontal scroll and keep the table responsive? Can you show how to do? Thank you !!

[@mindesigning5468]

Can you elaborate on that? Not sure I got it.

[@parasmistry1346]

Can I use overlay animation for dropdown however I also want to showcase the selected option.

[@mindesigning5468]

Not sure I get your question, you want to click the select element, show the dropdown menu, and make the selection reflect on the table, is that it? You can do that with variables

[@elainewang3605]

How does this work if you need a hover effect to highlight a row?

[@rafaappl]

In my opinion there is a missing step. You can do all steps as shown, but I'd create a row component and define all other elements with transparent background. Then I'd define the background color only on the row. BUUUUUT componentizing a row, may create an extra work to define the number of columns, anyway, I still think this is a better way, because in fact, actions are made in rows.

[@uifry]

Bravo !!

[@leylamusazade97]

Thank u very much, you explained it very easy but i cant add this video to my playlist, why?

[@mindesigning5468]

You should be able to do it just fine. Hit the save button and select the desired playlist

[@CharlBrazle]

This totally fails when texts grow on multiple rows. Then all other columns/rows will be misaligned :(

[@jkdubb]

That seems to be the unsolvable problem. Hope someone figures this out. Maybe a future figma update specifically for tables.

[@mindesigning5468]

You can create a variation of the basic components with the height set to “fill” or “hug” and change them accordingly. Set your text column to a block formatting. Hope it helps!

[@fernandopaiva4100]

Can you can put this component to download please? IT'S possível?

[@EricCRO]

amazing

[@PUK1SVA]

But this method has a flaw, you can't make whole row hover state for example. Isn't making rows a better approach? Also changing number of rows is hard.

[@mindesigning5468]

For layout purposes, you can show the hover state by changing one cell on each column. You can go for a row approach, but its trickier considering responsiveness, I wouldn't recommend it. As for the hover state for prototyping purposes, there's is no perfect solution but I have a lesson on that too: Mastering Row Hover Effects in Figma: A Step-by-Step Guide kzbin.info/www/bejne/q6OvpJ2uiM2Uf7M

[@rodolfolorote9059]

Are you Brazilian?

[@naveen_bm]

❤❤

[@corruptedapk5129]

This approach wouldn't work if I have a cell that spans 2 rows or columns

[@peopleinc9468]

Please also give access to file ❤

[@thallesrigobello]

Se esse sotaque não for de Brasileiro não sei mais nada

[@rehanpratama-z5k]

name font?????

[@H4KV]

Wt are u Brazilian???