Cannot be rendered correctly in Shiny app with tailwind css

[dukechain2333]

Hi!

I am working on a shiny app project with tailwind CSS, and my UI is purely written in HTML.

Here is my HTML code.

<div class="relative h-full w-2/3 px-5">
        <div class="relative h-full w-full px-5 flex flex-col">
            <div class="relative bg-white shadow-lg sm:rounded-3xl h-full w-full px-10 py-10" id="table"
                 style="overflow-x: scroll">
                <!--                {{tableOutput("table")}}-->
                {{DTOutput('table')}}
            </div>
        </div>
    </div>

And this is the code on my server side.

output$table <- DT::renderDT({
    DT::datatable(
      processed_data_table()
    )
  })

The original tableOutput("table") works correctly, however, when I switch to DT, my page goes blank.

[stla]

You have a duplicated id = "table".

[dukechain2333]

You have a duplicated id = "table".

I changed the HTML to this but it's still blank

<div class="relative h-full w-full px-5 flex flex-col">
            <div class="relative bg-white shadow-lg sm:rounded-3xl h-full w-full px-10 py-10"
                 style="overflow-x: scroll">
                {{DTOutput('table')}}
            </div>
        </div>

I checked the rendered HTML, it shows like this:

<div class="datatables html-widget html-widget-output shiny-report-size html-fill-item-overflow-hidden html-fill-item" id="table" style="width:100%;height:auto;"></div>

I think the problem is on the server side. Somehow, the DT is not passed to the ui.

[yihui]

It will be easier for people to help you if you could provide a minimal reproducible example (as the issue guide required). It's hard to tell what could be wrong if you only provide code fragments. Anyway, my guess is that you need spaces inside {{ }} (after the opening {{ and before the closing }}).

Reference: https://shiny.posit.co/r/articles/build/templates/