Блог

У меня есть небольшое блестящее приложение R https://kormir.shinyapps.io/dt_test /

 library(shiny)
library(DT)

ui <- fluidPage(
            column(4,
                   br(),
                   br(),
                   dataTableOutput('dt1')
                   )
)

server <- function(input, output) {
    output$dt1 <- renderDataTable({
        datatable(mtcars[1:4,1:4])
    })
}

shinyApp(ui = ui, server = server)
 

In использует пакет datatable для создания динамических таблиц.
Я хотел бы уменьшить внутренние отступы, но навыки css недостаточно хороши для этого.

Мне нужно удалить эту желтую область или сделать ее очень маленькой. Например, я вычислил класс строк и попытался принудительно увеличить размер этих заполнений до 0.

  .odd {
    background-color: red!important;
    border-collapse: collapse!important;
    padding: 0!important;
    border : 0px !important;
} 
 

Это не работает…

Редактировать

Мое первоначальное решение не учитывало интерактивные изменения в таблице во время сеанса. Следующая инъекция js при инициализации таблиц function(){$('tbody td').css({'padding': '0px'});} данных применяет изменение заполнения к исходному состоянию таблицы, но любые изменения, такие как сортировка и разбивка на страницы, приведут к возврату таблицы к ее начальной настройке отображения.

Как насчет введения некоторого javascript при инициализации таблиц данных с initComplete аргументом in Options ?

Для этого у вас должен быть htmlwidgets установлен пакет, чтобы вы могли использовать JS() функцию. JS() обрабатывает строки как код javascript.

DT::datatable() имеет options аргумент, который соответствует Options в таблицах данных. options принимает список именованных аргументов DataTables Options .

В options , укажите именованный список с initComplete аргументом. Там введите некоторый js, htmlwidgets::JS() и обратный вызов js будет выполнен при инициализации ваших таблиц данных.

DataTables имеет несколько параметров стиля по умолчанию, в том числе вызываемый compact . Вот что делает включение опции compact стилизации (цитата отсюда):

Уменьшите количество пробелов, используемых в стилизации по умолчанию для таблицы данных, увеличивая плотность информации на экране

Итак, следующий шаг — добавить класс compact к вашему объекту DataTables в DOM следующим образом:

Важная часть js:

function(){$(this).addClass('compact');}

$(...) это синтаксис jQuery для доступа к элементам в DOM. Внутри $(...) находится селектор элемента DOM, который вы хотите выбрать. К счастью, поскольку вы вводите этот js-код в событие DataTables, вы можете использовать this селектор для ссылки на таблицу. Следующий метод addClass() . Он делает то, что говорит: он добавляет класс к выбранному объекту в DOM. Вы хотите добавить класс compact в свою таблицу, а затем DataTables позаботятся обо всем остальном.

Хорошо, вот код:

 library(shiny)
library(DT)

ui <- fluidPage(
  column(4,
         br(),
         br(),
         dataTableOutput('dt1')
  )
)

server <- function(input, output) {
  output$dt1 <- renderDataTable({
    datatable(mtcars, 
              options = list(
                initComplete = JS(
                  "function(){$(this).addClass('compact');}")
              )
    )
  })
}

shinyApp(ui = ui, server = server, options = list(launch.browser=TRUE))
 

Результат:

После изменения нумерации страниц и сортировки по cyl :

compact стиль по-прежнему применяется.