diff --git a/CHANGELOG.md b/CHANGELOG.md index 62f71b4..dbfe02c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,14 @@ # CHANGELOG +## 0.6.4 + +_2024-12-09_ + +### Bugfix + +- Force the sticky header to be the size of the rendered header +- Make sure footer width is 0 when not present + ## 0.6.3 _2024-12-04_ diff --git a/package.json b/package.json index 5c870a3..88dda67 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-fluid-table", - "version": "0.6.3", + "version": "0.6.4", "description": "A React table inspired by react-window", "author": "Mckervin Ceme ", "license": "MIT", diff --git a/src/Footer.tsx b/src/Footer.tsx index cebc138..f6b0dbb 100644 --- a/src/Footer.tsx +++ b/src/Footer.tsx @@ -46,10 +46,15 @@ const Footer = () => { const ref = useRef(null); // constants + const hasFooter = !!FooterComponent || !!columns.find(c => !!c.footer); const style: React.CSSProperties = { minWidth: stickyFooter ? undefined : pixelWidths.reduce((pv, c) => pv + c, 0), ...footerStyle }; + if (!hasFooter) { + style.width = 0; + style.minWidth = 0; + } // functions const onScroll = useCallback( diff --git a/src/Header.tsx b/src/Header.tsx index 77f5be1..6aba0a1 100644 --- a/src/Header.tsx +++ b/src/Header.tsx @@ -101,6 +101,7 @@ const Header = forwardRef( (ref as React.MutableRefObject).current || NO_NODE; const width = scrollWidth <= clientWidth ? "100%" : undefined; const stickyStyle: React.CSSProperties = { + height, zIndex: columns.find(c => c.frozen) ? 2 : undefined };