Skip to content

Commit 108b424

Browse files
author
Kubit
committed
Update TableV2
Include sticky right columns and include new examples and documentation
1 parent 70f3319 commit 108b424

File tree

58 files changed

+3182
-181
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+3182
-181
lines changed

‎src/components/dataTable/__tests__/hooks/useDataTableStickyDividers.test.ts

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { renderHook } from '@testing-library/react-hooks';
2+
3+
import { useDataTableStickyDividers } from '../../hooks/useDataTableStickyDividers';
4+
5+
describe('useDataTableStickyDividers', () => {
6+
let wrapper: HTMLDivElement;
7+
let scrollableContainer: HTMLDivElement;
8+
let divider: HTMLDivElement;
9+
let table: HTMLTableElement;
10+
let tableHead: HTMLTableSectionElement;
11+
let tableRow: HTMLTableRowElement;
12+
let tableCell: HTMLTableCellElement;
13+
let leftBoxShadowContainer: HTMLDivElement;
14+
let ref: React.RefObject<HTMLDivElement>;
15+
16+
beforeAll(() => {
17+
global.ResizeObserver = class ResizeObserver {
18+
callback;
19+
constructor(callback) {
20+
this.callback = callback;
21+
}
22+
observe() {
23+
// Call the callback
24+
this.callback();
25+
}
26+
unobserve() {
27+
// do nothing
28+
}
29+
disconnect() {
30+
// do nothing
31+
}
32+
};
33+
});
34+
35+
beforeEach(() => {
36+
wrapper = document.createElement('div');
37+
scrollableContainer = document.createElement('div');
38+
scrollableContainer.setAttribute('data-datatable-scrollable-container', '');
39+
scrollableContainer.scroll = jest.fn().mockImplementation((x, y) => {
40+
scrollableContainer.scrollTop = y;
41+
scrollableContainer.scrollLeft = x;
42+
scrollableContainer.dispatchEvent(new Event('scroll'));
43+
});
44+
divider = document.createElement('div');
45+
divider.setAttribute('data-table-divider', '');
46+
table = document.createElement('table');
47+
tableHead = document.createElement('thead');
48+
tableHead.setAttribute('data-table-head', '');
49+
tableRow = document.createElement('tr');
50+
tableRow.setAttribute('data-table-row', '');
51+
tableCell = document.createElement('td');
52+
tableCell.setAttribute('data-sticky', 'right');
53+
leftBoxShadowContainer = document.createElement('div');
54+
leftBoxShadowContainer.setAttribute('data-datatable-left-shadow', '');
55+
56+
tableRow.appendChild(tableCell);
57+
tableHead.appendChild(tableRow);
58+
table.appendChild(tableHead);
59+
scrollableContainer.appendChild(table);
60+
scrollableContainer.appendChild(divider);
61+
wrapper.appendChild(scrollableContainer);
62+
wrapper.appendChild(leftBoxShadowContainer);
63+
document.body.appendChild(wrapper);
64+
ref = { current: wrapper };
65+
});
66+
67+
afterEach(() => {
68+
document.body.removeChild(wrapper);
69+
});
70+
71+
it('When the right position of the sticky columns have been set and there is horizontal scroll, the dividers width is set to the max width of the sticky columns', () => {
72+
// Simulate horizontal scroll
73+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
74+
value: 200,
75+
});
76+
Object.defineProperty(scrollableContainer, 'clientWidth', {
77+
value: 100,
78+
});
79+
// Simulate offset width for the table row
80+
Object.defineProperty(tableRow, 'offsetWidth', {
81+
value: 200,
82+
});
83+
renderHook(() => useDataTableStickyDividers({ ref }));
84+
expect(divider.style.width).toBe('200px');
85+
});
86+
87+
it('When there are left sticky columns and there is horizontal scroll, the dividers position is set to sticky', () => {
88+
tableCell.setAttribute('data-sticky', 'left');
89+
// Simulate horizontal scroll
90+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
91+
value: 200,
92+
});
93+
Object.defineProperty(scrollableContainer, 'clientWidth', {
94+
value: 100,
95+
});
96+
// Simulate offset width for the table row
97+
Object.defineProperty(tableRow, 'offsetWidth', {
98+
value: 200,
99+
});
100+
renderHook(() => useDataTableStickyDividers({ ref }));
101+
expect(divider.style.position).toBe('sticky');
102+
});
103+
104+
it('When there are left sticky columns and there is horizontal scroll, the dividers z-index should be greather than the shadow z-index', () => {
105+
tableCell.setAttribute('data-sticky', 'left');
106+
leftBoxShadowContainer.style.zIndex = '2';
107+
// Simulate horizontal scroll
108+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
109+
value: 200,
110+
});
111+
Object.defineProperty(scrollableContainer, 'clientWidth', {
112+
value: 100,
113+
});
114+
// Simulate offset width for the table row
115+
Object.defineProperty(tableRow, 'offsetWidth', {
116+
value: 200,
117+
});
118+
renderHook(() => useDataTableStickyDividers({ ref }));
119+
expect(divider.style.zIndex).toBe('3');
120+
});
121+
122+
it('When the right position of the sticky columns have been set and there is no horizontal scroll, the dividers width is unset', () => {
123+
// Simulate offset width for the table row
124+
Object.defineProperty(tableRow, 'offsetWidth', {
125+
value: 200,
126+
});
127+
renderHook(() => useDataTableStickyDividers({ ref }));
128+
expect(divider.style.width).toBe('');
129+
});
130+
131+
it('When there are left sticky columns and there is no horizontal scroll, the dividers position is unset', () => {
132+
tableCell.setAttribute('data-sticky', 'left');
133+
// Simulate offset width for the table row
134+
Object.defineProperty(tableRow, 'offsetWidth', {
135+
value: 200,
136+
});
137+
renderHook(() => useDataTableStickyDividers({ ref }));
138+
expect(divider.style.position).toBe('');
139+
});
140+
});

