diff --git a/src/qqq/components/widgets/tables/DataTable.tsx b/src/qqq/components/widgets/tables/DataTable.tsx index c4ed353..f697917 100644 --- a/src/qqq/components/widgets/tables/DataTable.tsx +++ b/src/qqq/components/widgets/tables/DataTable.tsx @@ -285,11 +285,12 @@ function DataTable({ let boxStyle = {}; if(fixedStickyLastRow) { - boxStyle = isFooter ? {overflowY: "visible", borderTop: `0.0625rem solid ${colors.grayLines.main};`} : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "auto"}; + boxStyle = isFooter + ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, overflow: "auto", scrollbarGutter: "stable"} + : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"}; } - const className = isFooter ? "hideScrollbars" : ""; - return + return { includeHead && ( @@ -317,15 +318,38 @@ function DataTable({ {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) + { + overrideNoEndBorder = true; + if(key + 1 < rows.length && rows[key + 1].depth == 0) + { + overrideNoEndBorder = false; + } + } + + /////////////////////////////////////// + // don't do end-border on the footer // + /////////////////////////////////////// + if(isFooter) + { + overrideNoEndBorder = true; + } + return ( - 0 ? colors.grayLines.main : "initial")}} key={key} {...row.getRowProps()}> + 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}> {row.cells.map((cell: any) => ( cell.column.type !== "hidden" && ( { @@ -370,6 +394,7 @@ function DataTable({ ); })} +
diff --git a/src/qqq/components/widgets/tables/TableCard.tsx b/src/qqq/components/widgets/tables/TableCard.tsx index ad83722..45dbc59 100644 --- a/src/qqq/components/widgets/tables/TableCard.tsx +++ b/src/qqq/components/widgets/tables/TableCard.tsx @@ -85,7 +85,6 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedHeight={fixedHeight} showTotalEntries={false} isSorted={false} - noEndBorder /> : noRowsFoundHTML ? diff --git a/src/qqq/styles/qqq-override-styles.css b/src/qqq/styles/qqq-override-styles.css index db0a00e..a48a7c1 100644 --- a/src/qqq/styles/qqq-override-styles.css +++ b/src/qqq/styles/qqq-override-styles.css @@ -564,14 +564,3 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } display: inline; right: .5rem } - -.hideScrollbars::-webkit-scrollbar { - background: transparent; /* Chrome/Safari/Webkit */ - width: 0; -} - -.hideScrollbars { - padding-right: 8px; /* pad-right for about half the width of a scrollbar.. */ - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* IE 10+ */ -}