Как реализовать группировку строк Jquery Datatables в Angular 6+?

Question

У меня проблема, и я нигде не могу найти ответ:

Как реализовать группировку строк Jquery Datatables в Angular 6+ с Ajax?

Скажите, пожалуйста, какие пакеты npm я должен загрузить и какой код мне следует написать.

Важно, чтобы ответ охватывался Angular 6 + (не AngularJS). Я видел несколько других примеров группировки строк, но ни один из них не был достаточно ясен для меня :(

Вот мой код:

Установленные пакеты NPM

npm install jquery --save
npm install bootstrap --save 
npm install ngx-bootstrap --save 
npm install datatables.net --save 
npm install datatables.net-bs4 --save 
npm install angular-datatables --save 
npm install @types/jquery --save-dev 
npm install @types/datatables.net --save-dev`

Модель

export class MyDtModel {
    Id: number;
    Text:string;
    Number:number;
    Bool:boolean;
}

Услуги

export class MyDtService {
    private myDtArray: MyDtModel[] =
    [
        { Id: 1, Text: "Text", Number: 123, Bool: false },
        { Id: 2, Text: "Another Text", Number: 123, Bool: true },
        { Id: 3, Text: "Text", Number: 321, Bool: true },
        /* And so on... */
    ];

    public getProducts() : Observable<MyDtModel[]> {
        return of(this.myDtArray);
    }
}

Компонент

export class MyDtComponent implements OnInit {
    tableData: MyDtModel[];
    dtOptions: any;
    dataTableInstance:any;

    dtColumnsNames = [
        { data: "Id", title: "My Id" },
        { data: "Text", title: "My Text" },
        { data: "Number", title: "My Number" },
        { data: "Bool", title: "My Bool" }
    ];

    constructor(private service: MyDtService) { }

    ngOnInit() {
        this.generateDtOptions();
    }

    private generateDtOptions(){
        this.dtOptions = {
            pagingType: 'full_numbers',
            ajax: (dataTablesParameters: any, callback) => {
                this.service.getProducts().subscribe(resp => {//try
                    this.tableData = resp;
                    callback({
                        recordsTotal: resp.length,
                        recordsFiltered: resp.length,
                        data: this.tableData,
                    });
                },
                error => //catch
                {
                    return Observable.throw(error);
                },
                () => //finally
                {
                    this.dataTableInstance = $("#example").DataTable();
                });
            },
            columns: this.dtColumnsNames,
        };
    }
}

HTML

<table id="example" 
class="display table table-striped table-bordered" 
style="width:100%" 
datatable 
[dtOptions]="dtOptions">  
</table>

Datatable показывает, но в результате я хотел бы видеть группировку строк, как в этом примере для jQuery: https://datatables.net/examples/advanced_init/row_grouping.html

Пример группировки рабочих рядов по городам image

Я знаю, что это очень широкий вопрос, но я не знаю, что еще я могу сделать: ((

Спасибо за ЛЮБУЮ помощь:)