Как добавить вертикальную линию в таблицу данных? - PullRequest
Новая
       18

Как добавить вертикальную линию в таблицу данных?

0 голосов
/ 15 мая 2019

Я хочу добавить строку между 3 колонками: Видовой Сепал и Лепесток. Как я могу это сделать? 

sketch = htmltools::withTags(table(
  class = 'display',
  thead(
    tr(
      th(rowspan = 2, 'Species'),
      th(colspan = 2, 'Sepal'),
      th(colspan = 2, 'Petal')
    ),
    tr(
      lapply(rep(c('Length', 'Width'), 2), th)
    )
  )
))
print(sketch)
datatable(iris[1:20, c(5, 1:4)], container = sketch, rownames = FALSE)

enter image description here

Ответы [ 2 ]

2 голосов
/ 15 мая 2019

Вы можете сделать 

datatable(iris[1:20, c(5, 1:4)], container = sketch, rownames = FALSE) %>% 
  formatStyle(c(1,3), `border-right` = "solid 2px")

enter image description here

Для границ в заголовке вы можете установить CSS в sketch: 

sketch = htmltools::withTags(table(
  class = 'display',
  thead(
    tr(
      th(rowspan = 2, style = "border-right: solid 2px;", 'Species'),
      th(colspan = 2, style = "border-right: solid 2px;", 'Sepal'),
      th(colspan = 2, 'Petal')
    ),
    tr(
      th("Length"),
      th(style = "border-right: solid 2px;", "Width"),
      th("Length"),
      th("Width")
    )
  )
))

enter image description here

1 голос
/ 15 мая 2019

Вы можете добавить класс css, который добавляет границу справа от ячеек, и применить его к соответствующим столбцам, используя параметры columnDefs.Для заголовка вы можете установить класс с помощью обратного вызова initComplete.

Вот пример: 

library(shiny)
library(DT)
library(htmltools)

runApp(shinyApp(
  ui <- basicPage(
    tags$head(
      tags$style(HTML(".cell-border-right{border-right: 1px solid #000}"))),
    DT::dataTableOutput('table1')
  ),
  server = function(input, output) {
    output$table1 <- DT::renderDataTable({
      datatable(data.frame(a1 = 1, b1 = 2, a2 = 3, b2 = 4), rownames = FALSE,
                container = withTags(table(
                  class = 'display',
                  thead(
                    tr(
                      th(colspan = 2, 'g1'),
                      th(colspan = 2, 'g2')
                    ),
                    tr(
                      lapply(rep(c('a', 'b'), 2), th)
                    )
                  )
                )),options = list(initComplete = JS(
                  "function(settings, json) {",
                  "var headerBorder = [0,1];",
                  "var header = $(this.api().table().header()).find('tr:first > th').filter(function(index) {return $.inArray(index,headerBorder) > -1 ;}).addClass('cell-border-right');",
                  "}"),columnDefs=list(list(className="dt-right cell-border-right",targets=1))
      ))
    })
  }
))

Селекторы jquery используются для выбора первой строки заголовка и первойтег, чтобы граница добавлялась только в ячейку g1.

...