Skip to main content
Solved

Check all checkboxes in table and show text

  • November 6, 2023
  • 9 replies
  • 1593 views

Ingrid_Waeraas

Hey! So I am working with a table where I want to have a head “checkbox” which check all checkboxes below the table. When I am checking the head I want to view a text that said how many items is checked. If I uncheck a check box in the table I want the text to disappear.

Anyone done something similar or could give me some advice how to reach this goal?

Best answer by Nate_G

@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

View original
This topic has been closed for replies.

9 replies

Nate_G
  • Power Member
  • 180 replies
  • Answer
  • November 7, 2023

@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


Ingrid_Waeraas

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 😅


Nate_G
  • Power Member
  • 180 replies
  • November 8, 2023

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.


Ingrid_Waeraas

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) 🙂


Nate_G
  • Power Member
  • 180 replies
  • November 9, 2023

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?


Ingrid_Waeraas

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 🙂


Checkbox flowpng


Nate_G
  • Power Member
  • 180 replies
  • November 9, 2023

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.


Ingrid_Waeraas

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 😃


Nate_G
  • Power Member
  • 180 replies
  • November 10, 2023

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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings