Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit c39d65c

Browse filesBrowse files
author
Sean
authored
Enable table headers to be stickied when scrolling (seanprashad#20)
Referred to https://css-tricks.com/position-sticky-and-table-headers/ for help. Fixes seanprashad#18
1 parent 4af578f commit c39d65c
Copy full SHA for c39d65c

File tree

Expand file treeCollapse file tree

2 files changed

+8
-9
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+8
-9
lines changed

‎src/components/Table/index.js

Copy file name to clipboardExpand all lines: src/components/Table/index.js
+2-9Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -233,17 +233,10 @@ const Table = () => {
233233
return (
234234
<Container className="table">
235235
<ReactTooltip />
236-
<ReactTable
237-
align="center"
238-
responsive
239-
borderless
240-
striped
241-
hover
242-
{...getTableProps()}
243-
>
236+
<ReactTable align="center" borderless striped hover {...getTableProps()}>
244237
<thead>
245238
{headerGroups.map(headerGroup => (
246-
<tr {...headerGroup.getHeaderGroupProps()}>
239+
<tr className="sticky" {...headerGroup.getHeaderGroupProps()}>
247240
{headerGroup.headers.map(column => (
248241
<th {...column.getHeaderProps()}>
249242
{column.render('Header')}

‎src/components/Table/styles.scss

Copy file name to clipboardExpand all lines: src/components/Table/styles.scss
+6Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
display: none;
88
}
99

10+
tr.sticky th {
11+
background: white;
12+
position: sticky;
13+
top: 0;
14+
}
15+
1016
.nav-link {
1117
padding: 0;
1218
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.