Expose "expandedRows" property on DatatableRowDetailDirective

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I have a fairly complex implementation of ngx-datatable. I have row details for each row, which expand into a child ngx-datable (think orders and order lines). This works well.

I’ve bound to the “select” output as follows:

<ngx-datatable
               (select)='onSelect($event)'
...
>

Component code is:

  public toggleDetailRow(row) {
    this.table.rowDetail.collapseAllRows();
    this.table.rowDetail.toggleExpandRow(row);
  }

  public onSelect({ selected }) {
    const selectedRow = selected[0];
    this.toggleDetailRow(selectedRow);
    this.select.emit(selectedRow);
  }

I want to toggle the clicked row detail, but close all other rows. The code above mostly does what I’m looking for - but once you open any row, at least one row will remain open until you refresh the component.

Ideally I’d like to be able to iterate through a property like this.table.rowDetail.expandedRows inside the toggleDetailRow() method, closing all rows except the clicked row. I can’t find an expanded rows collection anywhere, nor can I tell if the current row (inside toggleDetailRow()) is expanded or not, so the best I can do is close all rows, then force the row I’ve selected open:

  public toggleDetailRow(row) {
    const expanded = this.table.rowDetail.expandedRows;
    this.table.rowDetail.collapseAllRows();
    if (expanded.indexOf(row)) {
      // Open the row
      this.table.rowDetail.toggleExpandRow(row);
      return;
    }
  }

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Win 81, angular-cli, VSCode, Chrome

• Table version: 0.8.x

10.2.2

• Angular version: 2.0.x

4.3.2

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

• Language: [all | TypeScript X.X | ES6/7 | ES5] 2.4.2

[Bidthedog]

Couldn’t figure out how to implement this in the ngx-datatable code, but had a brainwave while doing it. The following code (in my own implementation) has solved the issue:

  public expandedRows = [];

  public toggleDetailRow(row) {
    this.table.rowDetail.collapseAllRows();

    const toggleIndex = this.expandedRows.indexOf(row);
    if (toggleIndex > -1) {
      this.expandedRows.splice(toggleIndex, 1);
    } else {
      this.expandedRows.push(row);
      this.table.rowDetail.toggleExpandRow(row);
    }
  }

Would be nice to support it out of the box, but not the end of the world if it’s too much hard work!

[CaffGeek]

@Bidthedog do you have a sample implementation of these child rows? I’m struggling with the row-detail height not being correct given a varying number of child rows.