Skip to content

Commit 8a669b6

Browse files
tdjsnellingtdjsnelling
committed
table min width
1 parent 1a95b1c commit 8a669b6

1 file changed

Lines changed: 66 additions & 65 deletions

File tree

‎client/components/List.js‎

Lines changed: 66 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -48,72 +48,73 @@ const ListItem = ({ children }) => {
4848

4949
const List = ({ data = [], columns = [], ...rest }) => {
5050
return (
51-
<Box>
52-
<Box
53-
display="grid"
54-
gridTemplateColumns={[
55-
'1fr',
56-
columns.map((col) => col.gridWidth).join(' '),
57-
]}
58-
gridGap={[2, 4]}
59-
alignItems="center"
60-
px={4}
61-
mb={3}
62-
>
63-
{columns.map((col, i) => (
64-
<Text
65-
key={`list-header-col-${i}`}
66-
fontWeight={600}
67-
fontSize={1}
68-
textAlign={col.rightAlign ? ['left', 'right'] : 'left'}
69-
_css={{ textTransform: 'uppercase' }}
70-
>
71-
{col.header}
72-
</Text>
73-
))}
74-
</Box>
75-
<Box as="ul" pl={0} _css={{ listStyle: 'none' }} {...rest}>
76-
{data.length ? (
77-
data.map((row, i) => (
78-
<ListItem key={`list-row-${i}`}>
79-
<WrapLink href={row.href}>
80-
<Box
81-
display="grid"
82-
gridTemplateColumns={[
83-
'1fr',
84-
columns.map((col) => col.gridWidth).join(' '),
85-
]}
86-
gridGap={[2, 4]}
87-
alignItems="center"
88-
minHeight="50px"
89-
px={4}
90-
>
91-
{columns.map((col, j) => (
92-
<Box
93-
key={`list-row-${i}-col-${j}`}
94-
width="100%"
95-
display="flex"
96-
alignItems="center"
97-
textAlign={col.rightAlign ? ['left', 'right'] : 'left'}
98-
_css={{ whiteSpace: 'nowrap', '> *': { width: '100%' } }}
99-
>
100-
{col.cell({
101-
value: col.accessor ? getIn(row, col.accessor) : null,
102-
row,
103-
})}
104-
</Box>
105-
))}
106-
</Box>
107-
</WrapLink>
51+
<Box overflowX="auto">
52+
<Box minWidth="700px">
53+
<Box
54+
display="grid"
55+
gridTemplateColumns={columns.map((col) => col.gridWidth).join(' ')}
56+
gridGap={[2, 4]}
57+
alignItems="center"
58+
px={4}
59+
mb={3}
60+
>
61+
{columns.map((col, i) => (
62+
<Text
63+
key={`list-header-col-${i}`}
64+
fontWeight={600}
65+
fontSize={1}
66+
textAlign={col.rightAlign ? 'right' : 'left'}
67+
_css={{ textTransform: 'uppercase' }}
68+
>
69+
{col.header}
70+
</Text>
71+
))}
72+
</Box>
73+
<Box as="ul" pl={0} _css={{ listStyle: 'none' }} {...rest}>
74+
{data.length ? (
75+
data.map((row, i) => (
76+
<ListItem key={`list-row-${i}`}>
77+
<WrapLink href={row.href}>
78+
<Box
79+
display="grid"
80+
gridTemplateColumns={columns
81+
.map((col) => col.gridWidth)
82+
.join(' ')}
83+
gridGap={[2, 4]}
84+
alignItems="center"
85+
minHeight="50px"
86+
px={4}
87+
>
88+
{columns.map((col, j) => (
89+
<Box
90+
key={`list-row-${i}-col-${j}`}
91+
width="100%"
92+
display="flex"
93+
alignItems="center"
94+
textAlign={col.rightAlign ? ['left', 'right'] : 'left'}
95+
_css={{
96+
whiteSpace: 'nowrap',
97+
'> *': { width: '100%' },
98+
}}
99+
>
100+
{col.cell({
101+
value: col.accessor ? getIn(row, col.accessor) : null,
102+
row,
103+
})}
104+
</Box>
105+
))}
106+
</Box>
107+
</WrapLink>
108+
</ListItem>
109+
))
110+
) : (
111+
<ListItem>
112+
<Box p={4}>
113+
<Text color="grey">No items to show.</Text>
114+
</Box>
108115
</ListItem>
109-
))
110-
) : (
111-
<ListItem>
112-
<Box p={4}>
113-
<Text color="grey">No items to show.</Text>
114-
</Box>
115-
</ListItem>
116-
)}
116+
)}
117+
</Box>
117118
</Box>
118119
</Box>
119120
)

0 commit comments

Comments
 (0)