[Feature Request] Table component : expand row

[AntoineArt]

Is your feature request related to a problem? Please describe.

In some of our projects, we end up using many columns in our tables. However it is not really user friendly.
We would really benefit having a table where we can expand a row to show other informations.

This would prevent having to put every info about a row in columns, so we could have less, more useful columns, and the secondary infos would be visible when the row is expanded.

Describe the solution you'd like

We would like a table prop allowing rows to be expanded.
A row could be expanded when clicked or when a specific button in the row is clicked, depending on the developer's choice.

The developer could add any components he wishes in the expanded section of a row : cards, buttons, avatars etc.

The expansion of a row should be visually pleasing, with the next UI's magic sauce

Describe alternatives you've considered

You can find examples here : https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html
and here : https://codepen.io/pc3b3r/pen/vLxONL

These examples are not pretty, are hard to customize and lack coherence with the concurrent use of next UI.

Screenshots or Videos

No response

[Feasy01]

Found any workaround on that?

[Armandotrsg]

I've thought of using the Accordion component to achieve this, but it does not work correctly. So far without breaking stuff the only thing you can get is this:

"use client";
import {
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell,
} from "@nextui-org/table";
import { Accordion, AccordionItem } from "@nextui-org/accordion";

export default function AlumnosPage() {
  return (
    <Table aria-label="Example static collection table">
      <TableHeader>
        <TableColumn>NAME</TableColumn>
        <TableColumn>ROLE</TableColumn>
        <TableColumn>STATUS</TableColumn>
      </TableHeader>

      <TableBody>
        <TableRow>
          <TableCell>
            <Accordion>
              <AccordionItem title="Item 1">Some content</AccordionItem>
            </Accordion>
          </TableCell>
          <TableCell>Admin</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

It only works for only one cell looking like this:

I have tried enclosing the <TableBody> component into an <Accordion> component, but it throws this error: Error: Unknown element <[object Object]> in collection.

So war what I'm thinking of is to use the Accordion component but create your own table using normal HTML

[Armandotrsg]

I have found this work around, notice that the hidden table row still has some height and I haven't found a way to make it disappear and still be animated. I have set a background color to make it noticeable, but just don't put any and it can do the trick. Also you can try adding a chevron arrow that animates.

"use client";
import React, { useState } from "react";
import {
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell,
} from "@nextui-org/react";
import { motion, AnimatePresence } from "framer-motion";

export default function App() {
  const [isContentVisible, setContentVisible] = useState(false);

  return (
    <Table aria-label="Example static collection table">
      <TableHeader>
        <TableColumn>NAME</TableColumn>
        <TableColumn>ROLE</TableColumn>
        <TableColumn>STATUS</TableColumn>
      </TableHeader>
      <TableBody>
        <TableRow
          key="1"
          className="cursor-pointer"
          onClick={() => setContentVisible(!isContentVisible)}
        >
          <TableCell>Tony Reichert</TableCell>
          <TableCell>CEO</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>

        <TableRow key="expandable">
          <TableCell aria-colspan={3} colSpan={3} className="bg-red-200">
            <AnimatePresence>
              {isContentVisible && (
                <motion.div
                  initial={{ opacity: 0, height: 0 }}
                  animate={{ opacity: 1, height: "auto" }}
                  exit={{ opacity: 0, height: 0 }}
                  transition={{ duration: 0.2 }}
                >
                  Expanded content
                </motion.div>
              )}
            </AnimatePresence>
          </TableCell>
          <TableCell className="hidden"> </TableCell>
          <TableCell className="hidden"> </TableCell>
        </TableRow>

        <TableRow key="3">
          <TableCell>Jane Fisher</TableCell>
          <TableCell>Senior Developer</TableCell>
          <TableCell>Active</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

ç

[HitEagle]

+1

[rumfiske]

+1

[theNamellessOne]

+1, but i managed to kinda improve previous workaround. thought someone might find it useful. it removes expanded row's height (it was caused by padding). and is more generalized which allows to map a collection of items to the table. but the amount of cells in expanded row has to be equal to the amount of columns. could not find a way around that

"use client";
import {
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell,
} from "@nextui-org/react";
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

export function SomeTable() {
  const items = [
    {
      name: "Tony Reicher",
      role: "CEO",
      status: "Active",
      uid: "1",
    },
    {
      name: "Jane Fisher",
      role: "Senior Developer",
      status: "Active",
      uid: "2",
    },
    {
      name: "Jane Reicher",
      role: "CTO",
      status: "Active",
      uid: "3",
    },
    {
      name: "Tony Fisher",
      role: "Devops",
      status: "Active",
      uid: "4",
    },
  ];

  return (
    <Table aria-label="Example static collection table">
      <TableHeader>
        <TableColumn>NAME</TableColumn>
        <TableColumn>ROLE</TableColumn>
        <TableColumn>STATUS</TableColumn>
      </TableHeader>
      <TableBody>
        {items.map((i) => ExpandableRow(i)).flatMap((er) => er)}
      </TableBody>
    </Table>
  );
}

const ExpandableRow = (props: {
  name: string;
  role: string;
  status: string;
  uid: string;
}) => {
  const [isContentVisible, setContentVisible] = useState(false);

  return [
    <TableRow
      key={props.uid}
      className="cursor-pointer"
      onClick={() => setContentVisible(!isContentVisible)}
    >
      <TableCell>{props.name}</TableCell>
      <TableCell>{props.role}</TableCell>
      <TableCell>{props.status}</TableCell>
    </TableRow>,
    <TableRow key={props.uid + " - expandable"}>
      <TableCell aria-colspan={3} colSpan={3} className={"bg-red-200 py-0"}>
        <AnimatePresence>
          {isContentVisible && (
            <motion.div
              initial={{ opacity: 0, height: 0, padding: 0 }}
              animate={{ opacity: 1, height: "auto", padding: "4px" }}
              exit={{ opacity: 0, height: 0, padding: 0 }}
              transition={{ duration: 0.2 }}
            >
              Expanded content
            </motion.div>
          )}
        </AnimatePresence>
      </TableCell>
      <TableCell className="hidden"> </TableCell>
      <TableCell className="hidden"> </TableCell>
    </TableRow>,
  ];
};

[imoaazahmed]

I've done this workaround and it worked for me very well, you can use it until they release a new version that includes the sub-row feature support.

The idea is straightforward: I use JavaScript to create a new after the DOM renders in the browser and remove it by getting the element by ID.

You can simply take <ToggleSubRowButton rowId={123} /> and place it in any of your table cell and pass to it an id and make sure to add this id also to your table row and the component will do everything for you it will detect the same row by id and create new sub-row when expand and remove when collapse .. no need to worry about anything just add an id to your table row and pass this id to the toggle component.

This is the custom component I've created

interface ToggleSubRowButtonProps {
	rowId: number;
}

export const ToggleSubRowButton = ({ rowId }: ToggleSubRowButtonProps) => {
	const [isExpanded, setIsExpanded] = useState(false);

	const toggleSubRow = () => {
		const rowToInsertAfter = document.getElementById(`row-${rowId}`);

		if (rowToInsertAfter) {
			if (isExpanded) {
				const existingRow = document.getElementById(`subrow-${rowId}`);
				if (existingRow) {
					existingRow.remove();
				}
			} else {
				const newRow = document.createElement("tr");
				newRow.id = `subrow-${rowId}`;
				const newCell = document.createElement("td");
				newCell.colSpan = 100;
				newCell.className = "px-4 py-4";

				const root = createRoot(newCell);
				root.render(
					<BrowserRouter>
						<AnyOtherProvider>
							<YourReactElement />
						</AnyOtherProvider>
					</BrowserRouter>
				);

				newRow.appendChild(newCell);
				rowToInsertAfter.insertAdjacentElement("afterend", newRow);
			}

			setIsExpanded(!isExpanded);
		}
	};

	return (
		<Tooltip content={isExpanded ? "Collapse" : "Expand"}>
			<Button onClick={toggleSubRow} size="sm" variant="light" isIconOnly>
				{isExpanded ? "-" : "+"}
			</Button>
		</Tooltip>
	);
};

Static table example
I'm assuming that you already know how to create and use NextUI table, its the same everything just add id prop to the <TableRow>

<Table aria-label="Example static collection table">
	<TableHeader>
		<TableColumn>NAME</TableColumn>
		<TableColumn>ROLE</TableColumn>
		<TableColumn>ACTIONS</TableColumn>
	</TableHeader>
	<TableBody>
		<TableRow key="1" id="1">
			<TableCell>Tony Reichert</TableCell>
			<TableCell>CEO</TableCell>
			<TableCell>
				<ToggleSubRowButton rowId={1} />
			</TableCell>
		</TableRow>
		<TableRow key="2" id="2">
			<TableCell>Zoey Lang</TableCell>
			<TableCell>Technical Lead</TableCell>
			<TableCell>
				<ToggleSubRowButton rowId={2} />
			</TableCell>
		</TableRow>
		<TableRow key="3" id="3">
			<TableCell>Jane Fisher</TableCell>
			<TableCell>Senior Developer</TableCell>
			<TableCell>
				<ToggleSubRowButton rowId={3} />
			</TableCell>
		</TableRow>
	</TableBody>
</Table>;

Dynamic table example
Just add the <ToggleSubRowButton rowId={item.id} /> in your renderCell function as explained in the table documents

<Table aria-label="Example dynamic collection table">
	<TableHeader columns={columns}>{(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}</TableHeader>
	<TableBody items={items ?? []} emptyContent={"No data to display."}>
		{(item) => (
			<TableRow key={item.id} id={`row-${item.id}`}>
				{(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
			</TableRow>
		)}
	</TableBody>
</Table>;

This is how it looks like for me at the end.

[dharmveer97]

test copy.zip