Add nested rows in angular material table

Question

I want to create something like this but I don't want it to be an expansion panel just because I want the nested rows to be added or removed dynamically based on Add and delete button. I have a material data table with multiple rows and want to add nested rows in between 2 rows and these nested rows could be n numbers and I can increase or decrease the value of n. enter image description here

I highly suggest you add what you've tried so far with code before this post get's downvotted to China. — Pytth
– Pytth, Commented Jan 21, 2021 at 22:01
@Pytth hahahaa I tried reading the APIs of Material data table but couldn't find anything, that is why I am looking for suggestions as I am confused. — Pratham Sharma
– Pratham Sharma, Commented Jan 22, 2021 at 6:26

De Wet van As · Accepted Answer · 2021-01-22 09:58:03Z

To my knowledge Angular Material does not cater for nested rows.

I solved this issue by maintaining a "flat" table and changing the style of sub/nested rows to appear as such. To do this, the data needs to be ordered so that each row's sub rows are placed after it.

Ordering ex.

Row 1
Row 1 Nested Row 1
Row 1 Nested Row 2
Row 2
Row 2 Nested Row 1
etc.

Once the data is ordered, you need to identify and apply your class to the nested rows.

CSS - Nested row class example:

  .example-table {
    width: 100%;
   
    .cdk-column-a {
     
    }

    ..

    .sub-level-row {
      td {
        font-size: 11px;
        opacity: 0.85;
        border-bottom: 1px solid;
      }
    }
  }

HTML - Apply class using [ngClass] to nested rows:

  <tr mat-row [ngClass]="{'sub-level-row': isSubLevelRow(rowData)}"
  *matRowDef="let rowData; columns: tableColumns"></tr>

TS - Determine if row is nested:

  isSubLevelRow(rowData) {
    // use your data to determine if nested row
    return rowData.parentId !== null;
  }

Result:

Apply padding, margins, colors etc. for more nested look.

Collectives™ on Stack Overflow

Add nested rows in angular material table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related