Tweaking the column name and data values within a mat table

Question

Tweaking the column name and data values within a mat table

Exploring Angular and currently using Angular CLI version 8.1.0.

I have two APIs, as shown below:

For bank details:

 [
        {
            "strAccountHolderName": "Sarika Gurav",
            "strAccountNumber": "21563245632114531",
            "bankName": "IFSC",
            "ifsc": "IFSC00014",
            "branch": "Tardeo"
        }
    ]

For KYC details

[
    {
        "strCompanyRegNumber": "123456",
        "strGSTNumber": "11242",
        "strAadharNumber": "3412345667",
        "createdOn": "2020-02-01 09:29:19.723600"
    }
]

I have a material table on the first page displaying a list of requests for bank and KYC. When selecting a "bank" row, I want to display the aforementioned information on the next page. While I am able to render the API data on the HTML Page, my goal is to present it in the material table.

In addition, I aim to dynamically change the column names according to the request type.

For bank requests, I intend to display the following information:

Account Holder Name: Sarika Gurav
Account Number: 21563245632114531
Bank Name: IFSC

And for KYC requests:

Company Registration Number: 123456
GST Number: 11242
Aadhar Number: 3412345667

approval.component.html

<h5>Additional Details</h5>
    <table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="item">
        <td mat-cell *matCellDef="let services" class="item-name"> {{services.item}} </td>
        </ng-container>

        <ng-container matColumnDef="value">
        <td mat-cell *matCellDef="let services"> {{services.value}} </td>
        </ng-container>

        <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
    </table>

approval.component.ts

this.apiService.getVendorById(col,id,rid)
      .subscribe(data=>{
        this.result = data[0]; 
      });

The API results are stored in the "result" variable.

To display them on the HTML page, I use: {{result?.strAccountHolderName}}

If there's a way to dynamically modify the column names on the material table, any insights are appreciated!

angular typescript

Answer 1

Answer №1

To begin, start by modifying your HTML file:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="key">
        <td mat-cell *matCellDef="let element" class="item-name"> {{element.key}} </td>
        </ng-container>

        <ng-container matColumnDef="value">
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
        </ng-container>

        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

Now, in your TypeScript file:

 interface Data {
      key: string;
      value: string;
    }
dataSource: Data[] = [];
  displayedColumns: string[] = ['key', 'value'];

 this.apiService.getVendorById(col,id,rid)
      .subscribe(data=>{
      this.result = data[0];

      const newdata: Data[] = [];
      for (const prop in this.result) {
      newdata.push({
      key: [prop],
      value: this.result[prop],
      })
      }     
      this.dataSource = newdata;


});

Answer 2

To begin, start by modifying your HTML file:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="key">
        <td mat-cell *matCellDef="let element" class="item-name"> {{element.key}} </td>
        </ng-container>

        <ng-container matColumnDef="value">
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
        </ng-container>

        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

Now, in your TypeScript file:

 interface Data {
      key: string;
      value: string;
    }
dataSource: Data[] = [];
  displayedColumns: string[] = ['key', 'value'];

 this.apiService.getVendorById(col,id,rid)
      .subscribe(data=>{
      this.result = data[0];

      const newdata: Data[] = [];
      for (const prop in this.result) {
      newdata.push({
      key: [prop],
      value: this.result[prop],
      })
      }     
      this.dataSource = newdata;


});

Answer 3

Answer №2

If you need to show a column name in your table:

    <table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="item">
            <th mat-header-cell *matHeaderCellDef>
              ADD YOUR COLUMN HEADER NAME HERE
            </th>
            <td mat-cell *matCellDef="let services" class="item-name"> {{services.item}} </td>
        </ng-container>
...
        <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
    </table>

I am unsure of what you are looking for next. Perhaps you are interested in an Expandable row? https://i.sstatic.net/2eHzX.png

Take a look at https://material.angular.io/components/table/examples and the "Expandable row" section for guidance on implementation.

Answer 4

