[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