ng-report-grid
v0.2.9
Published
A Simple grid which can be used with static list or api connected list with pagination
Downloads
29
Readme
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>