css to set table class to table-condensed (bootstrap)

[Vincent Nijs]

Perhaps a bit off-topic but ...

I am using pander for conditional formatting of tables in a Shiny app. Pander creates the relevant markdown and then I use markdownToHTML to create the html the app will display (see command below).

html <- markdownToHTML(text = fancyTab, stylesheet="www/fancyTab.css")

mardownToHTML allows you to specify a css file to apply when creating the html. I like boostrap's 'table-condensed' class and would like to apply that. I assume there is a simple way to put that in a css file but I haven't been able to find it. I resorted to the following hack. Any better alternatives?

html <- gsub("<table>","<table class='table table-condensed'>", html)

Screenshot attached.

[Ramnath Vaidyanathan]

Why don't you use jQuery to dynamically add the `table-condensed` class to the HTML. You might be able to add this using tag$script.

[Stéphane Laurent]

I'm very interested about this. It would be helpful if you share some details about the way you use. Where have you find the fancyTab.css file ? Do you use uiOutput() to render the table ? Do you generate your table with pandoc.table(..., style="rmarkdown") ? 

[Vincent Nijs]

Ramnath: I don't know any jquery so sub (rather than gsub) will work for now I guess.

Stephane: I use this to bold the largest absolute value in each row of a factor loading matrix. The code is across a few files in my app (not good :) ) but this is pretty much how it works.

fancyTable <- function() {

res <- factorAnalysisReactive()

abs_res <- abs(res)

row_max <- apply(abs_res, 1, max)

ind_max <- which(abs_res == row_max , arr.ind = TRUE)

emphasize.strong.cells(ind_max)

html <- markdownToHTML(text = pander.return(res, style='rmarkdown'), stylesheet="www/fancyTab.css")

html <- sub("<table>","<table class='table table-condensed'>", html)

}

then use HTML(fancyTable())  in your tabPanel

There is actually nothing in my fancyTab.css file right now :) I am pretty happy with bootstrap's table-condense formatting.

I woudn't use this approach for big tables (i.e, > a few 100 rows) but for my purposes it works nicely.

in 

Screenshot attached.

[Stéphane Laurent]

Thank you. 

I do like this and that works very well, except for one point :

          output[[pandoctable]] <- renderUI({ # test data summary in each tab 

            ... create a table named bbb...

            out <- pandoc.table.return(bbb, style="rmarkdown", emphasize.strong.cols=1, emphasize.cols=2)

            html <- markdownToHTML(text = out)

            Encoding(html) <- "UTF-8"

            HTML(html)

          })

and uiOutput("pandoctable") in ui.R. But there is the following problem, the table is splitted whereas it is not too wide:

		time:	0	6
Batch
DRSVA005A	Result		7.5	7.6
	temperature			5°C ± 3°C
	Status		PASS	PASS
DRSVA009A	Result		7.6	7.7
	temperature			5°C ± 3°C
	Status		PASS	PASS

Table: Table continues below

9
7.7
5°C ± 3°C
PASS
7.7
5°C ± 3°C
PASS

[Stéphane Laurent]

Oops the solution is easy :  pandoc.table.return(bbb, style="rmarkdown", emphasize.strong.cols=1, emphasize.cols=2, split.tables=Inf)

		time:	0	3	6	12	18	24	36
Batch
DNHPAFA001	Result		0.97	0.90	0.88	0.88	0.99	0.96	0.93
	temperature			-20°C	-20°C	-70°C	-70°C	-70°C	-70°C
	Status		PASS	PASS	PASS	PASS	PASS	PASS	PASS
DNHPAFA002	Result		0.93	0.82	1.00	0.80	0.91	0.97	1.00
	temperature			-20°C	-20°C	-70°C	-70°C	-70°C	-70°C
	Status		PASS	PASS	PASS	PASS	PASS	PASS	PASS
DNHPAFA003	Result		0.98	0.81	0.97	0.88	1.06	0.98	0.93
	temperature			-20°C	-20°C	-70°C	-70°C	-70°C	-70°C
	Status		PASS	PASS	PASS	PASS	PASS	PASS	PASS
DNHPAFA004	Result		0.89	0.90	0.95	1.01	0.85	0.88	0.93
	temperature			-20°C	-20°C	-20°C	-20°C	-20°C	-20°C
	Status		PASS	PASS	PASS	PASS	PASS	PASS	PASS

[Stéphane Laurent]

Using your method:

		time:	0	6	9
Batch
DRSVA005A	Result		7.5	7.6	7.7

temperature

5°C ± 3°C

5°C ± 3°C
	Status		PASS	PASS	PASS
DRSVA009A	Result		7.6	7.7	7.7

temperature

5°C ± 3°C

5°C ± 3°C
	Status		PASS	PASS	PASS

Thank you very much !

[Stéphane Laurent]

