I have a datatable with the first header and the first column fixed when scrolling horizontally and vertically.
Everything works fine thanks to this answer.
But if the first column contains a cell larger than the header I got this after a scroll to the bottom and the right when I get back to the top left of the table:
Here is the code to reproduce the picture:
library(shiny)
library(DT)
library(tidyverse)
(df <- diamonds[1:100,])
df <- mutate(df, carat = as.character(carat))
df[1, 1] <- "qwertyuiopqwertyuiop"
df <- bind_cols(df[1:100, ], df[1:100, ])
runApp(
list(ui = fluidPage(
selectInput("here", "Here to reproduce bug", letters),
dataTableOutput("mytable")
),
server = function(input, output, session){
output$mytable <- renderDataTable(
DT::datatable(df,
rownames=FALSE,
extensions = c("FixedColumns",
"FixedHeader"),
options =
list(dom = 't',
scrollX = TRUE,
paging=FALSE,
fixedHeader=TRUE,
fixedColumns =
list(leftColumns = 1,
rightColumns = 0))))}))
EDIT:
As @r2evans suggested, I try to reproduce the bug with javascript code only. But the wrapping of large columns is different and I cannot reproduce the issue. See the picture and the code below: Could it be a css issue?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>datatables bug</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />
<script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.bootstrap.css" />
<script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.bootstrap.css" />
<script src="www/script.js"></script>
</head>
<body>
<h1>Scroll the table to the right and the bottom and go back</h1>
<p>If the table is not wide or long enough to scroll just zoom in...</p>
<hr>
</html>
www/script.js
function tableCreate() {
const table_size = 20;
const body = document.body,
tbl = document.createElement('table'),
hd = document.createElement('thead');
const r = hd.insertRow();
for (let i = 0; i < table_size; i++) {
const h = document.createElement('th');
h.appendChild(document.createTextNode(`Col ${i}`));
r.appendChild(h)
}
tbl.appendChild(hd);
const bd = document.createElement('tbody');
tbl.appendChild(bd);
for (let i = 1; i < table_size; i++) {
const tr = bd.insertRow();
for (let j = 0; j < table_size; j++) {
const td = tr.insertCell();
if (i == 0) {
td.appendChild(document.createTextNode(`Col ${j}`));
} else {
td.appendChild(document.createTextNode(`this is a long string !!! Yes it is...`));
}
}
}
body.appendChild(tbl);
$("table").attr("id", "myTable")
$("table").attr("class", "display")
}
$(document).ready(function () {
tableCreate();
$('#myTable').DataTable({
fixedHeader: true,
fixedColumns: {
left: 1
},
paging: false,
searching: false
});
});
