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

9
src/pages/Devices.tsx
View file

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