[WEB-1954] chore: implemented table component in ui library (#5125)

* chore: implemented table component in ui library

* chore: added export in the UI package

packages/ui/src/index.ts

@@ -22,3 +22,4 @@ export * from "./favorite-star";
 export * from "./loader";
 export * from "./collapsible";
 export * from "./popovers";
+export * from "./tables";

packages/ui/src/tables/index.ts

@@ -0,0 +1 @@
+export * from "./table";

packages/ui/src/tables/table.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Table } from "./table";
+
+const meta: Meta<typeof Table> = {
+  title: "Table",
+  component: Table,
+};
+
+export default meta;
+
+// types
+type TTableData = {
+  id: string;
+  name: string;
+  age: number;
+};
+
+type Story = StoryObj<typeof Table<TTableData>>;
+
+// data
+const tableData: TTableData[] = [
+  { id: "1", name: "Ernest", age: 25 },
+  { id: "2", name: "Ann", age: 30 },
+  { id: "3", name: "Russell", age: 35 },
+  { id: "4", name: "Verna", age: 40 },
+];
+
+const tableColumns = [
+  {
+    key: "id",
+    content: "Id",
+    tdRender: (rowData: TTableData) => <span>{rowData.id}</span>,
+  },
+  {
+    key: "name",
+    content: "Name",
+    tdRender: (rowData: TTableData) => <span>{rowData.name}</span>,
+  },
+  {
+    key: "age",
+    content: "Age",
+    tdRender: (rowData: TTableData) => <span>{rowData.age}</span>,
+  },
+];
+
+// stories
+export const Default: Story = {
+  args: {
+    data: tableData,
+    columns: tableColumns,
+    keyExtractor: (rowData) => rowData.id,
+    tableClassName: "bg-gray-100",
+    tHeadClassName: "bg-gray-200",
+    tHeadTrClassName: "text-gray-600 text-left text-sm font-medium",
+    thClassName: "font-medium",
+    tBodyClassName: "bg-gray-100",
+    tBodyTrClassName: "text-gray-600",
+    tdClassName: "font-medium",
+  },
+};

packages/ui/src/tables/table.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+// helpers
+import { cn } from "../../helpers";
+// types
+import { TTableData } from "./types";
+
+export const Table = <T,>(props: TTableData<T>) => {
+  const {
+    data,
+    columns,
+    keyExtractor,
+    tableClassName = "",
+    tHeadClassName = "",
+    tHeadTrClassName = "",
+    thClassName = "",
+    tBodyClassName = "",
+    tBodyTrClassName = "",
+    tdClassName = "",
+  } = props;
+
+  return (
+    <table className={cn("table-auto w-full overflow-hidden whitespace-nowrap", tableClassName)}>
+      <thead className={cn("divide-y divide-custom-border-200", tHeadClassName)}>
+        <tr className={cn("divide-x divide-custom-border-200 text-sm text-custom-text-100", tHeadTrClassName)}>
+          {columns.map((column) => (
+            <th key={column.key} className={cn("px-2.5 py-2", thClassName)}>
+              {(column?.thRender && column?.thRender()) || column.content}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody className={cn("divide-y divide-x divide-custom-border-200", tBodyClassName)}>
+        {data.map((item) => (
+          <tr
+            key={keyExtractor(item)}
+            className={cn("divide-x divide-custom-border-200 text-sm text-custom-text-200", tBodyTrClassName)}
+          >
+            {columns.map((column) => (
+              <td key={`${column.key}-${keyExtractor(item)}`} className={cn("px-2.5 py-2", tdClassName)}>
+                {column.tdRender(item)}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

packages/ui/src/tables/types.ts

@@ -0,0 +1,20 @@
+export type TTableColumn<T> = {
+  key: string;
+  content: string;
+  thRender?: () => JSX.Element;
+  tdRender: (rowData: T) => JSX.Element;
+};
+
+export type TTableData<T> = {
+  data: T[];
+  columns: TTableColumn<T>[];
+  keyExtractor: (rowData: T) => string;
+  // classNames
+  tableClassName?: string;
+  tHeadClassName?: string;
+  tHeadTrClassName?: string;
+  thClassName?: string;
+  tBodyClassName?: string;
+  tBodyTrClassName?: string;
+  tdClassName?: string;
+};