How to change location of numeric input boxes in R Shiny

Question

Right now, the input boxes boxes display one below another. I would like to be able to display them in a matrix such that there are input$numoc rows and input$inp1 columns.

UI

numericInput("cols", "Enter number of columns:",min=1,1),
numericInput("rows", "Enter number of rows:",min=1,1)

Server

output$matrixx <- renderUI({
    k= rep(c(1:input$rows), times = input$cols)
    mx<-max(input$rows,input$cols)
    lllist <- lapply(1:(input$cols*input$rows), function(i, j=((i-1)%/%input$rows)+1, y=k[[i]]) {
        iids <- paste("inp2", i, sep="")
        names<- paste("Treatment #",j," Outcome #",y,sep="")
        list(
            numericInput(iids,names, value=0, min=0, max=1, step=0.05)
        )
    })
    do.call(tagList, unlist(lllist, recursive = FALSE))
})

Answer 1

Sure, we can add fluidRow and column inside our renderUI to achieve this.

Here is a minimal example:

library(shiny)

ui <- fluidPage(
  
    numericInput("cols", "Enter number of columns:", min = 1, max = 4, 2), 
    numericInput("rows", "Enter number of rows:",    min = 1, 2),
    hr(),
    
    uiOutput("matrixx")
    
)

server <- function(input, output, session) {
  
    output$matrixx <- renderUI({
        
        ui_parts <- c()
        
        for(i in 1:input$rows){
            
            ui_parts[[i]] <- fluidRow(
                
                if(input$cols >= 1) {
                    column(3, 
                        textInput(
                            inputId = paste0("id", i + 10),
                            label   = paste0("id", i + 10) 
                        )
                    )
                },
                if(input$cols >= 2) {
                    column(3, 
                        textInput(
                            inputId = paste0("id", i + 20),
                            label   = paste0("id", i + 20) 
                        )
                    )
                },
                if(input$cols >= 3) {
                    column(3, 
                       textInput(
                           inputId = paste0("id", i + 30),
                           label   = paste0("id", i + 30) 
                       )
                    )
                },
                if(input$cols >= 4) {
                    column(3, 
                       textInput(
                           inputId = paste0("id", i + 40),
                           label   = paste0("id", i + 40) 
                       )
                    )
                }
            )
        }
        
        ui_parts

    })
    
}

shinyApp(ui, server)

For simplicity I limited it to 4 columns and wrote it in a more repetitive, but easier to read format. At the cost of extra complexity you could make it work with more columns, and shorten it by using additional loops.

Answer 2

Here is one approach, dividing up rows and columns with two lapply statements. You can add column and set width either with a static value or dynamically depending on the number of elements.

I also added verbatimTextOutput to show the values entered in the numeric inputs as demonstration.

library(shiny)

ui <- fluidPage(
  numericInput("cols", "Enter number of columns:", min = 1, 1),
  numericInput("rows", "Enter number of rows:", min = 1, 1),
  verbatimTextOutput("values"),
  uiOutput("matrixx")
)

server <- function(input, output, session) {
  output$matrixx <- renderUI({
    lapply(seq(input$cols), function(i) {
      column(width = 4,
             lapply(seq(input$rows), function(j) {
               numericInput(paste0("inp2", i, "_", j), 
                            paste0("Treatment #", j, " Outcome #", i),
                            value = 0, min = 0, max = 1, step = 0.05)
             }))
    })
  })
  output$values = renderPrint({
    str(
      lapply(seq(input$cols), function(i) {
        lapply(seq(input$rows), function(j) {
          input[[paste0("inp2", i, "_", j)]]
        })
      })
    )
  })
}

shinyApp(ui, server)