cant update active/selected row background color for datatables

[ncullen93]

Updating table-active-bg has no effect for preset of "shiny" or "bootstrap", while table-color does work, for instance. See reprex:

library(shiny)
library(DT)

my_theme <- bslib::bs_theme(
  version = 5
)

my_theme <- bslib::bs_add_variables(
  my_theme,
  'table-active-bg' = 'red',
  'table-color' = 'purple'
)

ui <- bslib::page_navbar(
  theme=my_theme,
  bslib::nav_panel('test', DT::DTOutput('table'))
)

server <- function(input, output, session) {
  output$table <- DT::renderDT({
    mtcars
  })
}

shinyApp(ui, server)

Noticing also that there may be mixed use of selected and active classes when selecting datatable rows. Not sure which is the right one. I'm using the following code from tables/_rules.scss as reference to make me think I should update table-active-bg:

  tbody td.active,
  tbody tr.active td {
    background-color: var(--bs-table-active-bg);
  }

[ncullen93]

Apparently datatables has moved to using box-shadow for selected rows. This works:

my_theme <- bslib::bs_add_rules(
  my_theme,
  rules = sass::as_sass('table.display.dataTable > tbody > tr.selected > *{
    box-shadow: inset 0 0 0 9999px lightgray !important;
    color: black;
}')
)

[gadenbuie]

What may be happening here is that the latest version of DT will now correctly recognize that bslib is using Bootstrap 5 and will automatically apply the BS5 styles to datatables (where previously it was using BS4 styles). I vaguely remember seeing that the newer BS5 styles used box-shadow.

Here are the rules I've used to change the default datatables styles for bs_theme(preset = "shiny"), you might find some interesting things here:

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

Lines 9 to 35 in ad946ca

	// 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);
	}
	}

[ncullen93]

Thanks! I would expect something like this to work, but it has no effect:

  my_theme <- bslib::bs_theme(
    version = 5,
    preset = 'shiny'
  )

  my_theme <- bslib::bs_add_variables(
    my_theme,
    "table-striped-bg" = "red",
    "table-active-bg" = "red"
  )

Changing table-hover-bg does work, however. And note that the table-hover-bg doesnt work when the preset is "bootstrap".

[gadenbuie]

Yeah, only the bs_theme(preset = "shiny") uses the var(--bs-table-*-bg) CSS variables which take their values from their Sass counterparts.

The rules here in bslib are essentially a patch for behavior that should be implemented upstream in DT. I opened an issue there that covers some of this behavior, I'll add a note there: rstudio/DT#1081