Уменьшить высоту / поля строки в Datatable?

Я использую datatable в блестящем приложении с настраиваемой окраской ячеек. Это делается в html (каждая ячейка - это div) и путем указания DT не экранировать эти конкретные столбцы.

С DT это выглядит так: скриншот

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

Я пытался добавить margin: 0px; padding: 0px;, но без разницы.

Я также пытался использовать formatstyle из DT, чтобы уменьшить высоту строки следующим образом: formatStyle( 0, target = 'row', lineHeight = '80%'), и результат выглядит так: снимок экрана 2

Я сейчас пытаюсь использовать padding: 0px;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;, но он не работает лучше. Мне кажется, что это поле от DT, а не от моего div, поскольку что бы я ни пробовал в своем стиле div, у меня всегда одни и те же поля между цветами и пределами высоты строки. Единственное, я не знаю, как это контролировать.

Кто-нибудь знает, как добиться такого результата? Заранее благодарю за вашу помощь.

Используемый код:

for (c in colnames(ranking)[10:13]) {
      ranking <- ranking %>%
        filter(param %in% input$param) %>%
        arrange_(.dots = c) %>%
        mutate(!!paste0(c, "_rk") := 1:nrow(ranking %>% filter(param %in% input$param)))
      tmp <- ranking %>%
        arrange_(.dots = c) %>%
        select_(.dots = c)

      max <- tmp %>% tidyr::drop_na() %>% .[, 1] %>% max()
      min <- tmp %>% tidyr::drop_na() %>% .[, 1] %>% min()
      range <- max - min
      brks <- vector(length = colors)

      for (i in 1:colors) {
        brks[i] <- i^pracma::bisect(function(x) range^(1/x) - (colors + 1), 1, 5)$root %>% round(2) + min - 2
      }

      tmp <- tmp %>% 
        mutate(brks = ifelse(is.na(tmp[, 1]),
                             NA,
                             cut(tmp %>% tidyr::drop_na() %>% .[, 1], brks)))
      colfunc <- colorRampPalette(c("#c31432", "#ffc500", "#edde5d", "white"))
      clrs <- colfunc(colors + 1)

      tmp_nrow <- tmp %>% nrow()

      for (i in 1:tmp_nrow) {
        row <- which(tmp[i, 1] == ranking[,c])

        r <- clrs[tmp[i, 2]] %>% col2rgb() %>% .[1]
        g <- clrs[tmp[i, 2]] %>% col2rgb() %>% .[2]
        b <- clrs[tmp[i, 2]] %>% col2rgb() %>% .[3]

        tmp[i, 1] <- paste0("<center><div style='background: ", "radial-gradient(rgba(", r, ",", g, ",", b, ",", "0), rgba(", r, ",", g, ",", b, ",", "0.25), rgba(", r, ",", g, ",", b, ",", "1)", ")", "; border: solid 0px;font-family: \"Interstate Black\";font-weight: bolder;padding: 0;margin: 0;'>",
                            tmp[i, 1],
                            "</div></center>")

        ranking[row,paste0(c, "_coloring")] <- tmp[i, 1]
      }
    }

        ranking_m <- as.matrix(ranking %>%
                             filter(param %in% input$param) %>%
                             select(4, 47, 40, 38, 31, 32, 41, 42, 43, 44))

    DT::datatable(ranking_m,
                  escape = c(TRUE, FALSE, rep(FALSE, 8)),
                  filter = 'top',
                  extensions = list('Responsive' = NULL),
                  options = list(pageLength = 25,
                                 lengthMenu = c(10, 25, 50, 100),
                                 columnDefs = list(list(width = '400px', targets = 0),
                                                   list(width = '25px', targets = 1),
                                                   list(className = 'dt-center', targets = 2:9)))) #%>%
      # formatStyle( 0, target = 'row', lineHeight = '80%')

