Reactable example

R/ui_panels/example_tab_1.R

@@ -120,7 +120,8 @@ example_tab_1_panel <- function() {
                       )
                     ),
                     # Benchmarking table --------------------------------------
-                    dataTableOutput("tabBenchmark")
+                    h2("An example Reactable"),
+                    reactableOutput("tabBenchmark2")
                   )
                 )
               )

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))

renv.lock

@@ -1204,6 +1204,31 @@
       ],
       "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",

server.R

@@ -124,23 +124,35 @@
     )
   })
 
-  # 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 and minRows needed for Pagination: example here
+      # 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
+      # filters on individual columns also possible
+      defaultSorted = list("Total Revenue Balance (£m)" = "desc"),
+      defaultColDef = colDef(
+        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({

www/dfe_shiny_gov_style.css

@@ -409,4 +409,52 @@ 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 */
+}
+
+@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 */
+  }
 }