rharuow-ds
Version:
Modern React Design System with 20 components and auto color system. Define only 2 colors (primary/secondary) and get automatic variations (hover, light, dark) with proper text contrast (WCAG AA). Includes: Table, Card, Button, Chip, Pagination, Input, Te
52 lines (51 loc) • 2.16 kB
TypeScript
import React from "react";
interface BaseTableProps extends React.HTMLAttributes<HTMLElement> {
children: React.ReactNode;
className?: string;
}
export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
children?: React.ReactNode;
className?: string;
variant?: 'default' | 'striped' | 'bordered';
size?: 'sm' | 'md' | 'lg';
responsive?: boolean;
stickyHeader?: boolean;
}
export interface TableHeaderProps extends BaseTableProps {
as?: 'thead';
}
export interface TableBodyProps extends BaseTableProps {
as?: 'tbody';
}
export interface TableFooterProps extends BaseTableProps {
as?: 'tfoot';
}
export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
children: React.ReactNode;
className?: string;
variant?: 'default' | 'selected' | 'hover';
}
export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
children: React.ReactNode;
className?: string;
as?: 'td' | 'th';
align?: 'left' | 'center' | 'right';
scope?: 'col' | 'row';
colSpan?: number;
rowSpan?: number;
}
declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableFooter: React.ForwardRefExoticComponent<TableFooterProps & React.RefAttributes<HTMLTableSectionElement>>;
declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
type TableComponent = typeof Table & {
Header: typeof TableHeader;
Body: typeof TableBody;
Footer: typeof TableFooter;
Row: typeof TableRow;
Cell: typeof TableCell;
};
declare const CompoundTable: TableComponent;
export { CompoundTable as Table, TableHeader, TableBody, TableFooter, TableRow, TableCell };