1import { css } from '@emotion/react'; 2import { theme, borderRadius, typography, spacing, shadows } from '@expo/styleguide'; 3import React, { PropsWithChildren } from 'react'; 4 5import { TableHeaders } from './TableHeaders'; 6import { TableLayout, TextAlign } from './types'; 7 8type TableProps = PropsWithChildren<{ 9 headers?: string[]; 10 headersAlign?: TextAlign[]; 11 layout?: TableLayout; 12}>; 13 14export const Table = ({ 15 children, 16 headers = [], 17 headersAlign, 18 layout = TableLayout.Auto, 19}: TableProps) => ( 20 <div css={tableWrapperStyle}> 21 <table css={[tableStyle, { tableLayout: layout }]}> 22 {headers.length ? ( 23 <> 24 <TableHeaders headers={headers} headersAlign={headersAlign} /> 25 <tbody>{children}</tbody> 26 </> 27 ) : ( 28 children 29 )} 30 </table> 31 </div> 32); 33 34export const tableWrapperStyle = css({ 35 border: `1px solid ${theme.border.default}`, 36 borderRadius: borderRadius.md, 37 overflowY: 'hidden', 38 overflowX: 'auto', 39 marginBottom: spacing[4], 40 boxShadow: shadows.xs, 41 42 '::-webkit-scrollbar': { 43 height: 6, 44 }, 45 46 '::-webkit-scrollbar-track': { 47 background: theme.background.default, 48 borderBottomLeftRadius: borderRadius.md, 49 borderBottomRightRadius: borderRadius.md, 50 }, 51 52 '::-webkit-scrollbar-thumb': { 53 background: theme.background.element, 54 borderRadius: borderRadius.md, 55 56 ':hover': { 57 background: theme.background.hover, 58 }, 59 }, 60}); 61 62const tableStyle = css({ 63 ...typography.fontSizes[14], 64 width: '100%', 65 border: 0, 66 borderRadius: 0, 67 marginBottom: 0, 68 borderCollapse: 'collapse', 69 color: theme.text.default, 70 71 'blockquote div, li, p, strong': { 72 ...typography.fontSizes[14], 73 }, 74 75 'blockquote code': { 76 padding: `0 ${spacing[1]}px`, 77 }, 78}); 79