calendar/packages/ui/components/table/Table.tsx

import { classNames } from "@calcom/lib";

interface TableProps {
  children: React.ReactNode;
}

interface DynamicWidth {
  widthClassNames?: string;
}

const Header = ({ children }: TableProps) => (
  <thead className="rounded-md">
    <tr className="bg-default">{children}</tr>
  </thead>
);

const ColumnTitle = ({ children, widthClassNames }: TableProps & DynamicWidth) => (
  <th
    scope="col"
    className={classNames(
      "text-default p-3 text-left text-xs font-medium uppercase",
      !widthClassNames ? "w-auto" : widthClassNames
    )}>
    {children}
  </th>
);

const Body = ({ children }: TableProps) => (
  <tbody className="divide-subtle divide-y rounded-md">{children}</tbody>
);

const Row = ({ children }: TableProps) => <tr>{children}</tr>;

const Cell = ({ children, widthClassNames }: TableProps & DynamicWidth) => (
  <td
    className={classNames(
      "text-default relative py-2 px-3 text-sm font-medium",
      !widthClassNames ? "w-auto" : widthClassNames
    )}>
    {children}
  </td>
);

export const Table = ({ children }: TableProps) => (
  <div className="bg-default border-subtle overflow-x-auto rounded-md border">
    <table className="divide-subtle w-full divide-y rounded-md">{children}</table>
  </div>
);

Table.Header = Header;
Table.ColumnTitle = ColumnTitle;
Table.Body = Body;
Table.Row = Row;
Table.Cell = Cell;