Skip to content

Commit 5dd9b3b

Browse files
maxhudsonmaxhudson
committed
Sticky corner support
1 parent 1380e0d commit 5dd9b3b

File tree

6 files changed

+114
-17
lines changed

6 files changed

+114
-17
lines changed

‎dist/index.js

+46-2
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@
134134
this.yWrapper = this.table.querySelector('#sticky-table-y-wrapper');
135135
this.stickyHeader = this.table.querySelector('#sticky-header');
136136
this.stickyColumn = this.table.querySelector('#sticky-column');
137+
this.stickyCorner = this.table.querySelector('#sticky-corner');
137138

138139
this.xWrapper.addEventListener('scroll', this.onScrollX);
139140

@@ -255,8 +256,12 @@
255256

256257
if (cellToCopy) {
257258
height = this.getSizeWithoutBoxSizing(cellToCopy).height;
258-
console.log(height, cellToCopy.offsetHeight);
259+
259260
this.stickyColumn.firstChild.childNodes[r].firstChild.style.height = height + 'px';
261+
262+
if (r === 0) {
263+
this.stickyCorner.firstChild.firstChild.firstChild.style.height = height + 'px';
264+
}
260265
}
261266
}
262267
}
@@ -276,6 +281,13 @@
276281

277282
cell.style.width = width + 'px';
278283
cell.style.minWidth = width + 'px';
284+
285+
if (c === 0) {
286+
cell = this.stickyCorner.firstChild.firstChild.firstChild;
287+
288+
cell.style.width = width + 'px';
289+
cell.style.minWidth = width + 'px';
290+
}
279291
}
280292
}
281293
}
@@ -314,6 +326,26 @@
314326
cells
315327
);
316328
}
329+
}, {
330+
key: 'getStickyCorner',
331+
value: function getStickyCorner(rows) {
332+
var cells;
333+
var stickyCorner = [];
334+
335+
rows.forEach(proxy(function (row, r) {
336+
if (r === 0) {
337+
cells = row.props.children;
338+
339+
stickyCorner.push(_react2.default.createElement(
340+
_Row2.default,
341+
_extends({}, row.props, { id: '', key: r }),
342+
cells[0]
343+
));
344+
}
345+
}, this));
346+
347+
return stickyCorner;
348+
}
317349
}, {
318350
key: 'getStyle',
319351
value: function getStyle(node) {
@@ -335,12 +367,15 @@
335367
key: 'render',
336368
value: function render() {
337369
var rows = _react2.default.Children.toArray(this.props.children);
338-
var stickyColumn, stickyHeader;
370+
var stickyColumn, stickyHeader, stickyCorner;
339371

340372
this.rowCount = rows.length;
341373
this.columnCount = rows[0] && rows[0].props.children.length || 0;
342374

343375
if (rows.length) {
376+
if (this.stickyColumnCount > 0) {
377+
stickyCorner = this.getStickyCorner(rows);
378+
}
344379
if (this.stickyColumnCount > 0) {
345380
stickyColumn = this.getStickyColumn(rows);
346381
}
@@ -362,6 +397,15 @@
362397
{ id: 'y-scrollbar' },
363398
_react2.default.createElement('div', null)
364399
),
400+
_react2.default.createElement(
401+
'div',
402+
{ className: 'sticky-corner', id: 'sticky-corner' },
403+
_react2.default.createElement(
404+
_Table2.default,
405+
null,
406+
stickyCorner
407+
)
408+
),
365409
_react2.default.createElement(
366410
'div',
367411
{ className: 'sticky-header', id: 'sticky-header' },

‎dist/react-sticky-table.css

+8-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,13 @@
1313
overflow: hidden;
1414
border: 2px solid #e5e5e5;
1515
}
16+
.sticky-table .sticky-corner {
17+
position: absolute;
18+
left: 0;
19+
top: 0;
20+
z-index: 3;
21+
border-right: 2px solid #e5e5e5;
22+
}
1623
.sticky-table .sticky-header {
1724
position: absolute;
1825
margin-top: -2px;
@@ -22,7 +29,7 @@
2229
border-bottom: 2px solid #e5e5e5;
2330
transition: 0.2s;
2431
}
25-
.sticky-table .sticky-column, .sticky-table .sticky-header {
32+
.sticky-table .sticky-column, .sticky-table .sticky-header, .sticky-table .sticky-corner {
2633
background-color: #fff;
2734
display: block;
2835
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-sticky-table",
3-
"version": "1.1.3",
3+
"version": "1.1.4",
44
"description": "Dynamically sized fixed header and column for tables",
55
"repository": {
66
"type": "git",

‎src/__tests__/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describe('StickyTable', () => {
2020
</StickyTable>
2121
);
2222

23-
expect(table.find('.cell')).to.have.length(8);
23+
expect(table.find('.cell')).to.have.length(9);
2424
});
2525

2626
it('shouldn\'t render columns when opting out', () => {
@@ -55,7 +55,7 @@ describe('StickyTable', () => {
5555
</StickyTable>
5656
);
5757

58-
expect(table.find('.cell')).to.have.length(6);
58+
expect(table.find('.cell')).to.have.length(7);
5959
expect(table.find('#sticky-header .cell')).to.have.length(0);
6060
});
6161
});

‎src/index.js

+49-10
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ class StickyTable extends Component {
4949
this.yWrapper = this.table.querySelector('#sticky-table-y-wrapper');
5050
this.stickyHeader = this.table.querySelector('#sticky-header');
5151
this.stickyColumn = this.table.querySelector('#sticky-column');
52+
this.stickyCorner = this.table.querySelector('#sticky-corner');
5253

5354
this.xWrapper.addEventListener('scroll', this.onScrollX);
5455

@@ -78,8 +79,7 @@ class StickyTable extends Component {
7879
if (!this.suppressScroll) {
7980
this.xWrapper.scrollLeft = this.xScrollbar.scrollLeft;
8081
this.suppressScroll = true;
81-
}
82-
else {
82+
} else {
8383
this.suppressScroll = false;
8484
}
8585
}, this));
@@ -90,8 +90,7 @@ class StickyTable extends Component {
9090
if (!this.suppressScroll) {
9191
this.yWrapper.scrollTop = this.yScrollbar.scrollTop;
9292
this.suppressScroll = true;
93-
}
94-
else {
93+
} else {
9594
this.suppressScroll = false;
9695
}
9796
}, this));
@@ -106,8 +105,7 @@ class StickyTable extends Component {
106105
if (!this.suppressScroll) {
107106
this.xScrollbar.scrollLeft = this.xWrapper.scrollLeft;
108107
this.suppressScroll = true;
109-
}
110-
else {
108+
} else {
111109
this.suppressScroll = false;
112110
}
113111
}
@@ -116,8 +114,7 @@ class StickyTable extends Component {
116114
if (!this.suppressScroll) {
117115
this.yScrollbar.scrollTop = this.yWrapper.scrollTop;
118116
this.suppressScroll = true;
119-
}
120-
else {
117+
} else {
121118
this.suppressScroll = false;
122119
}
123120
}
@@ -178,8 +175,12 @@ class StickyTable extends Component {
178175

179176
if (cellToCopy) {
180177
height = this.getSizeWithoutBoxSizing(cellToCopy).height;
181-
178+
182179
this.stickyColumn.firstChild.childNodes[r].firstChild.style.height = height + 'px';
180+
181+
if (r === 0) {
182+
this.stickyCorner.firstChild.firstChild.firstChild.style.height = height + 'px';
183+
}
183184
}
184185
}
185186
}
@@ -202,6 +203,13 @@ class StickyTable extends Component {
202203

203204
cell.style.width = width + 'px';
204205
cell.style.minWidth = width + 'px';
206+
207+
if (c === 0) {
208+
cell = this.stickyCorner.firstChild.firstChild.firstChild;
209+
210+
cell.style.width = width + 'px';
211+
cell.style.minWidth = width + 'px';
212+
}
205213
}
206214
}
207215
}
@@ -251,6 +259,31 @@ class StickyTable extends Component {
251259
);
252260
}
253261

