# 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