genetic-orange

Multiple column groups + toggle visibility

Hi 🙂 We are working on a big admin table. In the design we have some of the columns that have a toggle button in the headers which should show/hide 1-3 additional columns to the right of the clicked column. simplified example:

| id | name | location <+> |
----------------------------
| .. | john |    DK        |

| id | name | location <+> |
----------------------------
| .. | john |    DK        |

after "location" toggle click

| id | name | location <-> | city | zip |
-----------------------------------------
| .. | john |    DK        | CPH  | 123 |

| id | name | location <-> | city | zip |
-----------------------------------------
| .. | john |    DK        | CPH  | 123 |

I was looking through the api, and only found single grouping, which doesn't seem to fit conceptually with what we want to do. Any suggestions of part of the API that could be a good fit for this, or should we go with custom visibility state and template state? - Kasper

3 Replies

extended-salmon•3y ago

Hi have you found a solution for this problem ?

wise-white•3y ago

You could use getToggleVisibilityHandler() to toggle column visibility Or change the state const [columnVisibility, setColumnVisibility] = useState({ columnId: true/false, columnId: true/false });

extended-salmon•3y ago

Yes thanks just wondering how to do it on a single group that has many columns

Gaming

Programming

Multiple column groups + toggle visibility

Did you find this page helpful?