CODEWITHSUNDEEP
angularangular-material
IamGrooot
IamGrooot

Reputation: 1040

How to expand all rows by default in material table?

I am working on achieving expandable rows with material table. I have followed below reference for the same

Stack Overflow : Expandable-table-rows-in-angular-4-with-angular-material

I wanted to expand all rows by default. But I am not sure how can achieve that.

Stackblitz Demo | Expandable rows

Any advice and suggestions will be a great help.

Upvotes: 2

Views: 3050

Answers (2)

Eldin Kajdic
Eldin Kajdic

Reputation: 617

If you want to keep the same logic with only having one row collapsable at once, but having them all start as expanded, you can just change

[@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"

To

[@detailExpand]="row.element != expandedElement ? 'expanded' : 'collapsed'"

If you want a fully functional table with expand/collapsable elements, you could add a new property called 'expanded' to your Element interface:

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  expanded: boolean;
}

You can then add a default value of true to your new property in the datasource:

const data: Element[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', expanded: true },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', expanded: true  }
 ...
];

Lastly, change your row logic to use the expanded property instead of selected element:

Change:

[class.expanded]="expandedElement == row"
(click)="expandedElement = row"
...
[@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"

To:

[class.expanded]="row.expanded"
(click)="row.expanded = !row.expanded"
...
[@detailExpand]="row.element.expanded ? 'expanded' : 'collapsed'"

Don't forget to clear away the unused code!

Upvotes: 3

Rohith
Rohith

Reputation: 81

Check this Expand all rows on button click

Upvotes: 2

Related Questions