If you need to show a column name in your table:

    <table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="item">
            <th mat-header-cell *matHeaderCellDef>
              ADD YOUR COLUMN HEADER NAME HERE
            </th>
            <td mat-cell *matCellDef="let services" class="item-name"> {{services.item}} </td>
        </ng-container>
...
        <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
    </table>

I am unsure of what you are looking for next. Perhaps you are interested in an Expandable row? https://i.sstatic.net/2eHzX.png

Take a look at https://material.angular.io/components/table/examples and the "Expandable row" section for guidance on implementation.

Answer 5

Answer №3

Perhaps I didn't fully grasp the question, but if you simply need to modify the column name, you can achieve this by incorporating a mat-header:

<h5>Additional Information</h5>
<table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
    <ng-container matColumnDef="item">
    <th mat-header-cell *matHeaderCellDef>{{ services.header }}</th>
    <td mat-cell *matCellDef="let services" class="item-name"> {{services.item}} </td>
    </ng-container>

    <ng-container matColumnDef="value">
    <td mat-cell *matCellDef="let services"> {{services.value}} </td>
    </ng-container>

    <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
</table>

If you wish to dynamically change the table columns, it's a bit more complex. As far as my knowledge goes, there are two approaches:

You can predefine all possible columns in both the .html and .ts files, then adjust which columns are visible by manipulating "additionalDetailsDisplayedColumns" in your typescript file
If you're unsure of all potential columns or it's not practical to build them beforehand, you can recreate the table based on user input. In this scenario, utilizing @Input to pass the columns is useful. With @Input, you can update not only column names but also any content, triggering a table rebuild with each change.

Answer 6

Perhaps I didn't fully grasp the question, but if you simply need to modify the column name, you can achieve this by incorporating a mat-header:

<h5>Additional Information</h5>
<table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
    <ng-container matColumnDef="item">
    <th mat-header-cell *matHeaderCellDef>{{ services.header }}</th>
    <td mat-cell *matCellDef="let services" class="item-name"> {{services.item}} </td>
    </ng-container>

    <ng-container matColumnDef="value">
    <td mat-cell *matCellDef="let services"> {{services.value}} </td>
    </ng-container>

    <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
</table>

If you wish to dynamically change the table columns, it's a bit more complex. As far as my knowledge goes, there are two approaches:

You can predefine all possible columns in both the .html and .ts files, then adjust which columns are visible by manipulating "additionalDetailsDisplayedColumns" in your typescript file
If you're unsure of all potential columns or it's not practical to build them beforehand, you can recreate the table based on user input. In this scenario, utilizing @Input to pass the columns is useful. With @Input, you can update not only column names but also any content, triggering a table rebuild with each change.

Tweaking the column name and data values within a mat table

Answer №1

Answer №2

Answer №3

Similar questions

Establish a connection between a variable and the selected value of Mat-select using a form

Rendering a Nativescript component once the page has been fully loaded

Ways to access a nested route in Angular 4

Establish a global variable within a TypeScript file

Is there any distinction between using glob wildcards in the tsconfig.json file when specifying "include" as "src" versus "include" as "src/**/*"?

One if statement encompassing two conditions

Troubleshooting: Unable to Open Page with Google Material Button in Angular 5

Using TypeScript with Angular: encountering a ReferenceError stating that the System object is not defined in the System

Is it possible to include if else logic code within a catch statement?

Combining attributes of objects in an array

What is the best method for building and deploying an Angular-CLI 4 project across multiple environments?

Exploring methods to retrieve the status attribute of an Angular httpClient response

Issue with rendering of material icon

Guide to swapping out embedded objects within a TypeScript data structure

Is Cognito redirect causing issues with Angular router responsiveness?

Stop the reactive form from automatically submitting and instead manually send a POST request to the server

data not corresponding to interface

Tips for extracting a particular subset from an array containing JSON objects using Angular

What is the best practice for inserting typescript definitions and writing them when the object already has a pre-existing definition?

I encountered a problem where the error "Type '(err: Error) => void' does not possess any properties similar to type 'QueryOptions'" appeared, and I am unsure of the underlying cause