[Bug]: DataTableDemo causes Hydration Error in Nextjs

[harryhanYuhao]

Describe the bug

Data table demo causes hydration error with nextjs. I use exactly the same code that is the first example shown here.

Affected component/components

Input

How to reproduce

Use the example data table demo as a react component and hydration error will be shown. It seems like if the <Input> components is commented the hydration error will stop.

It also seems like that if I use

  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

to ensure the component is only rendered in the client side there will also be no errors.

This error is reproduced in codesandbox.

Codesandbox/StackBlitz link

https://codesandbox.io/p/live/aafbf382-588e-4f61-8fca-9254ced395b9

Logs

No response

System Info

This error is reproduced in Code sandbox.

My system is Arch Linux. Browser firefox 123.0.1.

Here is `package.json`

{
  "name": "shadcn-data_table",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@tanstack/react-table": "^8.13.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.3",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues

[Ahmadmidlaj]

even iam facing the same issue

[Tigatok]

I have the same issue, it appears when using a cell render for me, that I get hydration issues. Even something as simple as

export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ cell }) => {
      return <TableCell>asdf</TableCell>
    },
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  {
    accessorKey: 'amount',
    header: 'Amount',
  },
]

throws the error. Update: I notice that it happens with the TableCell being rendered. If we try a different component, then there is no problem, such as:

export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: 'status',
    header: 'Status',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  {
    accessorKey: 'amount',
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue('amount'))
      const formatted = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
      }).format(amount)

      return <div className="text-right font-medium">{formatted}</div>
    },
  },
  {
    id: 'actions',
    cell: ({ row }) => {
      const payment = row.original

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuLabel>Actions</DropdownMenuLabel>
            <DropdownMenuItem
              onClick={() => navigator.clipboard.writeText(payment.id)}
            >
              Copy payment ID
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>View customer</DropdownMenuItem>
            <DropdownMenuItem>View payment details</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
]

[SgtErnestBilko]

I have the same issue. I can remove the error by methods 1 or 2 from https://nextjs.org/docs/messages/react-hydration-error.

However any changes to columns.tsx do not appear in the rendered page. See my stack exchange question for more detail. https://stackoverflow.com/questions/78695847/nextjs-shadhui-datatable-persistent-cache

I hope someone can help as progress on my project has come to a complete halt in the last 24 hours.