Implement dataTable in angular 17 standalone template | angular-datatable

[@Liquidhun]

Thank you, Nihira! I was even able to manage it in Angular 18 (with a few modifications).

[@NihiraTechiees]

Great 👍

[@22MuraliKrishna]

Thank you soo much, this is very use full

[@NihiraTechiees]

You are welcome 👍

[@RaphBench]

Thank you, bro! Your video help-me so much!

[@NihiraTechiees]

Thanks 👍

[@ReinaldoRoldan-v5q]

Thank you, but unfortunately your code in the repo is completely different to the example you are showing in the video. How can I get the source code to have it as reference?

[@Sagar_Kumar456]

What if I have 10000 data and I don't want to load all data at a time, on clicking the next , want to request chunks of data each time from server

[@NihiraTechiees]

Then we have to go with server side rendering.... Will upload separate video soon

[@akadeadahot7067]

U have to fetch data in chunk from backend , where u can search for sql query for that , it includes limit and skip and offset

[@simplifiedlearning000]

When I delete any data and making an API to call to fetch the updated data, it still shows the same data on UI. Thoguh my API has given me the updated data. What changes I need to do to re-render my tab;e?

[@NihiraTechiees]

Look like your delete function have some issue please verify

[@viniciusfazolo5150]

I have the same problem

[@NihiraTechiees]

Could you confirm your delete api working in postman?
I suspect your delete not working correctly

[@simplifiedlearning000]

@@NihiraTechiees Api is deleting the data, but updated data is not reflecting on UI
Basically I want to re-render the table with updated data which is not hppening

[@viniciusfazolo5150]

@@simplifiedlearning000 I managed to fix this bug by deleting a record, creating the rerender function, which deletes the DataTable instance. also it is important to use the NgonDestroy
function:
private rerender(): void {
this.dtElement.dtInstance.then((dtInstance: Api) => {
dtInstance.destroy();
this.dtTrigger.next(null);
});
}
-----------------------------
my source code:
import { AfterViewChecked, AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { DefaultLayoutPagesComponent } from '../../../components/default-layout-pages/default-layout-pages.component';
import { Category, CategoryService } from '../../../services/category.service';
import { CommonModule } from '@angular/common';
import { ToastrService } from 'ngx-toastr';
import { RouterLinkWithHref } from '@angular/router';
import { DataTableDirective, DataTablesModule } from 'angular-datatables';
import { Api, Config } from 'datatables.net';
import { Subject } from 'rxjs';
@Component({
selector: 'app-list-category',
standalone: true,
imports: [
DefaultLayoutPagesComponent,
CommonModule,
RouterLinkWithHref,
DataTablesModule,
],
templateUrl: './list-category.component.html',
styleUrl: './list-category.component.css',
})
export class ListCategoryComponent implements OnInit, OnDestroy {
categories: Category[] = [];
idItem: string = '';
dtOptions: Config = {};
dtTrigger: Subject = new Subject();
@ViewChild(DataTableDirective, { static: false })
dtElement!: DataTableDirective;
constructor(
private categoryService: CategoryService,
private toastr: ToastrService
) {}
ngOnInit(): void {
this.createDataTable();
this.getCategories();
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
getCategories() {
this.categoryService.getAll().subscribe((categories) => {
this.categories = categories;
if (this.dtElement.dtInstance == undefined) {
this.dtTrigger.next(null);
}else{
this.rerender()
}
});
}
saveItem(idItem: string) {
this.idItem = idItem;
}
deleteItem() {
this.categoryService.delete(this.idItem).subscribe(
() => {
this.toastr.success('Registro excluído com sucesso!');
this.getCategories();
},
() => {
this.toastr.error('Erro ao excluir registro!');
}
);
}
private createDataTable() {
this.dtOptions = {
pagingType: 'full_numbers',
autoWidth: false,
language: {
url: 'assets/plugins/datatables/json/dataTables.ptbr.json',
},
columnDefs: [
{
orderable: false,
target: -1,
},
],
lengthMenu: [5, 10, 25, 50, 100],
};
}
private rerender(): void {
this.dtElement.dtInstance.then((dtInstance: Api) => {
dtInstance.destroy();
this.dtTrigger.next(null);
});
}
}

[@swatisharma8039]

what if we want to make this table as reuable component so that we can use this in anywhere in application? we just need to pass the data in that compoent and should refresh on data change

[@NihiraTechiees]

Make reusable components have signal variable for store data ... whenever value changed in signal it will reflect in ui

[@Silviahuarcayamisajel]

Hello, I'm working with Angular 18 but how to initialize the table when I put new data from a filter, I'm putting dtInstance.destroy() and then this.dtTrigger.next(null), but it looks empty

[@NihiraTechiees]

Can you send me mail. I believe you missed something

[@VijayKumar-fq4ie]

good one. very useful

[@NihiraTechiees]

Thanks brother👍

[@kiranpatel5003]

Pagination is not working for me. i am getting data from sever and my backend is PHP. This video is usefull but pagination not working in my case
only first page comes.

[@NihiraTechiees]

Can you check any error in console

[@nightsurvivor]

hi sir, nice tutorial. How to create custom search box for each column ?

[@NihiraTechiees]

Yes will make separate video soon

[@kabirmalik8794]

how to remove single row from table

[@NihiraTechiees]

By using key value we can remove. Will cover in future video

[@muhamadhasanaliabdurohmanm6803]

I got problem in dtOptions: Config={}

[@NihiraTechiees]

What is the problem?

[@TheSilverwolf97]

@@NihiraTechiees I've this issue too. Mine says that Config = {} is not defined. Went to chatgpt to ask and it tried to make me use DataTables.Settings which also doesn't work.

[@AkramAli-kn6ge]

hii sir please share the source code with api

[@NihiraTechiees]

Check description

[@aksharanatureworld]

❤

[@NihiraTechiees]

Thanks