Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(dataGrid): header unscrollable in infinite scroll #6091

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

fix(dataGrid): header unscrollable in infinite scroll #6091

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
a043c09
fix(dataGrid): header unscrollable in infinite scroll
devadula-nandan Sep 23, 2024
c227d15
refactor(Datagrid): implement fake scroll
devadula-nandan Sep 26, 2024
32eed5b
refactor: datagrid virtual scrollbar
devadula-nandan Sep 27, 2024
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
37 changes: 14 additions & 23 deletions packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3555,15 +3555,12 @@ p.c4p--about-modal__copyright-text:first-child {
width: 1%;
align-items: center;
}
.c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar {
scrollbar-width: thin;
}
.c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
background-color: var(--cds-text-placeholder, rgba(22, 22, 22, 0.4));
}
.c4p--datagrid__grid-container .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
width: 6px;
background-color: var(--cds-background, #ffffff);
.c4p--datagrid__grid-container .c4p--datagrid__fake-scrollbar {
right: 0;
bottom: 0;
width: 16px;
height: calc(100% - 48px);
overflow-y: auto;
}
.c4p--datagrid__grid-container .c4p--datagrid__cell {
display: flex;
Expand Down Expand Up @@ -3922,19 +3919,6 @@ p.c4p--about-modal__copyright-text:first-child {
margin-right: 0.5rem;
}

.c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
width: 10px;
height: 7px;
}

.c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-track {
background: var(--cds-layer);
}

.c4p--datagrid__virtual-scrollbar::-webkit-scrollbar-thumb {
border-radius: 5px;
}

.c4p--datagrid__virtualScrollContainer {
width: 100%;
}
Expand Down Expand Up @@ -3978,6 +3962,12 @@ p.c4p--about-modal__copyright-text:first-child {
.c4p--datagrid .c4p--datagrid__head-wrap {
overflow: hidden;
background-color: var(--cds-layer-accent);
-ms-overflow-style: none;
scrollbar-width: none;
}

.c4p--datagrid .c4p--datagrid__head-wrap::-webkit-scrollbar {
display: none;
}

.c4p--datagrid .cds--action-list .cds--btn.c4p--button-menu {
Expand Down Expand Up @@ -8881,8 +8871,9 @@ button.c4p--add-select__global-filter-toggle--open {
text-align: left;
}
.c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__popover-trigger {
font-family: inherit;
/* stylelint-disable-next-line declaration-no-important */
border: none !important;
font-family: inherit;
}
.c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link.cds--link:visited {
display: inline-block;
Expand Down
39 changes: 13 additions & 26 deletions packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,18 +281,12 @@
align-items: center;
}

.#{$block-class}__virtual-scrollbar {
//makes thin scrollbar in chrome and firefox
scrollbar-width: thin;
}

.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
background-color: $text-placeholder;
}

.#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
width: 6px;
background-color: $background;
.#{$block-class}__fake-scrollbar {
right: 0;
bottom: 0;
width: 16px;
height: calc(100% - 48px);
overflow-y: auto;
}

.#{$block-class}__cell {
Expand Down Expand Up @@ -719,20 +713,6 @@
flex: 0 0 auto;
margin-right: $spacing-03;
}

.#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
width: 10px;
height: 7px;
}

.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-track {
background: $layer;
}

.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
border-radius: 5px;
}

.#{$block-class}__virtualScrollContainer {
width: 100%;
}
Expand Down Expand Up @@ -781,6 +761,13 @@
.#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
overflow: hidden;
background-color: $layer-accent;
-ms-overflow-style: none;
scrollbar-width: none;
}

.#{$block-class}
.#{c4p-settings.$pkg-prefix}--datagrid__head-wrap::-webkit-scrollbar {
display: none;
}

.#{$block-class}
Expand Down
2 changes: 1 addition & 1 deletion packages/ibm-products/src/components/Datagrid/Datagrid.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1210,7 +1210,7 @@ describe(componentName, () => {
.getByRole('table')
.getElementsByTagName('tbody')[0]
.getElementsByTagName('div')[0].classList[0]
).toBe('c4p--datagrid__virtual-scrollbar');
).toBe('c4p--datagrid__virtual-container');
});

