Refresh columns dynamically

[mike131054]

Hi,

i'm using angular datatable with the angular way

<table datatable id="datatable" class="row-border hover" 
[ngClass]="{'d-none' : loading, datatable: true}" 
[dtOptions]="dtOptions" 
[dtTrigger]="dtTrigger">

i load data from database with service call and my columns change based on the data.

So i update dtOptions dynamically with this:

// first adding empty column for the select all
const columns: any = [{
	title: '<input type="checkbox" class="css" />',
	orderable: false,
	className: 'select-checkbox'
}];
for (const key in this.fields) {
	columns.push({
		title: this.fields[key].name,
		orderable: true
	});
}
// We adding empty column for the action column
columns.push({
	title: '',
	orderable: false
});

this.dtOptions.columns = columns;

and then, i rerender my datatable with this:

rerender(): void {
	this.dtElement.dtInstance.then((dtInstance: any) => {
		// Destroy the table first
		dtInstance.clear().destroy();
		// Call the dtTrigger to rerender again
		this.dtTrigger.next();
	});
}

the column title change but the number of column stay at the same number before i change it.

https://stackblitz.com/edit/update-columns-dynamic

Can you help me?

Thanks in advance

[shanmukhateja]

Hi,

Your code looks fine. The columns displayed on table are part of dtOptions.columns. Could you try updating dtOptionsafter destroying the table and before triggering dtTrigger?

Try two-way binding dtOptions in HTML template i.e. [(dtOptions)].

It would help if you could provide a StackBlitz link or GitHub repo.

[mike131054]

Thanks for your reply.
I try your two solution but nothing work

I will publish soon a stackblitz

Thx

[mike131054]

Hi,

I wrote a stackblitz here for my problem: https://stackblitz.com/edit/update-columns-dynamic
you can that the columns dont change on button click

[shanmukhateja]

Add $('thead').remove() after calling destroy().

Turns out, DataTables is retaining the thead node in DOM after the table instance was destroyed. If you add destroy(true) that would remove the entire table element from DOM.
The trick is to remove thead manually before updating the columns and dtTrigger.next().

[mike131054]

👏 👏 👏 👏 👏 👏 @shanmukhateja you're my hero 🙏 🙏 🙏 🙏 it work perfectly !!!!