[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>,
  ];
};