Formatting issue with HTML template for r Shiny output table

Question

I'll preface this by saying that I used to decent at HTML a couple of decades ago but I think I missed the connection with R. I'm trying to display some text and pass some variables. That is working great (I modified some basic code). However, I'm unable to change the format as everything is showing in one column instead of several. I tried a few things in vain. I have a feeling it's really basic but any help would be greatly appreciated. Here is the HTML file :

<div class="aimm-score-table">
  <ul class="aimm-score-row">
    <li>Potential Score</li><li>Likelihood factor</li><li>Score</li>
   </ul>
  <ul class="aimm-score-row">
    <li id="{{ ns('aimm_score_potential_score') }}"></li>
    <li>--</li>
    <li id="{{ ns('aimm_score_likelihood_factor') }}"></li>
    <li>=</li>
    <li id="{{ ns('aimm_score_score') }}"></li>
  </ul>
  <ul class="aimm-score-row">
    <li>Rating</li>
    <li id="{{ ns('aimm_score_rating') }}"></li>
  </ul>
</div>

This is what I get :

This is what I want :

Perhaps you should consider using DT or tableHTML packages. — YBS
– YBS, Commented Dec 9, 2021 at 3:18

Stéphane Laurent · Accepted Answer · 2021-12-09 15:56:14Z

Here is a way. Of course you will have to change the CSS if you want other borders, etc.

library(htmltools)

tbl <- withTags(
  table(
    tbody(
      tr(
        td(colspan = 3, class="col3", "Potential"),
        td(colspan = 3, class="col3", "Likelihood"),
        td(colspan = 3, class="col3", "Ex-Ante")
      ),
      tr(
        td(),
        td("88"),
        td(colspan = 2, class="col2", "-"),
        td("17"),
        td(colspan = 2, class="col2", "="),
        td("61"),
        td()
      ),
      tr(
        td(colspan = 3, class="col3"),
        td(colspan = 3, class="col3"),
        td(colspan = 3, class="col3", "Good")
      )
    )
  )
)

browsable(
  tagList(
    tags$style(
      HTML(
        "table {width: 400px; table-layout: fixed}",
        "table, td {border: 1px solid black}",
        "td {text-align: center}",
        "td.col3 {width: calc(100% / 3)",
        "td.col2 {width: calc(100% * 2 / 9)",
        "td {width: calc(100% / 9)"
      )
    ),
    tbl
  )
)

Lea7885 · Accepted Answer · 2021-12-09 17:20:27Z

0

Stéphane Laurent many thanks, I integrated your code to my html template and this works like a charm. @YBS I'm not familiar with the use of htmltable but I had to find a way to recycle variables stored under a www/ folder that are called from my ui :

htmlTemplate(
                      filename = "www/html/aimm_score_table.html",
                      ns = ns
                    ),

and use an html table seemed the only way, I'm not used to combining different types of codes and storing stephanes as a template was the most straightforward. Thank you both!

answered Dec 9, 2021 at 17:20

Lea7885

971 silver badge9 bronze badges

Collectives™ on Stack Overflow

Formatting issue with HTML template for r Shiny output table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related