How to combine datatable and HTML in renderUI when developing a FlexdashBoard app.?

Viewed 175

I am sure that no one helped me, tk. I just asked the question not very correctly earlier. I am trying to create a FlexDashcoard application. To understand how the program works, you need the sample data files that I have prepared. I apologize in advance for the Russian characters in the files, they are presented to you "as is".

Here is my code:

---
title: "AFEA of Russian enterprises"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    orientation: rows
    vertical_layout: fill
    theme: simplex
runtime: shiny
---

```{r GlobalOptions}
options(knitr.duplicate.label = 'allow')
rv <- reactiveValues(txt_file  = FALSE)
OKVEDselectInputChoices<- reactiveValues(data  = NULL)
```

```{r setup, include=FALSE, echo=FALSE, message=FALSE}
### Library connection module  ###
library("flexdashboard")
library("dygraphs")
library("shiny")
library("shinyFiles")
library("DT")
library("ggplot2")
library("dplyr")
library("here")
library("data.table")
library("plyr")
### ----------------------------- ###
```

## Sidebar {.sidebar}
```{r}
roots <- c('C' = 'C:/', 'D' = 'D:/', '//' = '\\\\ns\\Public\\Power BI')

renderUI({
  shinyFilesButton("files_choose", "Select files", "",
                   multiple=TRUE,
                   buttonType = "default",
                   class = NULL,
                   icon = icon("list-alt"),
                   style = "background-image: linear-gradient(#D9230F, #D9230F 6%, #D9230F); 
                            border-color:  #A91B0C;
                            margin-top: 10px;
                            width: 100%;
                            float: left;
                            box-sizing: border-box;",
                    viewtype = "detail"
  )
})
br()
renderUI({
  actionButton(inputId = "apply", 
                         label = "Apply", 
                         icon = icon("play"),
                         style = "background-image: linear-gradient(#D9230F, #D9230F 6%, #D9230F);
                                  border-color:  #A91B0C;
                                  margin-top: 10px;
                                  margin-bottom: 10px;
                                  width: 100%;
                                  float: left;
                                  box-sizing: border-box;"
  )
})
br()
renderUI({h6(inputId="sideBarText2", "Выбор ОКВЭД(ов):")})
renderUI({
     selectInput("OKVEDlectInput", 
                  label = NULL,
                  choices = OKVEDselectInputChoices$data,
                  #selected = "Percent White")
                  multiple=TRUE
    )
})
```

```{r}
shinyFileChoose(input, "files_choose", 
                 roots=roots,
                 filetypes=c('csv'))

rv_result <- eventReactive(
  input$apply,{
    if (!is.null(input$files_choose))
      {
        myInputFile <- parseFilePaths(roots,input$files_choose)$datapath
        
        all.files <- myInputFile
        print(all.files)
        a.vector <- grep("data\\-\\d+\\-structure\\-",  all.files, ignore.case = TRUE)
        print(a.vector)
        all.files <- all.files[a.vector]
        all.files<- sort(all.files)
        
        n <- length(all.files)
        print(n)
        data = vector('list', n)
        
        if (n>0) {
          for (i in 2:(n+1)) {
            #print(paste("Вот такой файл:" , all.files[i-1]))
            data[i-1] <- lapply(all.files[i-1],
                              fread,
                              showProgress = TRUE,
                              sep = ";",
                              quote = "",
                              header = FALSE,
                              stringsAsFactors=TRUE,
                              select = c(1:124))
          }
        }
    }
    table <- rbindlist(data)
    UN <- unique(table[[5]])
    UN <-  sort(UN)
    OKVEDselectInputChoices$data <- UN
    rv$txt_file <- table
    rv_result <- rv$txt_file
    #View(rv$txt_file)
  }
)

```

### Basic information

```{r}

#renderTable({
#      dataset <- rv_result()
#      dataset
#})

f <- function(verlist, list_for_ver, resulttyp=0,delna=1) {
  # verlist - массив, который требуется проверить на совпадение с элементами второго массива
  # list_for_ver - проверочный массив, т.е. тот, с которым сравнимается
  # resulttyp (0 - выводятся номера элементов list_for_ver, которые найдены);
  #           (1 - выводятся найденные значения)
  # delna -   (0 -если элемент не найде, то он не показывается)
  #           (1 -если элемент не найде, то указывается NA)
  listforreturn <- vector(mode = 'list', length=0)
  if ((class(verlist)=='list') && (class(list_for_ver)=='list')){
    if (delna==1){
      listforreturn <- as.vector(na.omit(match(verlist,list_for_ver)))
    }
    else{
      listforreturn <- as.vector(match(verlist,list_for_ver))
    }
    
    if (resulttyp==0){
      listforreturn <- as.list(listforreturn)
    }
    else{
      listforreturn<- as.list(list_for_ver[listforreturn])
    }
  }
  return(listforreturn)
}


dataset <- reactive({rv_result()})

renderUI({
      data <- dataset()
      if (is.null(input$OKVEDlectInput)) {
        data <- dataset()
      }
      else{
        d1 <- as.list(input$OKVEDlectInput)
        d2 <- as.list(as.vector(data$V5))
        result <- which(!is.na(f(d2, d1,0,0)))
        result <- as.vector(result)
        data <- data[result,]
      }
      
      div(HTML("География анлиза насчитывает "),
          datatable(data, fillContainer=getOption("DT.fillContainer", TRUE)))
})

```




### Secondary information


Some commentary about Frame 2.

You can download the finished version of the code

My application first creates an interface, allows the user to select a file to import (or several), but with a specific name, and loads these data into the application.

On this line, I create a mapping:

div(HTML("География анлиза насчитывает "),
          datatable(data, fillContainer=getOption("DT.fillContainer", TRUE)))

It looks strange. If not addfillContainer=getOption("DT.fillContainer", TRUE), then the scroll bar disappears from the table. When you add this element, everything shrinks to a very narrow size:

enter image description here

I am unable to stretch the table to the bottom for the rest of the free space.

I specially prepared a short version of the code, from which the problem is kind and easy to repeat using a ready-made data array.

---
title: "AFEA of Russian enterprises"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    orientation: rows
    vertical_layout: fill
    theme: simplex
runtime: shiny
---

```{r setup, include=FALSE, echo=FALSE, message=FALSE}
library("flexdashboard")
library("DT")

```

## Sidebar {.sidebar}
-------------------------------------
```{r}
```
### Chart A
```{r}
renderUI({
    data <- iris
    div(HTML("География анлиза насчитывает "),
      datatable(data, fillContainer=getOption("DT.fillContainer", TRUE)))
})
```

1 Answers

You can use css to increase/decrease width and height of datatable. I have added style = "height: 175%" in div to increase the height.

---
title: "AFEA of Russian enterprises"
output: 
  flexdashboard::flex_dashboard:
    storyboard: true
    orientation: rows
    vertical_layout: fill
    theme: simplex
runtime: shiny
---

```{r setup, include=FALSE, echo=FALSE, message=FALSE}
library("flexdashboard")
library("DT")

```

## Sidebar {.sidebar}
-------------------------------------
```{r}
```
### Chart A
```{r}
renderUI({
    data <- iris
    div(HTML("География анлиза насчитывает "),
      datatable(data, fillContainer=getOption("DT.fillContainer", TRUE)), style = "height: 175%")
})
```

enter image description here

Related