From 7f82f7cc0282952285d8aafebe12294efb6f5ed9 Mon Sep 17 00:00:00 2001
From: Arnelle Balane <arnellebalane@gmail.com>
Date: Mon, 1 Jun 2020 22:14:15 +0800
Subject: [PATCH 1/2] Make DataTable first and last rows stick to top/bottom

---
 src/components/DataTable.vue          | 22 +++++++++-------------
 src/components/DataTableInsertRow.vue | 10 ++++++++--
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index d828656..e52b307 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -53,32 +53,28 @@ table {
   width: 100%;
   min-height: 100vh;
   border-collapse: collapse;
-}
-
-thead tr {
-  border-bottom: 1px solid #bbbbbb;
-  background-color: #f2f2f2;
+  position: relative;
 }
 
 .data-table-row:not(.editing):nth-child(2n) {
   background-color: #f0f4ff;
 }
 
-th {
-  font-weight: 400;
-}
-
 th {
   height: 2.67em;
   padding: 0 2em;
 
   font-size: 0.75em;
+  font-weight: 400;
   text-align: left;
 
-  max-width: 0; /* required for ellipsis overflow to work */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  position: sticky;
+  top: 0;
+  background-color: #f2f2f2;
+  /* Here we're using an inset shadow instead of a bottom border to achieve the
+     same effect. This is to prevent the border from disappearing when the
+     table cells become sticky. */
+  box-shadow: inset 0 -1px 0 0 #bbbbbb;
 }
 
 th:first-child,
diff --git a/src/components/DataTableInsertRow.vue b/src/components/DataTableInsertRow.vue
index cd507a0..dade9ab 100644
--- a/src/components/DataTableInsertRow.vue
+++ b/src/components/DataTableInsertRow.vue
@@ -78,16 +78,22 @@ td:first-child {
 
 td {
   height: 2.67em;
-  border-top: 1px solid #bbb;
 
   font-size: 0.75em;
   text-align: left;
-  background-color: #f2f2f2;
 
   max-width: 0; /* required for ellipsis overflow to work */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  position: sticky;
+  bottom: 0;
+  background-color: #f2f2f2;
+  /* Here we're using an inset shadow instead of a top border to achieve the
+     same effect. This is to prevent the border from disappearing when the
+     table cells become sticky. */
+  box-shadow: inset 0 1px 0 0 #bbbbbb;
 }
 
 tr:not(.creating) td {

From d4f6c3608132502fa7e39aeaf79575fd8b938fac Mon Sep 17 00:00:00 2001
From: Arnelle Balane <arnellebalane@gmail.com>
Date: Mon, 1 Jun 2020 22:17:41 +0800
Subject: [PATCH 2/2] Scroll to bottom of DataTable after adding a new row

---
 src/components/DataTable.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index e52b307..9da9ea7 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -21,7 +21,7 @@
         <td></td>
       </tr>
 
-      <DataTableInsertRow @create="setValue" />
+      <DataTableInsertRow @create="handleCreate" />
     </tbody>
   </table>
 </template>
@@ -44,7 +44,17 @@ export default {
     }
   },
 
-  methods: mapActions(['setValue', 'deleteKey'])
+  methods: {
+    ...mapActions(['setValue', 'deleteKey']),
+
+    async handleCreate(data) {
+      await this.setValue(data);
+
+      // Scroll to last row in the table
+      const element = document.scrollingElement;
+      element.scrollTop = element.scrollHeight;
+    }
+  }
 };
 </script>