index.tsx

import { createElement, SFC } from 'react'
import * as styles from './styles'

type Header = {
  title: string
  width: string
}

type TableProps = {
  headers?: Header[]
}

const Table: SFC<TableProps> = ({ headers, children }) => (
  <table className={styles.tableComponent}>
    {headers ? (
      <thead>
        <Row>
          {headers.map((header, index) => (
            <th
              className={styles.header}
              key={header.title + index}
              style={{ width: header.width }}
            >
              {header.title}
            </th>
          ))}
        </Row>
      </thead>
    ) : null}
    <tbody>{children}</tbody>
  </table>
)

export const Row: SFC = ({ children }) => <tr>{children}</tr>

type CellProps = {
  wordwrap?: string
  mono?: boolean
  colSpan?: number
}

export const Cell: SFC<CellProps> = ({ wordwrap, mono, colSpan, children }) => (
  <td className={styles.cellComponent(mono, wordwrap)} colSpan={colSpan}>
    {children}
  </td>
)

export default Table