Angular Responsive Datatable (ngx-responsive-datatable)

Responsive datatable. Easy implementation, beautiful and clean style, powerful search engine and pagination that can handle large data. It was created with Angular16, but it surely works on Angular 8+.

Install

npm i ngx-responsive-datatable@latest --save

Import

app.module.ts

1import {BrowserModule} from '@angular/platform-browser';
2import {NgModule} from '@angular/core';
3import {AppComponent} from './app.component';
4/** IMPORT **/
5import { NgxResponsiveDatatableModule } from 'ngx-responsive-datatable'; 👈
6
7@NgModule({
8  declarations: [
9    AppComponent
10  ],
11  imports: [
12    BrowserModule,
13	NgxResponsiveDatatableModule 👈
14  ],
15  providers: [],
16  bootstrap: [AppComponent]
17})
18export class AppModule {
19}

In your component

HTML

1<ngx-responsive-datatable [dataTable]="dataTable | async"></ngx-responsive-datatable>

TypeScript

1import { Component, OnInit } from "@angular/core";
2
3@Component({
4  selector: "app-root",
5  templateUrl: "./app.component.html",
6  styleUrls: ["./app.component.css"],
7})
8export class AppComponent implements OnInit {
9
10    dataTable = new Subject<any>();
11
12    // We create a fake array to send to our table
13    private users: User[] = [
14        {
15            id: 1,
16            name: 'Andrew Martins',
17            age: 20,
18            genre: 'male',
19            email: 'andrew@mail.com',
20        },
21        {
22            id: 2,
23            name: 'Peter Potter',
24            age: 21,
25            genre: 'male',
26            email: 'peter@mail.com',
27        },
28        {
29            id: 3,
30            name: 'Jack Stevens',
31            age: 20,
32            genre: 'male',
33            email: 'jack@mail.com',
34        },
35        {
36            id: 4,
37            name: 'Martha Willis',
38            age: 19,
39            genre: 'female',
40            email: 'martha@mail.com',
41        },
42        {
43            id: 5,
44            name: 'Alice Lance',
45            age: 20,
46            genre: 'female',
47            email: 'alice@mail.com',
48        },
49        {
50            id: 6,
51            name: 'Rose Richards',
52            age: 20,
53            genre: 'female',
54            email: 'rose@mail.com',
55        },
56    ]
57
58     /*Set the data to send to the component*/
59    setDataTable() {
60        const data = {
61            //Set the titles with the same name and the same order than the attributes of each element in the array
62            titles: ['Id', 'Name', 'Age', 'Genre', 'Email'],
63            rows: this.users;
64        }
65
66        // Finally set the variable dataTable with the new data
67        this.dataTable.next(data);
68    }
69}
70
71interface User = {
72    id: number;
73    name: string;
74    age: number;
75    genre: string;
76    email: string;
77}

Tutorial