Please do you know an easy way to draw a rectangle border around the table ?

[Stéphane Laurent]

Great: http://html.orange-idea.com/valera/tables_forms.html 

@Vincent: Is there any particular reason to prefer a css ? One could use such a function instead (in global.R):

pandoc.table.html <- function(t, ...){

  out <- pandoc.table.return(t, style="rmarkdown", ...)

  html <- markdownToHTML(text = out)

  Encoding(html) <- "UTF-8"

  gsub("<table>","<table class='table table-condensed table-bordered'>", html)

}

[Vincent Nijs]

I am using the table-condensed layout in a couple of places in my app now. For larger tables that do not require conditional formatting I am using xtable. It just seemed 'cleaner' to put the table formatting option in css.

By the way ... I found out you can use sub instead of gsub. 

[Stéphane Laurent]

I think @Ramnath's proposal is something like that (see  http://api.jquery.com/addClass/ ) :

          output[[pandoctable]] <- renderUI({ # test data summary in each tab 

            ... create a table named bbb...

            out <- pandoc.table.return(bbb, style="rmarkdown", emphasize.strong.cols=1, emphasize.cols=2)

            html <- markdownToHTML(text = out)

            Encoding(html) <- "UTF-8"

            list(tags$script(HTML(' 

                  $( "table" ).addClass( "table table-condensed" );

                ')),

            HTML(html)

           )

          })

It works but this is not more clean if we have to write this script at each html table output.

[Vincent Nijs]

You could pass bbb to a regular R function and have it pass back the formatted table. Nice to see the jquery example. Thanks Stéphane.

[Stéphane Laurent]

Hello Vincent,

 I don't understand what you mean. Pass the table to a regular function, what does it mean ? Do you simply mean a function returning the list with the tags$script ?

[Vincent Nijs]

Just something like the fancyTable function I mentioned earlier in this thread but then it takes bbb as input (i.e., the function is not a reactive).

[Stéphane Laurent]

Do you know why jQuery does not work on table elements generated by renderTable() ? This is what I conclude from my unsucessful attemps to answer to this question.

[John Harrison]

It is probably easier to set the css on the element you require (without defining a www/styles.css):

      tags$head(tags$style("#dummy table {background-color: red; }", media="screen", type="text/css"))

jquery as follows

$("#dummy table").css("background-color","red");

would work in the console but the DOM gets overwritten by shiny and you would need to tie the jquery into what shiny is doing.

[Stéphane Laurent]

Unsuccessful too :-(

[John Harrison]

Works for me:


runApp(
  list(ui = bootstrapPage(pageWithSidebar(
    headerPanel("Rummy"),
    sidebarPanel( tags$hr() ),
    
    mainPanel(
      
      # This is what I use to change the background color
      list(tags$head(tags$style("body {background-color: #ADD8E6; }"))),
      tableOutput("dummy"),

      tags$head(tags$style("#dummy table {background-color: red; }", media="screen", type="text/css"))

    )
    
  )
  )
 
  ,
  server = function(input, output) {
    output$dummy <- renderTable({ data.frame(A=1:4,B=2:5,C=rep("aaa",4)) })
  }
 
  )
)

[Stéphane Laurent]

Ah ok, you put tags$head after the table. Thank you !

[John Harrison]

Your welcome :)

[Stéphane Laurent]

Do you have an account on stacko ? Otherwise I can post your solution.

[John Harrison]

Stephane if you could post the solution that would be great.

[sris Sri]

I'm trying to do something similar, but I want to color the background depending on the value that is in a certain cell. I tried to battle with "      tags$head(tags$style("#dummy table {background-color: red; }", media="screen", type="text/css"))" in if-statements, but mostly nothing happens. Any help?

[Stéphane Laurent]

Hi, maybe you'll find some ideas here: https://groups.google.com/forum/#!searchin/shiny-discuss/color$20table$20cells/shiny-discuss/PvlrXLEo0z8/mmkyrkowLssJ

[sris Sri]

I've already seen and tried this out, but I encountered problems while downloading it. I was not able to use it.

I get this error:
Downloading master.zip from https://github.com/trestletech/shinyTable/archive/master.zip
Error in function (type, msg, asError = TRUE)  : couldn't connect to host

[Stéphane Laurent]

Sorry, I meant my code at the beginning of the discussion, not the shinyTable package.

[Herman Sontrop]

Hi,

if you want to conditionally color (or more generally format) cells in tables you may want to check out the reporters package. The FlexTables do what you want. As the name suggests, they are quite flexible.

Although the package is intended for generating Microsoft Word and PPT files via R, the underlying HTML can be extracted quite easily.

A while back I made a small Shiny toy example demo that shows the basic principle, see here.

hope this helps, best Herman

Op dinsdag 15 juli 2014 11:12:11 UTC+2 schreef sris Sri: