Ngx-datatable: Is it possible to toggle expand rows?

[FrancescoBorzi]

I was wondering if it's possible to expand/unexpand the rows in the datable.

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

[FrancescoBorzi]

hi @amcdnl

can you please give me your feedback about this?

[kabb5]

@ShinDarth You mean like this https://swimlane.github.io/ngx-datatable/#row-details?

[ticklemycode]

Is it possible to declare a set of rows to expanded by default?

[roberthelmick08]

@ticklemycode you could achieve this by doing something similar to below. It filters rows by rowIndex (or any other property) then iterates through the filtered rows and changes the expanded property.

rows.filter(temp => temp.rowIndex > 0 && temp.rowIndex < 10).map(row => {
    row.expanded = true;
}

Don't forget to define expanded and rowIndex in your html template:

<ngx-datatable-column name="" [width]="22" [minWidth]="22" [maxWidth]="22" [frozenLeft]="true">
    <ng-template let-row="row" let-expanded="expanded" let-rowIndex="rowIndex" ngx-datatable-cell-template></ng-template>
        // ...
</ngx-datatable-column>

This is just off the top of my head, so it may require some tweaking, but the idea is that you would iterate through the array of rows and set the expanded properties to true;

[syncingdisks]

I am using the following snippet for expanding all rows by default:

import { ChangeDetectorRef } from '@angular/core';

@ViewChild('myTable') table: any;

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked() {
  if (this.table && this.table.rowDetail) {
      this.table.rowDetail.expandAllRows();
      this.cdRef.detectChanges();
  }
}

What do you think?

[Md-Aman]

I am using the following snippet for expanding all rows by default:

import { ChangeDetectorRef } from '@angular/core';

@ViewChild('myTable') table: any;

constructor(private cdRef:ChangeDetectorRef) {}

ngAfterViewChecked() {
  if (this.table && this.table.rowDetail) {
      this.table.rowDetail.expandAllRows();
      this.cdRef.detectChanges();
  }
}

What do you think?

Then how do you collapse single row?

Yea, your code snippet is working fine to expand all rows by default, But I am unable to collapse single row after expanding by default.

[ghost]

There is still an issue with this. After all rows are expanded, try printing...see what you get. Because of this shortcoming I'm going to have to implement some freaking PDF rendering middleware because I'm not going to be able to use the browser's built-in PDF generation. Sigh. I am definitely considering just ripping the grid out for my printable pages and "hand-rendering" them with some preset sort just to be done with this aspect of my project.

[orsvog]

Is it possible to declare a set of rows to expanded by default?

There is no way to set default right now.
You can expand by using

@ViewChild(DatatableComponent) table: DatatableComponent;
@Input() rows: Array<any>;

ngOnChanges(changes: SimpleChanges): void {
  if (changes.rows && changes.rows.currentValue) {
    this.expendRows();
  }
}

private expendRows(): void {
    this.table.rowDetails.expandAllRows(); // does not work for me
    this.table.rowDetails.collapseAllRows(); // does not work for me
    this.rows.forEach(x => this.table.rowDetail.toggleExpandRow(x)); // works
}

In my case, rows are changing all the time. And I need to keep rowDetails open.
So I call this.expendRows()
This created a visual issue - rowDetails are being collapsed and then expanded.

Fixed this issue with microtask (Promise)

@ViewChild(DatatableComponent) table: DatatableComponent;
@Input() rows: Array<any>;

ngOnChanges(changes: SimpleChanges): void {
  if (changes.rows && changes.rows.currentValue) {
    this.expendRows();
  }
}

private expendRows(): void {
    // Hack that allows us to expend RowDetails, before ngx-datatable is redrown
    // fixes blinking of RowDetails on this.rows changes
    // uses advantage of js microtask
    Promise.resolve().then(() => {
      this.rows.forEach(x => this.table.rowDetail.toggleExpandRow(x));
    });
  }