person homer3018    schedule 20.05.2019    source источник
comment
Вам специально для этого нужно использовать datatable? Есть другие пакеты, которые могут это сделать.   -  person LyzandeR    schedule 20.05.2019
comment
Я перешел с htmlTableWidget на DT, поэтому я могу использовать DT только, когда дело касается таблиц, вместе с фильтрацией и сортировкой, что отлично. Обычно у меня не было этой проблемы с полем для htmlTableWidget, но ни сортировка, ни фильтрация были невозможны. Какой пакет вы имеете в виду?   -  person homer3018    schedule 20.05.2019
comment
Как вы расставляли цвета? Вы можете предоставить свой код?   -  person Stéphane Laurent    schedule 20.05.2019
comment
В основном это радиальный градиент с настраиваемыми цветами в стиле div. Это выглядит примерно так: paste0("<center><div style='background: ", "radial-gradient(rgba(", r, ",", g, ",", b, ",", "0), rgba(", r, ",", g, ",", b, ",", "0.25), rgba(", r, ",", g, ",", b, ",", "1)", ")", "; border: solid 0px;font-family: \"Interstate Black\";font-weight: bolder;padding: 0px;margin:0px;'>", tmp[i, 1], "</div></center>") tmp[i,1] - числа, отображаемые в каждой ячейке.   -  person homer3018    schedule 20.05.2019
comment
Я думал о tableHTML и функции add_css_conditional_column. У вас есть полный контроль над раскраской (чтобы ранжировать именно так, как вы хотите - цвета охватывают всю ячейку), но при этом упускаются функции сортировки и фильтрации JS. Если сортировка / фильтрация не проблема, могу показать вам пример   -  person LyzandeR    schedule 20.05.2019
comment
Судя по тому, что вы говорите, это похоже на то, что было у меня с htmlTableWidget, но в нем также отсутствуют сортировка и фильтрация, что является очень хорошей функцией. В любом случае спасибо за предложение :)   -  person homer3018    schedule 20.05.2019
comment
@ homer3018 Вы должны установить этот CSS для ячеек (td), а не для содержимого ячеек. Пожалуйста, предоставьте код, чтобы я мог вам помочь.   -  person Stéphane Laurent    schedule 21.05.2019
comment
@ StéphaneLaurent Хорошо, но я не уверен, какой именно код вы хотели бы увидеть. Не могли бы вы уточнить? Также я читал, что функция formatStyle принимает любые свойства CSS, так что, может быть, это можно сделать оттуда?   -  person homer3018    schedule 21.05.2019
comment
@ homer3018 Да, formatStyle возможно. Но я должен увидеть, как вы условно определяете цвета (я не знаю, что такое r, g, b и i в коде, который вы разместили в комментарии). Пожалуйста, предоставьте код, который генерирует вашу таблицу.   -  person Stéphane Laurent    schedule 21.05.2019
comment
Понятно. Давайте попробуем сначала объяснить, что это такое: я иду столбец за столбцом, затем определяю несколько разрывов для вычисления палитры рампы. Отсюда я могу определить разрывы и, следовательно, значение _1 _, _ 2 _, _ 3_. Столбец отсортирован так, как я хочу, и я иду строка за строкой, чтобы изменить значение с tmp[i,1] на то, что вы видели. поэтому i - это номер строки. Я смогу поделиться еще несколькими кодами, но прежде, чем мне нужно будет сделать его более похожим на минимальный пример. Возможно, это неэффективно, но в моем случае это работает. Спасибо за помощь!   -  person homer3018    schedule 21.05.2019
comment
Я нашел это: datatables.net/manual/styling/theme-creator, но это не показывает поля или отступы ячейки. Чем больше я думаю об этом, тем больше думаю, что это должен быть принудительный аргумент (возможно, в formatStyle) объекта DT, только я не знаю, как его правильно написать.   -  person homer3018    schedule 21.05.2019
comment
Покажи свой код ^^   -  person Stéphane Laurent    schedule 21.05.2019
comment
LOL нормально. Отредактировал ОП. Самая последняя строка, закомментированная знаком formatStyle, дает второй снимок экрана, на котором все сжато по горизонтали. Это могло бы помочь в дальнейшем отображении большего количества строк на экранах, но сначала мы должны избавиться от этого поля.   -  person homer3018    schedule 21.05.2019
comment
Хммм, это не минимальный код ^^ Я приведу простой пример. Ждать.   -  person Stéphane Laurent    schedule 21.05.2019
comment
и все же я его немного подрезал .... но эй, ты просил об этом;)   -  person homer3018    schedule 21.05.2019
comment
Хорошо, я думаю, что могу изменить его, чтобы добавить градиент в formatStyle, как вы. Спасибо ! Я протестирую и отчитаюсь.   -  person homer3018    schedule 21.05.2019


Ответы (1)


Фоновый CSS должен быть установлен для ячеек, а не для содержимого ячеек. Этого можно добиться с помощью formatStyle. Вот пример со случайными цветами:

library(DT)
dat <- iris[1:5,]
ncols <- ncol(dat)

# background for column 1
r <- sample.int(256, 5, replace = TRUE) - 1L
g <- sample.int(256, 5, replace = TRUE) - 1L
b <- sample.int(256, 5, replace = TRUE) - 1L
dat$RGB1 <- sprintf("radial-gradient(rgba(%s,%s,%s,0),rgba(%s,%s,%s,0.25),rgba(%s,%s,%s,1))", 
                   r, g, b, r, g, b, r, g, b)

# background for column 2
r <- sample.int(256, 5, replace = TRUE) - 1L
g <- sample.int(256, 5, replace = TRUE) - 1L
b <- sample.int(256, 5, replace = TRUE) - 1L
dat$RGB2 <- sprintf("radial-gradient(rgba(%s,%s,%s,0),rgba(%s,%s,%s,0.25),rgba(%s,%s,%s,1))", 
                    r, g, b, r, g, b, r, g, b)

# background for column 4
r <- sample.int(256, 5, replace = TRUE) - 1L
g <- sample.int(256, 5, replace = TRUE) - 1L
b <- sample.int(256, 5, replace = TRUE) - 1L
dat$RGB4 <- sprintf("radial-gradient(rgba(%s,%s,%s,0),rgba(%s,%s,%s,0.25),rgba(%s,%s,%s,1))", 
                    r, g, b, r, g, b, r, g, b)

datatable(dat, 
          options = 
            list(
              columnDefs = 
                list(
                  list(visible = FALSE, targets = ncols + 1:3),
                  list(className = "dt-center", targets = 1:ncols)
                )
            )) %>%
  formatStyle(1, valueColumns = ncols+1, background = JS("value")) %>%
  formatStyle(2, valueColumns = ncols+2, background = JS("value")) %>%
  formatStyle(4, valueColumns = ncols+3, background = JS("value")) %>%
  formatStyle(1:ncols, `font-family` = "Interstate Black") %>% 
  formatStyle(1:ncols, fontWeight = "bolder")

введите описание изображения здесь

person Stéphane Laurent    schedule 21.05.2019
comment
Спасибо, Стефан :) Я протестирую это самостоятельно, так как он требует некоторых настроек, чтобы я мог заставить его работать вместе с моим существующим кодом, но это похоже на ответ :) - person homer3018; 21.05.2019
comment
Просто чтобы сообщить, что он работает, как ожидалось. Я даже добавил условное форматирование в некоторые formatStyle с помощью styleEqual. В конце код легче понять, чем раньше, и типы столбцов теперь числовые (как и должны), но это был символ с моим старым кодом, не поддерживающий фильтрацию. Спасибо еще раз - person homer3018; 22.05.2019