fundamental-ngx: [fdp-table][Sourcing][Dev Blocker] Tree table expandAll and collapseAll concerns and queries

Is this a bug, enhancement, or feature request?

bug

Briefly describe your proposal.

The expandAll and collapseAll method provided by the fdp-table is very slow to take effect as tested in stackblitz. It would be a huge bog down when using these methods in the application with 1000’s of rows.

Query: If the table data source contains expand and collapse related information that allow the table to be rendered such that some rows are expanded while others being collapsed. Regarding this - Is there a way to programmatically pass the isExpanded param to each row ?

Which versions of Angular and Fundamental Library for Angular are affected? (If this is a feature request, use current version.)

0.38.2

If this is a bug, please provide steps for reproducing it.

This seems more like a performance issue or concern with the expandAll and collapseAll functionality. Please refer to the code.

Please provide relevant source code if applicable.

//component.html
<fdp-table
  [dataSource]="source"
  [isTreeTable]="true"
  selectionMode="multiple"
  relationKey="children"
  #fdpTable
  emptyTableMessage="No data found"
  (rowToggleOpenState)="onRowToggleOpenState($event)"
  (rowsRearrange)="onRowsRearrange($event)"
>
  <fdp-table-toolbar
    title="Order Line Items"
    [hideItemCount]="false"
    [showExpandCollapseButtons]="true"
  >
  </fdp-table-toolbar>

  <fdp-column name="name" key="name" label="Name" align="start"> </fdp-column>

  <fdp-column name="description" key="description" label="Description">
  </fdp-column>

  <fdp-column name="price" key="price.value" label="Price" align="end">
  </fdp-column>

  <fdp-column name="status" key="status" label="Status" align="center">
  </fdp-column>
</fdp-table>

<button (click)="expandAllrows()">Click to expand All rows</button>
<button (click)="collapseAllrows()">Click to expand All rows</button>

// component.ts
import { Component, ViewChild } from '@angular/core';
import { Observable, of } from 'rxjs';

import { FdDate } from '@fundamental-ngx/core/datetime';
import {
  TableDataSource,
  TableDataProvider,
  TableState,
  TableRowToggleOpenStateEvent,
  TableRowsRearrangeEvent,
} from '@fundamental-ngx/platform/table';

@Component({
  selector: 'fdp-platform-table-tree-example',
  templateUrl: './platform-table-tree-example.component.html',
})
export class PlatformTableTreeExampleComponent {
  source: TableDataSource<ExampleItem>;

  @ViewChild('fdpTable') elem: any;

  constructor() {
    this.source = new TableDataSource(new TableDataProviderExample());
  }

  alert(message: string): void {
    alert(message);
  }

  onRowToggleOpenState(event: TableRowToggleOpenStateEvent<ExampleItem>): void {
    console.log(event);
  }

  onRowsRearrange(event: TableRowsRearrangeEvent<ExampleItem>): void {
    console.log(event);
  }

  expandAllrows() {
    console.log(this.elem.expandAll);
    this.elem.expandAll();
  }

  collapseAllrows() {
    console.log(this.elem.collapseAll);
    this.elem.collapseAll();
  }
}

please refer to the video for more information. (link - https://user-images.githubusercontent.com/54993789/212942376-31601e4a-eb46-49da-b58d-1c3e4ea34693.mov)

Is there anything else we should know?