Negligible Participation Metric

    This package has been deprecated

    Author message:

    Version no longer supported. Use @angular-ru/cdk/virtual-table instead

    TypeScript icon, indicating that this package has built-in type declarations

    15.311.0 • Public • Published

    Angular Table Builder

    npm version npm-stat

    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.


    $ npm install --save @angular-ru/ng-table-builder

    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/ng-table-builder';
        imports: [
            // ...
    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';
        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 }


    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';
        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 key="price">
            <ng-template ngx-th>Cost</ng-template>
            <ng-template ngx-td let-price>{{ price | currency }}</ng-template>


    • [x] Simple use and setup;
    • [x] Virtual scroll (horizontal, vertical);
    • [x] Auto calculate height;
    • [x] Customisable Appearance;
    • [x] State Persistence;
    • [x] Filtering;
    • [x] Resizing;
    • [x] Sorting;
    • [x] Selection;
    • [x] Context menu;
    • [ ] Outstanding Performance (need improved);




    npm i @angular-ru/ng-table-builder

    DownloadsWeekly Downloads






    Unpacked Size

    2.04 MB

    Total Files


    Last publish


    • angular-ru