Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

273
Visualizações
How to design a html table as like this image with angular?

I am trying a to create a html table in angular. I have a json which included below. In json first have asset head and asset head sub list. Under asset head sub list have account head list. I want to design a html table by this json.

json

[
  {
    assetHead: 'Fixed Asset',
    assetSubHeadList: [
      {
        subHead: 'Property, Plant & Equipment',
        accountHeadList : [
          {
            accId: 101234,
            accName: 'Office Equipment',
            obDebit: 72045,
            obCredit: 0,
            cpDebit: 0,
            cpCredit: 0,
            cbDebit: 75845,
            cbCredit: 0
          },
          {
            accId: 101234,
            accName: 'Motor Vehicle',
            obDebit: 72045,
            obCredit: 0,
            cpDebit: 0,
            cpCredit: 0,
            cbDebit: 75845,
            cbCredit: 0
          },
        ]
      },
    ],
  }
];

Table design will be like this image

enter image description here

over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

Firtly, for perfomance optimization I would create a pure pipe for sum calculation:

sum.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sum'
})
export class SumPipe<T> implements PipeTransform {
  transform(arr: Array<{ [k in keyof T]: number }>, prop: keyof T): any {
    return arr.reduce((sum, cur) => sum + cur[prop], 0);
  }
} 

then if you're aware of colspan and rowspan attributes it should be easy to implement your design:

<table>
  <thead>
    <tr>
      <td rowspan="2">Acc Ca</td>
      <td rowspan="2">Accounts Head</td>
      <td colspan="2">Opening Balance Period</td>
      <td colspan="2">Current Period</td>
      <td colspan="2">Closing Balance</td>
    </tr>
    <tr>
      <td>Debit</td>
      <td>Credit</td>
      <td>Debit</td>
      <td>Credit</td>
      <td>Debit</td>
      <td>Credit</td>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let asset of json">
      <tr>
        <td colspan="8">{{ asset.assetHead }}</td>
      </tr>
      <ng-container *ngFor="let subHeadItem of asset.assetSubHeadList">
        <tr>
          <td colspan="8">{{ subHeadItem.subHead }}</td>
        </tr>
        <tr *ngFor="let headItem of subHeadItem.accountHeadList">
          <td>{{ headItem.accId }}</td>
          <td>{{ headItem.accName }}</td>
          <td>{{ headItem.obDebit }}</td>
          <td>{{ headItem.obCredit }}</td>
          <td>{{ headItem.cpDebit }}</td>
          <td>{{ headItem.cpCredit }}</td>
          <td>{{ headItem.cbDebit }}</td>
          <td>{{ headItem.cbCredit }}</td>
        </tr>
        <tr>
          <td colspan="2"><b>Sub total</b></td>
          <td>{{ subHeadItem.accountHeadList | sum: 'obDebit' }}</td>
          <td>{{ subHeadItem.accountHeadList | sum: 'obCredit' }}</td>
          <td>{{ subHeadItem.accountHeadList | sum: 'cpDebit' }}</td>
          <td>{{ subHeadItem.accountHeadList | sum: 'cpCredit' }}</td>
          <td>{{ subHeadItem.accountHeadList | sum: 'cbDebit' }}</td>
          <td>{{ subHeadItem.accountHeadList | sum: 'cbCredit' }}</td>
        </tr>
      </ng-container>
    </ng-container>
  </tbody>
</table>

Ng-run Example

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda