fix(table): fix hydration error in table component

Author: tyronejosee

src/app/(private)/dashboard/categories/client.tsx

@@ -6,7 +6,6 @@ import { useDisclosure, addToast } from "@heroui/react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SquarePenIcon, Trash2 } from "lucide-react";
-
 import {
   createCategory,
   deleteCategory,
@@ -15,7 +14,6 @@ import {
 import { CategoryDrawer } from "@/components/categories";
 import { DeleteModal, HeadingDashboard, Table } from "@/components/ui";
 import { categorySchema } from "@/lib/zod";
-
 import type { Category, CategoryForm, TableAction, TableColumn } from "@/types";
 
 type Props = {
@@ -24,17 +22,21 @@ type Props = {
 
 export default function CategoriesPageClient({ categories }: Props) {
   const router = useRouter();
+
+  // States
   const [editingCategory, setEditingCategory] = useState<Category | null>(null);
   const [categoryToDelete, setCategoryToDelete] = useState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
+  // Hooks
   const { isOpen, onOpen, onClose } = useDisclosure();
   const {
     isOpen: isConfirmOpen,
     onOpen: onConfirmOpen,
     onClose: onConfirmClose,
   } = useDisclosure();
 
+  // Form
   const {
     register,
     handleSubmit,
@@ -45,6 +47,7 @@ export default function CategoriesPageClient({ categories }: Props) {
     defaultValues: { name: "" },
   });
 
+  // Functions
   const openEditModal = (category: Category) => {
     setEditingCategory(category);
     reset({ name: category.name });
@@ -100,6 +103,7 @@ export default function CategoriesPageClient({ categories }: Props) {
     }
   };
 
+  // Constants
   const columns: TableColumn[] = [
     { name: "Name", uid: "name", sortable: true },
     { name: "Slug", uid: "slug", sortable: true },

src/components/ui/table.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Key, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import dynamic from "next/dynamic";
 import {
-  Table as HeroUITable,
   TableColumn as HeroUITableColumn,
   TableHeader,
   TableBody,
@@ -22,14 +22,20 @@ import {
 } from "@heroui/react";
 import { ChevronDown, EllipsisVertical, Plus, Search } from "lucide-react";
 import { capitalize } from "@/lib/utils";
-
 import type {
   CellRendererProps,
   FilterOption,
   TableAction,
   TableColumn,
 } from "@/types";
 
+const HeroUITable = dynamic(
+  () => import("@heroui/table").then((c) => c.Table),
+  {
+    ssr: false,
+  },
+);
+
 type Props = {
   data: any[];
   columns: TableColumn[];
@@ -99,6 +105,7 @@ export default function Table({
   maxHeight = "600px",
   emptyContent = "No data found",
 }: Props) {
+  // States
   const [filterValue, setFilterValue] = useState<string>("");
   const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
   const [visibleColumns, setVisibleColumns] = useState<Selection>(() => {
@@ -123,7 +130,7 @@ export default function Table({
 
   // Visible columns filter (server-side)
   const headerColumns = useMemo(() => {
-    let cols = [...columns];
+    const cols = [...columns];
 
     if (actions.length > 0) {
       cols.push({ name: "ACTIONS", uid: "actions", align: "center" });
@@ -153,7 +160,6 @@ export default function Table({
       );
     }
 
-    // Filter by status/category
     if (
       filterKey &&
       statusFilter !== "all" &&
@@ -365,7 +371,7 @@ export default function Table({
     [serverSide, onFilterChange],
   );
 
-  // Timeout cleanup
+  // Effects
   useEffect(() => {
     return () => {
       if (searchTimeoutRef.current) {
@@ -621,9 +627,9 @@ export default function Table({
         )}
       </TableHeader>
       <TableBody
-        emptyContent={emptyContent}
         items={sortedItems}
         isLoading={loading}
+        emptyContent={emptyContent}
         loadingContent="Loading data..."
       >
         {(item) => (