Render DT - Show Whitespace

[cjwood]

How do I show Whitespace in a rendered DataTable?

When running the App below - the user can double click to edit a cell and see the leading whitespace in the dataframe 'values'. I dont knowhow to make the whitespace visible otherwise though.

library(shiny)
library(DT)

    ui = fluidPage(dataTableOutput("mytable"))
    
    
    server = function(input, output){
      
    values = data.frame(Demographics = c("Total","   Split_A","   Split_B","      Split_B1","      Split_B2"),check.names = F)
      
    output$mytable <- renderDT(values,
                               selection = 'none',
                               rownames = FALSE,
                               escape   = FALSE,
                               editable = T
      )
    
    }
 
    shinyApp(ui, server)

[nirgrahamuk]

ui = fluidPage(
               tags$style("#mytable { white-space:pre; }"),
                dataTableOutput("mytable")
               )

[cjwood]

Don't suppose you also know how to do the same with a picker input do you?

My attempt yielded no results...

library(shiny)
library(DT)

    ui = fluidPage(
      tags$style("#Dictionary { white-space:pre; }"),
      pickerInput(
        inputId = "Dictionary",
        label = "",
        choices = c("Total","   Split_A","   Split_B","      Split_B1","      Split_B2"),
        selected = NULL,
        multiple = FALSE, 
        options = list(
          `actions-box` = TRUE,`live-search` = TRUE, size = 10
        )),
      tags$style("#mytable { white-space:pre; }"),
      dataTableOutput("mytable")
      )
    
    
    server = function(input, output){
      
    values = data.frame(Demographics = c("Total","   Split_A","   Split_B","      Split_B1","      Split_B2"),check.names = F)
      
    output$mytable <- renderDataTable(values,
                               selection = 'none',
                               rownames = FALSE,
                               escape   = FALSE,
                               editable = T
      )
    
    }
 
    shinyApp(ui, server)

[nirgrahamuk]

i switched pickerInput which is not in shiny for selectInput, and then used

 tags$style(".selectize-control { white-space:pre; }"),
  selectInput(

[cjwood]

pickerInput is a very useful version of selectInput - it's part of the shinyWidgets package - I find it has better functionality for the purposes of my app.

I should have included shinyWidgets in my code example as a Library - see example below (still not showing whitespace for the pickerInput)

library(shiny)
library(DT)
library(shinyWidgets)

    ui = fluidPage(
      tags$style(".selectize-control { white-space:pre; }"),
      pickerInput(
        inputId = "Dictionary",
        label = "",
        choices = c("Total","   Split_A","   Split_B","      Split_B1","      Split_B2"),
        selected = NULL,
        multiple = FALSE, 
        options = list(
          `actions-box` = TRUE,`live-search` = TRUE, size = 10
        )),
      tags$style("#mytable { white-space:pre; }"),
      dataTableOutput("mytable")
      )
    
    
    server = function(input, output){
      
    values = data.frame(Demographics = c("Total","   Split_A","   Split_B","      Split_B1","      Split_B2"),check.names = F)
      
    output$mytable <- renderDataTable(values,
                               selection = 'none',
                               rownames = FALSE,
                               escape   = FALSE,
                               editable = T
      )
    
    }
 
    shinyApp(ui, server)

[nirgrahamuk]

i used web developer tools to inspect the style params of the pickerInput options

  tags$style(".bootstrap-select .dropdown-menu li a  { white-space:pre; }"),
  pickerInput(