Dynamic table row that expands to show additional rows sourced from various data sets

Question

Dynamic table row that expands to show additional rows sourced from various data sets

Is there a way to expand the table row in an angular-material table when it is clicked, showing multiple sets of rows in the same column as the table? The new rows should share the same column header but not necessarily come from the same data source.

When clicking on a row, I would like to see additional rows expanding below in the same column. Here is an example:

https://i.sstatic.net/YmOd8.png

Upon clicking a row, the expanded view should look like this:

https://i.sstatic.net/k25q5.png

If clicked again, the expanded rows should collapse back to the default table view:

https://i.sstatic.net/Sfpbe.png

If two rows are clicked, the layout should appear like this:

https://i.sstatic.net/98M8J.png

I am working with Angular 8 and TypeScript

angular typescript angular-material angular8

Answer 1

Answer №1

When working with mat-table, simply add a new property to the array (e.g. "expanded") and then update the condition in the div

<div class="example-element-detail"
   [@detailExpand]="element.expanded? 'expanded' : 'collapsed'">
...
</div>

For the (click) function in each row:

<tr mat-row ...
      [class.example-expanded-row]="expandedElement === element.expanded"
      (click)="element.expanded=!element.expanded">
</tr>

Check out this stackblitz for more details

If you're using your own table, follow the same steps by adding an "expanded" property to each element in the array

NOTE: An alternative option is to create an array of boolean values

expanded:boolean[]=[]

Use this array when iterating through items in *ngFor like so:

(click)="expanded[i]=!expanded[i]"

And

*ngIf="expanded[i]"

Answer 2

When working with mat-table, simply add a new property to the array (e.g. "expanded") and then update the condition in the div

<div class="example-element-detail"
   [@detailExpand]="element.expanded? 'expanded' : 'collapsed'">
...
</div>

For the (click) function in each row:

<tr mat-row ...
      [class.example-expanded-row]="expandedElement === element.expanded"
      (click)="element.expanded=!element.expanded">
</tr>

Check out this stackblitz for more details

If you're using your own table, follow the same steps by adding an "expanded" property to each element in the array

NOTE: An alternative option is to create an array of boolean values

expanded:boolean[]=[]

Use this array when iterating through items in *ngFor like so:

(click)="expanded[i]=!expanded[i]"

And

*ngIf="expanded[i]"

Dynamic table row that expands to show additional rows sourced from various data sets

Answer №1

Similar questions

The parameter type 'never[]' cannot be assigned to the type 'T | (() => T)' in the argument

Should ts-node be avoided in a production environment due to potential risks?

Angular 4 - Automatically scroll to specific list item based on search query input

Ways to dynamically configure Angular form data

What is behind the occurrence of the 'createObjectURL' error?

Deconstructing Angular 2 Custom Pipes

establish the data type for the key values when using Object.entries in TypeScript

unable to get ng-model and ng-options to function properly

What methods work most effectively for gathering user behavior data in a web application?

Unveiling the method of retrieving a targeted value from JWT in React

Encountering an Angular 13 ChunkLoadError during application deployment, despite the presence of the respective chunk

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

What is the best way to showcase a variable from a typescript file in an HTML file with Angular?

Angular Typed Forms Cannot Assign Values to Incomplete Types

Differences between HTTP requests made from a Node server and an Angular application

Visual Studio 2017, ASP.NET framework, Typescript programming language, and node package manager

Best practices for annotating component props that can receive either a Component or a string representing an HTML tag

Executing an individual .ts file within a Next.js application using ts-node for the purpose of testing

"Firebase function fails to return Typescript class variable, resulting in 'undefined'

Looking to display a single Angular component with varying data? I have a component in Angular that dynamically renders content based on the specific URL path