konnosTable.tsx106 lines · main
| 1 | import type { PropsWithChildren, ReactNode } from 'react' |
| 2 | |
| 3 | interface TableProps { |
| 4 | body: ReactNode |
| 5 | head?: ReactNode |
| 6 | className?: string |
| 7 | containerClassName?: string |
| 8 | borderless?: boolean |
| 9 | headTrClasses?: string |
| 10 | bodyClassName?: string |
| 11 | style?: React.StyleHTMLAttributes<HTMLTableElement> |
| 12 | } |
| 13 | |
| 14 | /** |
| 15 | * @deprecated Use `Table` from `ui` instead |
| 16 | */ |
| 17 | function Table({ |
| 18 | body, |
| 19 | head, |
| 20 | className, |
| 21 | containerClassName, |
| 22 | borderless, |
| 23 | headTrClasses, |
| 24 | bodyClassName, |
| 25 | style, |
| 26 | }: TableProps) { |
| 27 | let containerClasses = ['table-container'] |
| 28 | if (containerClassName) containerClasses.push(containerClassName) |
| 29 | if (borderless) containerClasses.push('table-container--borderless') |
| 30 | |
| 31 | let classes = ['table'] |
| 32 | if (className) classes.push(className) |
| 33 | |
| 34 | return ( |
| 35 | <div className={containerClasses.join(' ')}> |
| 36 | <table className={classes.join(' ')} style={style}> |
| 37 | <thead> |
| 38 | <tr className={headTrClasses}>{head}</tr> |
| 39 | </thead> |
| 40 | <tbody className={bodyClassName}>{body}</tbody> |
| 41 | </table> |
| 42 | </div> |
| 43 | ) |
| 44 | } |
| 45 | |
| 46 | interface ThProps { |
| 47 | className?: string |
| 48 | style?: React.CSSProperties |
| 49 | } |
| 50 | |
| 51 | /** |
| 52 | * @deprecated Use `TableHeader` from `ui` instead |
| 53 | */ |
| 54 | const Th = ({ children, className, style }: PropsWithChildren<ThProps>) => { |
| 55 | const classes = ['p-3 px-4 text-left'] |
| 56 | if (className) classes.push(className) |
| 57 | return ( |
| 58 | <th className={classes.join(' ')} style={style}> |
| 59 | {children} |
| 60 | </th> |
| 61 | ) |
| 62 | } |
| 63 | |
| 64 | interface TrProps { |
| 65 | className?: string |
| 66 | hoverable?: boolean |
| 67 | style?: React.CSSProperties |
| 68 | onClick?: () => void |
| 69 | } |
| 70 | |
| 71 | /** |
| 72 | * @deprecated Use `TableRow` from `ui` instead |
| 73 | */ |
| 74 | const Tr = ({ children, className, onClick, style, hoverable }: PropsWithChildren<TrProps>) => { |
| 75 | let classes = [className] |
| 76 | if (onClick || hoverable) classes.push('tr--link') |
| 77 | return ( |
| 78 | <tr className={classes.join(' ')} onClick={onClick} style={style}> |
| 79 | {children} |
| 80 | </tr> |
| 81 | ) |
| 82 | } |
| 83 | |
| 84 | interface TdProps extends React.HTMLProps<HTMLTableCellElement> { |
| 85 | colSpan?: number |
| 86 | className?: string |
| 87 | style?: React.CSSProperties |
| 88 | align?: 'left' | 'center' | 'right' | 'justify' | 'char' | undefined |
| 89 | } |
| 90 | |
| 91 | /** |
| 92 | * @deprecated Use `TableCell` from `ui` instead |
| 93 | */ |
| 94 | const Td = ({ children, colSpan, className, style, ...rest }: PropsWithChildren<TdProps>) => { |
| 95 | return ( |
| 96 | <td className={className} colSpan={colSpan} style={style} {...rest}> |
| 97 | {children} |
| 98 | </td> |
| 99 | ) |
| 100 | } |
| 101 | |
| 102 | Table.th = Th |
| 103 | Table.td = Td |
| 104 | Table.tr = Tr |
| 105 | |
| 106 | export default Table |