Material-table: onTreeExpandChange does not work as expected

[JasonLunsford]

Describe the bug
Unless we are using this feature wrong (totally possible) it would seem onTreeExpandChange does not work as expected in the latest version of material-table.

To Reproduce
Assign any trivial function to onTreeExpandChange.
Expand a row in material-table
Observe how the function does not fire

Expected behavior
I would expect that, upon row expand (NOT row click), that onTreeExpandChange fires, thus firing any assigned methods. This is not happening.

Desktop (please complete the following information):
Mac OS latest
Chrome latest

[ax0n-pr1me]

@JasonLunsford - here are my notes as well

Accessing onToggleDetailPanel

Use Template from Material-Table Example

function DetailPanelWithRowClick() {
  return (
    <MaterialTable
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      ]}
      title="Detail Panel With RowClick Preview"
      detailPanel={rowData => {
        return (
          <iframe
            width="100%"
            height="315"
            src="https://www.youtube.com/embed/C0DPdy98e4c"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          />
        )
      }}
      onRowClick={(event, rowData, togglePanel) => togglePanel()}
    />
  )
}

Decouple Row Click and Icon Click events

```{js}
onRowClick={(event, rowData) => console.log(rowData)}

### Result:
clicking on row `consol.log()`s data and the icon still handles the `togglePanel()` function

## Use methods

I expected these methods to be accessible as neighbors to `onRowClick`
```{js}
onToggleDetailPanel={() => console.log('test')}
onTreeExpandChange={() => console.log('test')}

like this...
{js} function DetailPanelWithRowClick() { return ( <MaterialTable columns={[ { title: 'Name', field: 'name' }, { title: 'Surname', field: 'surname' }, { title: 'Birth Year', field: 'birthYear', type: 'numeric' }, { title: 'Birth Place', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }, }, ]} data={[ { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 }, { name: 'Zerya Betül', surname: 'Baran', birthYear: 1987, birthCity: 63 }, ]} title="Detail Panel With RowClick Preview" detailPanel={rowData => { return ( <iframe width="100%" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen /> ) }} onRowClick={(event, rowData, togglePanel) => togglePanel()} onToggleDetailPanel={() => console.log('test toggle detail panel')} onTreeExpandChange={() => console.log('test tree expand change')} /> ) }

Result:

No console log messages.

[ax0n-pr1me]

Follow Up:
because the onRowClick event is in the same scope as the onToggleDetailPanel I would expect them to be callable in a similar fashion.

I could be completely wrong but my reasoning was that in the src/material-table.js file,

{js} < ... onToggleDetailPanel={this.onToggleDetailPanel} onGroupExpandChanged={this.onGroupExpandChanged} onTreeExpandChanged={this.onTreeExpandChanged} ... onRowClick={this.props.onRowClick} ... />

[Clemios]

I need the same kind of feature. Impossible to get data if i click on the expand icon. I can only achieve it using onRowClick

[JasonLunsford]

I found a solution to this issue. Specifically a solution that allows us to fire an async process that gathers the data required when a row is toggled and display it upon delivery. The solution requires the use of functional components and the useEffect hook.

In the table pass an anonymous function to the detailPanel property:

detailPanel={rowData => <SubTableComponent rowData={rowData} />}

Then, define a SubTableComponent and within it define a useEffect using an async process, like so:

    const SubTableComponent = ({rowData}) => {
        const [subTableData, setSubTableData] = useState([]);

        useEffect(() => {
            const init = async () => {
                const data = await someAsyncProcess(rowData.id);

                setSubTableData(data);
            }

           init();
        }, []);

        return (
           // your JSX w/ subTableData here
        )
    };

Note: we use a custom hook that triggers arbitrary APIs (using Axios under the covers), that gives us the ability to determine if the API payload has been delivered (or failed to deliver), so this code is an abstraction of what we do - but hopefully it helps someone struggling with this issue.

[Clemios]

Sure, i have something similar :

detailPanel={rowData => <ExpandedComponent rowData={rowData} />}
onRowClick={(event, rowData, togglePanel) => {
    onGetProduct(rowData, rowData.tableData.id);
}}

on <MaterialTable>

I fetch my data using redux-saga and when the action is done i store the line id to be able to do :

  React.useEffect(() => {
    if (typeof lineToToggle === 'number') {
      materialTableRef.current.onToggleDetailPanel(
        [lineToToggle],
        materialTableRef.current.props.detailPanel,
      );
    }
  }, [lineToToggle]);

It's working fine, but ONLY if i click on the row, if i click on the expander icon, it do not trigger onRowClick so i do not fetch any data.
I need something like onToggleDetailPanel usable as onRowClick.
Thanks for your answer anyway <3

[JasonLunsford]

Right, that onRowClick thing is not helpful to us either. The thing about using the useEffect as I outlined is that it fires when the component mounts, that is when the row is toggled using the expander icon. I admit this is a work around but the code works as expected and we get data when the user expands the row (not on row click).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.