mgislib

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()