@angular-ru/cdk/virtual-table

The Angular Table Builder includes a comprehensive set of ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row and column virtualization, and accessibility support.

Demo: https://angular-ru.github.io/angular-ru-ng-table-builder-example-app/

$ npm install --save @angular-ru/cdk

After a few seconds of waiting, you should be good to go. Let's get to the actual coding! As a first step, let's add the Angular table builder module to our app module (src/app.module.ts):

import { TableBuilderModule } from '@angular-ru/cdk/virtual-table';

@NgModule({
    imports: [
        // ...
        TableBuilderModule.forRoot()
    ]
})
export class AppModule {}

Simple use

Next, let's declare the basic grid configuration. Edit src/app.component.ts:

import { Component } from '@angular/core';
import { MyData } from './my-data.interface';

@Component({
    selector: 'app-root',
    template: `
        <ngx-table-builder [source]="data"></ngx-table-builder>
    `
})
export class AppComponent {
    public data: MyData[] = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];
}

see: https://stackblitz.com/edit/ng-table-builder-simple

The ngx-table-builder provides a styled data-table that can be used to display rows of data. The ngx-table-builder is an customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience.

Custom template

// app.component.ts
import { Component } from '@angular/core';
import { LicenseSample } from './license.interface';

@Component({
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent {
    public licenses: LicenseSample[] = [
        {
            id: 1,
            name: 'single',
            price: 29.3
        },
        {
            id: 2,
            name: 'developer',
            price: 49.8
        },
        {
            id: 3,
            name: 'premium',
            price: 99.5
        },
        {
            id: 4,
            name: 'enterprise',
            price: 199
        }
    ];
}
<!-- app.component.html -->
<ngx-table-builder [source]="licenses">
    <ngx-column key="name">
        <ng-template ngx-th>License</ng-template>
        <ng-template
            ngx-td
            let-name
        >
            {{ name | uppercase }}
        </ng-template>
    </ngx-column>

    <ngx-column key="price">
        <ng-template ngx-th>Cost</ng-template>
        <ng-template
            ngx-td
            let-price
        >
            {{ price | currency }}
        </ng-template>
    </ngx-column>
</ngx-table-builder>

Filtering

// app.component.ts
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { LicenseSample } from './license.interface';

@Component({
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
    @ViewChild('table') table;

    public licenses: LicenseSample[] = [
        {
            id: 1,
            name: 'single111',
            price: 29.3
        },
        {
            id: 2,
            name: 'developer123',
            price: 49.8
        },
        {
            id: 3,
            name: 'beginner211',
            price: 99.5
        },
        {
            id: 4,
            name: 'enterprise321',
            price: 199
        }
    ];

    ngAfterViewInit() {
        this.table.filterable.updateFilterTypeBy(TableFilterType.CONTAINS, 'er');
        this.table.filterable.updateFilterValueBy('11', 'name');
    }
}
<!-- app.component.html -->
<ngx-table-builder
    #table
    enable-filtering
    [source]="licenses"
>
    <ngx-column
        key="name"
        is-filterable
    >
        <ng-template ngx-th>License</ng-template>
        <ng-template
            ngx-td
            let-name
        >
            {{ name | uppercase }}
        </ng-template>
    </ngx-column>

    <ngx-column
        key="price"
        is-filterable
    >
        <ng-template ngx-th>Cost</ng-template>
        <ng-template
            ngx-td
            let-price
        >
            {{ price | currency }}
        </ng-template>
    </ngx-column>
</ngx-table-builder>

Filtration:

this.table.filterable.updateFilterTypeBy(TableFilterType.CONTAINS, 'name');
this.table.filterable.updateFilterValueBy('11', 'name');

Actions above filter the table and leave us with:

        {
            id: 1,
            name: 'single111',
            price: 29.3
        },
        {
            id: 3,
            name: 'beginner211',
            price: 99.5
        }

This example use filter table type CONTAINS. For other available types check TableFilterType

is-filterable input set to true also adds filer symbol to column, a click on it leads to open a filter which you can provide like this:

<ngx-table-builder>
    ...
    <ngx-filter>
        <your-custom-filter></your-custom-filter>
    </ngx-filter>
    ...
</ngx-table-builder>

External filtering

If leave enable-filtering to be set false and set is-filterable to true it will allow using default filters but table builder will not filter source by its own rules, so you can handle it on your own

TODO:

Previous@angular-ru/cdk/tooltipNext@angular-ru/cdk/big-decimal

Last updated

Was this helpful?