Ngx-datatable: Expose "expandedRows" property on DatatableRowDetailDirective

[Bidthedog]

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!

[wizarrc]

@Bidthedog There seems to be a lot of issues with the table needing to refreshed before changes are observed. With the current structure, it's hard to track them all down.

[Bidthedog]

I don't think this is a change issue? There's currently no way for the datatable to inform its consumers / parents that particular rows are expanded.

My solution is to simply track the expanded rows in my own component, does the job but it would be nice for the underlying component to track them and expose the data instead.

[wizarrc]

@Bidthedog ah, I see.

[FrancescoBorzi]

I agree with @Bidthedog and thanks for your nice solution.

@wizarrc @amcdnl @marjan-georgiev any news about this?

[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.