ngx-tabulator-tables
v0.0.2
Published
Angular wrapper for the popular Tabulator Tables library
Downloads
58
Maintainers
Readme
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
npm install ngx-tabulator-tables
Import the module into your component
import { Component } from '@angular/core';
import { TabulatorModule } from 'ngx-tabulator-tables';
@Component({
selector: 'app-test',
template: '<ngx-tabulator [dataSource]="data" [autoColumns]="true"/>',
imports: [
TabulatorModule
],
standalone: true
})
export class TestComponent {
data = [
{ id: 1, name: "Oli Bob", progress: 12, gender: "male", rating: 1, col: "red", dob: "19/02/1984", car: 1 },
{ id: 2, name: "Mary May", progress: 1, gender: "female", rating: 2, col: "blue", dob: "14/05/1982", car: true },
{ id: 3, name: "Christine Lobowski", progress: 42, gender: "female", rating: 0, col: "green", dob: "22/05/1982", car: "true" },
{ id: 4, name: "Brendon Philips", progress: 100, gender: "male", rating: 1, col: "orange", dob: "01/08/1980" },
{ id: 5, name: "Margret Marmajuke", progress: 16, gender: "female", rating: 5, col: "yellow", dob: "31/01/1999" },
{ id: 6, name: "Frank Harbours", progress: 38, gender: "male", rating: 4, col: "red", dob: "12/05/1966", car: 1 },
]}
Examples
Basic Configuration
<ngx-tabulator
[dataSource]="data"
>
<ngx-tabulator-column
field="id"
title="ID"
/>
<ngx-tabulator-column
field="label"
title="Name"
/>
</ngx-tabulator>
Custom Cells
<ngx-tabulator
[dataSource]="data"
>
<ngx-tabulator-column
field="id"
title="ID"
/>
<ngx-tabulator-column
field="label"
title="Name"
>
<ng-template let-data>
@if (data.color == "red") {
<div style="color: red">{{data.name}}</div>
}
@else {
<div style="color: green">{{data.name}}</div>
}
</ng-template>
</ngx-tabulator-column>
</ngx-tabulator>