ngx-table-generator v0.0.1

Table generator

Introduction

Install the generator:

    npm install --save ngx-table-generator

This component generates a table with options such as suboperations, buttons, multicheck, receiving a configuration given by the developer.

Table generator

The module thtat contains the currency mask is this: TableGenerator. And it is used as follows (Inputs that appear in the example are mandatory):

<ngx-table-generator [dataSource]="dataSource" [dataColumnsTable]="dataColumnsTable" [sortOptions]="sortOption" [paginatorOption]="paginatorOption"></ngx-table-generator>

Inputs

Output

Interfaces

ITableColumn

ISuboperationData

IMultiCheckOption

ISortOption

IPaginatorOptions

IFooterData

IButtonOptions

IConditionsOption

Example

Config table file

export namespace TableGlobalOrderView {
    export const dataColumnsTable = [
        {
            name: 'name',
            multiCheck: {
                id: 'multiCheck',
                buttonLabel: 'multiCheck',
                multiMinSelected: '-1',
                conditionalMulticheck: ['===',],
                keysMulticheck: ['test'],
                valueMulticheckToCompare: ['0']
            },
            suboperationData: [
                {
                    label: 'suboperationData1',
                    conditional: ['==='],
                    valueToCompare: ['0'],
                    itemToCompare: ['suboperationData1']
                },
                {
                    label: 'suboperationData2',
                    conditional: ['==='],
                    valueToCompare: ['true'],
                    itemToCompare: ['suboperationData2']
                },
                {
                    label: 'suboperationData3',
                    conditional: ['==='],
                    valueToCompare: ['N'],
                    itemToCompare: ['suboperationData3']
                }
            ],
        },
        {
            label: 'label1',
            name: 'name1',
            objectInstances: ['name1', 'name12'],
            sort: true
        },
        {
            label: 'label2',
            name: 'name2',
            date: true,
            sort: true
        },
        {
            label: 'label3',
            name: 'name3',
            sort: true
        },
        {
            label: 'label4',
            name: 'label4',
            objectToCompare: [{ id: 'N', label: 'No' }, { id: 'Y', label: 'Yes' }],
            sort: true
        },
        {
            label: 'label5',
            name: 'mame5',
            sort: true
        },
        {
            label: 'label6',
            name: 'name6',
            isShares: true,
            sort: true
        },
        {
            label: 'label7',
            name: 'name7',
            isShares: true,
            sort: true
        },
        {
            label: 'label8',
            name: 'name8',
            isCurrency: true,
            sort: true
        }
    ];
    export const paginatorOption = {
        resultsLength: 0,
        limit: 20,
    };

    export const sortOption = {
        activeSort: 'customerId',
        direction: 'asc'
    };

    export const buttonOptions = [
        { icon: 'note_add', label: 'New', event: 'new' },
        { icon: 'note_add', label: 'Delete', event: 'delete', buttonConditions: { value: '', condition: 4 } }
    ];
}