ngx-table-powerfull/README.md

Table with catalog of functionalities for free use based on the ngx-datatable component and other components

===========================
       INSTALLATION 
===========================

1. Installation of ngx-datatable

npm i @swimlane/ngx-datatable --save

=====================================================

2. Installation Bootstrap

npm install bootstrap

=====================================================

2. Add Material your node-modules

ng add @angular/material


=====================================================

3. Installation Multiselect Dropdown

npm install ng-multiselect-dropdown


=====================================================

4. Installation Export to Excel

npm install xlsx

npm install file-saver --save

=====================================================

5. Installation Export to PDF

npm install jspdf --save

npm install jspdf jspdf-autotable


============================
           ADD
============================

1. import NgxTablePowerfullModule of 'ngxTablePowerfull/'ngxTablePowerfull.module' in your imports module
2. import NotificationNgxService of 'ngxTablePowerfull/services/notificationNgxService.service' in your component for use services update table


============================
    DEFAULT CONFIG TABLE
============================

    visibleTitle: true
    filter: true
    filterByColumn: true
    fullscreen: true
    exportExcel: true
    exportPdf: true
    editableColumns: true
    addColumn: true
    editColumn: true
    deleteColumn: true
    sortable: true
    resizeColumns: true
    limitResult: 0
    striped: true
    singleSelection: true
    multipleSelection: true
    multipleButtonText: 'Visualizar'
    visibleNumberRowsButton: true
    viewDialogTable: true
    collapsed: false
    subtractHeight: 550                  // Subtract the specified pixels in the two heights to the default height which is 100vh
    subtractHeightCollapsed: 780         // Subtract px collapsed
    positionSumary: 'left'
    cardBody: true;
    primaryColor: '#17703E'
    secondaryColor: '#EC7063'
    hoverRowColor: '#0066363d'
    headerBackground: '#fff';
    headerFontColor: '#757575'
    borderTableColor: '#EEEFF0'
    rowHeight: 50 // Number
    footerHeight: 50 // Number
    sumaryFooterHeight: 50 // Number
    headerHeight: 50 // Number
    classTable: 'boostrap'               // Only supports 'boostrap' or 'material'
    language: { name: 'spanish' }        // Only values 'spanish' or 'english'. * If you want a new language or modify the existing one, you must configure it as indicated on line 100


==============================================================
   CONFIGURE NEW LANGUAGE OR MODIFY ONE THAT ALREADY EXISTS
==============================================================

    selectColumns: 'Select Columns',
    filterResults: 'Filter results',
    rows: 'Rows',
    row: 'Row',
    emptyMessage: 'No data to display',
    selectAll: 'Select All',
    unSelectAll: 'UnSelect All',
    search: 'Search',
    generated: 'Generated',
    total: 'Total',
    avarage: 'Average',
    maximum: 'Maximum',
    minimum: 'Minimum',
    deleteRow: 'Delete row',
    close: 'Close',
    save: 'Save',
    column: 'Column',
    columns: 'Columns',
    show: 'Show',
    fix: 'Fix',
    name: 'Name',
    predefinedContent: 'Predefined content',
    position: 'Position',
    newPosition: 'New position',
    editable: 'Editable',
    applyFunction: 'Apply function',
    units: 'Unit',   
    accept: 'Accept',
    configureFilter: 'Configure filter',
    closeConfigure: 'Close setting',
    configureColumns: 'Configure column',
    editColumn: 'Edit columns',
    newColumn: 'New column',
    deleteColumn: 'Delete column',
    export: 'Export',
    maximize: 'Maximize',
    restore: 'Restore',
    visualize: 'Visualize'


    1. MODIFY LANGUAGE / TEXTS
        If you want to modify an existing language, you must indicate the name of the language and the properties you want to change without having to instantiate all of them.

        - Example: 
            language: 
            { 
                name: 'english',
                setting: {
                    configureColumns: 'Columns',
                    visualize: 'Show',
                    position: 'Place'
                }
            }

    2. NEW LANGUAGE
        If you want to create a new language, you must indicate a name, and the properties, for a new language you must include all the properties mentioned above, without exception or the table could be affected

        - Example:
            language: 
            { 
                name: 'italian',
                setting: {
                    selectColumns: 'Seleziona Colonne',
                    filterResults: 'Filtra i risultati',
                    ...
                    ...                                         // Include all the properties for a new language
                    ...                                         
                    visualize: 'Visualize'
                }
            }

=================================
       CONFIG COLUMN
