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

Merge branch 'responsive_table_styling'

Browse source
This commit is contained in:
Carter 2026-03-16 12:35:10 -06:00
commit 4eada9963e
1 changed files with 40 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/common/ResponsiveTable.tsx
View file

@ -28,13 +28,12 @@ const useStyles = makeStyles((theme: Theme) => {
marginTop: theme.spacing(-2), marginTop: theme.spacing(-2),
}, },
titleComp: { titleComp: {
padding: theme.spacing(1), padding: theme.spacing(1, 1, 0, 1.5),
marginLeft: theme.spacing(-1)
}, },
subtitleComp: { subtitleComp: {
padding: theme.spacing(1), padding: theme.spacing(0, 1, 0.5, 1.5),
marginTop: theme.spacing(-2), display: "flex",
marginLeft: theme.spacing(-1), alignItems: "center",
}, },
titleContainer: { titleContainer: {
border: "none", border: "none",
@ -42,6 +41,8 @@ const useStyles = makeStyles((theme: Theme) => {
searchContainer: { searchContainer: {
border: "none", border: "none",
textAlign: "right", textAlign: "right",
display: "flex",
alignItems: "center",
}, },
mobileTitleBox: { mobileTitleBox: {
margin: theme.spacing(1), margin: theme.spacing(1),
@ -118,8 +119,9 @@ function ResizableHeaderTitle<T>(props: {
: {}), : {}),
}} }}
> >
<Box component="span" sx={{ whiteSpace: "nowrap" }}> <Box component="span" sx={{ whiteSpace: "nowrap", display: "inline-flex", alignItems: "center" }}>
{column.title} {showOrderIcon(column)} <Box component="span">{column.title}</Box>
{showOrderIcon(column)}
</Box> </Box>
</Grid2> </Grid2>
); );
@ -491,9 +493,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase() const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
if (sortKey === orderBy) { if (sortKey === orderBy) {
if (order === "asc") { if (order === "asc") {
return <ArrowDownward fontSize="small" sx={{ marginLeft: 1 }} /> return (
<Box component="span" sx={{ ml: 0.5, display: "inline-flex", alignItems: "center" }}>
<ArrowDownward fontSize="small" />
</Box>
)
} else { } else {
return <ArrowUpward fontSize="small" sx={{ marginLeft: 1 }} /> return (
<Box component="span" sx={{ ml: 0.5, display: "inline-flex", alignItems: "center" }}>
<ArrowUpward fontSize="small" />
</Box>
)
} }
} }
return null; return null;
@ -536,15 +546,19 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const clampedWidth = Math.max(MIN_COLUMN_WIDTH, newWidthForIndex) const clampedWidth = Math.max(MIN_COLUMN_WIDTH, newWidthForIndex)
const actualDelta = newWidths[index] - clampedWidth const actualDelta = newWidths[index] - clampedWidth
newWidths[index] = clampedWidth newWidths[index] = clampedWidth
newWidths.every((width, j) => {
if (j <= index || width === 0) return true if (actualDelta > 0) {
else if (newWidths[j] !== undefined) { // Shrinking current column – give space to next column
newWidths[j] = newWidths[j] + actualDelta newWidths[index + 1] = (newWidths[index + 1] ?? 0) + actualDelta
return false } else if (actualDelta < 0) {
} // Growing current column – take from next column only what it can give
}) const nextWidth = newWidths[index + 1] ?? 0
const availableFromNext = Math.max(0, nextWidth - MIN_COLUMN_WIDTH)
const takeFromNext = Math.min(-actualDelta, availableFromNext)
newWidths[index + 1] = nextWidth - takeFromNext
// If we couldn't take enough, the table grows (clampedWidth already applied)
}
setRowWidths(newWidths) setRowWidths(newWidths)
} }
const MIN_COLUMN_WIDTH = 24; const MIN_COLUMN_WIDTH = 24;
@ -553,14 +567,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
<Box className={classes.tableContainer} component={Paper}> <Box className={classes.tableContainer} component={Paper}>
{(title || setSearchText) && ( {(title || setSearchText) && (
<Box> <Box>
<Grid2 container justifyContent="space-between" alignItems="center" sx={{ padding: 1 }}> <Grid2
container
justifyContent="space-between"
alignItems="center"
sx={{ px: 1.5, pt: 1, pb: 0.5 }}
>
<Grid2> <Grid2>
<Box sx={{ marginTop: -1 }}> {renderTitle()}
{renderTitle()} {renderSubtitle()}
{renderSubtitle()}
</Box>
</Grid2> </Grid2>
<Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end" }}> <Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end", mt: -1 }}>
<Grid2 container alignItems="center" spacing={1} wrap="nowrap"> <Grid2 container alignItems="center" spacing={1} wrap="nowrap">
<Grid2> <Grid2>
{actions && actions} {actions && actions}