ng-report-grid v0.2.9

NgReportGrid

This library was generated with Angular CLI version 14.2.0.

Installation

npm install ng-report-grid --save

Installation requires following peerdependencies to be installed

• "@angular/common": "^14.2.0",
• "@angular/core": "^14.2.0",
• "bootstrap": "^5.2.2",
• "jquery": "^3.6.1",
• "lodash": "^4.17.21",
• "ngx-bootstrap": "^9.0.0",
• "ngx-pagination": "^6.0.3",
• "rxjs": "~6.6.3",
• "@angular/material": "^14.2.7",
• "@angular/cdk": "^14.2.7",
• "dayjs": "^1.11.6",
• "ng-multiselect-dropdown": "^0.3.9",
• "@fortawesome/angular-fontawesome": "^0.12.1",
• "@fortawesome/fontawesome-free": "^6.2.1",
• "@fortawesome/fontawesome-svg-core": "^6.2.1",
• "@fortawesome/free-regular-svg-icons": "^6.2.1",
• "@fortawesome/free-solid-svg-icons": "^6.2.1"

Implementation

Component.htlm file

<generic-simple-table
#genericSimpleTable
[simpleTableConfig]="genericSimpleTableConfig"
(onActionClick)="onActionClick($event)"
  (onCurrentPageChange)="onPageChange($event)"
(columnSettingChange)="onColumnSettingChange($event)"
  (onContextMenu)="onContextMenuClick($event)"

> </generic-simple-table>

Component.ts file

    import {
        AfterViewInit,
        Component,
        ElementRef,
        OnInit,
        ViewChild,
    } from '@angular/core';
    import {
        DrillDownMenu,
        FilterDisplayOption,
        filterReport,
        GenericSimpleTableComponent,
        GenericSimpleTableConfig,
        GenericSimpleTableSettings,
        NgReportGridComponent,
        ReportParameterField,
        TableColumnSettings,
        TableActionKeySettings,
        TableDataSourceType,
    } from 'ng-report-grid';
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss'],
    })
    export class AppComponent implements OnInit, AfterViewInit {
        title = 'test-grid-app';
        @ViewChild('genericSimpleTable')
        simpleTable!: GenericSimpleTableComponent;

        simpleTableSettings: GenericSimpleTableSettings =
        new GenericSimpleTableSettings();
        filterReport: filterReport = new filterReport();

        reportTitle: string = '';
        reportType: string = '';
        currentPage: number = 1;
        pageSize: number = 20;

        genericSimpleTableConfig: GenericSimpleTableConfig = new GenericSimpleTableConfig();

        ngOnInit(): void {}

        ngAfterViewInit(): void {
            this.simpleTableListConfig();
        }

        simpleTableListConfig() {
            var tableColumns: TableColumnSettings[] = [];
            this.simpleTableSettings = {
          title: ' this.reportTitle',
          apiEndpoints: '/V2/getProductList',
          DataSource: TableDataSourceType.ServerDataSource,
          defaultColumns: [],
          contextMenus: [{ menuName: 'test1' }, { menuName: 'test2' }],
          LocalData: [],
          defaultFilterIndex: 0,
          currentPageNo: this.currentPage,
          pageSize: this.pageSize,
          showSerialNo: true,
          serialNoWidth: '40px',
          filterOption: FilterDisplayOption.ColumnWiseMultiFilter,
          columns: [],
          showSettingButton: true,
          hidePaginationControl: true,
          showActionButton: false,
          actionKeys: [
            { icon: 'fas fa-edit', text: 'view', title: 'View', type: 'button' },
          ],
          actionColumnStyle: { 'text-align': 'center', width: '100px' },
        };
        this.genericSimpleTableConfig.simpleTablesettings =
          this.simpleTableSettings;
        this.simpleTable.isimpleTableConfig.simpleTablesettings =
      this.simpleTableSettings;
        this.simpleTable.refresh();
    }

//if call from api then
//this.simpleTable.isimpleTableConfig.authToken =
// 'bearer eyJhbGciOiJIUzI1NiIsImtpZCI6IjEyMzQ1IiwidHlwIjoiSldUIn0.';
//this.simpleTable.isimpleTableConfig.apiUrl = 'https://localhost:44396/api';
//set simpleTableSettings.apiEndPoints='/V2/getProductList'
//set simpleTableSettings.DataSource:TableDataSourceType.ServerDataSource;
//-----
//else
// set simpleTableSettings.DataSource:TableDataSourceType.LocalDataSource;
// set LocalData:arrayofdata

    onActionClick(event: any) {}
    onPageChange(event: any) {}
    onColumnSettingChange(event: any) {}
}

in Style.scss add following line

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Demo

Following sample code is to use dynamic reports saved in database

• in module.ts

  import { ImsReportModule, DropDownMenuDirective} from 'ng-report-grid';
  import { PageNotFoundComponent } from './not-found/not-found.component';

• in app.router.ts

const routes:Routes=[
    {
        path:'',
        component:AppComponent
    },
    {
        path:'reports',
        loadChildren:()=>import('ng-report-grid').then(m=>m.ImsReportModule),
        pathMatch:'full'

    },
    {
        path:'**',
        component:PageNotFoundComponent
    }
    
]

@NgModule({
    imports:[RouterModule.forRoot(routes,{enableTracing:true})]
})
export class AppRoutingModule{
    static forRoot():ModuleWithProviders<AppRoutingModule>{
        return {ngModule:AppRoutingModule}
    }
}

• in app.component.ts

<div>
  <h5>IMS Report</h5>
  <button dropdown-menu-open #p="dropdownMenuApi" (click)="p.open()"  apiUrl="https://localhost:44332" >open Report</button>
</div>

<router-outlet></router-outlet>

Demo for dyanamic menu