How can I implement a table with nested dropdown items?

I had to do this once and solved it using recursion. Create your table and loop over the first layer of data.

const TableDropdown = ({ data }) => {
  return (
    <table>
      <tbody>
        // loop over the first layer of data
        {data.map((row) => (
          <DropdownRow key={`dropdown-row-${row.id}`} row={row} />
        ))}
      </tbody>
    </table>
  );
};

For the implementation of the row

1. In the row we set a state to keep track of the open state.
2. Define a toggle function to toggle between open and closed.
3. Finally determine whether or not we have children and check if the dropdown is open.

const DropdownRow = ({ row }) => {
  const [isOpen, setIsOpen] = useState(false);
  // check whether the row has children
  const hasChildren = row.childrens.length > 0;

  // toggle the row
  const toggleRow = () => {
    // no need to toggle if no children
    if (!hasChildren) return;
    setIsOpen((prev) => !prev);
  };

  // create the child rows if the current row has children and is opened
  const childRows =
    hasChildren && isOpen
      ? row.childrens.map((childRow) => (
          <DropdownRow key={`dropdown-row-${childRow.id}`} row={childRow} />
        ))
      : null;

  // just to determine which "icon" to display
  const toggleIcon = !hasChildren ? "=" : isOpen ? "-" : "+";

  return (
    <>
      <tr>
        <td onClick={toggleRow}>{toggleIcon}</td>
        <td>Row with id {row.id}</td>
      </tr>
      {childRows}
    </>
  );
};

Check here for a live version