Figma Table Component not maintaining Text Property when hover state is activated

[Glenn_Cahill]

Hi Everyone,

So I have been cooking my brain over how to make this component work for my client and I finally managed to get it to a state where the hover state for an entire row is activated.

I managed this by aliasing a text variable that aligned with the variant states on my table cell atom components. (See image below)

I then auto layout these atoms together to give me table columns with the ability to hide and show to give less/more rows as required.

The problem I am having is when I test this out in a prototype, the cell resets to the default value rather than keeping its text property override.

You can see from the video below that when I hover on the specific cell, it does keep the text property but when I hover on a different cell type (Number or Checkbox in the example) it resets to the default value.

Any and all help would be amazing.

Thanks in advance.

[Joseph_Mueller1]

Without the link to your file I can’t be 100% sure what’s going on. If I had to guess I’d say it could be two things:

1. The layer names aren’t matching up and so the text overrides aren’t carrying through.
2. If you’re using the atoms to control the row that could be adding some complexity and Figma is getting confused.

I created a file here

And a prototype here

Let me know if this is what you were shooting for / asking about.

[Glenn_Cahill]

Thanks Joseph.

So the way I have constructed the table is in a column model. The client wants to be able to add and remove columns to tables that can change across his design layouts.

Here is how the columns are constructed (Each of the rows are atoms).

I have checked the layer names and they are all matching to rule out that as a factor.

I think the prototype you provided works perfect, but I am unsure as to how this would be scaleable in line with the needs of my client.

Thanks again!

[Joseph_Mueller1]

Ah I understand. I think I’d do that by setting up the atoms with mouse enter/ mouse leave states. This will take care of the hover state listener, and also not give you a 2 action conflict error if you put it on the component in the table itself.

I didn't make the columns into components because that's where I *think* Figma was getting tripped about about what text should be what for some reason. Maybe that's a bug maybe that's a feature? - Never mind it works if you turn the columns into components so that should help your client.

But onwards. I then put an if statement on each cell in the table that would call to the variable state like you had done. For each cell in a row I linked the state up to the variable Row1, Row2, ect. This will check to see if the state is “Hover” and on click will change the variable state to Selected. Then if you click it again it will change it back to the “Default” state.

Prototype here

Not fail proof at all for your client, but it will let them copy and paste the columns to their hearts content and still work.