Allow only ONE SubComponent to be expanded

[OmarOmeiri]

I have a use case that my SubComponents have a significant height and opening more than one completely ruins the user experience. I'd like a way to collapse a previously expanded SubComponent whenever a user opens a second one. I have tried many ways using toggleRowExpanded and toggleAllrowsExpanded with useEffects and useCallbacks but it always seems to trigger infinite loops or subComponent freezing. How can I implement a custom expander? I have seen this issue #238, but it is for V6. Has anyone successfully achieved this?

[OmarOmeiri]

I figured it out after a bit of digging.
If anyone needs this, I think it is an OK solution.
I have overridden the default onClick supplied by row.getToggleRowExpandedProps() and close all subComponents before opening a new one.

  /**
   * Inserts the expander
   * if there is a SubComponent
   */
  useEffect(() => {
    if (SubComponent && !colIds.includes('expander')) {
      columnsRef.current = [{
        Header: '',
        id: 'expander',
        resizable: false,
        className: classes.tdCenter,
        minWidth: 10,
        maxWidth: 10,
        width: 10,
        Cell: ({ row }: {row: Row}) => (
          <button
            {...row.getToggleRowExpandedProps()}
            title="Expandir"
            data-isExpanded={row.isExpanded}
            data-row-id={row.id} // SET THE ROW ID AS A PROP
            onClick={expandRow} // HERE I OVERRIDE THE DEFAULT onClick PROP
            className={`${classes.rtTd} ${classes.rtExpandable} ${classes.P0}`}
          >
            <div
              className={`${classes.rtExpander} ${(row.isExpanded && !('dummy' in row.original)) ? classes.Open : ''}`}
            >
              •
            </div>
          </button>
        ),
      }, ...columnsRef.current];

      setColIds(columnsRef.current.map((c) => (c.id ?? '').toString()));
    }
  }, [colIds, isTransposed, expandRow, SubComponent]);

  /**
   * Handles the subComponent expand.
   * Closes any subComponent before opening a new one.
   */
  const expandRow = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
 const target = e.target as HTMLButtonElement;
    const rowId = target.getAttribute('data-row-id');
    const isExpanded = target.getAttribute('data-isExpanded');
    toggleAllRowsExpanded(false);
    // @ts-ignore
    if (rowId) toggleRowExpanded(rowId, isExpanded !== 'true');
  }, []);