Displaying only the matched column in an Angular table

Question

Displaying only the matched column in an Angular table

I am attempting to display only the matched columns in a table, but I am unsure of how to achieve this. If anyone has any ideas or solutions, please help me out.

app.component.ts:

 columnsOnly = ['name', 'id', 'rank']; 
  items = [
    { name: 'jean', surname: 'kruger', id: 1, place: 'ckh', rank: null },
    { name: 'bobby2', surname: 'marais2', id: 2, place: 'ckh', rank: null },
    { name: 'jean3', surname: 'kruger3', id: 3, place: 'ckh', rank: null },
    { name: 'bobby4', surname: 'marais4', id: 4, place: 'ckh', rank: null },
    { name: 'jean5', surname: 'kruger5', id: 5, place: 'ckh', rank: null },
    { name: 'bobby6', surname: 'marais6', id: 6, place: 'ckh', rank: null }
  ];

app.component.html:

 <table>
  <thead>
    <tr>
      <th *ngFor="let head of items[0] | keys: index as i">

        <span *ngIf="head == columnsOnly[i]">
        {{head}} </span>

      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">
      <td *ngFor="let list of item | keys">{{item[list]}}</td>
    </tr>
  </tbody>
</table>

Demo: https://stackblitz.com/edit/angular-71f59e?file=app%2Fapp.component.html

javascript angular typescript angular8

Answer 1

Answer №1

Why aren't you iterating over the columnsOnly array?

<tr>
  <th *ngFor="let column of columnsOnly">
    <span>{{column}} </span>
  </th>
</tr>

<tr *ngFor="let item of items">
  <td *ngFor="let column of columnsOnly">{{item[column]}}</td>
</tr>

Update: It would be better if our columns were an array of objects with both "label" and "field" properties. For example, if we had an array like this:

columnsOnly = [
    {label:'First Name',field:'firstName'},
    {label:'Sur Name',field:'surname'}, 
    {label:'ID Type',field:'idType'},
    {label:'Near Place',field:'nearPlace'}
];

We could update the loop as follows:

<th *ngFor="let column of columnsOnly">
    <!-- Use column.label here -->
    <span>{{column.label}} </span>
  </th>

  <tr *ngFor="let item of items">
    <!-- Use column.field here -->
     <td *ngFor="let column of columnsOnly">{{item[column.field]}}</td>
  </tr>

Update 2: Another approach is to define all columns and create a "map" using them:

columns=['First Name','ID Type']
columnsOnly=this.columns
                 .map(x=>this.columnsAll.find(c=>c.label==x))

(Assuming we have defined "columnsAll" with both "label" and "field")

Answer 2

Why aren't you iterating over the columnsOnly array?

<tr>
  <th *ngFor="let column of columnsOnly">
    <span>{{column}} </span>
  </th>
</tr>

<tr *ngFor="let item of items">
  <td *ngFor="let column of columnsOnly">{{item[column]}}</td>
</tr>

Update: It would be better if our columns were an array of objects with both "label" and "field" properties. For example, if we had an array like this:

columnsOnly = [
    {label:'First Name',field:'firstName'},
    {label:'Sur Name',field:'surname'}, 
    {label:'ID Type',field:'idType'},
    {label:'Near Place',field:'nearPlace'}
];

We could update the loop as follows:

<th *ngFor="let column of columnsOnly">
    <!-- Use column.label here -->
    <span>{{column.label}} </span>
  </th>

  <tr *ngFor="let item of items">
    <!-- Use column.field here -->
     <td *ngFor="let column of columnsOnly">{{item[column.field]}}</td>
  </tr>

Update 2: Another approach is to define all columns and create a "map" using them:

columns=['First Name','ID Type']
columnsOnly=this.columns
                 .map(x=>this.columnsAll.find(c=>c.label==x))

(Assuming we have defined "columnsAll" with both "label" and "field")

Displaying only the matched column in an Angular table

Answer №1

Similar questions

Angular service is continuously throwing the error message "NullInjectorError: No provider for anotherService"

Tips for embedding a hyperlink in your HTML website

Error when redirecting in Express due to invalid integer input syntax

Double-click required to toggle button

I'm looking for a client-side JavaScript library that can queue AJAX requests and also support storage. Can anyone recommend

Retrieve the thousand separator for numbers using Angular in various languages

Error encountered: Unable to access the 'Lastname' property as it is undefined

Is it possible to insert clickable links within the content of a Twilio text message?

From organizing nested arrays in jSon to visualizing data with D3js

"Encountered an issue with combining multiple meshes that share the same geometry but have

Is there a way to display customized values on a particular column in a Vuetify table?

In AngularJS, the decimal point is represented by a comma

Recommendations for Configuring VPS for Angular2 and .Net Application

Substitute dynamic Angular expressions with fixed values within a string

"Step-by-step guide on adding and deleting a div element with a double click

Struggling with Angular CLI installation on Mac?

Why is a dispatch call in React-Redux being executed before another?

Creating a seamless integration between Angular 2's auth guard and observables to enhance application security

What should be the return type of a Jest test when written in a Typescript function?

What is the best way to choose the initial element in every group using jQuery?