fix: webui responsive table showing unneeded horizontal scrollbar
@@ -8,8 +8,10 @@ import useResize from 'hooks/useResize';
type ResponsiveTable = <T extends object>(props: TableProps<T>) => JSX.Element;
const ResponsiveTable: ResponsiveTable = ({ scroll, ...props }) => {
- const tableRef = useRef<HTMLDivElement>(null);
+ const [ hasScrollBeenEnabled, setHasScrollBeenEnabled ] = useState<boolean>(false);
const [ tableScroll, setTableScroll ] = useState(scroll);
+ const tableRef = useRef<HTMLDivElement>(null);
+
const resize = useResize(tableRef);
useEffect(() => {
@@ -19,11 +21,25 @@ const ResponsiveTable: ResponsiveTable = ({ scroll, ...props }) => {
if (tables.length === 0) return;
const rect = tables[0].getBoundingClientRect();
+
+ /*
+ * ant table scrolling has an odd behaviour. If scroll.x is set to 'max-content' initially
+ * it will show the scroll bar. We need to set it to undefined the first time if scrolling
+ * is not needed, and 'max-content' if we want to disable scrolling after it has been displayed.
+ */
+ let scrollX: 'max-content'|undefined|number = (
+ hasScrollBeenEnabled ? 'max-content' : undefined
+ );
+ if (rect.width > resize.width) {
+ scrollX = rect.width;
+ setHasScrollBeenEnabled(true);
+ }
+
setTableScroll({
- x: rect.width > resize.width ? rect.width : 'max-content',
+ x: scrollX,
y: scroll?.y,
});
- }, [ resize, scroll ]);
+ }, [ hasScrollBeenEnabled, resize, scroll ]);
return <div ref={tableRef}>
<Table scroll={tableScroll} {...props} />
