Skip to content

Commit 5eb1b79

Browse files
weblancasterweblancaster
authored
Merge pull request #194 from dcos-labs/mp/bug/DCOS-39675-hide-table-scrollbar
DCOS-39675: Hide scrollbars in Table grids
2 parents ded767f + 415061b commit 5eb1b79

File tree

3 files changed

+49
-26
lines changed

3 files changed

+49
-26
lines changed

‎packages/table/components/Table.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
import * as React from "react";
2-
import { css } from "emotion";
2+
import { css, cx } from "emotion";
33
import { AutoSizer, MultiGrid, GridCellProps } from "react-virtualized";
44

5-
import { headerCss, cellCss, tableCss, rightGrid } from "../style";
5+
import {
6+
headerCss,
7+
cellCss,
8+
tableCss,
9+
rightGrid,
10+
hideScrollbarCss
11+
} from "../style";
612

713
import { IColumnProps, Column } from "./Column";
814
import memoizeOne from "memoize-one";
@@ -97,7 +103,7 @@ export class Table<T> extends React.PureComponent<ITableProps, ITableState> {
97103
}
98104

99105
private getGrid({ width, height }) {
100-
const rightGridStyles = this.state.isScroll ? rightGrid : "";
106+
const rightGridStyles = cx({ [rightGrid]: this.state.isScroll });
101107
const columnCount = React.Children.count(this.props.children);
102108
const columnSizes = this.getColumnSizes(
103109
React.Children.toArray(this.props.children) as Array<
@@ -127,8 +133,9 @@ export class Table<T> extends React.PureComponent<ITableProps, ITableState> {
127133
width={width}
128134
hideTopRightGridScrollbar={true}
129135
hideBottomLeftGridScrollbar={true}
130-
classNameTopRightGrid={rightGridStyles}
136+
classNameTopRightGrid={cx(rightGridStyles, hideScrollbarCss)}
131137
classNameBottomRightGrid={rightGridStyles}
138+
classNameBottomLeftGrid={hideScrollbarCss}
132139
/>
133140
);
134141
}

‎packages/table/style.ts

+8
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,11 @@ export const rightGrid = css`
3232
background-repeat: no-repeat;
3333
background-size: 8px 100%;
3434
`;
35+
36+
export const hideScrollbarCss = css`
37+
-ms-overflow-style: -ms-autohiding-scrollbar;
38+
39+
::-webkit-scrollbar {
40+
display: none;
41+
}
42+
`;

‎packages/table/tests/__snapshots__/Table.test.tsx.snap

+30-22
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ exports[`Table renders again with new data 1`] = `
4343
>
4444
<MultiGrid
4545
cellRenderer={[Function]}
46-
classNameBottomLeftGrid=""
46+
classNameBottomLeftGrid="css-1oay0jc"
4747
classNameBottomRightGrid=""
4848
classNameTopLeftGrid=""
49-
classNameTopRightGrid=""
49+
classNameTopRightGrid="css-1oay0jc"
5050
columnCount={1}
5151
columnWidth={[Function]}
5252
enableFixedColumnScroll={true}
@@ -116,10 +116,10 @@ exports[`Table renders again with new data 2`] = `
116116
>
117117
<MultiGrid
118118
cellRenderer={[Function]}
119-
classNameBottomLeftGrid=""
119+
classNameBottomLeftGrid="css-1oay0jc"
120120
classNameBottomRightGrid=""
121121
classNameTopLeftGrid=""
122-
classNameTopRightGrid=""
122+
classNameTopRightGrid="css-1oay0jc"
123123
columnCount={1}
124124
columnWidth={[Function]}
125125
enableFixedColumnScroll={true}
@@ -147,11 +147,19 @@ exports[`Table renders again with new data 2`] = `
147147
`;
148148

149149
exports[`Table renders default 1`] = `
150-
.emotion-12 {
150+
.emotion-14 {
151151
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
152152
font-weight: normal;
153153
}
154154
155+
.emotion-4 {
156+
-ms-overflow-style: -ms-autohiding-scrollbar;
157+
}
158+
159+
.emotion-4::-webkit-scrollbar {
160+
display: none;
161+
}
162+
155163
.emotion-0 {
156164
box-sizing: border-box;
157165
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
@@ -188,7 +196,7 @@ exports[`Table renders default 1`] = `
188196
width: 307.2px;
189197
}
190198
191-
.emotion-4 {
199+
.emotion-5 {
192200
box-sizing: border-box;
193201
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
194202
border-bottom: 1px solid #DADDE2;
@@ -199,7 +207,7 @@ exports[`Table renders default 1`] = `
199207
width: 307.2px;
200208
}
201209
202-
.emotion-5 {
210+
.emotion-6 {
203211
box-sizing: border-box;
204212
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
205213
border-bottom: 1px solid #DADDE2;
@@ -210,7 +218,7 @@ exports[`Table renders default 1`] = `
210218
width: 307.2px;
211219
}
212220
213-
.emotion-7 {
221+
.emotion-9 {
214222
box-sizing: border-box;
215223
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
216224
border-bottom: 1px solid #DADDE2;
@@ -221,7 +229,7 @@ exports[`Table renders default 1`] = `
221229
width: 307.2px;
222230
}
223231
224-
.emotion-8 {
232+
.emotion-10 {
225233
box-sizing: border-box;
226234
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
227235
border-bottom: 1px solid #DADDE2;
@@ -232,7 +240,7 @@ exports[`Table renders default 1`] = `
232240
width: 307.2px;
233241
}
234242
235-
.emotion-10 {
243+
.emotion-12 {
236244
box-sizing: border-box;
237245
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
238246
border-bottom: 1px solid #DADDE2;
@@ -243,7 +251,7 @@ exports[`Table renders default 1`] = `
243251
width: 307.2px;
244252
}
245253
246-
.emotion-11 {
254+
.emotion-13 {
247255
box-sizing: border-box;
248256
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica','Arial',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
249257
border-bottom: 1px solid #DADDE2;
@@ -255,7 +263,7 @@ exports[`Table renders default 1`] = `
255263
}
256264
257265
<div
258-
class="emotion-12"
266+
class="emotion-14"
259267
style="overflow:visible;height:0;width:0"
260268
>
261269
<div
@@ -290,7 +298,7 @@ exports[`Table renders default 1`] = `
290298
<div
291299
aria-label="grid"
292300
aria-readonly="true"
293-
class="ReactVirtualized__Grid"
301+
class="ReactVirtualized__Grid emotion-4"
294302
role="grid"
295303
style="box-sizing:border-box;direction:ltr;height:35px;position:absolute;width:716.8px;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:auto;overflow-y:hidden;left:0;top:0"
296304
>
@@ -328,7 +336,7 @@ exports[`Table renders default 1`] = `
328336
<div
329337
aria-label="grid"
330338
aria-readonly="true"
331-
class="ReactVirtualized__Grid"
339+
class="ReactVirtualized__Grid emotion-4"
332340
role="grid"
333341
style="box-sizing:border-box;direction:ltr;height:733px;position:absolute;width:307.2px;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:auto;left:0"
334342
>
@@ -338,14 +346,14 @@ exports[`Table renders default 1`] = `
338346
style="width:307.2px;height:70px;max-width:307.2px;max-height:70px;overflow:hidden;pointer-events:;position:relative"
339347
>
340348
<div
341-
class="emotion-4"
349+
class="emotion-5"
342350
>
343351
<strong>
344352
Brian Vaughn
345353
</strong>
346354
</div>
347355
<div
348-
class="emotion-5"
356+
class="emotion-6"
349357
>
350358
<strong>
351359
Jon Doe
@@ -368,42 +376,42 @@ exports[`Table renders default 1`] = `
368376
style="width:1021.5999999999999px;height:70px;max-width:1021.5999999999999px;max-height:70px;overflow:hidden;pointer-events:;position:relative"
369377
>
370378
<div
371-
class="emotion-4"
379+
class="emotion-5"
372380
>
373381
<em>
374382
Software Engineer
375383
</em>
376384
</div>
377385
<div
378-
class="emotion-7"
386+
class="emotion-9"
379387
>
380388
<span>
381389
CA
382390
</span>
383391
</div>
384392
<div
385-
class="emotion-8"
393+
class="emotion-10"
386394
>
387395
<span>
388396
95125
389397
</span>
390398
</div>
391399
<div
392-
class="emotion-5"
400+
class="emotion-6"
393401
>
394402
<em>
395403
Product engineer
396404
</em>
397405
</div>
398406
<div
399-
class="emotion-10"
407+
class="emotion-12"
400408
>
401409
<span>
402410
CA
403411
</span>
404412
</div>
405413
<div
406-
class="emotion-11"
414+
class="emotion-13"
407415
>
408416
<span>
409417
95125

0 commit comments

Comments
 (0)