Hook when nested row is expanded or collapsed?

Tags: #<Tag:0x00007efc71a365c8> #<Tag:0x00007efc71a36410>
#1

Is there a way to handle when a user expands or collapsed a row with NestedRows? It used to be the case that afterTrimRow would fire, and I used that hook, but it seems at some point that stopped firing when expanding/collapsing rows. I’ve seen some threads that indicate this isn’t possible but they are a few years old.

#2

My scenario was to collapse or expand row when parent is clicked. I had disabled rowHeaders so I did not had default buttons to collapse or expand row.

this code is to expand or collapse rows, but u can use similar approach and can do add ur own code in it.

const afterMouseDownOnCell = (event: any, coords: CellCoords) => {
if (hotRef !== null && hotRef.current) {
  let nestedRowPlug = hotRef.current.hotInstance!.getPlugin(
    "nestedRows"
  ) as any;
  let clickedVal = hotRef.current.hotInstance!.getDataAtCell(coords.row, 0);

  let isGroup =
    (nestedRowPlug.dataManager.data as []).findIndex(
      (d: any, indx) => d.id === clickedVal
    ) >= 0;

  if (!isGroup) {
    return;
  }

  let indexOfClickedRow = (
    nestedRowPlug.dataManager.cache.rows as []
  ).findIndex((d: any, indx) => d.id === clickedVal);

  let isCollapsed = (
    nestedRowPlug.collapsingUI.collapsedRows as number[]
  ).includes(indexOfClickedRow);

  isCollapsed
    ? nestedRowPlug.collapsingUI.expandChildren(indexOfClickedRow)
    : nestedRowPlug.collapsingUI.collapseChildren(indexOfClickedRow);
  setTimeout(() => {
    hotRef.current?.hotInstance?.render();
  }, 0);
}
};
#3

Thank you for your feedback @jamshaidbutt055

Some time I made this demo https://jsfiddle.net/ucw1q702/ based on a native mouseup event. It works well if you have only one nesting level, with more it would require some adjustments.

#4

Thank you both! The native mouse handler worked perfectly.

#5

Great! So we can call it solved.

#6