Responsive doesn't rebuild and recalculate when render function has delayed render components

hhellinga

Hi there,

I'm currently integrating datatables into my application using lit-element.
We're trying to use a complicated setup where we can transform the data inside of datatables using the render function for specific table data.

In other words: we are trying to change the content within a data cell using a component from lit element.

This looks like the following: edited - removed

The problem I'm experiencing is that when you send a custom lit html element like:

<status-dropdown></status-dropdown>

then this element still has to be rendered when it is added to the dom, it has it's own rendering lifecycle.

This causes the responsiveness of the datatable to misscalculate the actual size of the column in order to decide which column should be hidden and which shouldn't.

I've done a:

this.table = new datatable(options); // <- with the render function that contains <status-dropdown></status-dropdown>
setTimeout(()=>{
                // is called after <status-dropdown></status-dropdown> has been rendered
                this.table.columns.adjust();
                this.table.responsive.rebuild();
                this.table.responsive.recalc();
}, 1000)

Where the timeout is essentially able to be run after the component within the render function has been rendered.
This is not ideal because we would like data-tables to be able to pick up when a component within it has been rendered, but alas, we can try a timeout just in case as a workaround.

This causes the columns to correctly resize (according to the newly rendered component), however, the responsiveness doesn't seem to be rebuild or recalculated. And hence, doesn't hide columns based on the newly calculated column size.

This causes an overflow-x to appear for columns that should've been hidden.

edited - removed

Am I correctly calling the responsive rebuild and recalc? Because they don't seem to do anything....

allan

Have you tried using the listHiddenNodes() renderer for Responsive? Example here.

I'm not sure if it will fix the issue, but it is worth a shot.

Allan

allan

Thinking a little more, I doubt it will work. You really need the custom component to render before DataTables can do its calculations, similar to what the React and Vue integrations do.

Allan

hhellinga

I've tried using listHiddenNodes() for the renderer, yes.
But alas, it does not seem to help.

Would it work if I were to try and render my component in the DOM, and move it towards the render function afterwards somehow? Is there perhaps a guide on writing integrations, such that for example lit could be integrated into datatables? I am willing to help contribute if I can find out a way to get lit integrated.

hhellinga

I have another forum related question:

Is it possible for me to edit my initially written post? I would like to change the images to not include information from our app, for data regulation purposes... There is some identifiable information in there that I would like to get removed.

hhellinga

Dear allan,

I fixed my issue by doing the following:

I created an element that would hold my data, and append it to an element in the DOM that could calculate the width of the actual appended element. This way I would have the width of the data that would be contained within my <status-dropdown>, it is then a matter of adding the default width of all the components inside the status-dropdown to the width of the data that was prerendered by appending it.

I then remove the element with the data from the dom.

The width is then saved inside of a variable and added to the width of a div element surrounding the status-dropdown... This way we can create a element that already has the width of the status-dropdown before it's actually being rendered, causing the datatable to work the way it's supposed to.

Here is a code sample:

const statusdropdown = document.createElement('status-dropdown');
statusDropdown.setAttribute('status', data);
div.appendChild(statusdropdown);
const prerenderData = document.createElement('p');
prerenderData.innerText = data;
document.querySelector('#body').appendChild(prerenderData);
prerenderData.style.display = 'inline'; // causes the p element to take the inner width of the data
const dataWidth = prerenderData.getBoundingClientRect().width;
const statusDropdownWidth = dataWidth + 97 + 'px'; //97 pixels is the width of the elements surrounding the data, which is standard width added within <status-dropdown> for every component surrounding the data.
div.style.width = statusDropdownWidth;
document.querySelector('#body').removeChild(prerenderData);
return div

allan

Excellent - great to hear you found a way to do it.

I've removed the images from your original post.

Allan