‎src/components/dataTable/__tests__/hooks/useDataTableStickyLeftColumns.test.ts

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { renderHook } from '@testing-library/react-hooks';
2+
3+
import { useDataTableStickyLeftColumns } from '../../hooks/useDataTableStickyLeftColumns';
4+
5+
describe('useDataTableStickyLeftColumns', () => {
6+
let wrapper: HTMLDivElement;
7+
let scrollableContainer: HTMLDivElement;
8+
let divider: HTMLDivElement;
9+
let table: HTMLTableElement;
10+
let tableHead: HTMLTableSectionElement;
11+
let tableRow: HTMLTableRowElement;
12+
let tableCell: HTMLTableCellElement;
13+
let leftBoxShadowContainer: HTMLDivElement;
14+
let ref: React.RefObject<HTMLDivElement>;
15+
16+
beforeAll(() => {
17+
global.ResizeObserver = class ResizeObserver {
18+
callback;
19+
constructor(callback) {
20+
this.callback = callback;
21+
}
22+
observe() {
23+
// Call the callback
24+
this.callback();
25+
}
26+
unobserve() {
27+
// do nothing
28+
}
29+
disconnect() {
30+
// do nothing
31+
}
32+
};
33+
});
34+
35+
beforeEach(() => {
36+
wrapper = document.createElement('div');
37+
scrollableContainer = document.createElement('div');
38+
scrollableContainer.setAttribute('data-datatable-scrollable-container', '');
39+
scrollableContainer.scroll = jest.fn().mockImplementation((x, y) => {
40+
scrollableContainer.scrollTop = y;
41+
scrollableContainer.scrollLeft = x;
42+
scrollableContainer.dispatchEvent(new Event('scroll'));
43+
});
44+
divider = document.createElement('div');
45+
divider.setAttribute('data-table-divider', '');
46+
table = document.createElement('table');
47+
tableHead = document.createElement('thead');
48+
tableHead.setAttribute('data-table-head', '');
49+
tableRow = document.createElement('tr');
50+
tableRow.setAttribute('data-table-row', '');
51+
tableCell = document.createElement('td');
52+
tableCell.setAttribute('data-sticky', 'left');
53+
leftBoxShadowContainer = document.createElement('div');
54+
leftBoxShadowContainer.setAttribute('data-datatable-left-shadow', '');
55+
56+
tableRow.appendChild(tableCell);
57+
tableHead.appendChild(tableRow);
58+
table.appendChild(tableHead);
59+
scrollableContainer.appendChild(table);
60+
scrollableContainer.appendChild(divider);
61+
wrapper.appendChild(scrollableContainer);
62+
wrapper.appendChild(leftBoxShadowContainer);
63+
document.body.appendChild(wrapper);
64+
ref = { current: wrapper };
65+
});
66+
67+
afterEach(() => {
68+
document.body.removeChild(wrapper);
69+
});
70+
71+
it('should do nothing when there is not scrollable container', () => {
72+
const wrapperWithoutScrollableContainer = { current: document.createElement('div') };
73+
renderHook(() => useDataTableStickyLeftColumns({ ref: wrapperWithoutScrollableContainer }));
74+
expect(tableCell.style.left).toBe('');
75+
});
76+
77+
it('When there is horizontal scroll, left style for sticky columns should be set', () => {
78+
// Simulate horizontal scroll
79+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
80+
value: 200,
81+
});
82+
Object.defineProperty(scrollableContainer, 'clientWidth', {
83+
value: 100,
84+
});
85+
renderHook(() => useDataTableStickyLeftColumns({ ref }));
86+
expect(tableCell.style.left).toBe('0px');
87+
});
88+
89+
it('When there is not horizontal scroll, left style for sticky columns should not be set', () => {
90+
// Simulate not horizontal scroll
91+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
92+
value: 100,
93+
});
94+
Object.defineProperty(scrollableContainer, 'clientWidth', {
95+
value: 200,
96+
});
97+
renderHook(() => useDataTableStickyLeftColumns({ ref }));
98+
expect(tableCell.style.left).toBe('');
99+
});
100+
101+
it('When the left position of the sticky columns have been set, the leftBoxShadowContainer right position is set', () => {
102+
// Simulate horizontal scroll
103+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
104+
value: 200,
105+
});
106+
Object.defineProperty(scrollableContainer, 'clientWidth', {
107+
value: 100,
108+
});
109+
// Define table cell width
110+
Object.defineProperty(tableCell, 'offsetWidth', {
111+
value: 20,
112+
});
113+
renderHook(() => useDataTableStickyLeftColumns({ ref }));
114+
expect(leftBoxShadowContainer.style.left).toBe('20px');
115+
});
116+
});

