From d0295ec63b6f3517ea4ccaf9f81c9d36351ff59a Mon Sep 17 00:00:00 2001
From: Mayank Rana <mayankranax1@gmail.com>
Date: Thu, 16 Oct 2025 11:27:09 +0530
Subject: [PATCH 1/2] Add Table component and its Storybook stories; update
 package dependencies

---
 package-lock.json                             |   4 +
 package.json                                  |   4 +
 .../src/components/table/index.tsx            | 103 ++++++++++++
 .../src/components/table/table.stories.tsx    | 151 ++++++++++++++++++
 4 files changed, 262 insertions(+)
 create mode 100644 packages/frappe-ui-react/src/components/table/index.tsx
 create mode 100644 packages/frappe-ui-react/src/components/table/table.stories.tsx

diff --git a/package-lock.json b/package-lock.json
index 5920106d..7d879e9f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,10 @@
       "workspaces": [
         "packages/*"
       ],
+      "dependencies": {
+        "@rtcamp/frappe-ui-react": "^1.0.0-beta.0",
+        "classnames": "^2.5.1"
+      },
       "devDependencies": {
         "@babel/plugin-transform-react-jsx": "^7.22.5",
         "@babel/preset-env": "^7.22.5",
diff --git a/package.json b/package.json
index d9110c3d..04860b41 100644
--- a/package.json
+++ b/package.json
@@ -80,5 +80,9 @@
     ],
     "*.(xml|xml.dist)": "prettier --write",
     "*.yml": "prettier --write"
+  },
+  "dependencies": {
+    "@rtcamp/frappe-ui-react": "^1.0.0-beta.0",
+    "classnames": "^2.5.1"
   }
 }
