Material-table: onRowClick expand tree level

[thebutler12]

Hi,

Is there a way to link the onRowClick to the action that expands the tree one level. This is so i can expand the tree on the row clicked and not just the icon being clicked?

Thanks,

Matt

[seanharr11]

Hi @Butler12 - you can accomplish this by using the tableRef prop of MaterialTable, and using this ref to call the onTreeExpandedChanged method.

const MyTable = (props: IProps) => {
  const myTableRef = useRef<any>(null); // TODO: Should use the actual type here, not 'any'
  return (
    <MaterialTable<T>
     {/* other props here */}
     tableRef={myTableRef}
     onRowClick={(e, rowData: any) => ref.current.onTreeExpandChanged(rowData.tableData.path, rowData)}
  </MaterialTable>
  )
}

[yurivangeffen]

I would love to perform an expand or collapse on all rows, but it doesn't work as I would expect. I have an action with an onClick like this:

onClick: (event) => {
    const treeData = tableRef.current.state.data;
    treeData.forEach(n => {
        if (n.tableData.childRows && n.tableData.isTreeExpanded === expanded) {
            tableRef.current.onTreeExpandChanged(n.tableData.path, n);
        }
    })
    setExpanded(!expanded);
}

Unfortunately this somehow always closes the the tree items, but doesn't open all of them. Any ideas on how to approach this functionality? I find the documentation on trees somewhat lacking.

[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.