row.getToggleExpandedHandler() handler doesn't work

[wallpants]

Describe the bug

When defining a cell that contains a button with:

<button onClick={row.getToggleExpandedHandler()}>
  {row.getIsExpanded() ? "collapse" : "expand"}
</button>

the handler does not change the expanded status.

If we instead do:

<button onClick={() => row.toggleExpanded()}>
  {row.getIsExpanded() ? "collapse" : "expand"}
</button>

the expanded status is correctly updated.

If I try the same this with row.getToggleSelectedHandler(), it works as expected when trying to update selected status.

Your minimal, reproducible example

https://stackblitz.com/edit/stackblitz-starters-fndwe1?file=src%2FApp.tsx

Steps to reproduce

1. Click on the row's "expand" button. Row will not be expanded.

Expected behavior

Assigning row.getToggleExpandedHandler() to the onClick attribute of a button should make that button handle expanded state.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS: firefox, edge
fedora: firefox, edge

react-table version

V8.9.3

TypeScript version

No response

Additional context

No response

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.

[arnaugomez]

Thanks for recording, I will give it a look tomorrow and try to issue a PR with the fix, if you want you can assign me the issue.

[arnaugomez]

I have reviewed your code and it appears that for a row to be able to expand, it must have subrows. This is not the case in your example, so the row.getToggleExpandedHandler() function does nothing.

This is the code of the handler function:

      getCanExpand: () => {
        return (
          table.options.getRowCanExpand?.(row) ??
          ((table.options.enableExpanding ?? true) && !!row.subRows?.length)
        )
      },
      getToggleExpandedHandler: () => {
        const canExpand = row.getCanExpand()

        return () => {
          if (!canExpand) return
          row.toggleExpanded()
        }
      },

As you can see, if the row does not have subrows, it cannot expand, so the getToggleExpandedHandler function does nothing.

Therefore, I think this is not a bug. But, since the documentation was not clear on this behaviour, I have issued a PR to improve it and make it clearer: 👉 #4947

[wallpants]

@arnaugomez thanks for looking into this.

According to the examples in TanStack's own repo (which I was following when I encountered this "bug"), expanding is not only used for subrows, but also subcomponents.

Is there a reason why subrows are a requirement to use the handler? It seems a bit weird to me that there's a handler to toggle row expansion, but it only works for a specific type of row expansion. Maybe if the handler was named toggleSubRowsExpandedHandler it would be more transparent, although I don't see reason to have a handler only for subrows and leave subcomponents with no handler.

[khoait]

@wallpants this should fix it in your stackblitz

const table = useReactTable({
  data,
  columns,
  getRowCanExpand: () => true,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
});

the reason is the table needs to know if a row can be expanded either:

• by default using enableExpanding: true with subrows or
• a custom logic using getRowCanExpand

Hope it helps!