Using Angular Material to dynamically hide columns in a table that is being created on the fly

Is there a way to hide columns in my table based on the ID value sent to the page upon opening it? While researching, I found a method for tables with dynamically generated columns in this post: https://github.com/angular/components/issues/9940. However, the structure of my table is different.

 <table mat-table [dataSource]="dataSource" align="center" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of getDisplayedColumns()">
    <th  mat-header-cell *matHeaderCellDef > {{column}} </th>
    <td  mat-cell *matCellDef="let element" > {{element[column]}} </td>
  </ng-container>
    <tr  mat-header-row *matHeaderRowDef="displayedColumns" ></tr>
    <tr  mat-row *matRowDef="let row; columns:  getDisplayedColumns();" ></tr>
 </table>

getDisplayedColumns() should return an array containing only the elements I want to display.

I'm unsure how to implement the above method in my code since the structure of my table differs from that of the original poster's.

htmlangulartypescriptangular-material

Answer №1

If you're looking for a solution to handle multiple columns with special formatting requirements, creating a component might be the way to go. One approach is to pass in all possible columns and define attributes like booleans as "yes" or "no", dates using a specific format, and setting visibility based on certain conditions. Here are some key components of this process:

export interface IPaginateRowAttributes {
attributeName: string;
listLabel: string;
listFormat: string;
isAttribute: boolean;
lookupIndex: number;
isVisible: boolean;
}

@Input() rowColumns: IPaginateRowAttributes [] = [];
@Input() yourId

<tr *ngFor="let dynamicListRowAttribute of dynamicListRowAttributes">

<ng-container *ngIf="dynamicListRowAttribute.listFormat=='number' && dynamicListRowAttribute.isVisible==true" matColumnDef={{dynamicListRowAttribute.compositeKey}}>
<th mat-header-cell *matHeaderCellDef mat-sort-header (click)="sort(dynamicListRowAttribute.attributeName, true, dynamicListRowAttribute.listFormat)"> {{dynamicListRowAttribute.listLabel}} </th>
<td mat-cell *matCellDef="let element"> {{element['attributes'][dynamicListRowAttribute.attributeName] | currency}} </td>
</ng-container>

<ng-container> more format options </ng-container>

ngOnChanges(changes: SimpleChanges) {
let returnHeaders: string[] = [];
for (let detail of displayColumns) {
returnHeaders.push(detail.dictionaryCompositeKey);
}
}

Including ngOnChanges allows you to dynamically set the isVisible property based on certain criteria for each column. This way, the *ngIf directive can filter out the columns that should not be displayed. While this is one approach, there may be other solutions that offer better performance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delete the padding of a component with the power of angular

I'm looking to eliminate the margin applied to a particular element that is being created by Ionic. The specific element in question is located within the page-table-view, which is a subpage of page-board. https://i.stack.imgur.com/KPLDQ.png This is ...

angularionic2

Troubleshooting issues with rowspan in a Datatable

I am currently utilizing jQuery DataTables to display my grid data and implementing the rowspan concept with the rowsGroup option. Initially, it works well by spanning some rows and looking visually pleasing, but eventually, it starts failing. Here are so ...

javascriptjqueryhtmldatatables

Visual Studio is refusing to highlight my code properly, intellisense is failing to provide suggestions, and essential functions like go to definition are not functioning as expected

Due to a non-disclosure agreement, I am unable to share any code. However, I am experiencing an issue with Visual Studio not highlighting my code or allowing me to utilize its built-in tools. While I can rebuild the project, I cannot edit or access any fil ...

htmlangulartypescriptidevisual-studio-2022

A tutorial on converting a tree structure into a JSON object using jQuery

Struggling to create a JSON object from the tree class, specifically needing only the span values. The structure of the tree is dynamic and nested, so utilizing a recursive function seems like the most suitable approach. Currently able to extract the keys ...

jqueryhtml

Automatically reloading POST request when browser back button is pressed

