Recursive layout rendering depending on the size of the table / screen #4467
Labels
Possible Bug
A possible bug that needs investigation
Comments
|
Is your table element or it's parent flexed? |
|
Hey, No the table only has a I recreated a simple version of HTML/JS outside of jsFiddle and put it in a html file <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
</head>
<body>
<div id="example-table"></div>
<script>
(function ()
{
this.init = async () =>
{
let TabulatorUrl = null;
if ( confirm( 'Use patched version ? ' ) )
{
console.log( 'Using patched version');
TabulatorUrl = 'http://localhost:8082/totalgest/4.0.0/public/assets/global/plugins/tabulator/6.2.0/js/tabulator_esm.custom.js';
}
else
{
console.log( 'Using official build');
TabulatorUrl = 'https://unpkg.com/[email protected]/dist/js/tabulator_esm.js';
}
const { TabulatorFull } = await import( TabulatorUrl );
//define some sample data
const _tableData = [
{ id: 1, name: "Oli Bob", age: "12", col: "red", dob: "" },
{ id: 2, name: "Mary May", age: "1", col: "blue", dob: "14/05/1982" },
{ id: 3, name: "Christine Lobowski", age: "42", col: "green", dob: "22/05/1982" },
{ id: 4, name: "Brendon Philips", age: "125", col: "orange", dob: "01/08/1980" },
{ id: 5, name: "Margret Marmajuke", age: "16", col: "yellow", dob: "31/01/1999" },
];
let tableData = [];
for ( let i = 0; i < 10; i++ )
{
tableData = [ ...tableData, ..._tableData ];
}
const table = new TabulatorFull( "#example-table", {
maxHeight: '90vh',
data: tableData,
layout: "fitDataStretch",
autoResize: false,
columns: [ //Define Table Columns
{ title: "Name", field: "name" },
{ title: "Age", field: "age", hozAlign: "left" },
{ title: "Favourite Color", field: "col" },
{ title: "Date Of Birth", field: "dob", hozAlign: "center" },
],
} );
table.on( 'tableBuilt', () =>
{
console.log( 'table built' );
// table.blockRedraw(); // Makes no difference
} );
};
this.init();
}).apply( {} );
</script>
</body>
</html>Here's what happens ( the patched version doesn't allow calling the redraw function if adjustTableSize is already called from redraw ) tabulator.recursion.mp4 |
|
Update: I had to also skip re-dispatching the Change now looks like this: if(!this.fixedHeight && initialHeight != this.element.clientHeight){
resized = true;
if(!this.redrawing) // Recursion check
{
if ( this.subscribed( "table-resize" ) )
{
this.dispatch( "table-resize" );
}
else
{
this.redraw();
}
}
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey Oli,
I have a problem with Tabulator recursively recalculating the table height when the table has a max-height ( allowing the table to shrink if the data is less than the height )
The really strange thing is it doesn't always happen, I can trigger it by zooming out ( my colleague noticed it when his tab crashed ) so I guess it's dependent on screen resolution / size.
RowManager.redraw()->RowManager.adjustTableSize()->this.redraw()I modified the adjustTableSize to see what's happening and limit it to 100 redraws
Output when zoomed:
As a fix I've just left the flag to not call
this.redraw()when being called fromredraw(), I haven't noticed any visual differences so far. I've waited to make a PR because I'd like your opinion. If the problem is caused else where maybe we can still leave a max recursion check and then throw an error ?Also Is this line correct in VirtualDomVertical.js@101 ?
in the if should
this.rows.lengthbe a function callthis.rows().lengthas a quickconsole.log( console.log( this.rows.length, this.rows().length );in the if gives0 124changing the inside call to
this.rows()doesn't fix the infinite loop issue.Tabulator Info
To Reproduce
I can't reproduce the exact error in JS Fiddle but the browser does hang ( chrome ) and ask if I want to interrupt the script ( no idea if it's the same problem or another issue )
https://jsfiddle.net/antman3351/c1asqtez/53/
make sure the console is minimised ( it doesn't do it with the console open )
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
The text was updated successfully, but these errors were encountered: