How can I create Expand/Collapse Row button in TypeScript/Angular 6?

kogden

I got the DataTable working in Typescript but now I have to add the expand/collapse row button as seen on the front page.

Here's my ts code:

ngOnInit() {
    this.http.get('https://5a5a9e00bc6e340012a03796.mockapi.io/clients')
    .subscribe((data: any[]) => {
      this.clients = data;

      this.chRef.detectChanges();

      // Now you can use jQuery DataTables :
      const table: any = $('table');
      const dt = table.DataTable({
        responsive: true
      });

      dt.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
        console.log( 'Details for row ' + row.index() + ' ' + (showHide ? 'shown' : 'hidden') );
    } );
    });

I thought making the table responsive would help.

kthorngren

Maybe this example will help:
https://datatables.net/examples/api/row_details.html

Kevin

kogden

I saw that tutorial but I integrated it differently in Typescript.

<div class="container">
  <h1>Clients</h1>
  <h3>Compliance Report</h3>
  <table class="table table-hover" cellspacing="0">
    <thead>
      <tr>
        <th></th>
        <th>Client - Member</th>
        <th>Fund Name</th>
        <th>Issuer</th>
        <th>Holding</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let client of clients">
        <td class="details-control" id="detail-btn" (click)="changeDetail()" orderable="false"></td>
        <td>{{client.firstName}}</td>
        <td>{{client.lastName}}</td>
        <td>{{client.company}}</td>
        <td><input type="checkbox"></td>
      </tr>
    </tbody>
  </table>
</div>

If I already have my columns built how can I dynamically edit the first one to have the same properties as the first column given in the example?

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "../ajax/data/objects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );

If you were wondering, here is my full implementation.

ngOnInit() {
    this.http.get('https://5a5a9e00bc6e340012a03796.mockapi.io/clients')
    .subscribe((data: any[]) => {
      this.clients = data;

      this.chRef.detectChanges();

      // Now you can use jQuery DataTables :
      const table: any = $('table');
      this.dt = table.DataTable({
      });

    });

  }

  format () {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
            '<td>Full name:</td>' +
            '<td>Details row!</td>' +
        '</tr>' +
    '</table>';
}

  changeDetail () {
    const tr = $('#detail-btn');
    const row = this.dt.row( tr );

    if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child( this.format());
      tr.addClass('shown');
    }
  }
}