it('renders Ten Thousand table entries', async () => {
Expand Down
83 changes: 46 additions & 37 deletions packages/ibm-products/src/components/Datagrid/Datagrid/DatagridVirtualBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { pkg } from '../../../settings';
import DatagridHead from './DatagridHead';
import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
import { DataGridState, DatagridRow } from '../types';
import { useIsomorphicEffect } from '../../../global/js/hooks';

const blockClass = `${pkg.prefix}--datagrid`;

Expand Down Expand Up @@ -41,12 +40,12 @@ const DatagridVirtualBody = (datagridState: DataGridState) => {
page,
handleResize,
gridRef,
tableId,
onVirtualScroll,
} = datagridState;

const headWrapRef = useRef<HTMLDivElement | null>(null);
const innerRef = useRef<HTMLDivElement | null>(null);
const fakeScrollRef = useRef<HTMLDivElement | null>(null);

/* istanbul ignore next */
const handleVirtualGridResize = () => {
Expand Down Expand Up @@ -74,42 +73,33 @@ const DatagridVirtualBody = (datagridState: DataGridState) => {

const visibleRows = ((DatagridPagination && page) || rows) as DatagridRow[];
const testRef: MutableRefObject<HTMLDivElement | null> = useRef(null);

// Sync the scrollLeft position of the virtual body to the table header
useEffect(() => {
const headWrapEl = document?.querySelector(
`#${tableId} .${blockClass}__head-wrap`
);
const headEle = headWrapEl?.querySelector(`thead`);
if (headEle) {
headEle.style.display = 'flex';
} // scrollbar width to header column to fix header alignment

function handleScroll(event) {
const virtualBody = event.target;
if (headWrapEl) {
headWrapEl.scrollLeft = virtualBody?.scrollLeft;
}
}

const testRefValue = testRef?.current;
testRefValue?.addEventListener('scroll', handleScroll);
return () => {
testRefValue?.removeEventListener('scroll', handleScroll);
};
});

useIsomorphicEffect(() => {
if (headWrapRef.current && headWrapRef.current.style) {
headWrapRef.current.style.width = `${gridRef?.current?.clientWidth}px`;
const testScrollEl = testRef.current;
const fakeScrollEl = fakeScrollRef.current;

if (testScrollEl && fakeScrollEl) {
let isSyncing = false;

const syncScroll = (source, target) => {
if (!isSyncing) {
isSyncing = true;
target.scrollTop = source.scrollTop;
isSyncing = false;
}
};

const handleTestScroll = () => syncScroll(testScrollEl, fakeScrollEl);
const handleFakeScroll = () => syncScroll(fakeScrollEl, testScrollEl);

testScrollEl.addEventListener('scroll', handleTestScroll);
fakeScrollEl.addEventListener('scroll', handleFakeScroll);

return () => {
testScrollEl.removeEventListener('scroll', handleTestScroll);
fakeScrollEl.removeEventListener('scroll', handleFakeScroll);
};
}
}, [headWrapRef, gridRef]);

useIsomorphicEffect(() => {
if (testRef?.current && testRef.current.style) {
testRef.current.style.width = `${gridRef?.current?.clientWidth}px`;
}
}, [testRef, gridRef]);
}, []);

return (
<>
Expand All @@ -134,7 +124,7 @@ const DatagridVirtualBody = (datagridState: DataGridState) => {
innerRef={innerListRef}
outerRef={testRef}
ref={listRef}
className={`${blockClass}__virtual-scrollbar`}
className={`${blockClass}__virtual-container`}
>
{({ index, style }) => {
const row = visibleRows[index];
Expand All @@ -152,6 +142,25 @@ const DatagridVirtualBody = (datagridState: DataGridState) => {
);
}}
</VariableSizeList>
<div
className="fake-scrollbar"
ref={fakeScrollRef}
style={{
position: 'absolute',
overflow: 'auto',
right: 0,
bottom: 0,
height: 'calc(100% - 48px)',
width: '16px',
}}
>
<div
style={{
height: testRef.current?.children[0]?.clientHeight,
width: '16px',
}}
></div>
</div>
</TableBody>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/ibm-products/src/components/Datagrid/_storybook-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
.carbon-nested-table {
border-bottom: 1px solid $border-subtle-01;

.#{$block-class}__virtual-scrollbar > div > div:last-child td {
.#{$block-class}__virtual-container > div > div:last-child td {
border-bottom: none;
}
}
Expand Down
Loading