Skip to content
This repository was archived by the owner on Mar 10, 2026. It is now read-only.

Issue #784 - POC of double scrollbars to enhance UX (DRAFT) #25

Merged
jslatts merged 3 commits into from
May 4, 2021
Merged

Issue #784 - POC of double scrollbars to enhance UX (DRAFT) #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
132af55
Issue #784 - POC of double scrollbars to enhance UX
hgutknecht May 3, 2021
2bbb2b5
Fix typescript errors, at scroll handler lock, fixing spacing
jslatts May 4, 2021
b7882b7
Version 4.8.0
jslatts May 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "tabletable",
"version": "4.7.0",
"version": "4.8.0",
"description": "A simple and extremely flexible table component written in React.",
"main": "dist/Container.js",
"types": "dist/Container.d.ts",
Expand Down
54 changes: 48 additions & 6 deletions src/Container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// Tabletable - Copyright 2020 Zeroarc Software, LLC
'use strict';

import React, { useState, ReactElement, SyntheticEvent, FunctionComponent, useEffect } from 'react';
import React, { useState, ReactElement, SyntheticEvent, FunctionComponent, useEffect, useRef, useCallback } from 'react';
import Immutable from 'immutable';
import ClassNames from 'classnames';
// Fonts
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSort} from '@fortawesome/free-solid-svg-icons/faSort';
import { faSort } from '@fortawesome/free-solid-svg-icons/faSort';
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
import { faSortDown } from '@fortawesome/free-solid-svg-icons/faSortDown';
Expand Down Expand Up @@ -87,9 +87,21 @@ const TabletableContainer: FunctionComponent<Props> = ({
}) => {

const [formFilterValue, setFilterValue] = useState(filterValue);
const [tableWidth, setTableWidth] = useState(0);

const responsiveTableRef = useRef<HTMLDivElement | null>(null);
const scrollerRef = useRef<HTMLDivElement | null>(null);
const scrollLock = useRef(false);

const callbackTableRef = useCallback(node => {
if (node !== null) {
responsiveTableRef.current = node;
setTableWidth(node.scrollWidth + 5);
}
}, []);

// Track filterValue changes and reset the state to the passed in value
// if it changes
// if it changes.
useEffect(() => {
setFilterValue(filterValue);
}, [filterValue]);
Expand Down Expand Up @@ -139,6 +151,28 @@ const TabletableContainer: FunctionComponent<Props> = ({
}
};

// Keep top scroll controller and master table scrollbar on bottom in sync.
const handleScrollControlScroll = (e: React.UIEvent<HTMLElement>): void => {
if (responsive && !scrollLock.current && responsiveTableRef?.current) {
scrollLock.current = true;
responsiveTableRef.current.scrollLeft = e.currentTarget.scrollLeft;

setTimeout(() => {
scrollLock.current = false;
}, 1);
}
}
const handleTableScroll = (e: React.UIEvent<HTMLElement>): void => {
if (responsive && !scrollLock.current && scrollerRef?.current) {
scrollLock.current = true;
scrollerRef.current.scrollLeft = e.currentTarget.scrollLeft;

setTimeout(() => {
scrollLock.current = false;
}, 10);
}
}

//#endregion

if (!Immutable.isImmutable(data)) {
Expand Down Expand Up @@ -260,7 +294,6 @@ const TabletableContainer: FunctionComponent<Props> = ({
});

let createRow: JSX.Element | null = null;
let createActionsRow: JSX.Element | null = null;
let errorMsg: JSX.Element | null = null;

if (mode === 'create') {
Expand Down Expand Up @@ -411,6 +444,12 @@ const TabletableContainer: FunctionComponent<Props> = ({
)
: '';

const scrollControl = (
<div className="scroll-control mb-3" onScroll={handleScrollControlScroll} ref={scrollerRef}>
<div id="scroller" style={{ width: tableWidth }}></div>
</div>
);

return (
<div className={containerCssClass}>
<div className='row'>
Expand All @@ -423,7 +462,9 @@ const TabletableContainer: FunctionComponent<Props> = ({
{showSpinner ? (
spinner
) : (
<div className={responsive ? 'table-responsive' : ''}>
<>
{responsive ? scrollControl : null}
<div className={responsive ? 'table-responsive' : ''} ref={callbackTableRef} onScroll={handleTableScroll}>
<table className={tableCssClass}>
<thead>
<tr>
Expand All @@ -436,7 +477,8 @@ const TabletableContainer: FunctionComponent<Props> = ({
</tbody>
</table>
</div>
)
</>
)
}
{pager}
</div>
Expand Down