'How can I freeze the first column in DT without increasing the column width of a table with rotated (90°) column names?

I want a table of the format of table dt1 (rotated and freezed column names, narrow column width, scrollbars horizontally and vertically) plus freezing the first column. I can freeze the first column by using "extensions =c("FixedColumns")", but then the column width increases (see table dt2) and I am not able the define smaller column width despite using "columnDefs".

Can anybody help me?

library(DT)
headerCallback <- c(
  "function(thead, data, start, end, display){",
  "  var $ths = $(thead).find('th');",
  "  $ths.css({'vertical-align': 'bottom', 'white-space': 'nowrap'});",
  "  var betterCells = [];",
  "  $ths.each(function(){",
  "    var cell = $(this);",
  "    var newDiv = $('<div>', {height: 'auto', width: cell.height()});",
  "    var newInnerDiv = $('<div>', {text: cell.text()});",
  "    newDiv.css({margin: 'auto'});",
  "    newInnerDiv.css({",
  "      transform: 'rotate(180deg)',",
  "      'writing-mode': 'tb-rl',",
  "      'white-space': 'nowrap'",
  "    });",
  "    newDiv.append(newInnerDiv);",
  "    betterCells.push(newDiv);",
  "  });",
  "  $ths.each(function(i){",
  "    $(this).html(betterCells[i]);",
  "  });",
  "}"
)
df <- iris[,c(5, 1:4, 1:4, 1:4)]
dt1 <- datatable(df,  rownames=FALSE, 
                class = 'cell-border stripe',
                
                extensions = c("FixedHeader"), #, c("FixedColumns", "FixedHeader")
                options = list(dom = 't', 
                               ordering=F, #no column sorting 
                               scrollY = '600px', paging = FALSE, scrollX = TRUE,
                               fixedHeader=TRUE,
                               headerCallback = JS(headerCallback),
                               fixedColumns = list(leftColumns = 1)))
dt2 <- datatable(df,  rownames=FALSE, 
                 class = 'cell-border stripe',
                 
                 extensions =c("FixedColumns", "FixedHeader"),
                 options = list(dom = 't', 
                                ordering=F, #no column sorting 
                                scrollY = '600px', paging = FALSE, scrollX = TRUE,
                                fixedHeader=TRUE,
                                #define col withs  does not help
                                autoWidth = TRUE,
                                columnDefs = list(list(width = '15px', targets = "_all")), 
                               columnDefs = list(list(className = "nowrap", targets = "_all")),
                               ## 
                                headerCallback = JS(headerCallback),
                                fixedColumns = list(leftColumns = 1)))


Solution 1:[1]

https://github.com/rstudio/DT/issues/275 Maybe can't fixed the bug. Need more time to solve the problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HaoranLi