jsx import { css , jsx } from '@emotion/core' ; import Group from './Group' ; type TableProps = { headers : React . ReactNode [ ] ; rows : React . ReactNode [ ] [ ] ; } ; export default function Table ( { headers , rows } ) { return ( < table css = { css `
        width: 100%;
        border-collapse: collapse;
        td,
        th {
          padding: 12px 24px;
          text-align: left;
          font-weight: 300;
          width: calc(100% / ${ headers . length });
          white-space: nowrap;
        }
        td {
          border-top: 2px solid #fad4fa;
        }
        th:last-child,
        td:last-child {
          text-align: right;
        }
      ` } > < thead > < tr > { headers . map ( ( header , index ) => ( < th key = { index } > { header } < /th>))} < /tr> < /thead> < tbody > { rows . map ( ( cells , index ) => ( < tr key = { index } > { cells . map ( ( cell , index ) => ( < td key = { index } > { cell } < /td>))} < /tr>))} < /tbody> < /table>); }