TanStackT
TanStack•10mo ago
brilliant-lime

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
}

- 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?
image.png
Was this page helpful?