64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
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 }; |