Home

This library offers an Angular component that allows you to display your data in a table.

This table handles different events that can be implemented by the developers that use it.

The events are the following:

• Sort
• Filter
• Create
• Edit
• Delete
• Pagination

Instalation

npm install --save @paaragon/ngx-table

Dependencies

[WIP]

Usage

// component.ts
const exampleData: any[] = [
    { name: 'Delbert', lastname: 'Keeling', birthdate: new Date(1990, 1, 21), company: 'Gislason, Braun and Kerluke', salary: 30432 },
    { name: 'Karine', lastname: 'Rice', birthdate: new Date(1982, 3, 1), company: 'Thiel - Connelly', salary: 29188 },
    { name: 'Rachelle', lastname: 'Flatley', birthdate: new Date(1985, 10, 16), company: 'Bradtke, Donnelly and Gottlieb', salary: 27026 },
    { name: 'Gardner', lastname: 'Lindgren', birthdate: new Date(1982, 9, 20), company: 'Crist - Klein', salary: 52676 }
];

<!-- component.html -->
<ngx-table [data]="exampleData"></ngx-table>

Events

Sort

<!-- your component.html -->
<ngx-table [data]="exampleData" (sort)="onSort($event)"></ngx-table>

// your component.ts
onSort(order: NgxTableOrder) {
 // your sort logic
}

interface NgxTableOrder {
    field: string;
    direction: 1 | -1;
}

Sort documentation

Filter

<!-- your component.html -->
<ngx-table [data]="exampleData" (filter)="onFilter($event)"></ngx-table>

// your component.ts
onSort(order: NgxTableFilter ) {
 // your filter logic
}

interface NgxTableFilter {
    [key: string]: { operator: NgxTableOperator, value: string };
}

Filter documentation

Create

<!-- your component.html -->
<ngx-table [data]="exampleData" (create)="onCreate($event)"></ngx-table>

// your component.ts
onSort(order: NgxTableNew) {
 // your create logic
}

interface NgxTableNew {
    [key: string]: any;
}

Create documentation

Edit

<!-- your component.html -->
<ngx-table [data]="exampleData" (edit)="onEdit($event)"></ngx-table>

// your component.ts
onSort(order: NgxTableEdition) {
 // your edition logic
}

interface NgxTableEdition {
    index: number;
    row: any;
}

Edit documentation

Delete

<!-- your component.html -->
<ngx-table [data]="exampleData" (delete)="onDelete($event)"></ngx-table>

// your component.ts
onDelete(delObj: NgxTableDelete) {
 // your delete logic
}

Delete documentation

Pagination

[WIP]

Config

You can provide a config object to customize your table.

<!-- your component.html -->
<ngx-table [data]="exampleData" [config]="config"></ngx-table>

// Config interface
interface NgxTableConfig {
    placeholders?: NgxTablePlaceholders;
    sort?: {
        enable?: boolean
    };
    filter?: {
        enable: boolean,
        debounceTime?: number,
        validations?: {
            [key: string]: {
                regex: string,
                errorMsg: string
            }
        },
        lock?: string[],
        operators?: NgxTableOperator[]
    };
    create?: {
        enable: boolean,
        validations?: {
            [key: string]: {
                regex: string,
                errorMsg: string
            }
        },
        lock?: string[]
    };
    delete?: {
        enable: boolean
    };
    edit?: {
        enable: boolean,
        longContent?: number,
        lock?: string[]
    };
}

config documentation