Certain NextUI Components Require Client-Side Subcomponents in Next.js

[lepresk]

Hello,

This is my first time using NextUI with Next.js, and I am encountering an issue where certain components, such as Table and Breadcrumbs, only work when I create them as fully client-side subcomponents. This requirement is not mentioned in the documentation. Here are examples:

❌ Does not work:

page_layout.tsx

import { Breadcrumbs, BreadcrumbItem } from "@nextui-org/breadcrumbs";

export default function PageLayout({ title, navigation }: { title: string, navigation: Array<string> }) {
  return (
    <div className="flex w-full">
      <h1>{title}</h1>
      <Breadcrumbs>
        {navigation.map((item) => <BreadcrumbItem key={item}>{item}</BreadcrumbItem>)}
      </Breadcrumbs>
    </div>
  );
}

✅ Works:

page_layout.tsx

import Nav from './nav';

export default function PageLayout({ title, navigation }: { title: string, navigation: Array<string> }) {
  return (
    <div className="flex w-full">
      <h1>{title}</h1>
      <Nav navigation={navigation} />
    </div>
  );
}

nav.tsx

"use client";

import { Breadcrumbs, BreadcrumbItem } from "@nextui-org/breadcrumbs";

export default function Nav({ navigation }: { navigation: Array<string> }) {
  return (
    <Breadcrumbs>
      {navigation.map((item) => <BreadcrumbItem key={item}>{item}</BreadcrumbItem>)}
    </Breadcrumbs>
  );
}

Table Component Example:

❌ Does not work:

import {
  Table,
  TableHeader,
  TableColumn,
  TableBody,
  TableRow,
  TableCell,
} from "@nextui-org/table";

export default function UserList() {
  return (
    <div className="w-full flex flex-col gap-4">
      <h1>User List</h1>

      <Table aria-label="Example static collection table">
        <TableHeader>
          <TableColumn>NAME</TableColumn>
          <TableColumn>ROLE</TableColumn>
          <TableColumn>STATUS</TableColumn>
        </TableHeader>
        <TableBody>
          <TableRow key="1">
            <TableCell>Tony Reichert</TableCell>
            <TableCell>CEO</TableCell>
            <TableCell>Active</TableCell>
          </TableRow>
          <TableRow key="2">
            <TableCell>Zoey Lang</TableCell>
            <TableCell>Technical Lead</TableCell>
            <TableCell>Paused</TableCell>
          </TableRow>
          <TableRow key="3">
            <TableCell>Jane Fisher</TableCell>
            <TableCell>Senior Developer</TableCell>
            <TableCell>Active</TableCell>
          </TableRow>
          <TableRow key="4">
            <TableCell>William Howard</TableCell>
            <TableCell>Community Manager</TableCell>
            <TableCell>Vacation</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

When I make the table a client-side subcomponent, it works fine.

Is this behavior normal? It is not mentioned in the component documentation.

Thank you.

[wingkwong]

We included use client directive by default. However, it doesn't work for collection-based components, such as listbox, menu, table, dropdown and etc. Basically the root cause is the way how react-aria built the collection. We've noticed that RA has done something and we need to dig it to see how we could integrate with it.