@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

$ 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 virtual table provider to our app config (src/app.config.ts):

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

export const appConfig: ApplicationConfig = {
  providers: [provideVirtualTable()],
};

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';
import {VirtualTable} from '@angular-ru/cdk/virtual-table';

@Component({
  selector: 'app-root',
  imports: [VirtualTable],
  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';
import {VirtualTable} from '@angular-ru/cdk/virtual-table';

@Component({
  selector: 'app',
  imports: [VirtualTable],
  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';
import {VirtualTable} from '@angular-ru/cdk/virtual-table';

@Component({
  selector: 'app',
  imports: [VirtualTable],
  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/tooltip Next@angular-ru/cdk/big-decimal

Last updated 9 days ago