Skip to content
GitLab
Commit 10f28501 authored by Arun Kumar's avatar Arun Kumar
Browse files

more features add to generic table

parent 7193e9b8
master bulk-upload-csv examcycleValiation further-features-generic-table
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 187 additions and 201 deletions
+187 -201
src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html
+ 8
− 1
View file @ 10f28501
......@@ -3,4 +3,11 @@
</div>
<app-shared-table> </app-shared-table>
\ No newline at end of file
<app-shared-table
[tableColumns]="examsTableColumns"
[tableData]="exams"
[isPageable]="true"
(rowAction)="removeItem($event)"
>
</app-shared-table>
\ No newline at end of file
src/app/modules/manage-exams-module/components/exams-table/exams-table.component.ts
+ 112
− 3
View file @ 10f28501
import { Component } from '@angular/core';
import {msgs} from "../../../../../locale/en";
import {TableColumn} from '../../../shared/components/shared-table/shared-table.component';
export interface Exams {
id: number;
description: string;
amount: number;
price: number;
discount: number;
isActive?: boolean;
}
@Component({
selector: 'app-exams-table',
templateUrl: './exams-table.component.html',
styleUrls: ['./exams-table.component.scss']
})
export class ExamsTableComponent {
msgs = msgs;
ngOnInit() {
console.log(this.msgs.manageExamsText);
}
exams: Exams[];
examsTableColumns : TableColumn[];
ngOnInit(): void {
this.initializeColumns();
console.log(this.examsTableColumns)
this.getExams();
console.log(this.exams)
}
initializeColumns(): void {
this.examsTableColumns = [
{
columnDef: 'id',
header: 'Exam Cycle',
isSortable:true,
cell: (element: Record<string, any>) => `${element['id']}`
},
{
columnDef: 'description',
header: 'Course Name',
isSortable:true,
cell: (element: Record<string, any>) => `${element['description']}`
},
{
columnDef: 'amount',
header: 'Start Date',
isSortable:true,
cell: (element: Record<string, any>) => `${element['amount']}`
},
{
columnDef: 'price',
header: 'End Date',
isSortable:true,
cell: (element: Record<string, any>) => `${element['price']}`
},
{
columnDef: 'discount',
header: '',
isSortable:false,
cell: (element: Record<string, any>) => `View Schedule`
},
{
columnDef: 'isActive',
header: '',
isSortable:false,
isAction:true,
cell: (element: Record<string, any>) => `${element['isActive']}`
}
];
}
getExams() {
this.exams = [
{
id: 1,
description: 'first book',
amount: 100,
price: 120,
discount: 20,
isActive: true
},
{
id: 2,
description: 'second book',
amount: 100,
price: 120,
discount: 20,
isActive: true
},
{
id: 3,
description: 'third book',
amount: 100,
price: 120,
discount: 20,
isActive: true
},
{
id: 4,
description: 'fourth book',
amount: 100,
price: 120,
discount: 20,
isActive: true
},
{
id: 5,
description: 'fifth book',
amount: 100,
price: 120,
discount: 20,
isActive: true
}
];
}
removeItem(e : Event){
console.log(e)
}
}
src/app/modules/shared/components/shared-table/shared-table.component.html
+ 27
− 45
View file @ 10f28501
<!--
<p-table [columns]="cols" [value]="value"
styleClass="p-datatable-striped"
[tableStyle]="{'min-width': '60rem'}">
<ng-template pTemplate="caption">
<div class="flex align-items-center justify-content-between">
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{ col.header }}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-product>
<tr>
<td>{{product.name}}</td>
<td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
<td>{{product.price | currency:'USD'}}</td>
<td>{{product.category}}</td>
<td>{{product.category}}</td>
<td> <button><i class="pi pi-times" style="font-size: 1.5rem"></i></button></td>
</tr>
</ng-template>
<ng-template pTemplate="summary">
<div class="flex align-items-center justify-content-between">
In total there are ... products.
</div>
</ng-template>
</p-table> -->
<div style="margin: 105px;">
<mat-form-field>
<input matInput appearance="standard" (keyup)="applyFilter($event.target.value)" placeholder="Search">
<input matInput appearance="standard" (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>
<span>
<mat-icon class="" fontIcon="filter_list_alt"></mat-icon>
......@@ -42,23 +9,35 @@ styleClass="p-datatable-striped"
</span>
<table class="m4" mat-table [dataSource]="dataSource" class="mat-elevation-z1" matSort
sortActionDescription="Sort by number" (matSortChange)="announceSortChange($event)">
sortActionDescription="Sort by number">
<ng-container matColumnDef="position" *ngFor="let disCol of tableColumns let colIndex = index;"
matColumnDef="{{disCol.columnDef}}">
<td mat-header-cell *matHeaderCellDef mat-sort-header>
{{ disCol.header }}
</td>
<!-- if sortable column header -->
<ng-container *ngIf="disCol.isSortable; else notSortable">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{disCol.header}}
</th>
</ng-container>
<!-- else not sortable -->
<ng-template #notSortable>
<th mat-header-cell *matHeaderCellDef>
{{disCol.header}}
</th>
</ng-template>
<td mat-cell *matCellDef="let element">
<span *ngIf="!disCol.isLink; else link">
<td mat-cell *matCellDef="let element" [id]="rowAction" (click)="onRowClick(element)">
<span *ngIf="!disCol.isAction; else action">
{{ disCol.cell(element) }}
</span>
<ng-template #link>
<a>
{{ disCol.cell(element) }}
</a>
<ng-template #action>
<button mat-button [id]="rowActionIcon" (click)="emitRowAction(element)">
<mat-icon>delete</mat-icon>
</button>
</ng-template>
</td>
</ng-container>
......@@ -66,6 +45,9 @@ styleClass="p-datatable-striped"
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Select page of periodic elements">
<mat-paginator *ngIf="isPageable"
[pageSizeOptions]="[10, 20, 50]"
showFirstLastButtons aria-label="Select page..">
</mat-paginator>
</div>
\ No newline at end of file
src/app/modules/shared/components/shared-table/shared-table.component.ts
+ 40
− 152
View file @ 10f28501
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import {LiveAnnouncer} from '@angular/cdk/a11y';
import { AfterViewInit, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort, Sort} from '@angular/material/sort';
......@@ -16,30 +15,20 @@ export interface TableProps {
rating?: number;
}
export interface TableProps1 {
firstColumnData?: string;
secondColumnData?: string;
thirdColumnData?: string;
fourthColumnData?: string;
fifthColumnData?: number;
sixthColumnData?: number;
seventhColumnData?: string;
eighthColumnData?: string;
ninthColumnData?: string;
tenthColumnData?: number;
}
/* interface Column {
field: string;
header: string;
} */
export interface Column {
export interface TableColumn {
columnDef: string;
header: string;
cell: Function;
isLink?: boolean;
isAction?: boolean;
url?: string;
isSortable?: boolean;
}
@Component({
......@@ -48,153 +37,37 @@ export interface Column {
styleUrls: ['./shared-table.component.scss']
})
export class SharedTableComponent implements AfterViewInit {
constructor(private _liveAnnouncer: LiveAnnouncer) {}
value!: TableProps[];
cols!: Column[];
tableColumns: Array<Column> = [
{
columnDef: 'position',
header: 'Exam cycle',
cell: (element: Record<string, any>) => `${element['position']}`
},
{
columnDef: 'name',
header: 'Course Name',
cell: (element: Record<string, any>) => `${element['name']}`,
isLink: true,
url: 'abc'
},
{
columnDef: 'weight',
header: 'Start date',
cell: (element: Record<string, any>) => `${element['weight']}`
},
{
columnDef: 'symbol',
header: 'End date',
cell: (element: Record<string, any>) => `${element['symbol']}`
}
];
anotherTableColumns: Array<Column> = [
{
columnDef: 'name',
header: 'Name',
cell: (element: Record<string, any>) => `${element['name']}`
},
{
columnDef: 'role',
header: 'Role',
cell: (element: Record<string, any>) => `${element['role']}`
},
{
columnDef: 'skills',
header: 'Skills',
cell: (element: Record<string, any>) => `${element['skills']}`
}
];
anotherTableData: Array<any> = [
{
name: 'John',
role: 'Fullstack Developer',
skills: 'Angular, Typescript, React'
},
{ name: 'Mile', role: 'Java Developer', skills: 'Java' },
{ name: 'Peter', role: 'DevOps', skills: 'AWS, GCP' }
];
tableData: Array<any> = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' }
];;
cols!: TableColumn[];
displayedColumns: Array<string> = [];
dataSource: MatTableDataSource<[any]> = new MatTableDataSource();
//dataSource = new MatTableDataSource([])
//dataSource: MatTableDataSource<[any]> = new MatTableDataSource();
public dataSource = new MatTableDataSource([]);
// dataSource = new MatTableDataSource([])
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@Input() isPageable = true;
@Input() tableColumns: TableColumn[];
@Input() set tableData(data: any[]) {
this.setTableDataSource(data);
}
@Output() rowAction: EventEmitter<any> = new EventEmitter<any>();
constructor() {}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
announceSortChange(sortState: Sort) {
console.log(sortState)
// This example uses English messages. If your application supports
// multiple language, you would internationalize these strings.
// Furthermore, you can customize the message to add additional
// details about the values being sorted.
if (sortState.direction) {
this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
} else {
this._liveAnnouncer.announce('Sorting cleared');
}
ngOnInit(): void {
this.displayedColumns = this.tableColumns.map((tableColumn:any) => tableColumn.columnDef);
}
ngOnInit() {
this.displayedColumns = this.tableColumns.map((c) => c.columnDef);
this.dataSource = new MatTableDataSource(this.tableData);
/* this.value = [{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
}, {
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},] */
/* this.cols = [
{ field: 'code', header: 'Exam Cycle' },
{ field: 'name', header: 'Course Name' },
{ field: 'category', header: 'Start Date' },
{ field: 'quantity', header: 'End Date' },
{ field: '', header: '' }
];
*/
};
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
......@@ -203,4 +76,19 @@ export class SharedTableComponent implements AfterViewInit {
this.dataSource.paginator.firstPage();
}
}
onRowClick(e: Event){
console.log(e);
}
setTableDataSource(data : any) {
this.dataSource = new MatTableDataSource(data);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
emitRowAction(row: any) {
this.rowAction.emit(row);
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment