ngx-tabulator-tables

This project is currently in a beta phase and features will be added upon pull requests. I will try to minimize breaking changes between minor version revisions but some may be made until we reach 1.0.0.

This project is a proper Angular wrapper of Tabulator.

Quickstart

Install the Package

1npm install ngx-tabulator-tables

Import the module into your component

1import { Component } from '@angular/core';
2import { TabulatorModule } from 'ngx-tabulator-tables';
3
4@Component({
5    selector: 'app-test',
6    template: '<ngx-tabulator [dataSource]="data" [autoColumns]="true"/>',
7    imports: [
8        TabulatorModule
9    ],
10    standalone: true
11})
12export class TestComponent {
13    data = [
14        { id: 1, name: "Oli Bob", progress: 12, gender: "male", rating: 1, col: "red", dob: "19/02/1984", car: 1 },
15        { id: 2, name: "Mary May", progress: 1, gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true },
16        { id: 3, name: "Christine Lobowski", progress: 42, gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true" },
17        { id: 4, name: "Brendon Philips", progress: 100, gender: "male", rating: 1, col: "orange", dob: "01/08/1980" },
18        { id: 5, name: "Margret Marmajuke", progress: 16, gender: "female", rating: 5, col: "yellow", dob: "31/01/1999" },
19        { id: 6, name: "Frank Harbours", progress: 38, gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1 },
20    ]}
21

Examples

Basic Configuration

1<ngx-tabulator
2    [dataSource]="data"
3>
4    <ngx-tabulator-column
5        field="id"
6        title="ID"
7    />
8    <ngx-tabulator-column
9        field="label"
10        title="Name"
11    />
12</ngx-tabulator>

Custom Cells

1<ngx-tabulator
2    [dataSource]="data"
3>
4    <ngx-tabulator-column
5        field="id"
6        title="ID"
7    />
8    <ngx-tabulator-column
9        field="label"
10        title="Name"
11    >
12        <ng-template let-data>
13            @if (data.color == "red") {
14                <div style="color: red">{{data.name}}</div>
15            }
16            @else {
17                <div style="color: green">{{data.name}}</div>
18            }
19        </ng-template>
20    </ngx-tabulator-column>
21
22</ngx-tabulator>