Issue with table not rendering properly with colReorder and responsive plugins
Issue with table not rendering properly with colReorder and responsive plugins
sespler
Posts: 16Questions: 7Answers: 0
Link to test case: https://live.datatables.net/hixevafa/1/edit
There are a few steps required to setup the test case:
1. One way or another get the table to have this as its state (I recommend just modifying localStorage as I haven't been able to get it working with the API)
{
"childRows": [],
"colReorder": [0, 1, 5, 9, 11, 12, 15, 7, 17, 13, 4, 6, 10, 2, 22, 8, 20, 3, 14, 21, 16, 19, 18, 23, 24, 25, 26, 27, 28],
"columns": [
{
"name": "Details",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 1",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 5",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 9",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 11",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 12",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 15",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 7",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 17",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 13",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 4",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": false
},
{
"name": "Col 6",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 10",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": false
},
{
"name": "Col 2",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 22",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 8",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 20",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 3",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 14",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": false
},
{
"name": "Col 21",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": false
},
{
"name": "Col 16",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 19",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 18",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 23",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 24",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 25",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 26",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 27",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
},
{
"name": "Col 28",
"search": {
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"visible": true
}
],
"length": 10,
"order": [["Col 1", "asc"]],
"search": {
"_hungarianMap": {},
"caseInsensitive": true,
"regex": false,
"return": false,
"search": "",
"smart": true
},
"start": 0,
"time": 1749580069765
}
- Set the output width to anywhere between 1249px and 1348px
- Reload the page
- Should see something like this:
I have tried putting the state into a variable and loading it via the API but for some reason it doesn't work for me, and even when using the console to do so with the API the page just crashes, so that's why I've just pasted it here.
Hopefully that works and you can see what I'm getting at here. Sorry for so many columns but I wanted to most accurately replicate our setup.
The table is supposed to be taking up the full width of the screen, minus ~15px of padding on either side.
If you expand the viewport to lower than 1249px or larger than 1348px and reload you will see that it works at those dimensions.
I have tried to use these commands and any combos of them to no avail:
- responsive.recalc()
- table.draw(false)
- table.draw()
- table.columns.adjust().draw(false)
There are a few different order/visibility/screen width combos I've found now so its not just this size, but I can't figure out what is making it do that.
Just wondering if there is some method to fix this via the API or if this is a bug or something.
Answers
I updated your test case to use the saved state provided above. I changed the page length to 5 in the restored state just to show it works.
https://live.datatables.net/hixevafa/2/edit
There is some strange behavior. In the screenshot Col 8 and Col 3 (among others) are both shown in the table and shown in the Responsive child. This is after commenting out the
state.save()call and re-running the test case.It seems Responsive might not be respecting the restored ColReorder column order. This might also be the issue with the column/table widths you are seeing. @allan will need to take a look.
Kevin
This is a bug for sure - but I don't know where yet! Reproducing the error is proving to be very frustrating. I can see it on the live site without problem, and the weirdness that Kevin indicates (almost certainly related), but doing exactly the same thing locally I can't see it!
Still working on it.
Allan
Yeah it is quite difficult to find examples of this behavior, typically what I do is reorder a bunch of columns around first, then hide like 5-10, and then play with the width of the screen.
Its an event ordering issue. If you load Responsive before ColReorder the problem doesn't happen: https://live.datatables.net/hixevafa/4/edit .
If you do ColReorder before Responsive (alphabetically, which is what the download CDN URL builder does) then the error occurs. Wow!
What is happening is that each is listening for a
preInitevent. Whichever is loaded first is the one that runs first and thus gets to add its listeners to the DataTable first. In theory it should be able to handle the events in any order, but there is obviously something going wrong in the interaction between them in this case! I suspect Responsive is going to need a listener for ColReorder's events - I just need to make sure I don't invert the problem!Allan
While I can't see the issue appearing anymore on any of the test cases here, I don't fully understand what the fix was.
When you say load, are you talking about loading the JS scripts via the script tag? Or do you mean the options that you give to DataTables on init?
Either way I can't see any difference between my original test case and the one you posted just now in either of those spots.
Am I missing something?
It's very subtle. I switched the Responsive and ColReorder in the CDN URL. It just makes Responsive run first which works around the issue. I will be looking at fixing it properly thought, probably on Friday.
Allan