Our web application is built on Spring MVC and Thymeleaf. When a user lands on the home page with a GET request, they enter 2 parameters and submit a POST request. After successful submission, they are directed to another page (let's call it page2) wi ...

javascripthtmlbrowser

Adjustable background image with no need for a scroll bar

I am looking to create a static webpage that remains fullscreen without any scrolling. My goal is to have a centered form with the background image adjusting to the window size. As a beginner, I apologize if this request seems too simple. .container { ...

htmlcssimagescrollbackground

I encountered the error message "The property you are trying to access does not exist on the type 'never'" while attempting to retrieve JSON data from the API response

Every time I attempt to access the fields in items such as id or title, an error pops up saying Property does not exist on type 'never'. Interestingly, when I log the data using console.log(response.data), everything seems to be working fine. I ...

reactjstypescriptaxios

What is the best way to use Jquery to enclose a portion of a paragraph text within a

How can I wrap the content inside a span that comes after another span, inside a paragraph and a new span? To further illustrate this, consider the following example: <p>foo <span>bar</span> baz</p> The desired outcome is: <p& ...

javascriptjqueryhtml

Steps for creating a copy of an Angular component

https://i.stack.imgur.com/4RMsR.png Whenever the user clicks on the Create Copy button, I aim to replicate the content of the DashboardComponent and position the duplicated version below the original one (the DashboardComponent featuring four dark blue sq ...

angulartypescript

eliminate any redundant use of generics

Recently, I attempted to create a pull request on GitHub by adding generics to a method call. This method passes the generically typed data to an interface that determines the return type of its methods. However, the linter started flagging an issue: ERR ...

typescriptgenericstslint

The functionality of classes containing <ul> elements is ineffective

Having recently embarked on the journey of learning html/css, I've encountered some confusion along the way. Allow me to showcase my basic web-page layout: <html> <head> <meta charset="utf-8"> <link rel = "stylesheet" type="text ...

htmlcss

My attempt at creating a straightforward sorting function turned out to be ineffective

My attempt at creating a basic sorting function seems to be failing as it is still returning the original list instead of the sorted one. function sortByPopular (collection) { let items = collection.slice(); items.sort(function(a,b) { re ...

javascripthtmlnode.jsjson

Tips on emphasizing all div elements and incorporating navigation to each of them

I am seeking a method to enhance a div with highlighting when there is a click or mouseover event. For instance, changing or adding a border color using JavaScript on click or mouseover is straightforward. Recently, I have been contemplating the idea of a ...

javascriptjquerycsshtml

Using Angular 6 shortcodes in HTML

Is there a way to save an element in HTML as an alias for repeated use in Angular 6 without using *ngIf directive? For instance, consider the following code snippet: <dumb-comp [name]="(someObservable | async).name" [role]="(someObservable | a ...

angulartypescript

Enhance Your Images with Hovering Icons

Is there a way to display an icon checkmark over the main image when a user hovers over it? The icon should appear in the top right corner of the image. <div> <img class="result-image" src="{{$property->photo}}"> <! ...

htmlcss

Having trouble utilizing the DatePicker component in my react native application

I've encountered an issue while using DatePicker in react native. Whenever I try to use it, an error pops up saying: "render error a date or time must be specified as value prop". Here is the link to my repository: my github repository const [date, se ...

javascriptreactjstypescriptreact-native

When utilizing the Angular 9 package manager to install a package with the caret (^) in the package.json file, it may

Within my package.json file, I have specified the dependency "@servicestack/client":"^1.0.31". Currently, the most updated version of servicestack is 1.0.48. On running npm install on my local environment, it consistently installs vers ...

angularnpm

nyroModal automatically adapts its dimensions according to the size of the webpage, not the size of

A situation has arisen with a link that opens an image using nyroModal. While everything is functioning correctly, the Modal window appears in the center of the page instead of aligning with the middle of the browser window. As a result, only the upper por ...

javascriptjqueryhtmlcssnyromodal

A method for calculating the product of two selected numbers and then adding them together

I am currently working on a form that includes two select options; one for logo design and another for letterhead design. Users should be able to choose the quantity of each design, or both if they wish. For example, a user could select 2 logo designs and ...

javascripthtml

Compiling fails when creating an object literal with a generic key

I am attempting to accomplish the following task. function createRecord<T extends string>(key: T) : Record<T, T> { return {[key]: key}; // Type '{ [x: string]: T; }' is not assignable to type 'Record<T, T>' } Howe ...

typescript