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),
},
titleComp: {
padding: theme.spacing(1),
marginLeft: theme.spacing(-1)
padding: theme.spacing(1, 1, 0, 1.5),
},
subtitleComp: {
padding: theme.spacing(1),
marginTop: theme.spacing(-2),
marginLeft: theme.spacing(-1),
padding: theme.spacing(0, 1, 0.5, 1.5),
display: "flex",
alignItems: "center",
},
titleContainer: {
border: "none",
@ -42,6 +41,8 @@ const useStyles = makeStyles((theme: Theme) => {
searchContainer: {
border: "none",
textAlign: "right",
display: "flex",
alignItems: "center",
},
mobileTitleBox: {
margin: theme.spacing(1),
@ -118,8 +119,9 @@ function ResizableHeaderTitle<T>(props: {
: {}),
}}
>
<Box component="span" sx={{ whiteSpace: "nowrap" }}>
{column.title} {showOrderIcon(column)}
<Box component="span" sx={{ whiteSpace: "nowrap", display: "inline-flex", alignItems: "center" }}>
<Box component="span">{column.title}</Box>
{showOrderIcon(column)}
</Box>
</Grid2>
);
@ -491,9 +493,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
if (sortKey === orderBy) {
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 {
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;
@ -536,15 +546,19 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const clampedWidth = Math.max(MIN_COLUMN_WIDTH, newWidthForIndex)
const actualDelta = newWidths[index] - clampedWidth
newWidths[index] = clampedWidth
newWidths.every((width, j) => {
if (j <= index || width === 0) return true
else if (newWidths[j] !== undefined) {
newWidths[j] = newWidths[j] + actualDelta
return false
}
})
if (actualDelta > 0) {
// Shrinking current column – give space to next column
newWidths[index + 1] = (newWidths[index + 1] ?? 0) + actualDelta
} 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)
}
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}>
{(title || setSearchText) && (
<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>
<Box sx={{ marginTop: -1 }}>
{renderTitle()}
{renderSubtitle()}
</Box>
{renderTitle()}
{renderSubtitle()}
</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>
{actions && actions}