diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx index c630768..54c5e27 100644 --- a/src/components/table/Table.tsx +++ b/src/components/table/Table.tsx @@ -1,31 +1,37 @@ import React from 'react'; -interface TableProps extends React.HTMLAttributes { +export interface TableProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; } -interface TableHeaderProps extends React.HTMLAttributes { +export interface TableHeaderProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; } -interface TableBodyProps extends React.HTMLAttributes { +export interface TableBodyProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; } -interface TableRowProps extends React.HTMLAttributes { +export interface TableRowProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; } -interface TableCellProps extends React.HTMLAttributes { +export interface TableCellProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; isHeader?: boolean; } +/** + * Table component + * + * A container for tabular data. Wraps the `` element with a div for additional styling or layout purposes. + * @param {TableProps} props - The props for the table component. + */ export const Table: React.FC = ({ children, className, ...props }) => (
@@ -34,24 +40,49 @@ export const Table: React.FC = ({ children, className, ...props }) = ); +/** + * TableHeader component + * + * Represents the header section of the table. Wraps the `` element. + * @param {TableHeaderProps} props - The props for the table header component. + */ export const TableHeader: React.FC = ({ children, className, ...props }) => ( {children} ); +/** + * TableBody component + * + * Represents the body section of the table. Wraps the `` element. + * @param {TableBodyProps} props - The props for the table body component. + */ export const TableBody: React.FC = ({ children, className, ...props }) => ( {children} ); +/** + * TableRow component + * + * Represents a single row in the table. Wraps the `` element. + * @param {TableRowProps} props - The props for the table row component. + */ export const TableRow: React.FC = ({ children, className, onClick, ...props }) => ( {children} ); +/** + * TableCell component + * + * Represents a single cell in the table, either header (`
`) or data (``). + * @param {TableCellProps} props - The props for the table cell component. + * @param {boolean} [props.isHeader=false] - Determines if the cell is a header (``). + */ export const TableCell: React.FC = ({ children, className, isHeader = false, onClick, ...props }) => { const Component = isHeader ? 'th' : 'td'; return ( diff --git a/src/components/table/index.ts b/src/components/table/index.ts new file mode 100644 index 0000000..fa96523 --- /dev/null +++ b/src/components/table/index.ts @@ -0,0 +1,7 @@ +export { Table } from './Table'; +export { TableHeader } from './Table'; +export { TableBody } from './Table'; +export { TableRow } from './Table'; +export { TableCell } from './Table'; + +export type { TableProps, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps } from './Table';