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