‎src/components/dataTable/__tests__/hooks/useDataTableStickyRightColumns.test.ts

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { renderHook } from '@testing-library/react-hooks';
2+
3+
import { useDataTableStickyRightColumns } from '../../hooks/useDataTableStickyRightColumns';
4+
5+
describe('useDataTableStickyRightColumns', () => {
6+
let wrapper: HTMLDivElement;
7+
let scrollableContainer: HTMLDivElement;
8+
let divider: HTMLDivElement;
9+
let table: HTMLTableElement;
10+
let tableHead: HTMLTableSectionElement;
11+
let tableRow: HTMLTableRowElement;
12+
let tableCell: HTMLTableCellElement;
13+
let rightBoxShadowContainer: HTMLDivElement;
14+
let ref: React.RefObject<HTMLDivElement>;
15+
16+
beforeAll(() => {
17+
global.ResizeObserver = class ResizeObserver {
18+
callback;
19+
constructor(callback) {
20+
this.callback = callback;
21+
}
22+
observe() {
23+
// Call the callback
24+
this.callback();
25+
}
26+
unobserve() {
27+
// do nothing
28+
}
29+
disconnect() {
30+
// do nothing
31+
}
32+
};
33+
});
34+
35+
beforeEach(() => {
36+
wrapper = document.createElement('div');
37+
scrollableContainer = document.createElement('div');
38+
scrollableContainer.setAttribute('data-datatable-scrollable-container', '');
39+
scrollableContainer.scroll = jest.fn().mockImplementation((x, y) => {
40+
scrollableContainer.scrollTop = y;
41+
scrollableContainer.scrollLeft = x;
42+
scrollableContainer.dispatchEvent(new Event('scroll'));
43+
});
44+
divider = document.createElement('div');
45+
divider.setAttribute('data-table-divider', '');
46+
table = document.createElement('table');
47+
tableHead = document.createElement('thead');
48+
tableHead.setAttribute('data-table-head', '');
49+
tableRow = document.createElement('tr');
50+
tableRow.setAttribute('data-table-row', '');
51+
tableCell = document.createElement('td');
52+
tableCell.setAttribute('data-sticky', 'right');
53+
rightBoxShadowContainer = document.createElement('div');
54+
rightBoxShadowContainer.setAttribute('data-datatable-right-shadow', '');
55+
56+
tableRow.appendChild(tableCell);
57+
tableHead.appendChild(tableRow);
58+
table.appendChild(tableHead);
59+
scrollableContainer.appendChild(table);
60+
scrollableContainer.appendChild(divider);
61+
wrapper.appendChild(scrollableContainer);
62+
wrapper.appendChild(rightBoxShadowContainer);
63+
document.body.appendChild(wrapper);
64+
ref = { current: wrapper };
65+
});
66+
67+
afterEach(() => {
68+
document.body.removeChild(wrapper);
69+
});
70+
71+
it('should do nothing when there is not scrollable container', () => {
72+
const wrapperWithoutScrollableContainer = { current: document.createElement('div') };
73+
renderHook(() => useDataTableStickyRightColumns({ ref: wrapperWithoutScrollableContainer }));
74+
expect(tableCell.style.right).toBe('');
75+
});
76+
77+
it('When there is horizontal scroll, right style for sticky columns should be set', () => {
78+
// Simulate horizontal scroll
79+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
80+
value: 200,
81+
});
82+
Object.defineProperty(scrollableContainer, 'clientWidth', {
83+
value: 100,
84+
});
85+
renderHook(() => useDataTableStickyRightColumns({ ref }));
86+
expect(tableCell.style.right).toBe('0px');
87+
});
88+
89+
it('When there is not horizontal scroll, right style for sticky columns should not be set', () => {
90+
// Simulate not horizontal scroll
91+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
92+
value: 100,
93+
});
94+
Object.defineProperty(scrollableContainer, 'clientWidth', {
95+
value: 200,
96+
});
97+
renderHook(() => useDataTableStickyRightColumns({ ref }));
98+
expect(tableCell.style.right).toBe('');
99+
});
100+
101+
it('When the right position of the sticky columns have been set, the rightBoxShadowContainer right position is set, bearing in mind th scrollbar size too', () => {
102+
// Simulate horizontal scroll
103+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
104+
value: 200,
105+
});
106+
Object.defineProperty(scrollableContainer, 'clientWidth', {
107+
value: 100,
108+
});
109+
// Simulate vertical scroll
110+
Object.defineProperty(scrollableContainer, 'scrollHeight', {
111+
value: 200,
112+
});
113+
Object.defineProperty(scrollableContainer, 'clientHeight', {
114+
value: 100,
115+
});
116+
Object.defineProperty(scrollableContainer, 'offsetWidth', {
117+
value: 105,
118+
});
119+
renderHook(() => useDataTableStickyRightColumns({ ref }));
120+
expect(rightBoxShadowContainer.style.right).toBe('5px');
121+
});
122+
});

0 commit comments

Comments
 (0)