Looking to implement pagination and sorting functionalities in multiple Angular Material tables with varying amounts of data?

Adding sorting and pagination to predefined tables is a straightforward process. For example:

@ViewChild('myTableSort') myTableSort:MatSort;
@ViewChild('myTablePaginator') myTablePaginator:MatPaginator;

Once you have the table data, you can assign it to a MatTableDataSource and link sorting and pagination as follows:

this.tableData = new MatTableDataSource(data);
this.tableData.sort = this.myTableSort;
this.tableData.paginator = this.myTablePaginator;

However, the challenge arises when dealing with an unknown number of tables, requiring dynamic addition of paginator and sorter to each.

Is it possible to declare a new paginator like myTablePaginator2 after obtaining the table data?

How can sorting and pagination be added dynamically to tables post-creation?

typescriptangular9paginatorangular-material-9

Answer №1

Dealing with a similar scenario, I encountered a situation where I had to iterate through records fetched from an API response and create two tables with sorting for each record. To tackle this, I utilized a QueryList for implementation

@ViewChildren('sort1') sort1: QueryList<MatSort>;
@ViewChildren('sort2') sort2: QueryList<MatSort>;
 
generateTables(): void {
  this.records?.forEach((record, i) => {
    record.tables = {
      table1: new MatTableDataSource(),
      table2: new MatTableDataSource(),
    };

    record.tables.table1.data = // Invoke an API call to retrieve data for table1
    record.tables.table2.data = // Execute an API call to fetch data for table2

    record.tables.table1.sort = this.sort1.get(i);
    record.tables.table2.sort = this.sort2.get(i);
  });
}

HTML

<div *ngFor="let record of records; let i = index">
  <table mat-table [dataSource]="record.tables.table1" matSort 
   #sort1="matSort">
  </table>

  <table mat-table [dataSource]="record.tables.table2" matSort 
    #sort2="matSort">
  </table>
</div>

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

How to use $$[n] in Spectron/WebdriverIO to target the nth child element instead of the selector

Attempting to utilize Spectron for testing my Electron application has been challenging. According to the documentation, in order to locate the nth child element, you can either use an nth-child selector or retrieve all children that match a selector using ...

javascripttypescriptelectronwebdriver-iospectron

Confusion arises from the error message 'No overload matches this call'

Currently, I am working on a weather application using Angular based on the concepts from the book Angular for Enterprise-Ready Web Applications - Second Edition. I am in the process of adding a search component to the app, which will allow users to displa ...

angulartypescriptangular-reactive-forms

What is the best method for converting an Object with 4 properties to an Object with only 3 properties?

