Non-ajax visible:false column visible briefly

dbd2002

I'm converting a UI from Datatables 1 to 2. Some columns were originally hidden from the user's view using a .d-none class (bootstrap) which sets display:none

This causes issues with DataTables 2 as the table no longer stetches the full width due to this display:none on the column.

The data in these tables are rendered in HTML, not ajax, not javascript. Therefore, the table's dom is already built and DataTable() simply manipulates it into a datatable.

If I use the column.visible: false, the column is briefly visible and then hides once the datatable is fully rendered. Not ideal for our users. This causes some jerkiness with the column visible and then hidden.

Is there a way to ensure the column is hidden all the time or only show the table once datatables has completed rendering (and hiding columns) ?

kthorngren

This causes issues with DataTables 2 as the table no longer stetches the full width due to this display:none on the column.

Try applying style="width:100%" on the table tag as shown in this example.

Is there a way to ensure the column is hidden all the time or only show the table once datatables has completed rendering (and hiding columns) ?

Datatables doesn't have anything built in for this but you can hide the table then display it using Javascript or jQuery methods in initComplete.

Kevin

dbd2002

I already had the table's widget to 100%. So I decided to try hiding the table and then displaying on initComplete as @kthorngren suggested.

$('#my_table').DataTable(
{
columnDefs: [{ visible: false, targets: 0 }],
'initComplete': () => {
document.getElementById('my_table').classList.remove('d-none');
}
}
);