I am using the R shiny app and creating a table using renderTable and tableOutput. Is it possible to make one part of a cells contents bold whilst keeping the rest of it normal text.
E.g. one entry in a particular cell could be:
5.3% ~ 1% ~ 7
I tried hardcoding ** around the appropriate figure but it just outputted the asterisk.
Thanks
You can use the <strong></strong> HTML tag in your table if you want some bold text, here's an example:
library(shiny)
data<-data.frame(a=c("<strong>a</strong>","b"),val=c(1,2))
runApp(list(
ui = basicPage(
tableOutput('mytable')
),
server = function(input, output) {
output$mytable = renderTable({
data
},sanitize.text.function=function(x){x})
}
))
You need to change the sanitize.text.function to identity in order for the tags to be interpreted.
As an alternative, you can also use Datatables to render your table. You can also use the <strong> tag, but make sure you set the escape option to false in the renderDataTable part.
Related
I have a small R shiny app
https://kormir.shinyapps.io/dt_test/
library(shiny)
library(DT)
ui <- fluidPage(
column(4,
br(),
br(),
dataTableOutput('dt1')
)
)
server <- function(input, output) {
output$dt1 <- renderDataTable({
datatable(mtcars[1:4,1:4])
})
}
shinyApp(ui = ui, server = server)
In uses the datatable package to create dynamic tables.
I would like to reduce the internal paddings but by css skills aren't good enough to do so.
I need to remove that yellow area or make it very very small.
For instance I figured out the class of the rows and tried to force the size of these paddings to 0.
.odd {
background-color: red!important;
border-collapse: collapse!important;
padding: 0!important;
border : 0px !important;
}
It does not work...
Edit
My initial solution did not account for the interactive changes to the table while in session. The following js injection upon DataTables initialization function(){$('tbody td').css({'padding': '0px'});} applies the padding change to the initial state of the table but any changes such as sorting and pagination would cause the table to revert back to its initial display setting.
How about injecting some javascript upon DataTables initialization with the initComplete argument in Options?
For this, you must have the package htmlwidgets installed so you can use the JS() function. JS() treats strings as javascript code.
DT::datatable() has an options argument that corresponds to the Options in DataTables. options takes a list of named arguments in DataTables Options.
In options, supply a named list with the initComplete argument. In there, inject some js with htmlwidgets::JS() and the js callback will be executed upon your DataTables initialization.
DataTables has some default styling options, including one called compact. Here is what enabling the compact styling option does (quote from here):
Reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on screen
OK, so next step is to add the class compact to your DataTables object in the DOM like so:
The js portion that matters is:
function(){$(this).addClass('compact');}
$(...) is jQuery's syntax to access elements in the DOM. What goes inside $(...) is the selector of the DOM element you want to select. Fortunately, because you are injecting this js code in the DataTables event, you can use the this selector to refer to the table. The next method is addClass(). It does what it says: it adds a class to the selected object in the DOM. You want to add the class compact to your table and then DataTables will take care of the rest.
Ok, here is the code:
library(shiny)
library(DT)
ui <- fluidPage(
column(4,
br(),
br(),
dataTableOutput('dt1')
)
)
server <- function(input, output) {
output$dt1 <- renderDataTable({
datatable(mtcars,
options = list(
initComplete = JS(
"function(){$(this).addClass('compact');}")
)
)
})
}
shinyApp(ui = ui, server = server, options = list(launch.browser=TRUE))
Result:
After changing pagination and sorted by cyl:
compact styling still applies.
I am trying to add a column of icons to a data table that is shown in a Shiny app. Essentially I just want an up arrow when the data has gone up, and a down arrow when it has gone down. However, I'm not sure how to display an icon. When I add a column just using for e.g. icon("arrow-up"), I get the following error:
Error: default method not implemented for type 'list'
I can see that if I try this approach outside of Shiny, it is displaying the data about the icon rather than displaying the icon.
One option might be to use the approach of adding it as an image - but it feels like there would be a more direct way? I'm also not sure how to do that with Font Awesome icons.
Apologies if this is basic - I couldn't find an answer!
Here is a simplified version of what I'm doing:
library(shiny)
library(shinydashboard)
number_compare <- data.frame(replicate(2, sample(1:100, 10, rep=TRUE)))
number_compare$direction <- ifelse(number_compare$X1 < number_compare$X2, "Up", "Down")
number_compare$direction <- ifelse(number_compare$X1 == number_compare$X2, "", number_compare$direction)
sidebar <- dashboardSidebar()
body <- dashboardBody(
fluidRow(box(width = 12, solidHeader = TRUE,
tableOutput("example_table"))
)
)
ui <- dashboardPage(dashboardHeader(title = "Example"),
sidebar,
body
)
server <- function(input, output) {
output$example_table <- renderTable(number_compare)
}
shinyApp(ui, server)
You don't say what icons you want to use, so I will assume angle-up and angle-down from fontawesome, but you can also use glyphicons.
As you point out, the output of icon() is a list. Assigning that in your ifelse would give a column repeating the values i, iconname, and NULL.
Instead, try wrapping icon() in as.character() to give the raw HTML for the icon. E.g:
number_compare$direction <- ifelse(
number_compare$X1 < number_compare$X2,
as.character(icon("angle-up")),
as.character(icon("angle-down"))
)
This will fill the column with values like <i class="fa fa-angle-up"></i> which you can print in the app as raw HTML.
Alternatively, you can use HTML escape codes to print the arrows without using icons. See https://www.w3schools.com/charsets/ref_utf_arrows.asp for a list of HTML escape codes.
Edit: Whenever you include raw HTML in a table, make sure that shiny doesn't escape it. Replace your call to renderTable(number_compare) with renderTable(number_compare, sanitize.text.function = function(x) x)
(based on r shiny table not rendering html)
I would like to add a Font Awesome 'child' icon twice in my actionButton in Shiny. The following app displays the child once:
library(shiny)
ui <- fluidPage(
actionButton("child","children", icon("child"))
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
I tried the obvious to no avail:
actionButton("child","children", icon(c("child","child")))
I must accept this is quite a niche question.
This has nothing to do with the fact that you want the same icon twice. You just can't pass a vector of names into the icon() function. If you look at the documentation of icon() it says it accepts the name of an icon, not a vector for multiple icons.
To do what you want, you can simply add multiple icons in the label. Something like this
actionButton("child", div(icon("child"), icon("child"), "children"))
I have a data table in which column a is a character field. I need to make some strings withing the column to appear with different color(just the beginning, I need to search and replace multiple strings with different colors ultimately). I'm attempting to do it the following way but unsuccessful.
Below I'm attempting to put html tags within the column values, but I'm not sure how to make the browser treat those as html tags while displaying the data table. Any ideas?
library(shiny)
library(DT)
x<-data.table(a=c("srinivas asfsis asdfsadf","vassri asdf asdfasdf","csdasdsriasfasf"))
x$a<-as.data.table(sapply(x$a,function(x)gsub("sri",'<strong style="color:red">sri</strong>',x)))
shinyApp( ui = dataTableOutput("table1"),
server = function(input, output) {
output$table1<-renderDataTable({ datatable(x) })
}
)
Please read the documentation ?DT::datatable (or the DT website). The escape argument is what you want.
datatable(x, escape = FALSE)
You've got conflicting packages that each have functions with the same name. It doesn't appear that you need anything more than the shiny package for this...
library(shiny)
x<-data.frame(a=c("srinivas asfsis asdfsadf","vassri asdf asdfasdf","csdasdsriasfasf"))
x$a<-gsub("sri",'<strong style="color:red">sri</strong>',x$a)
shinyApp( ui = fluidPage(shiny::dataTableOutput("table1")),
server = function(input, output) {
output$table1<-shiny::renderDataTable(x, escape=FALSE)
}
)
[also posted in Shiny Google Group]
I am encountering some (I believe) unexpected behavior when I attempt to display a dataTable. When I display the table, my goal is to remove the majority of the sort/pagination/filter/processing options. So far setting bSort=0, bProcessing=0, bPaginate=0, bInfo=0 appears to produce desired results. However when I set bFilter=0, only the "global" filter box in the upper right had corner is removed; the within-column filter boxes remain (I expected bFilter=0 to remove all filter boxes).
Can anyone help with code to remove the within-column filter boxes (please and thank-you). [Also, I am aware of the column-specific format options, but have so-far been unable to implement them successfully to eliminate the within-column formats]. I have included minimal code below to reproduce the problem:
shinyUI(pageWithSidebar(
#my code has a header panel;
headerPanel("Table Example"),
#my code has a sidebar panel;
sidebarPanel(helpText("Stuff Here")),
#table is displayed in the main panel;
mainPanel(dataTableOutput("myTable"))
))
shinyServer(function(input, output) {
#example dataTable that produces undesired result;
output$myTable <- renderDataTable({
as.data.frame(matrix(sample(1:10,100,replace=TRUE),nrow=20,ncol=10))
}, options = list(bFilter=0, bSort=0, bProcessing=0, bPaginate=0, bInfo=0))
})
[Behavior appears both running from server and locally. Shiny 0.7.0.99. Using Google Chrome]
Thanks-in-advance!
The solution was to simply edit the css associated with the myTable output object:
I.e. change:
mainPanel(dataTableOutput("myTable"))
to
mainPanel(
dataTableOutput("myTable"),
tags$style(type="text/css", '#myTable tfoot {display:none;}')
)