diff --git a/packages/ui/components/table/TableExamples.tsx b/packages/ui/components/table/TableExamples.tsx
new file mode 100644
index 0000000000..5b6616d45c
--- /dev/null
+++ b/packages/ui/components/table/TableExamples.tsx
@@ -0,0 +1,83 @@
+import { Table } from "./Table";
+import { TableActions } from "./TableActions";
+import {
+ Table as TableNew,
+ TableHeader,
+ TableRow,
+ TableHead,
+ TableBody,
+ TableCell,
+ TableFooter,
+ TableCaption,
+} from "./TableNew";
+
+export const TableNewExampleComponent = () => (
+
+
+
+ Header Column 1
+ Header Column 2
+
+
+
+
+ Row 1, Cell 1
+ Row 1, Cell 2
+
+
+ Row 2, Cell 1
+ Row 2, Cell 2
+
+
+
+
+ Row 3(footer), Cell 1
+ Row 3(footer), Cell 2
+
+
+ Table Caption
+
+);
+
+export const TableExampleComponent = () => (
+
+
+
+ Title Column 1
+ Title Column 2
+
+
+
+
+ Row 1, Cell 1
+ Row 1, Cell 2
+
+
+ Row 2, Cell 1
+ Row 2, Cell 2
+
+
+
+
+
+
+);
diff --git a/packages/ui/components/table/table.stories.mdx b/packages/ui/components/table/table.stories.mdx
new file mode 100644
index 0000000000..175f5f2a5d
--- /dev/null
+++ b/packages/ui/components/table/table.stories.mdx
@@ -0,0 +1,48 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import {
+ Examples,
+ Example,
+ Title,
+ VariantsTable,
+ CustomArgsTable,
+ VariantRow,
+} from "@calcom/storybook/components";
+
+import { Table } from "./Table";
+import { TableExampleComponent } from "./TableExamples";
+
+
+
+
+
+## Definition
+
+The `Table` component is a HTML table that utilizes Tailwind classes to enhance its styles.
+
+## Structure
+
+The `Table` component should be used with other table sub-components (present as object attributes) that follow the same pattern.
+These components render common elements that are styled with Tailwind. These components include:
+
+- `Body` -> (`tbody`)
+- `Header` -> (`thead`)
+- `Row` -> (`tr`)
+- `ColumnTitle` -> (`th`)
+- `Cell` -> (`td`)
+
+
+
+
+
+
diff --git a/packages/ui/components/table/table.test.tsx b/packages/ui/components/table/table.test.tsx
index 39c3869832..6a38423ef1 100644
--- a/packages/ui/components/table/table.test.tsx
+++ b/packages/ui/components/table/table.test.tsx
@@ -2,9 +2,9 @@
import { fireEvent, render } from "@testing-library/react";
import { vi } from "vitest";
-import { Table, TableActions } from "@calcom/ui";
+import { TableActions } from "@calcom/ui";
-import { TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./TableNew";
+import { TableNewExampleComponent } from "./TableExamples";
const mockActions = [
{
@@ -21,31 +21,7 @@ const mockActions = [
describe("tests for Table component", () => {
test("Should render Table component correctly", () => {
- const { getByRole, getByText } = render(
- <>
-
- <>
-
-
- Header Column 1
- Header Column 2
-
-
-
-
- Row 1, Cell 1
- Row 1, Cell 2
-
-
- Row 2, Cell 1
- Row 2, Cell 2
-
-
- Table Caption
- >
-
- >
- );
+ const { getByRole, getByText } = render();
const headerElement1 = getByRole("columnheader", { name: "Header Column 1" });
const headerElement2 = getByRole("columnheader", { name: "Header Column 2" });
diff --git a/packages/ui/components/table/tableNew.stories.mdx b/packages/ui/components/table/tableNew.stories.mdx
new file mode 100644
index 0000000000..2399903168
--- /dev/null
+++ b/packages/ui/components/table/tableNew.stories.mdx
@@ -0,0 +1,50 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import {
+ Examples,
+ Example,
+ Title,
+ VariantsTable,
+ CustomArgsTable,
+ VariantRow,
+} from "@calcom/storybook/components";
+
+import { TableNewExampleComponent } from "./TableExamples";
+import { Table } from "./TableNew";
+
+
+
+
+
+## Definition
+
+The `Table` component (from TableNew.tsx) is a HTML table that utilizes Tailwind classes to enhance its styles.
+
+## Structure
+
+The `Table` component should be used with other table sub-components (exported in the same file) that follow the same pattern.
+These components render common elements that are styled with Tailwind. These components include:
+
+- `TableBody` -> (`tbody`)
+- `TableHeader` -> (`thead`)
+- `TableRow` -> (`tr`)
+- `TableHead` -> (`th`)
+- `TableCell` -> (`td`)
+- `TableFooter` -> (`tfoot`)
+- `TableCaption` -> (`caption`)
+
+
+
+
+
+