73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
/**
|
|
* Table Components
|
|
*
|
|
* 🔒 STYLE LOCKED - MUST use .igny8-table-compact class on all tables.
|
|
* See DESIGN_SYSTEM.md for complete table styling guidelines.
|
|
*/
|
|
import { ReactNode } from "react";
|
|
|
|
// Props for Table
|
|
interface TableProps {
|
|
children: ReactNode; // Table content (thead, tbody, etc.)
|
|
className?: string; // Optional className for styling
|
|
}
|
|
|
|
// Props for TableHeader
|
|
interface TableHeaderProps {
|
|
children: ReactNode; // Header row(s)
|
|
className?: string; // Optional className for styling
|
|
}
|
|
|
|
// Props for TableBody
|
|
interface TableBodyProps {
|
|
children: ReactNode; // Body row(s)
|
|
className?: string; // Optional className for styling
|
|
}
|
|
|
|
// Props for TableRow
|
|
interface TableRowProps {
|
|
children: ReactNode; // Cells (th or td)
|
|
className?: string; // Optional className for styling
|
|
}
|
|
|
|
// Props for TableCell
|
|
interface TableCellProps {
|
|
children: ReactNode; // Cell content
|
|
isHeader?: boolean; // If true, renders as <th>, otherwise <td>
|
|
className?: string; // Optional className for styling
|
|
style?: React.CSSProperties; // Optional inline styles for width, fontSize, etc.
|
|
}
|
|
|
|
// Table Component
|
|
const Table: React.FC<TableProps> = ({ children, className }) => {
|
|
return <table className={`min-w-full w-full ${className}`} style={{ tableLayout: 'auto' }}>{children}</table>;
|
|
};
|
|
|
|
// TableHeader Component
|
|
const TableHeader: React.FC<TableHeaderProps> = ({ children, className }) => {
|
|
return <thead className={className}>{children}</thead>;
|
|
};
|
|
|
|
// TableBody Component
|
|
const TableBody: React.FC<TableBodyProps> = ({ children, className }) => {
|
|
return <tbody className={className}>{children}</tbody>;
|
|
};
|
|
|
|
// TableRow Component
|
|
const TableRow: React.FC<TableRowProps> = ({ children, className }) => {
|
|
return <tr className={className}>{children}</tr>;
|
|
};
|
|
|
|
// TableCell Component
|
|
const TableCell: React.FC<TableCellProps> = ({
|
|
children,
|
|
isHeader = false,
|
|
className,
|
|
style,
|
|
}) => {
|
|
const CellTag = isHeader ? "th" : "td";
|
|
return <CellTag className={` ${className}`} style={style}>{children}</CellTag>;
|
|
};
|
|
|
|
export { Table, TableHeader, TableBody, TableRow, TableCell };
|