Reactable example (#107)

* reactable example initial commit * adding reactR and reactable * removing datatable, running styler and lintr * Update www/dfe_shiny_gov_style.css adding Rich's additions to css Co-authored-by: Rich Bielby <[email protected]> * include searchable and filterable * add header class * styler split the row * updated renv.lock file --------- Co-authored-by: Rich Bielby <[email protected]>
dfe-analytical-services · Jan 8, 2025 · 4774e1f · 4774e1f
1 parent 61f2769
commit 4774e1f
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 9 deletions.
diff --git a/R/ui_panels/example_tab_1.R b/R/ui_panels/example_tab_1.R
@@ -121,7 +121,8 @@ example_tab_1_panel <- function() {
                       )
                     ),
                     # Benchmarking table --------------------------------------
-                    dataTableOutput("tabBenchmark")
+                    h2("An example Reactable"),
+                    reactableOutput("tabBenchmark2")
                   )
                 )
               )

diff --git a/global.R b/global.R
@@ -24,6 +24,7 @@ shhh(library(shinyGovstyle))
 # Creating charts and tables
 shhh(library(ggplot2))
 shhh(library(DT))
+shhh(library(reactable))
 
 # Data and string manipulation
 shhh(library(dplyr))

diff --git a/renv.lock b/renv.lock
@@ -4,7 +4,7 @@
     "Repositories": [
       {
         "Name": "CRAN",
-        "URL": "https://packagemanager.posit.co/cran/latest"
+        "URL": "http://cran.rstudio.com"
       }
     ]
   },
@@ -1178,6 +1178,41 @@
       ],
       "Hash": "5e3c5dc0b071b21fa128676560dbe94d"
     },
+    "reactR": {
+      "Package": "reactR",
+      "Version": "0.6.1",
+      "Source": "Repository",
+      "Repository": "CRAN",
+      "Requirements": [
+        "htmltools"
+      ],
+      "Hash": "b8e3d93f508045812f47136c7c44c251"
+    },
+    "reactable": {
+      "Package": "reactable",
+      "Version": "0.4.4",
+      "Source": "Repository",
+      "Repository": "CRAN",
+      "Requirements": [
+        "R",
+        "digest",
+        "htmltools",
+        "htmlwidgets",
+        "jsonlite",
+        "reactR"
+      ],
+      "Hash": "6069eb2a6597963eae0605c1875ff14c"
+    },
+    "rematch2": {
+      "Package": "rematch2",
+      "Version": "2.1.2",
+      "Source": "Repository",
+      "Repository": "CRAN",
+      "Requirements": [
+        "tibble"
+      ],
+      "Hash": "76c9e04c712a05848ae7a23d2f170a40"
+    },
     "renv": {
       "Package": "renv",
       "Version": "1.0.11",

diff --git a/server.R b/server.R
@@ -124,23 +124,34 @@ server <- function(input, output, session) {
     )
   })
 
-  # Benchmarking table
-  output$tabBenchmark <- renderDataTable({
-    datatable(
+  output$tabBenchmark2 <- renderReactable({
+    reactable(
       reactive_benchmark() %>%
         select(
           Area = area_name,
           `Average Revenue Balance (£)` = average_revenue_balance,
           `Total Revenue Balance (£m)` = total_revenue_balance_million
         ),
-      options = list(
-        scrollX = TRUE,
-        paging = FALSE,
-        searching = FALSE
+      defaultPageSize = 4,
+      minRows = 4,
+      searchable = TRUE, # uncomment line if you want a search box
+      filterable = TRUE, # uncomment line if you want filters at the top
+      defaultSorted = list("Total Revenue Balance (£m)" = "desc"),
+      defaultColDef = colDef(
+        headerClass = "bar-sort-header",
+        style = JS("function(rowInfo, column, state) {
+      // Highlight sorted columns
+      for (let i = 0; i < state.sorted.length; i++) {
+        if (state.sorted[i].id === column.id) {
+          return { background: 'rgba(0, 0, 0, 0.03)' }
+        }
+      }
+    }")
       )
     )
   })
 
+
   # Value boxes ---------------------------------------------------------------
   # Create a reactive value for average revenue balance
   latest_average_balance <- reactive({

diff --git a/www/dfe_shiny_gov_style.css b/www/dfe_shiny_gov_style.css
@@ -368,4 +368,75 @@ html {
 .small-box.bg-dark-blue {
   background-color: #12436D !important;
   color: #ffffff !important;
+}
+
+/* Set default reactable styles */
+.reactable {
+  font-size: 1rem !important;
+  table-layout: fixed;
+  width: 100% !important;
+  word-break: keep-all; /* Prevents breaking words mid-word */
+  white-space: normal; /* Allows line breaks between words */
+}
+.bar-sort-header:hover,
+.bar-sort-header:focus {
+  background: #fd0;
+}
+
+/* Add a top bar on ascending sort */
+.bar-sort-header[aria-sort="ascending"] {
+  box-shadow: inset 0 0.188rem 0 0 #1d70b8;
+}
+
+/* Add a bottom bar on descending sort */
+.bar-sort-header[aria-sort="descending"] {
+  box-shadow: inset 0 -0.188rem 0 0 #1d70b8;
+}
+
+/* Add an animation when toggling between ascending and descending sort */
+.bar-sort-header {
+  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+/* Table row highlighting -------------------------------------------------- */
+.rt-tr-highlight:hover {
+    background-color: #fd0;
+}
+@media screen and (min-width: 1440px) {
+  .bslib-sidebar-layout .sidebar-title {
+    font-size: 1.188rem !important;  /* Slightly larger font size for large monitors */
+  }
+}
+
+@media screen and (min-width: 1240px) {
+  .bslib-sidebar-layout .sidebar-title {
+    font-size: 1.1rem !important;  /* Slightly larger font size for large laptops */
+  }
+}
+
+/* Media query for laptop screens (1024px or smaller) */
+@media screen and (max-width: 1024px) {
+  .reactable,
+  .bslib-sidebar-layout > .sidebar > .sidebar-content label,
+  .selectize-control.multi .selectize-input.has-items {
+    font-size: 0.9rem !important; /* Slightly smaller font size for laptops */
+  }
+}
+
+/* Media query for tablet-sized screens (768px or smaller) */
+@media screen and (max-width: 768px) {
+  .reactable,
+  .bslib-sidebar-layout > .sidebar > .sidebar-content label,
+  .selectize-control.multi .selectize-input.has-items {
+    font-size: 0.8rem !important; /* Smaller font size for tablets */
+  }
+}
+
+/* Media query for small screens (480px or smaller) */
+@media screen and (max-width: 480px) {
+  .reactable,
+  .bslib-sidebar-layout > .sidebar > .sidebar-content label,
+  .selectize-control.multi .selectize-input.has-items {
+    font-size: 0.7rem !important; /* Even smaller font size for mobile */
+  }
 }