T
TanStack•6mo ago
genetic-orange

Suggested way of handling multiple checkboxes with indeterminate state on group headers

Hi there. I am looking through docs and trying to find the best/easiest approach for checkbox grid, where each "header" toggles entire group, and each item in group can set "header" checkbox to indeterminate state. I was looking through api, specifically useStore, Subscribe, transform, listeners, Linked fields etc and I am not sure which approach would render the easiest solution with Tanstack Forms philosophy. I'm trying to avoid splitting the code too much as so far I only got mess of passthrough checked/indeterminate states. I have: - a checkbox component (without any Tanstack Form logic inside), which accepts checked, onChanged and inteterminate props - following API data definition for single "table": 
{
  "id": "table-id",
  "name": "Table 1",
  "tableCols": ["column1", "column2", "column3"],
  "fieldPerms": {
    "read": ["column1"],
    "create": ["column1", "column2"]
  },
  "read": true, // true, but for selected columns
  "create": true, // true, but for selected columns
  "update": true, // true for all
  "delete": true // true for all
}
{
  "id": "table-id",
  "name": "Table 1",
  "tableCols": ["column1", "column2", "column3"],
  "fieldPerms": {
    "read": ["column1"],
    "create": ["column1", "column2"]
  },
  "read": true, // true, but for selected columns
  "create": true, // true, but for selected columns
  "update": true, // true for all
  "delete": true // true for all
}
- a UI guidelines that are represented with attached image Would anyone be able to share the tips on how to approach this with Tanstack Form? More specifically: - can I utilize useTransform to create more managable checbox representation? I am not sure when transformation is run and if I can use it to translate data to/from form - which linking/subscription mechanism should I use to avoid state change loops and keep code structure readable?
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?