Guide overview

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.

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

Benefits:

• Outstanding Performance;
• Simple use and setup;
• Customisable Appearance;
• State Persistence;
• Filtering;
• Sorting;
• Selection;

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 { }
    

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 }
      ];
    }
    

For more information on the interface and a detailed look at how the table is implemented, see the guide .

Rendering pipeline