=================================

    prop: 'id-column'
    name: 'name-column'
    action: 'name-action'                                         // Columns with actions will be automatically positioned at the end and they will not be exported in any kind of event or action
    index: false                                                  // Property that indicates the index column of the table, there can only be one column of this type. If it is not found, an automatic one will be generated.
    hide: false                                                   // It only applies in the index column, showing it or not
    tag: 'tag-type'                                               // Only applies to columns with any action
    attributes: [name: 'name-atribute', value: 'value-atribute']  // Only applies to columns with any action
    editable: false
    sortable: true
    sort: { numeric: true }
    tooltip: false
    tooltipText: ''                                                // Default text row value   
    sumary: [ { type: 1, unit: 'kg/m/mm/l...'} ]                   // Available type functions: 0 :'total', 1: 'avarage', 2: 'maximum' and 3: 'minimum'
    predefinedData: 'data'                                         // Predefined data for the column if the property does not exist in the data model
    visible: true
    fixed: false,
    filtered: true

    - Example build columns table:

    const columns= [
        {
            prop: 'id',
            name: 'Id',
            index: true,
            hide: true
        },
        {
            prop: 'name',
            name: 'Name'
        },
        {
            prop: 'weight',
            name: 'Weight',
            sumary: [
                {
                    type: 0,
                    unit: 'Kg'
                },
                {
                    type: 1,
                    unit: 'Kg'
                }
            ]
        },
        {
            prop: 'delete',
            name: '',
            action: 'delete',
            predefinedData: 'delete',
            tooltip: true,
            tooltipText: 'Delete Row',
            tag: 'i',
            attributes: [ 
                {
                    name: 'class',
                    value: 'material-icons delete-icon'
                } 
            ]
        }
    ];



=================================
    TABLE INPUT PROPERTIES
=================================

    [name]="name table"
    [config]="object config of table"                                                  // This property is optional if it is not included it will start with the default configuration mentioned above on line 58
    [coloumns]="Array de object columns"
    [data]="Array of data table"
    [beforeAction]="Name of your component function"                                   // You must indicate the name of the function of your component that will be called before performing the action, it must return a promise of 
                                                                                       // type boolean, to continue the action (true) or stop it (false). Your function will receive a parameter with the name of the action and the 
                                                                                       // affected rows or columns  

    [actionsTocontrol]="Array of actions that will call name function of beforeAction" // Actions available to control by the user before being executed. [actionsTocontrol]="['newColumn', 'editColumn', 'deleteColumn', 'updateRow']"


    - Example instantiate simple table:

            <ngx-table-powerfull [name]="'Name Of Table'" [columns]="columns" [data]="rows" [config]="tableConfig" ></ngx-table-powerfull>     // Custom configuration

            <ngx-table-powerfull [name]="'Name Of Table'" [columns]="columns" [data]="rows" ></ngx-table-powerfull>                            // Default configuration

    - Example with beforeAction:        

        // Html
        <ngx-table-powerfull [name]="'Name Of Table'" [columns]="columns" [data]="rows"  [beforeAction]="myFuncion" [actionsTocontrol]="['editColumn', 'updateRow']"></ngx-table-powerfull> 

        // Component

        myFuncion(action): Promise<boolean>{

            return new Promise<boolean>(async (resolve) => {

                if(action.name === 'updateRow' && action.cell.oldValue > action.cell.newValue){
                    resolve(true);
                } else {
                    resolve(false);
                }

                if(action.name === 'editColumn' && !!action.updatedColumn.editable){
                    resolve(true);
                } else {
                    resolve(false);
                }
            });

        }

=================================
       EVENT TABLE
=================================

    (event)             // Name action of column + Row
    (click)             // name action + Row click
    (dblclick)          // name action + Row double click
    (singleSelection)   // name action + Row selected | null
    (multipleSelection) // name action + Rows selected [n] | []
    (updateRow)         // name action + update row +  update cell (cell: { column: update column, oldValue: old value, newValue: new value })
    (newColumn)         // name action + new column
    (editColumn)        // name action + old column + updated column
    (deleteColumn)      // name action + delete column
    *(visibleDataTable) // name action + (columns + rows) table data in view state (without action columns) 
    *(dataTable)        // name action + (columns + rows) table with the collected changes but with all the columns and records of this (without action columns)

    * It is necessary at the time of the request to send notification to the table with the property visibleDataTable: true | dataTable: true

==================================
 NOTIFICATION SYSTEM TO THE TABLE
==================================

import NotificationNgxService of 'Services og NgxTablepowerfull module';

Notification service provided by the one provided by the NgxTablepowerfull module itself called NotificationNgxService, accepts the following properties:

    collapsed: true | false  // Collapsed the table or not according to the value
    rows: [datas]            // Updates the data in the table view with the new values ​​entered
    columns: [columns]       // Update column data in table view at runtime
    visibleDataTable: true   // Request the data visible by the user at that time
    dataTable: true          // Request the current data visible or not by the user
    exportExcel: true        // Call export to excel from table
    exportPdf: true          // Call export to pdf from table

-- Use example:

    this.notificationNgxService.raise('Table name', { visibleDataTable: true });