From bf1833bf18e8ea360badf46df6928343f434388c Mon Sep 17 00:00:00 2001
From: Sean Prashad <S.Prashad@outlook.com>
Date: Fri, 5 Jun 2020 14:33:44 -0400
Subject: [PATCH] Enable table headers to be stickied when scrolling

Referred to https://css-tricks.com/position-sticky-and-table-headers/
for help.

Fixes #18
---
 src/components/Table/index.js    | 11 ++---------
 src/components/Table/styles.scss |  6 ++++++
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index 32443674..6446b2df 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -233,17 +233,10 @@ const Table = () => {
   return (
     <Container className="table">
       <ReactTooltip />
-      <ReactTable
-        align="center"
-        responsive
-        borderless
-        striped
-        hover
-        {...getTableProps()}
-      >
+      <ReactTable align="center" borderless striped hover {...getTableProps()}>
         <thead>
           {headerGroups.map(headerGroup => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
+            <tr className="sticky" {...headerGroup.getHeaderGroupProps()}>
               {headerGroup.headers.map(column => (
                 <th {...column.getHeaderProps()}>
                   {column.render('Header')}
diff --git a/src/components/Table/styles.scss b/src/components/Table/styles.scss
index efd8c23a..4d005ea2 100644
--- a/src/components/Table/styles.scss
+++ b/src/components/Table/styles.scss
@@ -7,6 +7,12 @@
     display: none;
   }
 
+  tr.sticky th {
+    background: white;
+    position: sticky;
+    top: 0;
+  }
+
   .nav-link {
     padding: 0;
   }