From c827329cddec7534339434ef8698c82871738709 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Thu, 11 Jul 2024 18:25:54 +0200
Subject: [PATCH] add primeng datatable

---
 frontend/bun.lockb                            | Bin 138157 -> 140758 bytes
 frontend/package.json                         |   1 +
 .../db-table-view/data-table-prime.tsx        | 111 +++++
 frontend/src/index.css                        |   1 +
 frontend/src/main.tsx                         |  26 +-
 .../db/$dbName/tables/$tableName/data.tsx     |   8 +-
 frontend/src/styles/datatable.tsx             | 379 ++++++++++++++++++
 frontend/tailwind.config.js                   |   1 +
 8 files changed, 523 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/db-table-view/data-table-prime.tsx
 create mode 100644 frontend/src/styles/datatable.tsx

diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index c031b9245b4934b0ff82f804d0a3089665a4d4ec..ab4ef86bf120a3ae8117ab62d9d35d268a55b08b 100644
GIT binary patch
delta 24830
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
b^z~LNW(NwF^{i@c?PF|7aPCY=@^t?nDm&++

delta 23081
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

diff --git a/frontend/package.json b/frontend/package.json
index 38ae999..20005bc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,6 +31,7 @@
     "clsx": "^2.1.1",
     "ky": "^1.4.0",
     "lucide-react": "^0.400.0",
+    "primereact": "^10.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sonner": "^1.5.0",
diff --git a/frontend/src/components/db-table-view/data-table-prime.tsx b/frontend/src/components/db-table-view/data-table-prime.tsx
new file mode 100644
index 0000000..076baf3
--- /dev/null
+++ b/frontend/src/components/db-table-view/data-table-prime.tsx
@@ -0,0 +1,111 @@
+import {
+  Button,
+  DataTablePagination,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  ScrollArea,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui";
+import { cn, isImageUrl, isUrl } from "@/lib/utils";
+import { useTableColumnsQuery, useTableDataQuery } from "@/services/db";
+import { useSettingsStore } from "@/state";
+import {
+  type ColumnDef,
+  type OnChangeFn,
+  type PaginationState,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowUp, Rows3 } from "lucide-react";
+import { Column } from "primereact/column";
+import { DataTable } from "primereact/datatable";
+import { usePassThrough } from "primereact/passthrough";
+import { useMemo, useState } from "react";
+export const DataTablePrime = ({
+  tableName,
+  dbName,
+  offset,
+  pageSize,
+  onPageSizeChange,
+  onPageIndexChange,
+}: {
+  tableName: string;
+  offset: number;
+  dbName: string;
+  pageSize: number;
+  onPageIndexChange: (pageIndex: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+}) => {
+  const formatDates = useSettingsStore.use.formatDates();
+  const showImagesPreview = useSettingsStore.use.showImagesPreview();
+  const paginationOptions = useSettingsStore.use.paginationOptions();
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+
+  const { data: columns } = useTableColumnsQuery({ dbName, tableName });
+  const { data } = useTableDataQuery({
+    tableName,
+    dbName,
+    perPage: pageSize,
+    page: Math.floor(offset / pageSize),
+    sortDesc: sorting[0]?.desc,
+    sortField: sorting[0]?.id,
+  });
+
+  return (
+    <div className={"flex flex-col gap-4 flex-1 max-h-full h-full pb-3"}>
+      <div className={"flex gap-4 items-center justify-between"}>
+        <h1 className="text-2xl font-bold flex items-center gap-2">
+          <Rows3 /> {tableName}
+        </h1>
+        <p>
+          Rows: <strong>{data?.count}</strong>
+        </p>
+      </div>
+      <div className="min-h-0 h-full w-full min-w-0">
+        <DataTable
+          rows={pageSize}
+          lazy
+          first={offset}
+          onPage={(e) => {
+            if (e.rows !== pageSize) {
+              onPageSizeChange(e.rows);
+            } else if (e.first !== offset) {
+              onPageIndexChange(e.first);
+            }
+          }}
+          paginator
+          totalRecords={data?.count}
+          rowsPerPageOptions={paginationOptions}
+          stripedRows
+          columnResizeMode="expand"
+          resizableColumns
+          showGridlines
+          size="small"
+          value={data?.data}
+          tableStyle={{ minWidth: "100%" }}
+          scrollable
+          scrollHeight="flex"
+        >
+          {columns?.map((col) => (
+            <Column
+              key={col.column_name}
+              field={col.column_name}
+              header={col.column_name}
+            />
+          ))}
+        </DataTable>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0943dc8..1316ae5 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   input[type=number] {
     -moz-appearance:textfield;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 0df4cb6..6bb61e1 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,6 +1,10 @@
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
+
+import { PrimeReactProvider } from "primereact/api";
+import Tailwind from "primereact/passthrough/tailwind";
+import { twMerge } from "tailwind-merge";
 import "@fontsource/inter/300.css";
 import "@fontsource/inter/400.css";
 import "@fontsource/inter/500.css";
@@ -9,6 +13,7 @@ import "@fontsource/inter/700.css";
 import "@fontsource/inter/800.css";
 import "./index.css";
 import { Toaster } from "@/components/ui";
+import { datatable } from "@/styles/datatable";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 // Import the generated route tree
@@ -31,6 +36,11 @@ const queryClient = new QueryClient({
   },
 });
 
+const PrimeStyles = {
+  ...Tailwind,
+  datatable,
+};
+
 // Render the app
 const rootElement = document.getElementById("root");
 if (rootElement && !rootElement.innerHTML) {
@@ -42,8 +52,20 @@ if (rootElement && !rootElement.innerHTML) {
           initialIsOpen={false}
           buttonPosition={"bottom-left"}
         />
-        <Toaster richColors />
-        <RouterProvider router={router} />
+        <PrimeReactProvider
+          value={{
+            unstyled: true,
+            pt: PrimeStyles,
+            ptOptions: {
+              mergeSections: true,
+              mergeProps: true,
+              classNameMergeFunction: twMerge,
+            },
+          }}
+        >
+          <Toaster richColors />
+          <RouterProvider router={router} />
+        </PrimeReactProvider>
       </QueryClientProvider>
     </StrictMode>,
   );
diff --git a/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx b/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx
index 5937aaa..e3a72d8 100644
--- a/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx
+++ b/frontend/src/routes/db/$dbName/tables/$tableName/data.tsx
@@ -1,4 +1,5 @@
 import { DataTable } from "@/components/db-table-view/data-table";
+import { DataTablePrime } from "@/components/db-table-view/data-table-prime";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { z } from "zod";
 
@@ -18,22 +19,25 @@ function TableView() {
   const navigate = useNavigate({ from: Route.fullPath });
 
   const updatePageSize = (value: number) => {
+    console.log(value);
     return void navigate({
       search: (prev) => ({ ...prev, pageSize: value, pageIndex: 0 }),
     });
   };
   const updatePageIndex = (pageIndex: number) => {
+    console.log(pageIndex);
+
     return void navigate({ search: (prev) => ({ ...prev, pageIndex }) });
   };
 
   return (
     <div className="p-3 h-layout w-layout">
-      <DataTable
+      <DataTablePrime
         key={tableName}
         dbName={dbName}
         tableName={tableName}
         pageSize={pageSize}
-        pageIndex={pageIndex}
+        offset={pageIndex}
         onPageIndexChange={updatePageIndex}
         onPageSizeChange={updatePageSize}
       />
diff --git a/frontend/src/styles/datatable.tsx b/frontend/src/styles/datatable.tsx
new file mode 100644
index 0000000..bab2952
--- /dev/null
+++ b/frontend/src/styles/datatable.tsx
@@ -0,0 +1,379 @@
+import { cn } from "@/lib/utils";
+import type { DataTablePassThroughOptions } from "primereact/datatable";
+
+const TRANSITIONS = {
+  overlay: {
+    timeout: 150,
+    classNames: {
+      enter: "opacity-0 scale-75",
+      enterActive:
+        "opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in",
+      exit: "opacity-100",
+      exitActive: "!opacity-0 transition-opacity duration-150 ease-linear",
+    },
+  },
+};
+
+export const datatable: DataTablePassThroughOptions = {
+  root: ({ props }) => ({
+    className: cn("relative", {
+      "flex flex-col h-full": props.scrollable && props.scrollHeight === "flex",
+    }),
+  }),
+  loadingoverlay: {
+    className: cn(
+      "fixed w-full h-full t-0 l-0 bg-gray-100/40",
+      "transition duration-200",
+      "absolute flex items-center justify-center z-2",
+      "dark:bg-gray-950/40", // Dark Mode
+    ),
+  },
+  loadingicon: "w-8 h-8",
+  wrapper: ({ props }) => ({
+    className: cn({
+      relative: props.scrollable,
+      "flex flex-col grow h-full":
+        props.scrollable && props.scrollHeight === "flex",
+    }),
+  }),
+  header: ({ props }) => ({
+    className: cn(
+      "bg-slate-50 text-slate-700 border-gray-300 font-bold p-4",
+      "dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
+      props.showGridlines
+        ? "border-x border-t border-b-0"
+        : "border-y border-x-0",
+    ),
+  }),
+  table: "w-full border-spacing-0 text-sm",
+  thead: ({ context }) => ({
+    className: cn({
+      "bg-slate-50 top-0 z-[1]": context.scrollable,
+    }),
+  }),
+  tbody: ({ props, context }) => ({
+    className: cn({
+      "sticky z-[1]": props.frozenRow && context.scrollable,
+    }),
+  }),
+  tfoot: ({ context }) => ({
+    className: cn({
+      "bg-slate-50 bottom-0 z-[1]": context.scrollable,
+    }),
+  }),
+  footer: {
+    className: cn(
+      "bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4",
+      "dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
+    ),
+  },
+  column: {
+    headercell: ({ context, props }) => ({
+      className: cn(
+        "text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold",
+        "transition duration-200",
+        context?.size === "small"
+          ? "p-2"
+          : context?.size === "large"
+            ? "p-5"
+            : "p-4", // Size
+        context.sorted
+          ? "bg-blue-50 text-blue-700"
+          : "bg-slate-50 text-slate-700", // Sort
+        context.sorted
+          ? "dark:text-white/80 dark:bg-blue-300"
+          : "dark:text-white/80 dark:bg-gray-900", // Dark Mode
+        {
+          "sticky z-[1]": props.frozen || props.frozen === "", // Frozen Columns
+          "border-x border-y": context?.showGridlines,
+          "overflow-hidden space-nowrap border-y relative bg-clip-padding":
+            context.resizable, // Resizable
+        },
+      ),
+    }),
+    headercontent: "flex items-center font-medium text-muted-foreground",
+    bodycell: ({ props, context }) => ({
+      className: cn(
+        "text-left border-0 border-b border-solid border-gray-300",
+        context?.size === "small"
+          ? "p-2"
+          : context?.size === "large"
+            ? "p-5"
+            : "p-4", // Size
+        "dark:text-white/80 dark:border-blue-900/40", // Dark Mode
+        {
+          "sticky bg-inherit": props && (props.frozen || props.frozen === ""), // Frozen Columns
+          "border-x border-y": context.showGridlines,
+        },
+      ),
+    }),
+    footercell: ({ context }) => ({
+      className: cn(
+        "text-left border-0 border-b border-solid border-gray-300 font-bold",
+        "bg-slate-50 text-slate-700",
+        "transition duration-200",
+        context?.size === "small"
+          ? "p-2"
+          : context?.size === "large"
+            ? "p-5"
+            : "p-4", // Size
+        "dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40", // Dark Mode
+        {
+          "border-x border-y": context.showGridlines,
+        },
+      ),
+    }),
+    sorticon: ({ context }) => ({
+      className: cn(
+        "ml-2",
+        context.sorted
+          ? "text-blue-700 dark:text-white/80"
+          : "text-slate-700 dark:text-white/70",
+      ),
+    }),
+    sortbadge: {
+      className: cn(
+        "flex items-center justify-center align-middle",
+        "rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2",
+        "text-blue-700 bg-blue-50",
+        "dark:text-white/80 dark:bg-blue-400", // Dark Mode
+      ),
+    },
+    columnfilter: "inline-flex items-center ml-auto",
+    filteroverlay: {
+      className: cn(
+        "bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]",
+        "dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80", //Dark Mode
+      ),
+    },
+    filtermatchmodedropdown: {
+      root: "min-[0px]:flex mb-2",
+    },
+    filterrowitems: "m-0 p-0 py-3 list-none ",
+    filterrowitem: ({ context }) => ({
+      className: cn(
+        "m-0 py-3 px-5 bg-transparent",
+        "transition duration-200",
+        context?.highlighted
+          ? "text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300"
+          : "text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent",
+      ),
+    }),
+    filteroperator: {
+      className: cn(
+        "px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md",
+        "dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900", // Dark Mode
+      ),
+    },
+    filteroperatordropdown: {
+      root: "min-[0px]:flex",
+    },
+    filterconstraint:
+      "p-5 border-b border-solid border-gray-300 dark:border-blue-900/40",
+    filteraddrule: "py-3 px-5",
+    filteraddrulebutton: {
+      root: "justify-center w-full min-[0px]:text-sm",
+      label: "flex-auto grow-0",
+      icon: "mr-2",
+    },
+    filterremovebutton: {
+      root: "ml-2",
+      label: "grow-0",
+    },
+    filterbuttonbar: "flex items-center justify-between p-5",
+    filterclearbutton: {
+      root: "w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3",
+    },
+    filterapplybutton: {
+      root: "w-auto min-[0px]:text-sm px-4 py-3",
+    },
+    filtermenubutton: ({ context }) => ({
+      className: cn(
+        "inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2",
+        "w-8 h-8 rounded-[50%]",
+        "transition duration-200",
+        "hover:text-slate-700 hover:bg-gray-300/20", // Hover
+        "focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", // Focus
+        "dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900", // Dark Mode
+        {
+          "bg-blue-50 text-blue-700": context.active,
+        },
+      ),
+    }),
+    headerfilterclearbutton: ({ context }) => ({
+      className: cn(
+        "inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative",
+        "text-left bg-transparent m-0 p-0 border-none select-none ml-2",
+        {
+          invisible: !context.hidden,
+        },
+      ),
+    }),
+    columnresizer:
+      "block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent",
+    rowreordericon: "cursor-move",
+    roweditorinitbutton: {
+      className: cn(
+        "inline-flex items-center justify-center overflow-hidden relative",
+        "text-left cursor-pointer select-none",
+        "w-8 h-8 border-0 rounded-[50%]",
+        "transition duration-200",
+        "text-slate-700 border-transparent",
+        "focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
+        "hover:text-slate-700 hover:bg-gray-300/20", //Hover
+        "dark:text-white/70", // Dark Mode
+      ),
+    },
+    roweditorsavebutton: {
+      className: cn(
+        "inline-flex items-center justify-center overflow-hidden relative",
+        "text-left cursor-pointer select-none",
+        "w-8 h-8 border-0 rounded-[50%]",
+        "transition duration-200",
+        "text-slate-700 border-transparent",
+        "focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
+        "hover:text-slate-700 hover:bg-gray-300/20", //Hover
+        "dark:text-white/70", // Dark Mode
+      ),
+    },
+    roweditorcancelbutton: {
+      className: cn(
+        "inline-flex items-center justify-center overflow-hidden relative",
+        "text-left cursor-pointer select-none",
+        "w-8 h-8 border-0 rounded-[50%]",
+        "transition duration-200",
+        "text-slate-700 border-transparent",
+        "focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]", //Focus
+        "hover:text-slate-700 hover:bg-gray-300/20", //Hover
+        "dark:text-white/70", // Dark Mode
+      ),
+    },
+    radioButton: {
+      className: cn(
+        "relative inline-flex cursor-pointer select-none align-bottom",
+        "w-6 h-6",
+      ),
+    },
+    radioButtonInput: {
+      className: cn(
+        "w-full h-full top-0 left-0 absolute appearance-none select-none",
+        "p-0 m-0 opacity-0 z-[1] rounded-[50%] outline-none",
+        "cursor-pointer peer",
+      ),
+    },
+    radioButtonBox: ({ context }) => ({
+      className: cn(
+        "flex items-center justify-center",
+        "h-6 w-6 rounded-full border-2 text-gray-700 transition duration-200 ease-in-out",
+        context.checked
+          ? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400 peer-hover:bg-blue-700 peer-hover:border-blue-700"
+          : "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 peer-hover:border-blue-500",
+        {
+          "hover:border-blue-500 focus:shadow-input-focus focus:outline-none focus:outline-offset-0 dark:hover:border-blue-400 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
+            !context.disabled,
+          "cursor-default opacity-60": context.disabled,
+        },
+      ),
+    }),
+    radioButtonIcon: ({ context }) => ({
+      className: cn(
+        "transform rounded-full",
+        "block h-3 w-3 bg-white transition duration-200 dark:bg-gray-900",
+        {
+          "backface-hidden scale-10 invisible": context.checked === false,
+          "visible scale-100 transform": context.checked === true,
+        },
+      ),
+    }),
+    headercheckboxwrapper: {
+      className: cn(
+        "cursor-pointer inline-flex relative select-none align-bottom",
+        "w-6 h-6",
+      ),
+    },
+    headercheckbox: ({ context }) => ({
+      className: cn(
+        "flex items-center justify-center",
+        "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
+        context.checked
+          ? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400"
+          : "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900",
+        {
+          "hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
+            !context.disabled,
+          "cursor-default opacity-60": context.disabled,
+        },
+      ),
+    }),
+    headercheckboxicon:
+      "w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900",
+    checkboxwrapper: {
+      className: cn(
+        "cursor-pointer inline-flex relative select-none align-bottom",
+        "w-6 h-6",
+      ),
+    },
+    checkbox: ({ context }) => ({
+      className: cn(
+        "flex items-center justify-center",
+        "border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200",
+        context.checked
+          ? "border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400"
+          : "border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900",
+        {
+          "hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]":
+            !context.disabled,
+          "cursor-default opacity-60": context.disabled,
+        },
+      ),
+    }),
+    checkboxicon:
+      "w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900",
+    transition: TRANSITIONS.overlay,
+  },
+  bodyrow: ({ context }) => ({
+    className: cn(
+      context.selected
+        ? "bg-blue-50 text-blue-700 dark:bg-blue-300"
+        : "bg-white text-foreground dark:bg-gray-900",
+      context.stripedRows &&
+        (context.index % 2 === 0
+          ? "bg-white text-foreground dark:bg-gray-900"
+          : "bg-muted/50 text-foreground dark:bg-gray-950"),
+      "transition duration-200",
+      "focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]", // Focus
+      "dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]", // Dark Mode
+      {
+        "cursor-pointer": context.selectable,
+        "hover:bg-gray-300/20 hover:text-gray-600":
+          context.selectable && !context.selected, // Hover
+      },
+    ),
+  }),
+  rowexpansion: "bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80",
+  rowgroupheader: {
+    className: cn(
+      "sticky z-[1]",
+      "bg-white text-gray-600",
+      "transition duration-200",
+    ),
+  },
+  rowgroupfooter: {
+    className: cn(
+      "sticky z-[1]",
+      "bg-white text-gray-600",
+      "transition duration-200",
+    ),
+  },
+  rowgrouptoggler: {
+    className: cn(
+      "text-left m-0 p-0 cursor-pointer select-none",
+      "inline-flex items-center justify-center overflow-hidden relative",
+      "w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]",
+      "transition duration-200",
+      "dark:text-white/70", // Dark Mode
+    ),
+  },
+  rowgrouptogglericon: "inline-block w-4 h-4",
+  resizehelper: "absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300",
+};
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a6dbb40..59afa9f 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     "./components/**/*.{ts,tsx}",
     "./app/**/*.{ts,tsx}",
     "./src/**/*.{ts,tsx}",
+    "./node_modules/primereact/**/*.{js,ts,jsx,tsx}",
   ],
   prefix: "",
   theme: {