@Ingrid_Waeraas There are probably multiple ways to go about this one, but here is one approach where I used variables, conditionals, and variants.

→ View Prototype

→ Get the File

This is a great example! Thank you so much! I was wondering how it would be if i wanted to add a indeterminate state? Do I then need a variable that is Number = # indeterminate = # cell-counter ?

Sorry if it’s a dumb question 😅

No worries 🙂

I’m not sure what you mean by “indeterminate state” — will you not know how many cells will be in a row?

In my example, I set the “total-cells” number variable to the number of cells in the row (6), and then I set the “cell-counter” equal to “total-cells”, then I will subtract or add from “cell-counter” depending on the number of selected cells. So if you wanted to add more cells to a row you’d need to update the “total-cells” to the total number of cells.

Yes, so I am making a prototype for a pagination example for tables with checkboxes. So when you have for example 100 items in a table, but shown over several pages. But have only selected the first 10 so then i would like a indeterminate state (a checkbox with a line instead of filled/checkmark) 🙂

Interesting 🤔. So would you have a “select all” option for every “page” of the table?

Do you have any visual examples of what you are trying to accomplish?

Yeah kinda, So we’ll do it quite similar to google mail. Where you get a link button you can press to select all remaining. See my example . The blue text is the link button 🙂

Thanks for sharing the examples.

What happens when you click the indeterminate state checkbox?

It definitely gets a lot trickier adding the pagination, selecting/deselecting individual items, having a counter, and selecting all or removing all.

You may just have to just mock up different stages you click through, versus making it fully functional.

Yeah, I finally got it that way I wanted it to work 😃 Used your logic but added a indeterminate state to the components and stated that when prototyping with the variables. And also did what you said here but only within the component so I only have one frame that does all 🙂 I work with a payroll system so we need a bit complicated pagination when working with very big tables.

So in the prototype now the indeterminate state does nothing. By pressing it you would select or deselect all items i think.

Thank you for your help again! It was very helpful and now I understand the variables a bit more than I did before. Hopefully in the future Figma will make it so we can make even more realistic prototype easier 😃

That’s awesome, I’m glad you got it to work!