[BUG] - Hydration Error with Table selectionMode = multiple

[TwoWheelDev]

NextUI Version

2.6.8

Describe the bug

Using the example code from https://nextui.org/docs/components/table#use-case-example, causes a hydration error.

I have added the 'use client' as required (since the page uses useState etc).

Digging into it, if I change selectionMode="multiple" to selectionMode="single" the hydration error disappars, so the error appears to be with the column that is added to allow multiple selections

Your Example Website or App

https://codesandbox.io/p/devbox/elastic-tu-vydmx3?workspaceId=ws_WuwAJnJobgVN2wdMCvZdPR

Steps to Reproduce the Bug or Issue

Create a page, using the table full use case example - https://nextui.org/docs/components/table#use-case-example

Expected behavior

No Hydration Error

Screenshots or Videos

Operating System Version

Linux

Browser

Firefox

[linear[bot]]

ENG-1751 [BUG] - Hydration Error with Table selectionMode = multiple

[shahinali-dev]

I also face this issue, is it fixed or still happening?

[stiyyagura0901]

This worked for me. Might not be an ideal solution.

[largeprob]

我也遇到这样的错误存在，只要将表格切换为多选模式。 I also encountered such an error, just switch the table to multi select mode.

"@nextui-org/table": "^2.2.7", "next": "15.1.0", "react": "18.3.1", "react-dom": "18.3.1", "typescript": "5.6.3"

[SivaGanesh56]

+1

[J4v4Scr1pt]

I also face this issue, Don't use use NextThemeProvider as they talked about in suggested solution above.

[michaeltintiuc]

NextThemeProvider has nothing to do with this, you can see that the code sample doesn't even use it, the issue is that an extra th is injected for row selection

[tartane]

Also having this issue, not using the NextThemeProvider. Removing the selectionMode="multiple" from the <Table> removes the error. any updates on this?

[nohira]

Facing same issue with selectionMode="multiple". I hope we'll having fix as it's a quite common feature to have multi selection on table.

[davidaragundy]

this still an annoying issue :c

[davidaragundy]

for now, you can use:

import dynamic from "next/dynamic";

const Table = dynamic(() => import("@heroui/table").then((c) => c.Table), {
  ssr: false,
});

This MUST be inside a client component

[lukasssicevs]

Same issue here.

[JosepCumplido]

Same issue

[MM25Zamanian]

[joshuarussell10]

+1

[edarioq]

The fix above works well. I was doing this to get the error to go away:

const [isHydrated, setIsHydrated] = useState(false);

useEffect(() => {
    setIsHydrated(true);

    return () => {
      setIsHydrated(false);
    };
  }, []);