Refresh tables

inst/builtin/bs5/shiny/_rules.scss

@@ -1,5 +1,6 @@
 /*-- scss:rules --*/
 @import "ionrangeslider/_rules.scss";
+@import "tables/_rules.scss";
 
 $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,400;0,600;1,400;1,600&display=swap" !default;
 @if $web-font-path {

inst/builtin/bs5/shiny/_variables.scss

@@ -85,3 +85,8 @@ $form-text-color: $gray-600 !default;
 // Borders
 $input-border-color: $gray-500 !default;
 $border-radius: 3px !default;
+
+// Tables
+$table-striped-bg: tint-color($blue, 94%) !default;
+$table-hover-bg: tint-color($blue, 90%) !default;
+$table-striped-order: even !default;

inst/builtin/bs5/shiny/tables/_rules.scss

@@ -0,0 +1,97 @@
+// TODO: Many of these rules could be applied to all bslib themes
+.table.dataTable {
+  // CSS variables are scoped to datatables in Bootstrap
+  --dt-row-selected: var(--bs-primary-rgb, "0,123,194");
+  --dt-row-selected-text: var(--bs-white-rgb, "255,255,255");
+  --dt-row-selected-link: var(--bs-light-rgh, "248,248,248");
+}
+
+// Note CSS specificity hack because DT's CSS deps are loaded after the theme
+.table.dataTable.dataTable {
+  $class-stripe: "even";
+  $class-unstriped: "odd";
+
+  @if $table-striped-order == odd {
+    $class-stripe: "odd";
+    $class-unstriped: "even";
+  }
+
+  &.table-striped > tbody > tr.#{$class-unstriped}:not(.selected) > * {
+    box-shadow: none;
+  }
+
+  &.table-striped > tbody > tr.#{$class-stripe}:not(.selected) > * {
+    box-shadow: inset 0 0 0 9999px var(--bs-table-striped-bg);
+  }
+
+  tbody td.active,
+  tbody tr.active td {
+    background-color: var(--bs-table-active-bg);
+  }
+
+  &.table-hover > tbody > tr:hover:not(.selected) > * {
+    box-shadow: inset 0 0 0 9999px var(--bs-table-hover-bg);
+  }
+}
+
+thead, tbody, tfoot, tr, td, th {
+  border: none;
+}
+
+.table > thead {
+  border-bottom: 1px solid var(--bs-table-color);
+}
+
+th {
+  font-weight: 600;
+}
+
+.datatables {
+  // Table pagination row tweaks
+  .dataTables_wrapper div.dataTables_info {
+    padding-top: calc(var(--bslib-spacer, 1rem) * 1.65);
+    font-size: .95rem;
+  }
+
+  .dataTables_paginate {
+    padding-top: var(--bslib-spacer, 1rem);
+  }
+
+  .paginate_button a {
+    font-size: .95rem;
+  }
+
+  // create space between 'show ___ entries' and 'search' above table
+  .dataTables_length, .dataTables_filter {
+    padding-bottom: var(--bslib-spacer, 1rem);
+  }
+
+  // Scroll the data table container, not the entire wrapper
+  .dataTables_wrapper .dt-row {
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  // Style the length and search inputs
+  .dataTables_wrapper .dataTables_length select,
+  .dataTables_wrapper .dataTables_filter input {
+    border: none;
+    border-bottom: 1px solid var(--bs-body-color);
+    border-radius: 0;
+  }
+}
+
+// TODO: This could be applied more generally via the card scss
+.bslib-card-table-sm {
+  &.bslib-card[data-full-screen="false"] .datatables .dataTables_wrapper {
+    font-size: 85%;
+
+    // hide the supporting elements when inside a non-full-screen card
+    .dataTables_length,  // show ___ entries
+    .dataTables_filter,  // search
+    .dataTables_info,    // showing 1 to 10 of 100 entries
+    .dataTables_paginate {
+      display: none;
+    }
+  }
+}

inst/themer-demo/R/tips.R

@@ -62,6 +62,7 @@ tipsUI <- function(id) {
       ),
       card(
         full_screen = TRUE,
+        class = "bslib-card-table-sm",
         card_header("Tips data"),
         DT::dataTableOutput(ns("table"))
       ),