Rshiny Table with set width and collapse text overflow

[gadepallivs]

How do we pass CSS arguments text-overflow: ellipsis; to renderDataTable in R shiny ? I have uneven text description in columns, by Autowidth the rows and columns are expanded based on the contents in respective cell.

I would like to be able to input "ellipsis", for user to be able to expand the cell to read text. Below is my server.r code. I tried to use the eg, explained in http://rstudio.github.io/DT/options.html. However, could not get what I am looking for. Appreciate if any inputs , suggestions are provided.

Thank you

output$PM_output <- renderDataTable(expr = datatable(data_frame), escape = F,
                                       selection = 'multiple', options = list(autoWidth = T,
                                       LengthMenu = c(5, 30, 50), columnDefs = list(list(targets =
                                       c(6,7,8,9) - 1, searchable = F)), pageLength = 1),
                                       list(columnDefs = list(list(targets = 7, render =
                                         JS("function(data, type, row, meta) {", "return type === 
                                         'display' && data.length > 6 ?","'<span title=\"' + data +
                                       '\">' + data.substr(0, 6) + '...</span>' : data;","}")
                                         ))), callback = JS('table.page(3).draw(false);')))

[gadepallivs]

Hi yihui, do you have any inputs for above Q ?

[yihui]

You don't need any options in DT to use the CSS style text-overflow: ellipsis. Instead, do it in your Shiny UI via tags$head() (cf http://shiny.rstudio.com/articles/css.html). However, I don't think this CSS style allows you to click and expand a cell. To achieve that, you still have to resort to JavaScript. Please elaborate what you mean by "could not get what I am looking for".

[gadepallivs]

Hi yihui, Below is an example output for the application I am trying to create in Rshiny. As you can see in the image, the column 'Abstract' has many lines of text. This results in a table output that is not easy to read or neither appealing in look. Below is the renderDataTable that calls this output.

output$PM_output <- DT::renderDataTable(
    expr =  DT::datatable(PubmedOutput(PubmedSearch()),
                          class   = 'cell-border stripe compact hover',
                          escape  = F, selection = 'multiple',
                          options = list(
                            autoWidth  = T,
                            targets = 6,
                            render = JS(
                              "function(data, type, row, meta) {",
                              "return type === 'display' && data.length > 100 ?",
                              "'<span title=\"' + data + '\">' + data.substr(0, 100) + '...</span>' : data;",
                              "}"),
                            LengthMenu = c(5, 30, 50),
                            columnDefs = list(list(
                              className = 'dt-body-left')),
                            pageLength = 1, server = T)))

In the above Code, it seems as if render = JS( ...) and className = 'dt-body-left' has no effect on the output. I still see full text displayed and as well, the alignment is centered. Not sure, if the way I pass the arguments is wrong. I'm looking for something like... Restricting the table cells on same width, and collapse the overflow of text with an "ellipsis", which could be further expanded with a click by user to read the content. or may be a scroller for the cells that have overflow text. However, I am sure there will be probably better way to display the output in table. Any suggestions or help is appreciated. I am not very well versed in Java script. Are there any examples that you can share, that will help to understand on how to pass the arguments ?

[yihui]

1. I don't know where you saw the class name dt-body-left;
2. It seems you were trying to adapt the example from http://rstudio.github.io/DT/options.html but please note that render is a function inside the columnDefs option;

[gadepallivs]

Thank you. I fixed it. I did not understand the 1st comment, on class name dt-body-left. Is it not the right way to use it ? It is actually from the link you shared. How do we control the the text size in the ellipsis box ? Is there a resource you can share where I can learn on how to pass JS scripts or CSS scripts to R. I have no clue of either JS or CSS, trying to learn and mostly depending on available examples

[yihui]

Could you point me to the section that mentioned dt-body-left? I still cannot find it on that page.

For JS, I think all you need to do is to change targets to the desired column number of your data in the example in Section 4.4. For CSS, I'm afraid you will have to learn a bit about it if you really want to style elements in HTML.

[gadepallivs]

Sorry, for undetailed comment. That input for styling is from a link that takes to the datatables , styling/classes. ( https://www.datatables.net/manual/styling/classes). I fixed the ellipsis issue when you pointed out earlier. But, was unable to increase the font size of the text in the box that appears when we hover over the cell. Do you have suggestions on that. Thank you for responses.

[yihui]

I thought you found dt-body-left on the page http://rstudio.github.io/DT/options.html since you didn't seem to have ever mentioned https://www.datatables.net/manual/styling/classes

Well, look at your code:

columnDefs = list(list(
                              className = 'dt-body-left'))

and mine in Section 2: http://rstudio.github.io/DT/options.html You omitted the targets option, so DataTables does not know which columns you want to apply the style to.

The ellipsis example that I gave is based on the web browser's tooltips (usign the title attribute of <span>). I don't think there is a way to specify the font size for the tooltips, unless you use a custom implementation of tooltips (there must be plenty of such JS/CSS libraries, but again you have to understand a little bit JS/CSS).

[gadepallivs]

Thank you Yihui

[neelmitt]

Hi, I've used this example in my code and it's very helpful if a user wants to hover over a row and see the rest of the cell information in a tooltip. How would we go about adding a click option to the row, so that upon a click the cell expands?

[RSchwinn]

Hi Neelmitt, did you find any success with the option to click and expand the cell? I'm not sure that I've ever seen this implemented in the context of a table, but I'd love the ability. If you/anyone has any links to clickable ellipses or "more" buttons, maybe we can reverse engineer it into a DT.

[stla]

Take a look here: https://stackoverflow.com/q/75236102/1100107.