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

rendering cells without width instead of skipping render to fix index issue

Browse source
This commit is contained in:
Carter 2025-06-04 10:43:48 -06:00
parent 6a1c61606c
commit 5b55563886
2 changed files with 22 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/common/ResponsiveTable.tsx
View file

@ -278,9 +278,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
}
const renderMobileRow = (row: T, index: number) => {
if (renderMobile) return (
renderMobile(row, index)
)
if (renderMobile) return renderMobile(row, index)
if (columns) {
return (
<Grid2 container direction={"row"} spacing={1} >
@ -441,6 +439,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
newWidths.push(node.clientWidth)
}
})
console.log(index)
console.log(newWidths.length)
console.log(newWidths)
rowWidthsRef.current = newWidths
dragIndexRef.current = index;
@ -458,15 +459,16 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
}
const resizeDrag = (e: any) => {
// console.log(dragIndex)
const index = dragIndexRef.current;
const dragStart = dragStartRef.current
const rowWidths = rowWidthsRef.current
if (!index) return
if (!rowWidths[index]) return
if (!rowWidths[index+1]) return
if (index === undefined) return
if (rowWidths[index] === undefined) return
if (rowWidths[index+1] === undefined) return
if (!dragStart) return
console.log("dragging")
let newWidths: number[] = [...rowWidths]
newWidths[index] = newWidths[index] - (dragStart - e.clientX)
newWidths[index+1] = newWidths[index+1] + (dragStart - e.clientX)
@ -474,10 +476,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
}
useEffect(() => {
})
return (
<TableContainer className={classes.tableContainer} component={Paper}>
<Table>
@ -530,7 +528,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
{ renderGutter && <TableCell></TableCell>}
{ columns ?
columns.map((column, index) => {
if (filterList.includes(column.title) || column.hidden) return null
if (filterList.includes(column.title) || column.hidden) return (
<TableCell key={"row-"+index+"cell-"+index} sx={{ width: 0, margin: 0, padding: 0}} ></TableCell>
)
return (
<TableCell key={"header-cell-"+index} width={rowWidths[index] ? rowWidths[index] : undefined}>
<Grid2 container spacing={1} justifyContent={"space-between"}>
@ -606,7 +606,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
{columns ?
columns.map((column, j) => {
// console.log(j)
if (filterList.includes(column.title) || column.hidden) return null
if (filterList.includes(column.title) || column.hidden) return (
<TableCell key={"row-"+index+"cell-"+j} sx={{ width: 0, padding: 0, margin: 0}}></TableCell>
)
if (column.render) return (
<TableCell key={"row-"+index+"cell-"+j} sx={{padding: 0, paddingRight: 2, width: rowWidths[j] ? rowWidths[j] : undefined}}>
{column.render(row)}

9
src/pages/Devices.tsx
View file

@ -57,6 +57,11 @@ const useStyles = makeStyles((theme: Theme) => {
width: theme.spacing(10)
// justifyContent: "center",
},
deviceContainer: {
margin: theme.spacing(1),
display: "flex",
width: theme.spacing(10)
},
descriptionCellContainer: {
margin: theme.spacing(1),
marginLeft: theme.spacing(2),
@ -68,7 +73,7 @@ const useStyles = makeStyles((theme: Theme) => {
margin: theme.spacing(1),
marginLeft: theme.spacing(2),
display: "flex",
width: theme.spacing(18)
minWidth: theme.spacing(10)
// justifyContent: "center",
},
green: {
@ -413,7 +418,7 @@ export default function Devices() {
sortKey: "name",
render: (device: Device) => {
return (
<Box className={classes.cellContainer}>
<Box className={classes.deviceContainer}>
{/* // <Box > */}
<Chip
variant="outlined"