262+
/**
263+
* Get the jsx cells for sticky columns by copying
264+
* children elements
265+
* @param {array} rows provided child row elements
266+
* @returns {array} array of <Row> elements for sticky column
267+
*/
268+
getStickyCorner(rows) {
269+
var cells;
270+
var stickyCorner = [];
271+
272+
rows.forEach(proxy((row, r) => {
273+
if (r === 0) {
274+
cells = row.props.children;
275+
276+
stickyCorner.push(
277+
<Row {...row.props} id='' key={r}>
278+
{cells[0]}
279+
</Row>
280+
);
281+
}
282+
}, this));
283+
284+
return stickyCorner;
285+
}
286+
254287
/**
255288
* Fill for browsers that don't support getComputedStyle (*cough* I.E.)
256289
* @param {object} node dom object
@@ -290,12 +323,15 @@ class StickyTable extends Component {
290323
*/
291324
render() {
292325
var rows = React.Children.toArray(this.props.children);
293-
var stickyColumn, stickyHeader;
326+
var stickyColumn, stickyHeader, stickyCorner;
294327

295328
this.rowCount = rows.length;
296329
this.columnCount = (rows[0] && rows[0].props.children.length) || 0;
297330

298331
if (rows.length) {
332+
if (this.stickyColumnCount > 0) {
333+
stickyCorner = this.getStickyCorner(rows);
334+
}
299335
if (this.stickyColumnCount > 0) {
300336
stickyColumn = this.getStickyColumn(rows);
301337
}
@@ -308,6 +344,9 @@ class StickyTable extends Component {
308344
<div className={'sticky-table ' + (this.props.className || '')} id={'sticky-table-' + this.id}>
309345
<div id='x-scrollbar'><div></div></div>
310346
<div id='y-scrollbar'><div></div></div>
347+
<div className='sticky-corner' id='sticky-corner'>
348+
<Table>{stickyCorner}</Table>
349+
</div>
311350
<div className='sticky-header' id='sticky-header'>
312351
<Table>{stickyHeader}</Table>
313352
</div>

‎src/sticky-table.css

+8-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@
44
overflow: hidden;
55
border: 2px solid #e5e5e5;
66
}
7+
.sticky-table .sticky-corner {
8+
position: absolute;
9+
left: 0;
10+
top: 0;
11+
z-index: 3;
12+
border-right: 2px solid #e5e5e5;
13+
}
714
.sticky-table .sticky-header {
815
position: absolute;
916
margin-top: -2px;
@@ -13,7 +20,7 @@
1320
border-bottom: 2px solid #e5e5e5;
1421
transition: 0.2s;
1522
}
16-
.sticky-table .sticky-column, .sticky-table .sticky-header {
23+
.sticky-table .sticky-column, .sticky-table .sticky-header, .sticky-table .sticky-corner {
1724
background-color: #fff;
1825
display: block;
1926
}

0 commit comments

Comments
 (0)