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

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

@ -321,16 +321,18 @@ function DataTable({
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}>
<Table {...getTableProps()}>
<Table {...getTableProps()} component="div" sx={{display: "grid", gridTemplateRows: "auto", gridTemplateColumns: gridTemplateColumns}}>
{
includeHead && (
<Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
{headerGroups.map((headerGroup: any, i: number) => (
<TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", alignItems: "flex-end", gridTemplateColumns: gridTemplateColumns}}>
{headerGroup.headers.map((column: any) => (
headerGroups.map((headerGroup: any, i: number) => (
headerGroup.headers.map((column: any) => (
column.type !== "hidden" && (
<DataTableHeadCell
sx={{position: "sticky", top: 0, background: "white", zIndex: 10, alignItems: "flex-end"}}
key={i++}
{...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
align={column.align ? column.align : "left"}
@ -340,13 +342,10 @@ function DataTable({
{column.render("header")}
</DataTableHeadCell>
)
))}
</TableRow>
))}
</Box>
))
))
)
}
<TableBody {...getTableBodyProps()}>
{rows.map((row: any, key: any) =>
{
prepareRow(row);
@ -384,11 +383,11 @@ function DataTable({
}
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" && (
<DataTableBodyCell
key={key}
sx={{verticalAlign: "top", background: background}}
noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
depth={row.depth}
align={cell.column.align ? cell.column.align : "left"}
@ -446,12 +445,9 @@ function DataTable({
}
</DataTableBodyCell>
)
))}
</TableRow>
))
);
})}
</TableBody>
</Table>
</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 (
<Box
component="td"
component="div"
textAlign={align}
py={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 (
<Box
component="th"
component="div"
width={width}
py={1.5}
px={1.5}
sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
"&:nth-of-type(1)": {
paddingLeft: "1rem"
},
"&:last-child": {
paddingRight: "1rem"
},
position: "sticky", top: 0, background: "white"
})}
>
<Box