CODEWITHSUNDEEP
javascriptangularangular-material
Timur Sidoryuk
Timur Sidoryuk

Reputation: 155

Span columns in dynamic generated table angular 10

I need to span some cells if next column contains "null" or ""; As on picture. enter image description here

I have transposed input data, so i need to transform it before creating table. And i dont know how to span columns in dynamic generated table.

I provide a demo-code on stackblitz; I use angular-material package;

https://stackblitz.com/edit/angular-ivy-hknwsw?file=src%2Fapp%2Fapp.component.ts

Upvotes: 0

Views: 2423

Answers (1)

Rsengo
Rsengo

Reputation: 36

You should just add colspan to your <td> tags and render them with ngIf when row data has information about this column. Smth like this. https://stackblitz.com/edit/angular-ivy-evfxpi?file=src%2Fapp%2Fapp.component.ts You can also check this thread How colSpan and row Span added to material table Header Angular 7?

Just fix your template like this

<mat-card>
    <table mat-table [dataSource]="rowsInfo" class="mat-elevation-z4">
      <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->

      <ng-container
        [matColumnDef]="column"
        *ngFor="let column of columnDefs"
      >
        <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
        <ng-container
            *matCellDef="let element"
        >
          <td
            mat-cell
            *ngIf="element[column] !== undefined"
            [attr.colspan]="element[column].colspan"
            [ngStyle]="{ 'text-align': column === 'name' ? 'left' : '' }"
          >
            {{ element[column].value }}
          </td>
        </ng-container>
      </ng-container>

      <tr
        mat-header-row
        *matHeaderRowDef="columnDefs"
      ></tr>
      <tr mat-row *matRowDef="let row; columns: columnDefs"></tr>
    </table>
  </mat-card>

and the function that generates rows

  public mapRows(datas: ColumnData[]): {}[] {
    const result = [
      {
        name: {
          value: "row1",
          colspan: 1
        }
      },
      {
        name: {
          value: "row2",
          colspan: 1
        }
      },
      {
        name: {
          value: "row3",
          colspan: 1
        }
      },
    ];

    for (let index = 0; index < datas.length; index++) {
      const element = datas[index];
      const propName = `prop${index}`;
      const prevPropName = `prop${index - 1}`;
      const hasPrevProp = index > 0;

      if (element.field1 || !hasPrevProp) {
        result[0][propName] = {
          value: element.field1,
          colspan: 1
        };
      } else {
        result[0][prevPropName].colspan++;
      }

      if (element.field2 || !hasPrevProp) {
        result[1][propName] = {
          value: element.field2,
          colspan: 1
        };
      } else {
        result[1][prevPropName].colspan++;
      }

      if (element.field3 || !hasPrevProp) {
        result[2][propName] = {
          value: element.field3,
          colspan: 1
        };
      } else {
        result[2][prevPropName].colspan++;
      }
    }

    return result;
  }

Upvotes: 2

Related Questions