more table styling

public/index.html

@@ -15,6 +15,7 @@
     body {
       margin: 0;
       font-size: 18px;
+      background-color: #E6E6E6;
     }
   </style>
   <noscript>

src/Table.js

@@ -17,12 +17,13 @@ export default function Table(props) {
   const [filter, setFilter] = React.useState(filterInitial);
   const [activeFilter, setActiveFilter] = React.useState(activeFilterInitial);
 
-  const { items, requestSort, sortConfig } = useSortableData(props.items, filter);
+  const { items, requestSort, sortConfig } = useSortableData(props.items, filter, {key: "url", direction: "ascending"});
 
   const getSortState = (name) => {
     if (!sortConfig) {
       return;
     }
+
     return sortConfig.key === name ? sortConfig.direction : '';
   };
 

src/styles.scss

@@ -4,7 +4,7 @@ body {
 
 #databronnen {
   font-family: "Maax", Arial, Helvetica, sans-serif;
-  padding: 1rem;
+  padding: 0.5rem;
   overflow: auto;
   width: 100%;
   height: 100%;
@@ -19,29 +19,33 @@ body {
   th, td {
     line-height: 1.25rem;
     vertical-align: top;
-    font-size: 0.8rem;
+    font-size: 0.75rem;
+    background-color: #fff;
 
     &:not(:last-child) {
       border-right: 1px dashed #ccc;
     }
 
-    &.url          { min-width: 14rem; max-width: 14rem; }
-    &.titel        { min-width: 14rem; max-width: 14rem; }
-    &.omschrijving { min-width: 14rem; max-width: 14rem; }
-    &.scope        { min-width: 6rem; max-width: 6rem; }
-    &.toegang      { min-width: 6rem; max-width: 6rem; }
-    &.type         { min-width: 6rem; max-width: 6rem; }
-    &.formaat      { min-width: 6rem; max-width: 6rem; }
-    &.thema        { min-width: 8rem; max-width: 8rem; }
-    &.subthema     { min-width: 8rem; max-width: 8rem; }
+    &.url          { min-width: 13rem; max-width: 13rem; }
+    &.titel        { min-width: 13rem; max-width: 13rem; }
+    &.omschrijving { min-width: 15rem; max-width: 15rem; }
+    &.scope        { min-width: 7rem; max-width: 7rem; }
+    &.toegang      { min-width: 7rem; max-width: 7rem; }
+    &.type         { min-width: 7rem; max-width: 7rem; }
+    &.formaat      { min-width: 7rem; max-width: 7rem; }
+    &.thema        { min-width: 7rem; max-width: 7rem; }
+    &.subthema     { min-width: 7rem; max-width: 7rem; }
   }
 
   thead {
     th {
       text-align: left;
-      border-bottom: 2px solid black;
+      background-color: #00954a;
+      color: #fff;
       font-weight: 500;
       min-width: 7em;
+      padding: 0.25em 0 0.15em;
+      font-size: 0.8rem;
 
       > div {
         display: flex;
@@ -51,9 +55,11 @@ body {
 
     span {
       padding: 0 0.25em;
+      margin-right: 1rem;
       vertical-align: middle;
       cursor: pointer;
       white-space: nowrap;
+      flex-grow: 1;
     }
 
     svg {
@@ -65,7 +71,7 @@ body {
 
       path {
         pointer-events: auto;
-        fill: #ccc;
+        fill: #fff;
       }
     }
 
@@ -88,10 +94,20 @@ body {
   tbody td {
     padding: 0.5em;
     border-bottom: 1px dashed #ccc;
-    font-size: 0.75rem;
 
     &.url {
       word-break: break-all;
+
+      a {
+        display: block;
+        max-height: 4.25rem;
+        overflow: hidden;
+        transition: max-height 200ms ease;
+
+        &:hover {
+          max-height: 15rem;
+        }
+      }
     }
 
     &.titel {
@@ -110,8 +126,6 @@ body {
         }
       }
     }
-
-
   }
 
   input {
@@ -122,8 +136,8 @@ body {
     border: none;
     background-color: #eee;
     font-family: "Maax", Arial, Helvetica, sans-serif;
-    padding: 0.25rem;
-    line-height: 1rem;
+    padding: 0.25rem 0.25rem 0;
+    line-height: 1.25rem;
   }
 }