I’m trying to implement a save/load datatable state to and from a database. I can save the state without problemas but I have the following problem when trying to load:
If I try to set the state before the datatable draws the columns (before the header shows up), I get a ‘Cannot read property ‘0’ of undefined’ error. Same thing happens if I load data and then try to set the state. However, if I delay the setState for about 1500ms after the data load, it works.
Having found this, I tried to call the setState in load’s callback but it doesn’t work because the callback happens after the data is loaded but before the columns are drawn.
Edit: I’ve also tried parsing empty data to force the column draw but I get a ‘Data loading error: Empty data’, which is a shame.
I’ve concluded that this could probably be fixed if the datatable came with the columns already present, so I could setstate and load independently. Is there anyway to do this? I would really rather not have delayed functions in this case, because if the server takes a bit longer to responde, it would probably break the flow.
Additional information: this might have to with me not having the columns configured in the component, instead I add the columns on ready: function(){}. The reason for this is that my datatable is a custom component and the end-user can add as many as he wishes to the layout. If I set the columns in the datatable config, weird things happen: scrolling on the table actually scrolls a diferente one, hiding a column in one hides in all, etc. I’ve worked around this by adding the columns as soon as the datatable is ready.
Apparently solved: after extensive console.logging, it seemed that the datatables ready config was running after trying to set the state, not before as I expected. I placed the addcolumn method somewhere else to guarantee that it runs before the setState and it’s working as expected now.