init

src/components/ui/table/index.tsx

@@ -0,0 +1,64 @@
+import React, { ReactNode, TdHTMLAttributes, HTMLAttributes } from "react";
+
+// Props for Table
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+  children: ReactNode;
+}
+
+// Props for TableHeader
+interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children: ReactNode;
+}
+
+// Props for TableBody
+interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children: ReactNode;
+}
+
+// Props for TableRow
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  children: ReactNode;
+}
+
+// Props for TableCell - Hỗ trợ colSpan, rowSpan...
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+  children: ReactNode;
+  isHeader?: boolean;
+}
+
+// Table Component
+const Table: React.FC<TableProps> = ({ children, className, ...props }) => {
+  return <table className={`min-w-full ${className}`} {...props}>{children}</table>;
+};
+
+// TableHeader Component
+const TableHeader: React.FC<TableHeaderProps> = ({ children, className, ...props }) => {
+  return <thead className={className} {...props}>{children}</thead>;
+};
+
+// TableBody Component
+const TableBody: React.FC<TableBodyProps> = ({ children, className, ...props }) => {
+  return <tbody className={className} {...props}>{children}</tbody>;
+};
+
+// TableRow Component
+const TableRow: React.FC<TableRowProps> = ({ children, className, ...props }) => {
+  return <tr className={className} {...props}>{children}</tr>;
+};
+
+// TableCell Component
+const TableCell: React.FC<TableCellProps> = ({
+  children,
+  isHeader = false,
+  className,
+  ...props
+}) => {
+  const CellTag = isHeader ? "th" : "td";
+  return (
+    <CellTag className={className} {...(props as any)}>
+      {children}
+    </CellTag>
+  );
+};
+
+export { Table, TableHeader, TableBody, TableRow, TableCell };