add dfe css styling

R/dfe_reactable.R

@@ -47,12 +47,14 @@ dfe_reactable <- function(data, ...) {
     resizable = TRUE,
     fullWidth = TRUE,
     defaultColDef = reactable::colDef(
-      headerClass = "bar-sort-header",
+      headerClass = "govuk-table__header",
       html = TRUE,
       na = "NA",
       minWidth = 65,
-      align = "left"
+      align = "left",
+      class = "govuk-table__cell"
     ),
+    rowClass = "govuk-table__cell",
     language = reactable::reactableLang(
       searchPlaceholder = "Search table..."
     ),
@@ -67,6 +69,7 @@ dfe_reactable <- function(data, ...) {
         borderRadius = "5px"
       )
     ),
+    class = "gov-table",
     ...
   )
 }

inst/www/css/reactable_wrapper.css

@@ -0,0 +1,51 @@
+.govuk-table {
+    font-family: GDS Transport, arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.25;
+    color: #0b0c0c;
+    width: 100%;
+    margin-bottom: 20px;
+    border-spacing: 0;
+    border-collapse: collapse
+}
+
+@media print {
+    .govuk-table {
+        font-family: sans-serif
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-table {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print {
+    .govuk-table {
+        font-size: 14pt;
+        line-height: 1.15;
+        color: #000
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-table {
+        margin-bottom: 30px
+    }
+}
+
+.govuk-table__header {
+    font-weight: 700
+}
+
+.govuk-table__cell, .govuk-table__header {
+    padding: 10px 20px 10px 0;
+    border-bottom: 1px solid #b1b4b6;
+    text-align: left;
+    vertical-align: top
+}