Column visibility APIs do not work with column groups

[ashacs]

TanStack Table version

v8.15.2

Framework/Library version

React v8.15.2

Describe the bug and the steps to reproduce it

When using column helpers to create a column group, consumers are able to provide enableHiding: true as a column def option. However:

1. column.getToggleVisibilityHandler() or column.toggleVisibility always updates the table's columnVisibility state to have a false entry for that column group's id
2. column.getIsVisible() always returns true for that column group

Ideally, the getToggleVisibilityHandler, toggleVisibility, getIsVisible, and related HeaderGroup APIs could all be updated to support visibility toggling on column groups (which in turn would show or hide the children columns of that column group). Worst case, if toggling visibility of groups isn't something that can be supported, the enableHiding column def option could be removed from the column helpers API so it's not misleading to consumers.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/devbox/dry-river-9t7pg9

Screenshots or Videos (Optional)

This video uses the linked Code Sandbox example which is almost identical to the example in the documentation, but instead of rendering the column leaves as visibility checkbox options it renders the column groups as options. When interacting with the checkbox options which should toggle the column visibility, the visibility state is always set to false and the checkbox is always checked.

Screen.Recording.2024-04-18.at.3.43.36.PM.mov

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[wbolduc]

This still appears to be the case for 8.17.3

[tamirhen-eilla]

Same for me on 8.20.5

[hendrialqori]

Same case for me on vue v3.5 and @tanstack/vue-table v8.21.2

[vlausargs]

is there any workaround for this?

edit: i guess i can manipulate columns array manually & combine it with derived & state, but i need to also maintain the column.getCanHide manually

[RichardNolan]

My workaround for this, if I understood correctly was this.
I have a table with groups and buttons outside the table to toggle the groups visibility.

I found that the toggleVisibility in react-table is like a reducer which spreads the existing state and then appends the new state for the column acted on. I just create an object with all the columns columns with the toggled value from the parents visibility. Then do the same.

     {table
        .getAllColumns()
        .filter((column) => column.getCanHide())
        .map((column) => {
          return (
            <Button
              key={column.id}
              onClick={() => {
                const cols = column.getLeafColumns().reduce((acc, c) => {
                  acc[c.id] = !column.getIsVisible();
                  return acc;
                }, {} as Record<string, boolean>);
                table.setColumnVisibility((old) => ({
                  ...old,
                  ...cols,
                }));
              }}
            >
              {column.id}
            </Button>
          );
        })}

table/packages/table-core/src/features/ColumnVisibility.ts

Line 172 in 66fbe3a

column.toggleVisibility = value => {