keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-06-29 08:55:48 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved all rendered tables by removing redundant div

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-12-14 20:32:12 +08:00
parent d2521a628d
commit 9bb312808e
5 changed files with 402 additions and 397 deletions
Download patch file Download diff file Expand all files Collapse all files

141
src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx
View file

@ -60,78 +60,79 @@ export default function EquipmentLogsPage() {
flexWrap: "wrap",
}}
>
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
<TableContainer component={Paper}>
<Table sx={{ minWidth: "32rem" }} size="medium">
<TableHead>
<TableRow style={{ backgroundColor: colors.header_color }}>
<TableCell align="center" style={styles.text_light}>
Transaction ID
</TableCell>
<TableCell align="center" style={styles.text_light}>
SKU ID
</TableCell>
<TableCell align="center" style={styles.text_light}>
Name
</TableCell>
<TableCell align="center" style={styles.text_light}>
Description
</TableCell>
<TableCell align="center" style={styles.text_light}>
Category
</TableCell>
<TableCell align="center" style={styles.text_light}>
Date Modified
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{equipment_logs.data ? (
equipment_logs.data.map((equipment_log) => (
<TableRow
key={equipment_log.history_id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell align="center" component="th" scope="row">
{equipment_log.history_id}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment_log.id}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment_log.name}
</TableCell>
<TableContainer
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
component={Paper}
>
<Table sx={{ minWidth: "32rem" }} size="medium">
<TableHead>
<TableRow style={{ backgroundColor: colors.header_color }}>
<TableCell align="center" style={styles.text_light}>
Transaction ID
</TableCell>
<TableCell align="center" style={styles.text_light}>
SKU ID
</TableCell>
<TableCell align="center" style={styles.text_light}>
Name
</TableCell>
<TableCell align="center" style={styles.text_light}>
Description
</TableCell>
<TableCell align="center" style={styles.text_light}>
Category
</TableCell>
<TableCell align="center" style={styles.text_light}>
Date Modified
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{equipment_logs.data ? (
equipment_logs.data.map((equipment_log) => (
<TableRow
key={equipment_log.history_id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell align="center" component="th" scope="row">
{equipment_log.history_id}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment_log.id}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment_log.name}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment_log.description}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment_log.category}
</TableCell>
<TableCell align="right">
<div
style={{
...styles.flex_column,
...{ alignItems: "center" },
}}
>
<div>{equipment_log.history_date}</div>
<div>
{equipment_log.history_user
? "by " + equipment_log.history_user
: ""}
</div>
<TableCell align="center" component="th" scope="row">
{equipment_log.description}
</TableCell>
<TableCell align="center" component="th" scope="row">
{equipment_log.category}
</TableCell>
<TableCell align="right">
<div
style={{
...styles.flex_column,
...{ alignItems: "center" },
}}
>
<div>{equipment_log.history_date}</div>
<div>
{equipment_log.history_user
? "by " + equipment_log.history_user
: ""}
</div>
</TableCell>
</TableRow>
))
) : (
<></>
)}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
</TableCell>
</TableRow>
))
) : (
<></>
)}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
);