brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed header column spacing issues

Browse source
This commit is contained in:
Carter 2024-11-25 23:09:53 -06:00
parent 441223d85e
commit 6234f13eb0
1 changed files with 49 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

88
src/common/ResponsiveTable.tsx
View file

@ -1,4 +1,4 @@
import { Box, CircularProgress, Collapse, darken, IconButton, InputAdornment, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
import { Box, CircularProgress, Collapse, darken, Grid2, IconButton, InputAdornment, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { ChevronRight, Close, Search } from "@mui/icons-material"
import { useEffect, useState } from "react";
@ -122,6 +122,33 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
setInputSearchText("")
}
const searchBar = () => {
return (
<TextField
variant="standard"
placeholder="Search..."
className={classes.title}
value={inputSearchText}
onKeyDown={handleKeyDown}
onChange={e => setInputSearchText(e.currentTarget.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={clearSearch}>
<Close />
</IconButton>
</InputAdornment>
),
}}
/>
)
}
if (isMobile) return (
<Typography>
Hello!
@ -132,44 +159,27 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
<TableContainer className={classes.tableContainer} component={Paper}>
<Table>
<TableHead>
<TableRow>
{title && <TableCell colSpan={2} className={classes.titleContainer}>
{typeof(title) === "string" ?
<Typography variant="h5" className={classes.title}>
{title}
</Typography>
:
<Box className={classes.title}>
title
</Box>
}
</TableCell>}
{ setSearchText &&
<TableCell colSpan={title ? columns ? 4 : 2 : 6} className={classes.searchContainer}>
<TextField
variant="standard"
placeholder="Search..."
className={classes.title}
value={inputSearchText}
onKeyDown={handleKeyDown}
onChange={e => setInputSearchText(e.currentTarget.value)}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search />
</InputAdornment>
),
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={clearSearch}>
<Close />
</IconButton>
</InputAdornment>
),
}}
/>
</TableCell>
}
<TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
<TableCell colSpan={10000} sx={{ border: "none" }}>
<Grid2 container justifyContent="space-between">
<Grid2>
{typeof(title) === "string" ?
<Typography variant="h5" className={classes.title}>
{title}
</Typography>
:
title && <Box className={classes.title}>
title
</Box>
}
</Grid2>
<Grid2>
{setSearchText &&<Box className={classes.searchContainer}>
{searchBar()}
</Box>}
</Grid2>
</Grid2>
</TableCell>
</TableRow>
<TableRow>
{ renderGutter && <TableCell></TableCell>}