[BUG] - Table component not compatible with Server Components

[a-corsini]

NextUI Version

2.0.20

Describe the bug

When trying to use the Table component (together with its respective subcomponents: TableHeader, TableColumn, TableBody, etc.) in a Server Component, the rendering fails with an error Unknown element <[object Object]> in collection.

Adding the 'use client' directive at the top of the file fixes the issue.

Is there any way to use the Table component natively in Server Components?

Thanks!

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Copy the code from https://nextui.org/docs/components/table#usage
2. Paste it into a Server Component
3. Expect an error during rendering

Expected behavior

I expected the Table to be fully compatible with Server Components.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Safari

[yuki-yuki-engineer]

I have the same problem.

[jrgarciadev]

Hey please check this comment: #1403 (comment)

[mo-mainstream]

hello, I'm still getting this error even after adding use client at the top of the file.

I'm using "@nextui-org/table": "^2.0.23" and the latest nextjs 13.5.3 with App Router.

[ARajgor]

Server-side rendering doesn't work in table components.

The current workaround is "use client" It works fine for me.
I use create table.tsx in the components folder and import it into different server-side files. or you can directly write into the main file.

My dependencies,

"@nextui-org/react": "^2.1.13",
"framer-motion": "^10.16.4",
"next": "13.5.4",
"react": "^18",
"react-dom": "^18"

[itsdapi]

Any catch up on this?

[leomerida15]

I have already tried the solution of adding "@nextui-org/tablet" and using the "use client" in more nested components and the error continues
Operating System Version
linux (zorin - ubuntu)
Browser
edge

[Paratron]

This still happens here in Next.js 14

[phdulac]

Same problem here on next15

[Diego-Barrera-07]

Most of these bugs are generated because the use client is missing, although the library does not explain it, it probably uses react hooks which is why it fails.

Solution: Use "use client" in your component that wraps the table or tab.

[Paratron]

This is not really a solution but a workaround which adds unnecessary code to the frontend runtime. You should not be required to hydrate a static table...