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

Answer 1

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.

1. Row 1
2. Row 1 Nested Row 1
3. Row 1 Nested Row 2
4. Row 2
5. Row 2 Nested Row 1
6. 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.