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

formatted column titles to have a size grabber thing

Browse source
This commit is contained in:
Carter 2025-05-26 13:55:48 -06:00
parent 7d8d0c1ec8
commit 0cd0921c63
1 changed files with 19 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/common/ResponsiveTable.tsx
View file

@ -139,7 +139,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const columns = typeof(props.columns) === "function" ? props.columns() : props.columns const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
const title = typeof(props.title) === "function" ? props.title() : props.title const title = typeof(props.title) === "function" ? props.title() : props.title
// const order = props.order ? props.order : "asc"
const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement const endTitleElement = typeof(props.endTitleElement) === "function" ? props.endTitleElement() : props.endTitleElement
const isMobile = useMobile() const isMobile = useMobile()
@ -423,9 +422,9 @@ 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"/> return <ArrowDownward fontSize="small" sx={{ marginLeft: 1 }} />
} else { } else {
return <ArrowUpward fontSize="small"/> return <ArrowUpward fontSize="small" sx={{ marginLeft: 1 }} />
} }
} }
return null; return null;
@ -487,11 +486,24 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
return ( return (
<TableCell <TableCell
key={"header-cell-"+index} key={"header-cell-"+index}
onClick={() => !column.disableSort && columnClick(column)} style={{ border: "1px solid red" }}
sx={{ cursor: column.disableSort ? "default" : "pointer" }} // onClick={() => !column.disableSort && columnClick(column)}
// sx={{ cursor: column.disableSort ? "default" : "pointer" }}
> >
<Grid2 container spacing={1} alignItems={"center"}> <Grid2 container spacing={1} justifyContent={"space-between"}>
{column.title} {showOrderIcon(column)} <Grid2
alignItems="center"
display="flex"
onClick={() => !column.disableSort && columnClick(column)}
sx={{ cursor: column.disableSort ? "default" : "pointer" }}
>
{column.title} {showOrderIcon(column)}
</Grid2>
<Grid2
sx={{ cursor: "col-resize" }}
>
|
</Grid2>
</Grid2> </Grid2>
</TableCell> </TableCell>
) )