ngx-table-generator

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

Input	Type	Usage	Mandatory
dataSource	MatTableDataSource	Basic object with dataSource structure	mandatory
dataColumnsTable	ITableCell[]	Array formed by objects containing the configuration of each column of the table	mandatory
sortOptions	ISortOption	Contains the basic sorting configuration	mandatory
paginatorOption	IPaginatorOptions	Contains the basic configuration of pagination	mandatory
disabledMulticheck	boolean	Checks if the multicheck button is disabled	optional
footerData	IFooterData[]	Array containing object with the name and value of the fields to be displayed in the footer	optional
classMap	string[]	Array with the name of the css classes to be added to the table	optional
buttonOptions	IButtonOptions[]	Array containing the configuration objects with the buttons to add	optional

Output

Output	Type	Usage	Mandatory
onPageEvent	EventEmitter	Emits an event with each action on the pagination	optional
buttonEvent	EventEmitter	Emits an event that contains the button you clicked	optional
rowClick	EventEmitter	Emits an event with the column information that is clicked	optional
sortChange	EventEmitter	Emits an event with each action on the sorter	optional
suboperationAction	EventEmitter	Emits an event with the event that has been executed	optional
trashAction	EventEmitter	Emits an event when you click on the delete button	optional
multiCheckAction	EventEmitter	Emits an event with an array with the selected rows	optional

Interfaces

ITableColumn

Instance	Type	Usage	Mandatory
isCheckbox	boolean	Indicates if the cell will be checkbox	optional
label	string	Name of the header	mandatory
name	string	Name of the column. (You must talk to the backend to name the name of the instance to receive in the json equal to the order parameter of that column, otherwise it will not work). The word btnSuboperations is reserved, which if placed in the first object of the array activates the suboperations	mandatory
showWhen	string	Indicates whether the cell in that column should be visible	optional
sort	boolean	Indicates if the column is sortable	optional
multiCheck	IMultiCheckOption	Multicheck options	optional
suboperationData	ISuboperationData[]	Suboperation options	optional
objectInstances	string[]	Array with the names of the instances to go through	optional
isShares	boolean	Indicator if it is an shares (4 decimals)	optional
isCurrency	boolean	Indicator if it is an currency (2 decimals)	optional

ISuboperationData

Instance	Type	Usage	Mandatory
label	string	Name of suboperation	mandatory
conditional	string[]	Array indicating which logical comparison to use ('<', '>', '===', '>=', '<=', '<day', '>day')	optional
valueToCompare	string[]	Array with the value to compare	optional
itemToCompare	string[]	Array with the name of the instance to compare	optional

IMultiCheckOption

Instance	Type	Usage	Mandatory
id	string	Name of the instance that will fill the multicheck array	mandatory
buttonLabel	string	Multicheck button name	mandatory
multiMinSelected	string	Selectable minimum check	optional
conditionalMulticheck	string[]	Array indicating which logical comparison to use ('<', '>', '===', '>=', '<=', '<day', '>day')	optional
keysMulticheck	string[]	Array with the name of the instance to compare	optional
valueMulticheckToCompare	any[]	Array with the value to compare	optional

ISortOption

Instance	Type	Usage	Mandatory
activeSort	string	Indicates if the order is active	optional
direction	string	Indicates default direction	optional

IPaginatorOptions

Instance	Type	Usage	Mandatory
resultsLength	string	Result size per page	mandatory
limit	string	Limit of rows per page	optional

IFooterData

Instance	Type	Usage	Mandatory
name	string	Name of footerdata	mandatory
value	number	Value of footerdata	optional

IButtonOptions

Instance	Type	Usage	Mandatory
icon	string	name of icon to be displayed (material icon)	optional
label	string	Name of button	mandatory
event	string	Name of event	mandatory
buttonConditions	IConditionsOption	Button options	optional

IConditionsOption

Instance	Type	Usage	Mandatory
value	string	Value to compare	optional
condition	string	Array indicating which logical comparison to use ('<', '>', '===', '>=', '<=', '<day', '>day')	mandatory

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 } }
    ];
}