Skip to content

Commit d05ebbd

Browse files
buzzracharyeah-rejanbuzzracharyeah-rejan
committed
fix: table styles
1 parent 78cf705 commit d05ebbd

File tree

3 files changed

+156
-73
lines changed

3 files changed

+156
-73
lines changed

‎src/scenes/Cart/ItemsTable.tsx

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react';
2+
import { styled } from '@mui/material/styles';
3+
import {
4+
TableContainer,
5+
Paper,
6+
Table,
7+
TableHead,
8+
TableRow,
9+
TableCell,
10+
TableBody,
11+
TableFooter,
12+
TablePagination,
13+
tableCellClasses,
14+
} from '@mui/material';
15+
import TablePaginationActions from '@mui/material/TablePagination/TablePaginationActions';
16+
17+
function createData(name: string, calories: number, fat: number, carbs: number, protein: number) {
18+
return { name, calories, fat, carbs, protein };
19+
}
20+
21+
const rows = [
22+
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
23+
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
24+
createData('Eclair', 262, 16.0, 24, 6.0),
25+
createData('Cupcake', 305, 3.7, 67, 4.3),
26+
createData('Gingerbread', 356, 16.0, 49, 3.9),
27+
];
28+
29+
const CustomTableCell = styled(TableCell)(({ theme }) => ({
30+
[`&.${tableCellClasses.head}`]: {
31+
backgroundColor: theme.palette.secondary[100],
32+
color: theme.palette.common.black,
33+
borderBottom: `1px solid rgba(0,0,0, 0.2)`,
34+
},
35+
}));
36+
37+
const ItemsTable = () => {
38+
const [page, setPage] = React.useState(0);
39+
const [rowsPerPage, setRowsPerPage] = React.useState(5);
40+
41+
// Avoid a layout jump when reaching the last page with empty rows.
42+
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
43+
44+
const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
45+
setPage(newPage);
46+
};
47+
48+
const handleChangeRowsPerPage = (
49+
event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
50+
) => {
51+
setRowsPerPage(parseInt(event.target.value, 10));
52+
setPage(0);
53+
};
54+
return (
55+
<TableContainer component={Paper} elevation={2}>
56+
<Table sx={{ minWidth: 650 }} aria-label='simple table'>
57+
<TableHead>
58+
<TableRow>
59+
<CustomTableCell>Dessert (100g serving)</CustomTableCell>
60+
<CustomTableCell align='right'>Calories</CustomTableCell>
61+
<CustomTableCell align='right'>Fat&nbsp;(g)</CustomTableCell>
62+
<CustomTableCell align='right'>Carbs&nbsp;(g)</CustomTableCell>
63+
<CustomTableCell align='right'>Protein&nbsp;(g)</CustomTableCell>
64+
</TableRow>
65+
</TableHead>
66+
<TableBody>
67+
{rows.map((row) => (
68+
<TableRow
69+
key={row.name}
70+
sx={{
71+
'&:last-child th, &:last-child td': {
72+
borderBottom: '1px solid rgba(0,0,0,0.2)',
73+
padding: '1.5rem 2.25rem',
74+
},
75+
'th, td': { padding: '1.5rem 2.25rem', border: 0 },
76+
}}
77+
>
78+
<CustomTableCell component='th' scope='row'>
79+
{row.name}
80+
</CustomTableCell>
81+
<CustomTableCell align='right'>{row.calories}</CustomTableCell>
82+
<CustomTableCell align='right'>{row.fat}</CustomTableCell>
83+
<CustomTableCell align='right'>{row.carbs}</CustomTableCell>
84+
<CustomTableCell align='right'>{row.protein}</CustomTableCell>
85+
</TableRow>
86+
))}
87+
</TableBody>
88+
</Table>
89+
</TableContainer>
90+
);
91+
};
92+
93+
export default ItemsTable;

‎src/scenes/Cart/index.tsx

