Nested Tables scrolling using rowFormatter cause error

[mazzanti]

Adding nested tables on more of 100 rows, using rowFormatter, when scrolling gives you: tabulator.js:4489 Uncaught TypeError: Cannot read property 'getHeight' of undefined at RowManager._removeTopRow (tabulator.js:4489)

Using Tabulator 4.2

[aklaver]

FYI, Tabulator uses a three part versioning scheme(X.x.x) so it would help to have the third part of the version. Also could we see your rowFormatter code?

[mazzanti]

The rowFormatter code is exactly the same of the demo. For now, i solved with using "virtualDomBuffer: 1000" and creating and show/hiding the subgrid on demand when a row is clicked.

You can use the code on https://pastebin.com/dga7zW0d and adding more rows.

Thank you.

Edited: the version is v4.2.5

[mazzanti]

By the way I found more stable creating and destroying subgrids when row is selected, on demand. Is working fine.

If all subgrids are created using rowFormatter, I found the scrollbar height different from what I expected, just 1/2 scroll. And will cause error in console. Thanks.

[Ruzancev]

When using the code from the example 'Nested Tables', a similar situation arises.

var nestedData = [ {id:1, make:"Ford", model:"focus", reg:"P232 NJP", color:"white", serviceHistory:[

]},    

]

for (var ind = 1; ind< 100; ind++ ) {
var row = {id:1, make:"Ford"+ind, model:"focus", reg:"P232 NJP", color:"white", serviceHistory:[ {date:"22/05/2017", engineer:"Jimmy Brown", actions:"Aligned wheels"}, {date:"11/02/2018", engineer:"Lotty Ferberson", actions:"Changed Oil"}, {date:"04/04/2018", engineer:"Franco Martinez", actions:"Fixed Tracking"}, ]};

nestedData.push(row);

}

var table = new Tabulator("#example-table", { //virtualDom : false, height:"311px", layout:"fitColumns", resizableColumns:false, data:nestedData, columns:[ {title:"Make", field:"make"}, {title:"Model", field:"model"}, {title:"Registration", field:"reg"}, {title:"Color", field:"color"}, ], rowFormatter:function(row){ //create and style holder elements var holderEl = document.createElement("div"); var tableEl = document.createElement("div");

   holderEl.style.boxSizing = "border-box";
   holderEl.style.padding = "10px 30px 10px 10px";
   holderEl.style.borderTop = "1px solid #333";
   holderEl.style.borderBotom = "1px solid #333";
   holderEl.style.background = "#ddd";

   tableEl.style.border = "1px solid #333";

   holderEl.appendChild(tableEl);

   row.getElement().appendChild(holderEl);

   var subTable = new Tabulator(tableEl, {
       layout:"fitColumns",
       data:row.getData().serviceHistory,
       columns:[
       {title:"Date", field:"date", sorter:"date"},
       {title:"Engineer", field:"engineer"},
       {title:"Action", field:"actions"},
       ]
   })
},

});

[Ruzancev]

https://codepen.io/ryazantsevav/pen/zYrBwyL

[Ruzancev]

How to solve the problem?

[olifolkerd]

@Ruzancev

If you need help, please ask a question on Stack Overflow, this issues list is reserved for Bug Reports and Feature requests.

This issue has also been closed for over a year, it is bad practice to use old issues to try and ask for help.

Cheers

Oli :)

[Ruzancev]

Hello. I added a new problem4:45 PM, 15 июня 2020 г., Oli Folkerd notifications@github.com: @Ruzancev If you need help, please ask a question on Stack Overflow, this issues list is reserved for Bug Reports and Feature requests. This issue has also been closed for over a year, it is bad practice to use old issues to try and ask for help. Cheers Oli :)

—You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe. Андрей