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