diff --git a/packages/frappe-ui-react/src/components/table/index.tsx b/packages/frappe-ui-react/src/components/table/index.tsx
new file mode 100644
index 00000000..94801891
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/index.tsx
@@ -0,0 +1,103 @@
+import { forwardRef } from "react";
+import classNames from "classnames";
+
+const Table = forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={classNames("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+));
+
+const TableHeader = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead
+    ref={ref}
+    className={classNames("[&_tr]:border-b bg-slate-50 dark:bg-slate-500 border-t", className)}
+    {...props}
+  />
+));
+
+const TableBody = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={classNames("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+));
+
+const TableFooter = forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={classNames("border-t bg-slate-500/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props}
+  />
+));
+
+const TableRow = forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={classNames("border-b transition-colors hover:bg-slate-500/50 data-[state=selected]:bg-slate-500", className)}
+    {...props}
+  />
+));
+
+const TableHead = forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={classNames("h-12 px-4 text-left align-middle font-medium text-gray-900 [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+
+const TableCell = forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={classNames("px-4 py-2 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+
+const TableCaption = forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={classNames("mt-4 text-sm text-slate-400", className)}
+    {...props}
+  />
+));
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/packages/frappe-ui-react/src/components/table/table.stories.tsx b/packages/frappe-ui-react/src/components/table/table.stories.tsx
new file mode 100644
index 00000000..d39a0a1b
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/table.stories.tsx
@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from "./index";
+
+export default {
+  title: "Components/Table",
+  component: Table,
+  parameters: {
+    layout: "centered",
+  },
+} as Meta<typeof Table>;
+
+const Template: StoryObj = {
+  render: () => (
+    <div className="p-4 w-full max-w-2xl">
+      <Table>
+        <TableCaption>Sample Table Caption</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Jane Doe</TableCell>
+            <TableCell>jane@example.com</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>John Smith</TableCell>
+            <TableCell>john@example.com</TableCell>
+            <TableCell>Inactive</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={3}>Footer: 2 users</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  ),
+};
+
+export const Basic = { ...Template };
+
+export const Advanced = {
+  render: () => (
+    <div className="p-4 w-full max-w-2xl">
+      <Table>
+        <TableCaption>Team Members & Status</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-12 border-b-2 border-blue-400">
+              Avatar
+            </TableHead>
+            <TableHead className="border-b-2 border-blue-400">Name</TableHead>
+            <TableHead className="border-b-2 border-blue-400">Email</TableHead>
+            <TableHead className="border-b-2 border-blue-400">Status</TableHead>
+            <TableHead className="border-b-2 border-blue-400">Role</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow className="odd:bg-slate-100 even:bg-white border-b border-slate-300">
+            <TableCell className="border-r border-slate-300">
+              <img
+                src="https://randomuser.me/api/portraits/women/44.jpg"
+                alt="Jane"
+                className="w-8 h-8 rounded-full"
+              />
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              Jane Doe
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              jane@example.com
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              <span className="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs font-semibold">
+                Active
+              </span>
+            </TableCell>
+            <TableCell>Developer</TableCell>
+          </TableRow>
+          <TableRow className="odd:bg-slate-100 even:bg-white border-b border-slate-300">
+            <TableCell className="border-r border-slate-300">
+              <img
+                src="https://randomuser.me/api/portraits/men/32.jpg"
+                alt="John"
+                className="w-8 h-8 rounded-full"
+              />
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              John Smith
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              john@example.com
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              <span className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full text-xs font-semibold">
+                Pending
+              </span>
+            </TableCell>
+            <TableCell>Designer</TableCell>
+          </TableRow>
+          <TableRow className="odd:bg-slate-100 even:bg-white border-b border-slate-300">
+            <TableCell className="border-r border-slate-300">
+              <img
+                src="https://randomuser.me/api/portraits/men/65.jpg"
+                alt="Alex"
+                className="w-8 h-8 rounded-full"
+              />
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              Alex Lee
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              alex@example.com
+            </TableCell>
+            <TableCell className="border-r border-slate-300">
+              <span className="bg-red-100 text-red-700 px-2 py-1 rounded-full text-xs font-semibold">
+                Inactive
+              </span>
+            </TableCell>
+            <TableCell>Manager</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell
+              colSpan={5}
+              className="text-right border-t-2 border-blue-400"
+            >
+              Footer: 3 team members
+            </TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  ),
+};

From 5bcfdbc085f1b2c7846325a322f5bf5a176921b8 Mon Sep 17 00:00:00 2001
From: Mayank Rana <mayankranax1@gmail.com>
Date: Fri, 17 Oct 2025 07:19:52 +0530
Subject: [PATCH 2/2] Wrap Tanstack table library around table component for
 single point of logic

---
 package-lock.json                             |  34 +++
 packages/frappe-ui-react/package.json         |   1 +
 .../src/components/table/components/index.ts  |   7 +
 .../components/table/components/tableBody.tsx |  17 ++
 .../table/components/tableCaption.tsx         |  13 ++
 .../components/table/components/tableCell.tsx |  18 ++
 .../table/components/tableFooter.tsx          |  18 ++
 .../components/table/components/tableHead.tsx |  20 ++
 .../table/components/tableHeader.tsx          |  18 ++
 .../components/table/components/tableRow.tsx  |  18 ++
 .../src/components/table/index.tsx            | 213 ++++++++++--------
 .../src/components/table/table.stories.tsx    | 151 -------------
 12 files changed, 283 insertions(+), 245 deletions(-)
 create mode 100644 packages/frappe-ui-react/src/components/table/components/index.ts
 create mode 100644 packages/frappe-ui-react/src/components/table/components/tableBody.tsx
 create mode 100644 packages/frappe-ui-react/src/components/table/components/tableCaption.tsx
 create mode 100644 packages/frappe-ui-react/src/components/table/components/tableCell.tsx
 create mode 100644 packages/frappe-ui-react/src/components/table/components/tableFooter.tsx
 create mode 100644 packages/frappe-ui-react/src/components/table/components/tableHead.tsx
 create mode 100644 packages/frappe-ui-react/src/components/table/components/tableHeader.tsx
 create mode 100644 packages/frappe-ui-react/src/components/table/components/tableRow.tsx
 delete mode 100644 packages/frappe-ui-react/src/components/table/table.stories.tsx

diff --git a/package-lock.json b/package-lock.json
index 7d879e9f..b6bba16d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5589,6 +5589,26 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/@tanstack/react-virtual": {
       "version": "3.13.12",
       "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
@@ -5606,6 +5626,19 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/virtual-core": {
       "version": "3.13.12",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
@@ -16154,6 +16187,7 @@
         "@radix-ui/react-toast": "^1.2.15",
         "@radix-ui/react-tooltip": "^1.2.7",
         "@tailwindcss/vite": "^4.1.11",
+        "@tanstack/react-table": "^8.21.3",
         "dayjs": "^1.11.13",
         "dompurify": "^3.2.6",
         "echarts": "^5.6.0",
diff --git a/packages/frappe-ui-react/package.json b/packages/frappe-ui-react/package.json
index c4aac6f5..ca5a4acf 100644
--- a/packages/frappe-ui-react/package.json
+++ b/packages/frappe-ui-react/package.json
@@ -34,6 +34,7 @@
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-table": "^8.21.3",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.6",
     "echarts": "^5.6.0",
diff --git a/packages/frappe-ui-react/src/components/table/components/index.ts b/packages/frappe-ui-react/src/components/table/components/index.ts
new file mode 100644
index 00000000..5c31f275
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/components/index.ts
@@ -0,0 +1,7 @@
+export { default as TableHeader } from "./tableHeader";
+export { default as TableBody } from "./tableBody";
+export { default as TableFooter } from "./tableFooter";
+export { default as TableHead } from "./tableHead";
+export { default as TableRow } from "./tableRow";
+export { default as TableCell } from "./tableCell";
+export { default as TableCaption } from "./tableCaption";
diff --git a/packages/frappe-ui-react/src/components/table/components/tableBody.tsx b/packages/frappe-ui-react/src/components/table/components/tableBody.tsx
new file mode 100644
index 00000000..2f231cc7
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/components/tableBody.tsx
@@ -0,0 +1,17 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableBody = ({
+  className,
+  children,
+  ...props
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>) => (
+  <tbody
+    className={classNames("[&_tr:last-child]:border-0", className)}
+    {...props}
+  >
+    {children}
+  </tbody>
+);
+
+export default TableBody;
diff --git a/packages/frappe-ui-react/src/components/table/components/tableCaption.tsx b/packages/frappe-ui-react/src/components/table/components/tableCaption.tsx
new file mode 100644
index 00000000..c46ff26c
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/components/tableCaption.tsx
@@ -0,0 +1,13 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableCaption = ({
+  className,
+  children,
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableCaptionElement>>) => (
+  <caption className={classNames("mt-4 text-sm text-slate-400", className)}>
+    {children}
+  </caption>
+);
+
+export default TableCaption;
diff --git a/packages/frappe-ui-react/src/components/table/components/tableCell.tsx b/packages/frappe-ui-react/src/components/table/components/tableCell.tsx
new file mode 100644
index 00000000..65f9ca37
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/components/tableCell.tsx
@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableCell = ({
+  className,
+  children,
+}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableDataCellElement>>) => (
+  <td
+    className={classNames(
+      "px-4 py-2 align-middle [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+  >
+    {children}
+  </td>
+);
+
+export default TableCell;
diff --git a/packages/frappe-ui-react/src/components/table/components/tableFooter.tsx b/packages/frappe-ui-react/src/components/table/components/tableFooter.tsx
new file mode 100644
index 00000000..29033c4d
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/components/tableFooter.tsx
@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableFooter = ({
+  className,
+  children,
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>) => (
+  <tfoot
+    className={classNames(
+      "border-t bg-slate-500/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+  >
+    {children}
+  </tfoot>
+);
+
+export default TableFooter;
diff --git a/packages/frappe-ui-react/src/components/table/components/tableHead.tsx b/packages/frappe-ui-react/src/components/table/components/tableHead.tsx
new file mode 100644
index 00000000..3c85d270
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/components/tableHead.tsx
@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableHead = ({
+  className,
+  children,
+  ...props
+}: PropsWithChildren<React.ThHTMLAttributes<HTMLTableCellElement>>) => (
+  <th
+    className={classNames(
+      "h-12 px-4 text-left align-middle font-medium text-gray-900 [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </th>
+);
+
+export default TableHead;
diff --git a/packages/frappe-ui-react/src/components/table/components/tableHeader.tsx b/packages/frappe-ui-react/src/components/table/components/tableHeader.tsx
new file mode 100644
index 00000000..7552af58
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/components/tableHeader.tsx
@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import { PropsWithChildren } from "react";
+
+const TableHeader = ({
+  className,
+  children,
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>) => (
+  <thead
+    className={classNames(
+      "[&_tr]:border-b bg-slate-50 dark:bg-slate-500 border-t",
+      className
+    )}
+  >
+    {children}
+  </thead>
+);
+
+export default TableHeader;
diff --git a/packages/frappe-ui-react/src/components/table/components/tableRow.tsx b/packages/frappe-ui-react/src/components/table/components/tableRow.tsx
new file mode 100644
index 00000000..aacc1f22
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/table/components/tableRow.tsx
@@ -0,0 +1,18 @@
+import { PropsWithChildren } from "react";
+import classNames from "classnames";
+
+const TableRow = ({
+  className,
+  children,
+}: PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>) => (
+  <tr
+    className={classNames(
+      "border-b transition-colors hover:bg-slate-500/50 data-[state=selected]:bg-slate-500",
+      className
+    )}
+  >
+    {children}
+  </tr>
+);
+
+export default TableRow;
diff --git a/packages/frappe-ui-react/src/components/table/index.tsx b/packages/frappe-ui-react/src/components/table/index.tsx
index 94801891..257b1638 100644
--- a/packages/frappe-ui-react/src/components/table/index.tsx
+++ b/packages/frappe-ui-react/src/components/table/index.tsx
@@ -1,103 +1,128 @@
-import { forwardRef } from "react";
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  OnChangeFn,
+  useReactTable,
+} from "@tanstack/react-table";
 import classNames from "classnames";
 
-const Table = forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={classNames("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-));
-
-const TableHeader = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead
-    ref={ref}
-    className={classNames("[&_tr]:border-b bg-slate-50 dark:bg-slate-500 border-t", className)}
-    {...props}
-  />
-));
+import {
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./components";
 
-const TableBody = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={classNames("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-));
+interface TableProps<TData> {
+  className?: string;
+  columns: ColumnDef<TData>[];
+  data: TData[];
+  enablePagination?: boolean;
+  paginationState?: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  onPaginationChange?: OnChangeFn<{
+    pageIndex: number;
+    pageSize: number;
+  }>;
+  componentClassNames?: {
+    caption?: string;
+    header?: string;
+    body?: string;
+    footer?: string;
+    head?: string;
+    row?: string;
+    cell?: string;
+  };
+}
 
-const TableFooter = forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={classNames("border-t bg-slate-500/50 font-medium [&>tr]:last:border-b-0", className)}
-    {...props}
-  />
-));
+function Table<TData>({
+  className,
+  columns,
+  data,
+  enablePagination = false,
+  paginationState = { pageIndex: 0, pageSize: 10 },
+  onPaginationChange,
+  componentClassNames,
+}: TableProps<TData>) {
+  const table = useReactTable<TData>({
+    columns,
+    data,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: enablePagination,
+    getPaginationRowModel: enablePagination
+      ? getPaginationRowModel()
+      : undefined,
+    onPaginationChange: enablePagination ? onPaginationChange : undefined,
+    state: {
+      pagination:
+        enablePagination ? paginationState : undefined,
+    },
+  });
 
-const TableRow = forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={classNames("border-b transition-colors hover:bg-slate-500/50 data-[state=selected]:bg-slate-500", className)}
-    {...props}
-  />
-));
+  return (
+    <div className="relative w-full overflow-auto">
+      <table className={classNames("w-full caption-bottom text-sm", className)}>
+        <TableCaption className={componentClassNames?.caption} />
 
-const TableHead = forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={classNames("h-12 px-4 text-left align-middle font-medium text-gray-900 [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-));
+        <TableHeader className={componentClassNames?.header}>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className={componentClassNames?.row}>
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  key={header.id}
+                  className={componentClassNames?.head}
+                  colSpan={header.colSpan}
+                  rowSpan={header.rowSpan}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
 
-const TableCell = forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={classNames("px-4 py-2 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-));
+        <TableBody className={componentClassNames?.body}>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id} className={componentClassNames?.row}>
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id} className={componentClassNames?.cell}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
 
-const TableCaption = forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={classNames("mt-4 text-sm text-slate-400", className)}
-    {...props}
-  />
-));
+        <TableFooter className={componentClassNames?.footer}>
+          {table.getFooterGroups().map((footerGroup) => (
+            <TableRow key={footerGroup.id} className={componentClassNames?.row}>
+              {footerGroup.headers.map((header) => (
+                <TableCell
+                  key={header.id}
+                  className={componentClassNames?.cell}
+                >
+                  {flexRender(
+                    header.column.columnDef.footer,
+                    header.getContext()
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableFooter>
+      </table>
+    </div>
+  );
+}
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-};
+export default Table;
diff --git a/packages/frappe-ui-react/src/components/table/table.stories.tsx b/packages/frappe-ui-react/src/components/table/table.stories.tsx
deleted file mode 100644
index d39a0a1b..00000000
--- a/packages/frappe-ui-react/src/components/table/table.stories.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-} from "./index";
-
-export default {
-  title: "Components/Table",
-  component: Table,
-  parameters: {
-    layout: "centered",
-  },
-} as Meta<typeof Table>;
-
-const Template: StoryObj = {
-  render: () => (
-    <div className="p-4 w-full max-w-2xl">
-      <Table>
-        <TableCaption>Sample Table Caption</TableCaption>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Status</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow>
-            <TableCell>Jane Doe</TableCell>
-            <TableCell>jane@example.com</TableCell>
-            <TableCell>Active</TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell>John Smith</TableCell>
-            <TableCell>john@example.com</TableCell>
-            <TableCell>Inactive</TableCell>
-          </TableRow>
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TableCell colSpan={3}>Footer: 2 users</TableCell>
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </div>
-  ),
-};
-
-export const Basic = { ...Template };
-
-export const Advanced = {
-  render: () => (
-    <div className="p-4 w-full max-w-2xl">
-      <Table>
-        <TableCaption>Team Members & Status</TableCaption>
-        <TableHeader>
-          <TableRow>
-            <TableHead className="w-12 border-b-2 border-blue-400">
-              Avatar
-            </TableHead>
-            <TableHead className="border-b-2 border-blue-400">Name</TableHead>
-            <TableHead className="border-b-2 border-blue-400">Email</TableHead>
-            <TableHead className="border-b-2 border-blue-400">Status</TableHead>
-            <TableHead className="border-b-2 border-blue-400">Role</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          <TableRow className="odd:bg-slate-100 even:bg-white border-b border-slate-300">
-            <TableCell className="border-r border-slate-300">
-              <img
-                src="https://randomuser.me/api/portraits/women/44.jpg"
-                alt="Jane"
-                className="w-8 h-8 rounded-full"
-              />
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              Jane Doe
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              jane@example.com
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              <span className="bg-green-100 text-green-700 px-2 py-1 rounded-full text-xs font-semibold">
-                Active
-              </span>
-            </TableCell>
-            <TableCell>Developer</TableCell>
-          </TableRow>
-          <TableRow className="odd:bg-slate-100 even:bg-white border-b border-slate-300">
-            <TableCell className="border-r border-slate-300">
-              <img
-                src="https://randomuser.me/api/portraits/men/32.jpg"
-                alt="John"
-                className="w-8 h-8 rounded-full"
-              />
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              John Smith
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              john@example.com
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              <span className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full text-xs font-semibold">
-                Pending
-              </span>
-            </TableCell>
-            <TableCell>Designer</TableCell>
-          </TableRow>
-          <TableRow className="odd:bg-slate-100 even:bg-white border-b border-slate-300">
-            <TableCell className="border-r border-slate-300">
-              <img
-                src="https://randomuser.me/api/portraits/men/65.jpg"
-                alt="Alex"
-                className="w-8 h-8 rounded-full"
-              />
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              Alex Lee
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              alex@example.com
-            </TableCell>
-            <TableCell className="border-r border-slate-300">
-              <span className="bg-red-100 text-red-700 px-2 py-1 rounded-full text-xs font-semibold">
-                Inactive
-              </span>
-            </TableCell>
-            <TableCell>Manager</TableCell>
-          </TableRow>
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TableCell
-              colSpan={5}
-              className="text-right border-t-2 border-blue-400"
-            >
-              Footer: 3 team members
-            </TableCell>
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </div>
-  ),
-};