QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-17 21:00:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Re-do css on tables, to do the whole table as divs with display: grid

Browse Source
This commit is contained in:
darin.kelkhoff
2024-07-25 08:37:37 -05:00
parent d9de96ea7f
commit 97bab57974
3 changed files with 119 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/qqq/components/widgets/tables/DataTable.tsx
View File

@ -321,137 +321,133 @@ function DataTable({
innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"}; innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
} }
///////////////////////////////////////////////////////////////////////////////////
// note - at one point, we had the table's sx including: whiteSpace: "nowrap"... //
///////////////////////////////////////////////////////////////////////////////////
return <Box sx={boxStyle}><Box sx={innerBoxStyle}> return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
<Table {...getTableProps()}> <Table {...getTableProps()} component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: gridTemplateColumns}}>
{ {
includeHead && ( includeHead && (
<Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}> headerGroups.map((headerGroup: any, i: number) => (
{headerGroups.map((headerGroup: any, i: number) => ( headerGroup.headers.map((column: any) => (
<TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", alignItems: "flex-end", gridTemplateColumns: gridTemplateColumns}}> column.type !== "hidden" && (
{headerGroup.headers.map((column: any) => ( <DataTableHeadCell
column.type !== "hidden" && ( sx={{position: "sticky", top: 0, background: "white", zIndex: 10, alignItems: "flex-end"}}
<DataTableHeadCell key={i++}
key={i++} {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
{...column.getHeaderProps(isSorted && column.getSortByToggleProps())} align={column.align ? column.align : "left"}
align={column.align ? column.align : "left"} sorted={setSortedValue(column)}
sorted={setSortedValue(column)} tooltip={column.tooltip}
tooltip={column.tooltip} >
> {column.render("header")}
{column.render("header")} </DataTableHeadCell>
</DataTableHeadCell> )
) ))
))} ))
</TableRow>
))}
</Box>
) )
} }
<TableBody {...getTableBodyProps()}> {rows.map((row: any, key: any) =>
{rows.map((row: any, key: any) => {
prepareRow(row);
let overrideNoEndBorder = false;
//////////////////////////////////////////////////////////////////////////////////
// don't do an end-border on nested rows - unless they're the last one in a set //
//////////////////////////////////////////////////////////////////////////////////
if (row.depth > 0)
{ {
prepareRow(row); overrideNoEndBorder = true;
if (key + 1 < rows.length && rows[key + 1].depth == 0)
let overrideNoEndBorder = false;
//////////////////////////////////////////////////////////////////////////////////
// don't do an end-border on nested rows - unless they're the last one in a set //
//////////////////////////////////////////////////////////////////////////////////
if (row.depth > 0)
{ {
overrideNoEndBorder = true; overrideNoEndBorder = false;
if (key + 1 < rows.length && rows[key + 1].depth == 0)
{
overrideNoEndBorder = false;
}
} }
}
/////////////////////////////////////// ///////////////////////////////////////
// don't do end-border on the footer // // don't do end-border on the footer //
/////////////////////////////////////// ///////////////////////////////////////
if (isFooter) if (isFooter)
{ {
overrideNoEndBorder = true; overrideNoEndBorder = true;
} }
let background = "initial"; let background = "initial";
if (isFooter) if (isFooter)
{ {
background = "#EEEEEE"; background = "#EEEEEE";
} }
else if (row.depth > 0 || row.isExpanded) else if (row.depth > 0 || row.isExpanded)
{ {
background = "#FAFAFA"; background = "#FAFAFA";
} }
return ( return (
<TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}> row.cells.map((cell: any) => (
{row.cells.map((cell: any) => ( cell.column.type !== "hidden" && (
cell.column.type !== "hidden" && ( <DataTableBodyCell
<DataTableBodyCell key={key}
key={key} sx={{verticalAlign: "top", background: background}}
noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded} noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
depth={row.depth} depth={row.depth}
align={cell.column.align ? cell.column.align : "left"} align={cell.column.align ? cell.column.align : "left"}
{...cell.getCellProps()} {...cell.getCellProps()}
> >
{ {
cell.column.type === "default" && ( cell.column.type === "default" && (
cell.value && "number" === typeof cell.value ? ( cell.value && "number" === typeof cell.value ? (
<DefaultCell isFooter={isFooter}>{cell.value.toLocaleString()}</DefaultCell> <DefaultCell isFooter={isFooter}>{cell.value.toLocaleString()}</DefaultCell>
) : (<DefaultCell isFooter={isFooter}>{cell.render("Cell")}</DefaultCell>) ) : (<DefaultCell isFooter={isFooter}>{cell.render("Cell")}</DefaultCell>)
) )
} }
{ {
cell.column.type === "htmlAndTooltip" && ( cell.column.type === "htmlAndTooltip" && (
<DefaultCell isFooter={isFooter}> <DefaultCell isFooter={isFooter}>
<NoMaxWidthTooltip title={parse(row.values["tooltip"])}> <NoMaxWidthTooltip title={parse(row.values["tooltip"])}>
<Box> <Box>
{parse(cell.value)} {parse(cell.value)}
</Box> </Box>
</NoMaxWidthTooltip> </NoMaxWidthTooltip>
</DefaultCell> </DefaultCell>
) )
} }
{ {
cell.column.type === "html" && ( cell.column.type === "html" && (
<DefaultCell isFooter={isFooter}>{parse(cell.value ?? "")}</DefaultCell> <DefaultCell isFooter={isFooter}>{parse(cell.value ?? "")}</DefaultCell>
) )
} }
{ {
cell.column.type === "composite" && ( cell.column.type === "composite" && (
<DefaultCell isFooter={isFooter}> <DefaultCell isFooter={isFooter}>
<CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} /> <CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} />
</DefaultCell> </DefaultCell>
) )
} }
{ {
cell.column.type === "block" && ( cell.column.type === "block" && (
<DefaultCell isFooter={isFooter}> <DefaultCell isFooter={isFooter}>
<WidgetBlock widgetMetaData={widgetMetaData} block={cell.value} /> <WidgetBlock widgetMetaData={widgetMetaData} block={cell.value} />
</DefaultCell> </DefaultCell>
) )
} }
{ {
cell.column.type === "image" && row.values["imageTotal"] && ( cell.column.type === "image" && row.values["imageTotal"] && (
<ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} total={row.values["imageTotal"].toLocaleString()} totalType={row.values["imageTotalType"]} /> <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} total={row.values["imageTotal"].toLocaleString()} totalType={row.values["imageTotalType"]} />
) )
} }
{ {
cell.column.type === "image" && !row.values["imageTotal"] && ( cell.column.type === "image" && !row.values["imageTotal"] && (
<ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} /> <ImageCell imageUrl={row.values["imageUrl"]} label={row.values["imageLabel"]} />
) )
} }
{ {
(cell.column.id === "__expander") && cell.render("cell") (cell.column.id === "__expander") && cell.render("cell")
} }
</DataTableBodyCell> </DataTableBodyCell>
) )
))} ))
</TableRow> );
); })}
})}
</TableBody>
</Table> </Table>
</Box></Box>; </Box></Box>;
} }

2
src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx
View File

@ -36,7 +36,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
{ {
return ( return (
<Box <Box
component="td" component="div"
textAlign={align} textAlign={align}
py={1.5} py={1.5}
px={1.5} px={1.5}

9
src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
View File

@ -44,18 +44,13 @@ function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: P
return ( return (
<Box <Box
component="th" component="div"
width={width} width={width}
py={1.5} py={1.5}
px={1.5} px={1.5}
sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({ sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
"&:nth-of-type(1)": { position: "sticky", top: 0, background: "white"
paddingLeft: "1rem"
},
"&:last-child": {
paddingRight: "1rem"
},
})} })}
> >
<Box <Box