How to insert a custom header into a table rendered with DT Shiny with code from a separate module?

I'm completely new to modularizing in R Shiny using namespaces and I don't find it very intuitive. In the below code, broken into "Core App Code" and "Module Code", the reactive object iris1 is transmitted between the Core App Code and the Module Code, for use among several functions in the Module Code. The code uses parameters in the calls to the module server functions (and to their definitions). It assigns the value returned from one module to a reactive in the main server function, and then passes that reactive to the second module via the call to its server function.

The below seems to work EXCEPT that the customer header (a second header rendered in CSS in the myContainer function in the Module Code) that spans several columns, appearing above the DT table headers) does not work. What am I doing wrong in the below?

Code App Code:

library(shiny)
library(DT)

source("C:/Users/.../my_module.R") 

ui <- fluidPage(
  numericInput("number", label = "Enter sepal length multiplier:", value = 1),
  DTOutput('tbl')
)

server <- function(input, output) {
  iris1 <- reactive({
    tmp <- iris
    tmp$Sepal.Length <- tmp$Sepal.Length * input$number
    tmp
  })
  
  output$tbl <- renderDT({renderTable(iris1())})
  
  # Pass the reactive object iris1 to the module server function
  callModule(my_module_server, "myModule", iris1 = iris1)
}

shinyApp(ui, server)

Module Code (saved as my_module.R):

myContainer <- function() {
  htmltools::withTags(table(
    class = 'display',
    thead(
      tr(
        th(style = "border-top: none;border-bottom: none;"),
        th(colspan = 4, 'Lengths and widths',
           class = "dt-center",
           style = "border-right: solid 0.5px;border-left: solid 0.5px;border-top: solid 0.5px; background-color:#E6E6E6;"
        )
      ),
      tr(
        th(),
        lapply(names(iris1()), th)  # Access iris1 reactive object
      )
    )
  ))
}

renderTable <- function(data) {
  datatable(
    data,
    container = myContainer(),
    options = list(lengthChange = FALSE)
  )
}

my_module_ui <- function(id) {
  ns <- NS(id)
  DTOutput(ns("tbl"))
}

my_module_server <- function(input, output, session, iris1) {
  output$tbl <- renderDT({
    renderTable(
      iris1()  # Access iris1 reactive object
    )
  })
}

Here is a working example of a modularized code. While you added a module to your code your are actually not using it, i.e. your tbl output is created in the main server and only this output is included in the main UI.

Instead I added the module UI to the main UI and dropped the output$tbl from the main server as well as the corresponding render function. Additionally, as myContainer is simply a function make it self contained by passing the names for your table as an argument instead of relying on a reactive defined in a different part of your app. Actually, when I run your code I get an error because of this. Also, I don't see any reason to overwrite shiny::renderTable with a custom function. If a custom function is needed I would suggest to make this clear by using a different name. Finally, I switched to the new style modules using moduleServer instead of using callModule.

library(shiny)
library(DT)

myContainer <- function(x) {
  htmltools::withTags(table(
    class = "display",
    thead(
      tr(
        th(style = "border-top: none;border-bottom: none;"),
        th(
          colspan = 4, "Lengths and widths",
          class = "dt-center",
          style = "border-right: solid 0.5px;border-left: solid 0.5px;border-top: solid 0.5px; background-color:#E6E6E6;"
        )
      ),
      tr(
        th(),
        lapply(x, th)
      )
    )
  ))
}

my_module_ui <- function(id) {
  ns <- NS(id)
  DTOutput(ns("tbl"))
}

my_module_server <- function(id, iris1) {
  moduleServer(id, function(input, output, session) {
    output$tbl <- renderDT({
      datatable(
        iris1(),
        container = myContainer(names(iris1())),
        options = list(lengthChange = FALSE)
      )
    })
  })
}

ui <- fluidPage(
  numericInput("number", label = "Enter sepal length multiplier:", value = 1),
  my_module_ui("myModule")
)

server <- function(input, output) {
  iris1 <- reactive({
    tmp <- iris
    tmp$Sepal.Length <- tmp$Sepal.Length * input$number
    tmp
  })

  my_module_server("myModule", iris1 = iris1)
}

shinyApp(ui, server)
#> 
#> Listening on http://127.0.0.1:3641