+9-73
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,23 @@
11
import { Box, Button, Container, Grid, Typography, useTheme } from '@mui/material';
2-
import { DataGrid, GridColDef, GridColTypeDef, GridValueGetterParams } from '@mui/x-data-grid';
32
import Header from '../../components/Header';
43
import FlexBetween from '../../components/FlexBetween';
5-
import { useMemo } from 'react';
6-
7-
const classes = {
8-
cartContainer: {
9-
background: '#F9F1E7',
10-
width: '393px',
11-
height: '390px',
12-
display: 'flex',
13-
flexDirection: 'column',
14-
justifyContent: 'space-around',
15-
p: '1.5rem 2.5rem',
16-
},
17-
title: {
18-
color: '#000',
19-
fontSize: '32px',
20-
fontStyle: 'normal',
21-
fontWeight: '600',
22-
lineHeight: 'normal',
23-
},
24-
subtitle: {
25-
color: '#9F9F9F',
26-
fontSize: '16px',
27-
fontStyle: 'normal',
28-
fontWeight: '400',
29-
lineHeight: 'normal',
30-
},
31-
highlight: {
32-
color: 'var(--primary, #B88E2F)',
33-
fontSize: '20px',
34-
fontStyle: 'normal',
35-
fontWeight: '500',
36-
lineHeight: 'normal',
37-
},
38-
orderBtn: {
39-
border: '1px solid #000',
40-
padding: '0.5rem 1.5rem',
41-
color: '#000',
42-
letterSpacing: '1.25px',
43-
},
44-
root: {
45-
display: 'flex',
46-
height: '100%',
47-
},
48-
dataGrid: {
49-
flexGrow: 1,
50-
},
51-
};
4+
import ItemsTable from './ItemsTable';
5+
import useStyles from './useStyles';
526

537
const Cart = () => {
54-
const columns: GridColDef[] = useMemo(
55-
() => [
56-
{ field: 'product', headerName: 'Product', editable: false, sortable: false, width: 170 },
57-
{ field: 'price', headerName: 'Price', width: 120 },
58-
{ field: 'quantity', headerName: 'Quantity', width: 120 },
59-
{ field: 'subtotal', headerName: 'Subtotal', width: 140 },
60-
],
61-
[]
62-
);
63-
64-
const rows = [
65-
{ id: 1, product: 'super test', price: 32, quantity: 1, subtotal: 32 },
66-
{ id: 1, product: 'super test', price: 32, quantity: 1, subtotal: 32 },
67-
{ id: 1, product: 'super test', price: 32, quantity: 1, subtotal: 32 },
68-
{ id: 1, product: 'super test', price: 32, quantity: 1, subtotal: 32 },
69-
];
70-
8+
const { classes } = useStyles();
719
return (
7210
<>
7311
<Header title='Cart' location='Home' location1='Cart' />
74-
<Container
75-
maxWidth='xl'
76-
sx={{ p: '2.5rem 1.5rem', m: '3.5rem auto', border: '1px solid #000' }}
77-
>
12+
<Container maxWidth='xl' sx={{ p: '2.5rem 1.5rem', m: '3.5rem auto' }}>
7813
<Grid container>
7914
{/* LEFT */}
80-
<Grid item xs={12} md={6} lg={8}>
81-
<DataGrid rows={rows} columns={columns} className={classes.dataGrid} />
15+
<Grid item xs={12} md={6} lg={8} sx={{ p: '1rem 2.5rem' }}>
16+
<ItemsTable />
8217
</Grid>
83-
<Grid item xs={12} md={6} lg={4}>
84-
{/* RIGHT */}
18+
19+
{/* RIGHT */}
20+
<Grid item xs={12} md={6} lg={4} sx={{ p: '1rem 2.5rem' }}>
8521
<Box sx={classes.cartContainer}>
8622
<Typography sx={classes.title} textAlign={'center'}>
8723
Cart Totals

‎src/scenes/Cart/useStyles.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { useTheme } from '@mui/material';
2+
3+
const useStyles = () => {
4+
const theme = useTheme();
5+
const classes = {
6+
cartContainer: {
7+
background: theme.palette.secondary[100],
8+
width: '393px',
9+
height: '390px',
10+
display: 'flex',
11+
flexDirection: 'column',
12+
justifyContent: 'space-around',
13+
p: '1.5rem 2.5rem',
14+
},
15+
title: {
16+
color: '#000',
17+
fontSize: '32px',
18+
fontStyle: 'normal',
19+
fontWeight: '600',
20+
lineHeight: 'normal',
21+
},
22+
subtitle: {
23+
color: '#9F9F9F',
24+
fontSize: '16px',
25+
fontStyle: 'normal',
26+
fontWeight: '400',
27+
lineHeight: 'normal',
28+
},
29+
highlight: {
30+
color: 'var(--primary, #B88E2F)',
31+
fontSize: '20px',
32+
fontStyle: 'normal',
33+
fontWeight: '500',
34+
lineHeight: 'normal',
35+
},
36+
orderBtn: {
37+
border: '1px solid #000',
38+
padding: '0.5rem 1.5rem',
39+
color: '#000',
40+
letterSpacing: '1.25px',
41+
},
42+
root: {
43+
display: 'flex',
44+
height: '100%',
45+
},
46+
dataGrid: {
47+
flexGrow: '1',
48+
},
49+
};
50+
51+
return { classes };
52+
};
53+
54+
export default useStyles;

0 commit comments

Comments
 (0)