MgisLib

This library was generated with Angular CLI version 15.0.0.

Code scaffolding

Run ng generate component component-name --project mgis-lib to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project mgis-lib.

Note: Don't forget to add --project mgis-lib or else it will be added to the default project in your angular.json file.

Build

Run ng build mgis-lib to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build mgis-lib, go to the dist folder cd dist/mgis-lib and run npm publish.

Running unit tests

Run ng test mgis-lib to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Installation - mgis-lib data table

npm i "path"

module file :

import { MgisDatatableModule} from 'mgis-lib';
imports: [MgisDatatableModule]

selector :

 <mgis-datatable></mgis-datatable>

in html file :

 <mgis-datatable
    oncopy="return false" onpaste="return false" oncut="return false" onselectstart="return false"
    *ngIf="showDataTable==true"
    [tableData]="tableData" 
    [tableName]="tablename"
    [editable]="editable"
    [pagination] = "paginationType"
    [pageSize] = "itemPerPage"
    [totalDataLength]="datatableTotalCount"
    [columnHide]="columnHide"
    [rowSelection]="rowSelection"
    [rowZoomButton]="rowZoomButton"
    [rowDeleteButton]="rowDeleteButton"
    [filterHeadersList]="filterHeadersList"
    [showMoreData]="showMoreData"
    [tableStyleClass] = "tableStyleClass"
    [showPageSizeOptions]="showPageSizeOptions"
    [pageSizeOptions]="pageSizeOptions"
    [showFirstLastButtons]="showFirstLastButtons"
    (selectEventFromTable)="eventFromTable($event)"
    (paginationEventFromTable)="paginationEventFromTable($event)"
    (buttonClickEvent)="eventButtonClick($event)"
    (EditVlaues)="EditVlaues($event)"
    (scrollEventForData)="scrollEventForData($event)"
    (zoomOrDeleteEvent)="zoomOrDeleteEvent($event)"
    [sorting] = "sorting"
    >                
    <strong class="table-header">Edit header</strong>
    <strong class="table-foot">Edit footer</strong> 
    <div class="table-foot">
        <span>Showing </span>{{ rangeData }}<span>of </span>{{ datatableTotalCount }}
    </div> 
</mgis-datatable>
           

in .ts file :

export class AppComponent implements OnInit{
    tableData :any;
    tablename: any;
    editable: boolean=false;
    paginationType:any
    itemPerPage:any;
    datatableTotalCount:any;
    columnHide: any
    rowSelection: boolean = false;
    columnBasedSearch: boolean=false;
    rowDeleteButton:boolean=true
    rowZoomButton:any=true
    filterHeadersList:any
    sorting : boolean =false
    ngOnInit() {
        this.tableData=[]
        this.tableData = [
        {id:"1", o_d: "112RKM7VNGOIU->SBCZ", key: '112RKM7VNGOIU->SBCZ', vrid: "112RKM7VN", date_time: '448130.748726852', latitude: '15.3403122222222', longitude: '73.9279777777777', truck: 'THIRTY_TWO_FOOT_TRUCK', testupdate: '112RKM7VNGOIU->SBCZTHIRTY_TWO_FOOT_TRUCK' },
        {id:"2", o_d: "112RKM7VNGOIU->SBCZ", key: '112RKM7VNGOIU->SBCZ', vrid: "112RKM7VN", date_time: '448130.748726852', latitude: '15.3403122222222', longitude: '73.9279777777777', truck: 'THIRTY_TWO_FOOT_TRUCK', testupdate: '112RKM7VNGOIU->SBCZTHIRTY_TWO_FOOT_TRUCK' }
        ];
        this.filterHeadersList=[]
        this.filterHeadersList=["o_d","key","vrid","date_time","latitude","longitude","truck","testupdate"]
        this.tablename=""
        this.editable=true
        this.paginationType="click";
        this.itemPerPage=10
        this.datatableTotalCount=200
        this.rowSelection=true
        this.columnBasedSearch=false
        this.rowZoomButton=true
        this.rowDeleteButton=false
        this.sorting = true
        }
        eventFromTable(event:any){
            console.log(event)
        }
        paginationEventFromTable(event:any){
            console.log(event)
        }
        eventButtonClick(event:any){
            console.log(event)
        }
        EditVlaues(event:any){
            console.log(event)
        }
        zoomOrDeleteEvent(event:any){
            console.log(event)
        }
    }
}

• Properties

| @Input() | Type | Required | Default | Description | |:-------------------:|:-------:|:----------:|:-------:| :------------------:| | tableData | Array | mandatory | null | data for table | | editable | Boolean | optional | Flase | Edit data in table | | pagination | String | optional | click | "click" and "scroll" are the option | | totalDataLength | String | mandatory | null | Number of data | | rowSelection | Boolean | optional | false | row selection option | | pageSizeOptions | Array | optional | null | number of data in view mode | | showPageSizeOptions | Boolean | optional | false | hide or show page saize option | | tableName | String | optional | null | Name of the table | | pageSize | String | optional | 10 | number of data when table open | | rowZoomButton | Boolean | optional | false | zoom option | | rowDeleteButton | Boolean | optional | false | delete single feature in table | | showMoreData | Boolean | optional | true | load more data in table | | filterHeadersList | Array | mandatory | null | provide column list | | tableStyleClass | string | optional | null | style claas for table | | showFirstLastButtons| boolean | optional | false | direct jump first and last page of the table | | sorting | boolean | optional | false | column based sorting |

• Events

| @Output() | Required | Description | Payload | |:-----------------------:|:--------:| :-------------------------:| :-------------------------------------------:| | selectEventFromTable | optional | Event emitted when a row in the datatable is selected.|An object representing the selected row data.| | paginationEventFromTable| optional | Event emitted when the user interacts with the pagination component.|An object containing pagination details.| | EditVlaues | optional | Event emitted when a user edits a cell value. | An object containing the edited cell value and row data.| |scrollEventForData |optional|Event emitted when the user scrolls within the datatable component.|An object containing scroll position and data details.| | zoomOrDeleteEvent | optional | Event emitted when the user performs a zoom or delete action on a row in the table.|An object representing the zoomed or deleted row data.|

• Secvice

  1: get All Selected values

  2: get all Edit values

  In .ts File

    import { DatatableService } from 'mgislib';
  
    constructor(private datatableService:DatatableService)
  
    this.datatableService.getSelectedValues()
  
    this.datatableService.getEditValues()