I have a pair of objects: The first one is a role object with the following properties: Role { roleId: string; name: string; description: string; isModerator: string; } role = { roleId:"8e8be141-130d-4e5c-82d2-0a642d4b73e1", ...

javascripttypescriptobject

Incorporate personalized No Data Available message in ngx-datatable

How can I customize the no data message for ngx-datatable? I want to avoid displaying the default message that comes with it. Here is what I have attempted so far: <div *ngIf="showTable"> <ngx-datatable [rows]="rows"> ...

angulartypescriptngx-datatable

Eliminate the chosen and marked items from a list - Angular 2+/ Ionic 2

Currently, I have a checkbox list on my page. Whenever a user selects the "Save" button, the checked items should be removed from the list and moved to the saved tab that is also displayed. While I have successfully implemented the functionality for removi ...

javascriptangulartypescriptionic2

Is there a way to efficiently convert several strings within an object that has been retrieved from an HTTP request into another language, and subsequently save this object with the

Is there a way for me to translate some strings in an object before storing it in another http request using the Google Translate API? I am currently getting the object from one http request and saving it with a put method. How can this be achieved? servi ...

angulartypescriptobservable

Encountering the error "TypeError: Unable to access property 'controls' of undefined" when utilizing formArray in Reactive forms

Hi there, I am currently working on creating a dynamic form using formArray in Angular. However, I have run into an issue with the error message "TypeError: Cannot read property 'controls' of undefined." import { Component, OnInit } from ' ...

javascriptangulartypescript

Issue with Typescript flow analysis when using a dictionary of functions with type dependency on the key

I am utilizing TypeScript version 4.6 Within my project, there exists a type named FooterFormElement, which contains a discriminant property labeled as type type FooterFormElement = {type:"number",...}|{type:"button",...}; To create instances of these el ...

typescript

Conditional void parameter type in Typescript

Attempting to create a custom Error class that can handle different data based on the error code seemed like a complex task for TypeScript. However, surprisingly, it was successful: const enum ERROR_CODES { E_AUTHORIZATION = 'Authorization error&ap ...

typescripttypes

Encountering 'null' error in template with Angular 4.1.0 and strictNullChecks mode

After updating Angular to version 4.1.0 and activating "strictNullChecks" in my project, I am encountering numerous errors in the templates (.html) that look like this: An object may be 'null' All these errors are pointing to .html templat ...

angulartypescript

Is it possible to interchange the positions of two components in a routing system?

driver-details.component.ts @Component({ selector: 'app-driver-details', templateUrl: './driver-details.component.html', styleUrls: ['./driver-details.component.css'] }) export class DriverDetailsComponent implements OnI ...

javaangulartypescript

Angular encountered an ERROR of type TypeError where it cannot access properties that are undefined when trying to read the 'title'

I designed a form and I am trying to save the information entered. However, when I attempt to use the save method, an error keeps popping up. How can I troubleshoot this issue and successfully save the data from the form? ...

angulartypescript

Is Jasmine brushing off TypeScript test files?

I'm diving into my first project with Jasmine, and despite following a tutorial, I'm encountering some hurdles right from the start. After installing jasmine-node, typings, and typescript, I executed: typings install dt~jasmine --save-dev --glo ...

node.jsangulartypescriptjasmine

Using a template reference variable as an @Input property for another component

Version 5.0.1 of Angular In one of my components I have the following template: <div #content>some content</div> <some-component [content]="content"></some-component> I am trying to pass the reference of the #content variable to ...

angulartypescript

Incorporate typings into your CDN integration

I'm interested in utilizing a CDN to access a JSON validation library, as it's expected to provide faster performance (due to retrieving the file from the nearest server within the CDN). The JSON validation library in question can be found here: ...

typescriptcdntypescript-typings

Clear drop down selections after button is pressed

I am currently working with a grid in my template that contains multiple dropdowns, each row having its own. When I click a button, I gather the values from these dropdowns. However, upon clicking this button, I wish to reset all the dropdowns back to thei ...

angulartypescript

Is it possible to convert a DynamoDB AttributeMap type into an interface?

Assume I define a TypeScript interface like this: interface IPerson { id: string, name: string } If I perform a table scan on the 'persons' table in DynamoDB, my goal is to achieve the following: const client = new AWS.DynamoDB.Documen ...

typescriptamazon-dynamodb

What is the reason for not requiring checks with Union Types when utilizing a variable, yet necessitating them within a function?

Currently working on some Typescript challenges and encountered a scenario involving a union type. In this example, the function getIstanbulPostalCode is declared to return either a string or a number: function getIstanbulPostalCode(): string | number { ...

typescript

What's the best way to add animation to the send icon while hovering over the button?

<div class="text-center"> <button [disabled]="btnStatus" class="btn btn-secondary buttonSend" type="submit"> <div [hidden]="btnStatus"> Send Message&nbsp;&nbs ...

htmlcssangulartypescriptcss-animations

Issues with Angular displaying filter incorrectly

Whenever a user chooses a tag, I want to show only the posts that have that specific tag. For instance, if a user selects the '#C#' tag, only posts with this tag should be displayed. This is how my system is set up: I have an array of blogs that ...

javascriptangulartypescript