'R datatable rotate header not aligning
I am trying to rotate the header for a datatable. I was able to rotate the header but the rotated header is not aligning with the columns. This is what I have now:
I referenced this for my code : header direction in shiny data table
Here is my code:
datatable(df, rownames = F,class = c("compact"),options = list(paging = F, autoWidth = T,searching= FALSE,
scrollX=T,
initComplete = JS("function(settings, json) {$(this.api().table().header()).css({'font-size' : '12px'});}"),
headerCallback = JS(
"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(220deg)',
'writing-mode': 'tb-rl',
'white-space': 'nowrap'
});
newDiv.append(newInnerDiv);
betterCells.push(newDiv);
});
$ths.each(function(i){
$(this).html(betterCells[i]);
});
}"
))) %>%
formatStyle(columns = c(1:19), `font-size` = '12px')
DATA:
structure(list(diag_category_name = structure(1:18, .Label = c("AIDS",
"Any malignancy", "Cerebrovascular disease", "Chronic pulmonary disease",
"Congestive heart failure", "Dementia", "Diabetes (mild to moderate)",
"Diabetes with chronic complications", "Hemoplegia or paralegia",
"Metastatic solid tumor", "Mild liver disease", "Moderate to severe liver disease",
"Myocardial infarction", "No Charlson Comorbidity", "Peptic ulcer disease",
"Peripheral vascular disease", "Renal disease", "Rheumatologic disease"
), class = "factor"), AIDS = c(20L, 6L, 3L, 5L, 1L, NA, NA, NA,
1L, 14L, 2L, NA, 1L, NA, NA, 3L, 5L, NA), `Any malignancy` = c(6L,
1051L, 108L, 209L, 106L, 34L, 130L, 158L, 14L, NA, 92L, 10L,
86L, NA, 37L, 190L, 161L, 32L), `Cerebrovascular disease` = c(3L,
108L, 421L, 122L, 105L, 44L, 47L, 94L, 35L, 303L, 35L, 7L, 67L,
NA, 23L, 165L, 111L, 15L), `Chronic pulmonary disease` = c(5L,
209L, 122L, 726L, 146L, 34L, 80L, 152L, 23L, 505L, 84L, 15L,
90L, NA, 43L, 234L, 173L, 31L), `Congestive heart failure` = c(1L,
106L, 105L, 146L, 381L, 27L, 37L, 124L, 15L, 269L, 43L, 3L, 121L,
NA, 18L, 166L, 160L, 16L), Dementia = c(NA, 34L, 44L, 34L, 27L,
109L, 11L, 32L, 5L, 74L, 5L, 1L, 26L, NA, 3L, 44L, 44L, 3L),
`Diabetes (mild to moderate)` = c(NA, 130L, 47L, 80L, 37L,
11L, 475L, NA, 8L, 335L, 58L, 9L, 36L, NA, 17L, 79L, 45L,
12L), `Diabetes with chronic complications` = c(NA, 158L,
94L, 152L, 124L, 32L, NA, 573L, 18L, 400L, 75L, 9L, 83L,
NA, 27L, 173L, 229L, 16L), `Hemoplegia or paralegia` = c(1L,
14L, 35L, 23L, 15L, 5L, 8L, 18L, 63L, 45L, 4L, NA, 13L, NA,
4L, 21L, 14L, 3L), `Metastatic solid tumor` = c(14L, NA,
303L, 505L, 269L, 74L, 335L, 400L, 45L, 2778L, 264L, 27L,
186L, NA, 79L, 492L, 455L, 68L), `Mild liver disease` = c(2L,
92L, 35L, 84L, 43L, 5L, 58L, 75L, 4L, 264L, 362L, NA, 29L,
NA, 22L, 73L, 70L, 8L), `Moderate to severe liver disease` = c(NA,
10L, 7L, 15L, 3L, 1L, 9L, 9L, NA, 27L, NA, 38L, 3L, NA, 6L,
11L, 10L, 1L), `Myocardial infarction` = c(1L, 86L, 67L,
90L, 121L, 26L, 36L, 83L, 13L, 186L, 29L, 3L, 277L, NA, 20L,
99L, 86L, 11L), `No Charlson Comorbidity` = c(NA, NA, NA,
NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, 49L, NA, NA, NA,
NA), `Peptic ulcer disease` = c(NA, 37L, 23L, 43L, 18L, 3L,
17L, 27L, 4L, 79L, 22L, 6L, 20L, NA, 118L, 33L, 31L, 4L),
`Peripheral vascular disease` = c(3L, 190L, 165L, 234L, 166L,
44L, 79L, 173L, 21L, 492L, 73L, 11L, 99L, NA, 33L, 693L,
197L, 22L), `Renal disease` = c(5L, 161L, 111L, 173L, 160L,
44L, 45L, 229L, 14L, 455L, 70L, 10L, 86L, NA, 31L, 197L,
633L, 24L), `Rheumatologic disease` = c(NA, 32L, 15L, 31L,
16L, 3L, 12L, 16L, 3L, 68L, 8L, 1L, 11L, NA, 4L, 22L, 24L,
106L)), row.names = c(NA, -18L), class = c("data.table",
"data.frame"), .internal.selfref = <pointer: 0x5638d466ed90>, sorted = "diag_category_name")
Solution 1:[1]
I have a fix. However, you may need to change some things depending on how you use this. For example, when you add x-axis scrolling overflow is hidden. When the table headings are tilted, there will be an overflow. That equates to some of the header labels getting hidden.
datatable(df1, rownames = F, class = c("compact"),
options = list(
paging = F, autoWidth = F,
searching= FALSE,
scrollX = F,
initComplete = JS("function(settings, json) {
$(this.api().table().header()).css({
'font-size' : '12px'});}"),
headerCallback = JS("function(thead, data, start, end, display){
var $ths = $(thead).find('th');
$ths.css({'vertical-align': 'top', 'padding': '4px 0px',
'transform': 'rotate(180deg)', 'border': 'none'});
var betterCells = [];
$ths.each(function(){
var cell = $(this);
var newDiv = $('<div>', {width: '13px', float: 'left'});
var newInnerDiv = $('<div>', {text: cell.text()});
newDiv.css({margin: 'auto'});
newInnerDiv.css({
'writing-mode': 'vertical-rl',
'white-space': 'nowrap',
'text-align': 'left',
'transform-origin': 'top left',
'transform': 'rotate(45deg)',
'overflow': 'visible'
});
newDiv.append(newInnerDiv);
betterCells.push(newDiv);
});
$ths.each(function(i){
$(this).html(betterCells[i]);
});}"))) %>%
formatStyle(columns = c(1:19), `font-size` = '12px')
There's a lot going on here, and most of it was your code. However, if you have any questions about what's happening here, just let me know.
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 | Kat |