# mgislib

> This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0.

Latest version **0.0.1** (published 2023-04-18) · 0 weekly downloads

## Install

```sh
npm install mgislib
pnpm add mgislib
yarn add mgislib
bun add mgislib
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-04-18 |
| First published | 2023-04-18 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 312.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | bhupesh7272 |

## Links

- npm: https://www.npmjs.com/package/mgislib
- npm.io page: https://npm.io/package/mgislib

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.0.1 (latest) — 2023-04-18

## README

# MgisLib

This library was generated with [Angular CLI](https://github.com/angular/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](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) 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()

---
_Source: https://npm.io/package/mgislib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._