Merge pull request #15 from uncaughtxcptn/feature/data-table-enhancem…

…ents

Inspector page enhancements

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>
 
@@ -53,32 +63,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,

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 {