Skip to content

Commit d219ca8

Browse files
CopilotChronosSF
Copilot
and
ChronosSF
committed
Add grid-lite samples - all 14 components created with routes
Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>
1 parent b0c2576 commit d219ca8

45 files changed

Lines changed: 1874 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/app/grid/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="grid-lite-wrapper">
2+
<section class="panel">
3+
<igc-button variant="outlined">Column properties</igc-button>
4+
<igc-switch
5+
label-position="before"
6+
[checked]="hasFormatters"
7+
(igcChange)="toggleFormatters($event.detail)">
8+
Value formatters:
9+
</igc-switch>
10+
</section>
11+
12+
<igc-grid-lite
13+
#gridLite
14+
[columns]="columns"
15+
[data]="data">
16+
</igc-grid-lite>
17+
</div>

‎src/app/grid/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
:host {
2+
contain: content;
3+
--ig-size: 2;
4+
}
5+
6+
.grid-lite-wrapper {
7+
width: 100%;
8+
height: 100%;
9+
}
10+
11+
.panel {
12+
margin: 1rem 0;
13+
display: flex;
14+
flex-flow: row nowrap;
15+
justify-content: space-between;
16+
align-items: center;
17+
}
18+
19+
igc-grid-lite {
20+
min-height: 65vh;
21+
}

‎src/app/grid/grid-lite/grid-lite-column-config-dynamic/grid-lite-column-config-dynamic.component.ts‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { defineComponents, IgcButtonComponent, IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
4+
import { IgcGridLite } from 'igc-grid-lite';
5+
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
6+
7+
IgcGridLite.register();
8+
defineComponents(IgcCheckboxComponent, IgcDropdownComponent, IgcSwitchComponent, IgcButtonComponent);
9+
10+
@Component({
11+
selector: 'app-grid-lite-column-config-dynamic',
12+
templateUrl: './grid-lite-column-config-dynamic.component.html',
13+
styleUrls: ['./grid-lite-column-config-dynamic.component.scss'],
14+
imports: [CommonModule],
15+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
16+
})
17+
export class GridLiteColumnConfigDynamicComponent implements OnInit {
18+
private dataService = inject(GridLiteDataService);
19+
20+
@ViewChild('gridLite', { static: false }) gridLite!: ElementRef;
21+
22+
public data: ProductInfo[] = [];
23+
public columns: any[] = [];
24+
public hasFormatters = true;
25+
26+
private formatter = new Intl.NumberFormat('en-EN', {
27+
style: 'currency',
28+
currency: 'EUR',
29+
});
30+
31+
ngOnInit() {
32+
this.data = this.dataService.generateProducts(50);
33+
34+
this.columns = [
35+
{
36+
key: 'id',
37+
hidden: true,
38+
headerText: 'ID',
39+
width: '15rem'
40+
},
41+
{
42+
key: 'name',
43+
headerText: 'Product Name',
44+
width: '15rem'
45+
},
46+
{
47+
key: 'price',
48+
headerText: 'Price',
49+
type: 'number',
50+
width: '15rem',
51+
cellTemplate: (params: any) => {
52+
const span = document.createElement('span');
53+
span.textContent = this.formatter.format(params.value);
54+
return span;
55+
}
56+
},
57+
{
58+
key: 'sold',
59+
type: 'number',
60+
headerText: 'Units sold',
61+
width: '15rem'
62+
},
63+
{
64+
key: 'total',
65+
headerText: 'Total sold',
66+
width: '15rem',
67+
cellTemplate: (params: any) => {
68+
const span = document.createElement('span');
69+
span.textContent = this.formatter.format(params.value);
70+
return span;
71+
}
72+
},
73+
{
74+
key: 'rating',
75+
type: 'number',
76+
headerText: 'Customer rating',
77+
width: '15rem',
78+
cellTemplate: (params: any) => {
79+
const rating = document.createElement('igc-rating');
80+
rating.setAttribute('readonly', '');
81+
rating.setAttribute('step', '0.01');
82+
rating.setAttribute('value', params.value.toString());
83+
return rating;
84+
}
85+
}
86+
];
87+
}
88+
89+
updateColumnProperty(key: string, prop: string, value: any) {
90+
const grid = this.gridLite?.nativeElement as any;
91+
if (grid && grid.updateColumns) {
92+
grid.updateColumns({ key, [prop]: value });
93+
}
94+
}
95+
96+
toggleFormatters(enabled: boolean) {
97+
this.hasFormatters = enabled;
98+
const grid = this.gridLite?.nativeElement as any;
99+
if (grid && grid.updateColumns) {
100+
const updates = ['price', 'total'].map(key => ({
101+
key,
102+
cellTemplate: enabled ? (params: any) => {
103+
const span = document.createElement('span');
104+
span.textContent = this.formatter.format(params.value);
105+
return span;
106+
} : undefined
107+
}));
108+
grid.updateColumns(updates);
109+
}
110+
}
111+
}

‎src/app/grid/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="grid-lite-wrapper">
2+
<igc-grid-lite
3+
[columns]="columns"
4+
[data]="data">
5+
</igc-grid-lite>
6+
</div>

‎src/app/grid/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
:host {
2+
contain: content;
3+
--ig-size: 2;
4+
}
5+
6+
.grid-lite-wrapper {
7+
width: 100%;
8+
height: 100%;
9+
}
10+
11+
igc-grid-lite {
12+
min-height: 65vh;
13+
}

‎src/app/grid/grid-lite/grid-lite-column-config-headers/grid-lite-column-config-headers.component.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
4+
import { IgcGridLite } from 'igc-grid-lite';
5+
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
6+
7+
IgcGridLite.register();
8+
defineComponents(IgcRatingComponent);
9+
10+
@Component({
11+
selector: 'app-grid-lite-column-config-headers',
12+
templateUrl: './grid-lite-column-config-headers.component.html',
13+
styleUrls: ['./grid-lite-column-config-headers.component.scss'],
14+
imports: [CommonModule],
15+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
16+
})
17+
export class GridLiteColumnConfigHeadersComponent implements OnInit {
18+
private dataService = inject(GridLiteDataService);
19+
20+
public data: ProductInfo[] = [];
21+
public columns: any[] = [];
22+
23+
ngOnInit() {
24+
this.data = this.dataService.generateProducts(50);
25+
26+
this.columns = [
27+
{
28+
key: 'name',
29+
headerText: 'Product Name'
30+
},
31+
{
32+
key: 'price',
33+
headerText: 'Price (€)',
34+
type: 'number'
35+
},
36+
{
37+
key: 'sold',
38+
type: 'number',
39+
headerText: 'Units Sold'
40+
},
41+
{
42+
key: 'total',
43+
headerText: 'Total Revenue',
44+
type: 'number'
45+
},
46+
{
47+
key: 'rating',
48+
type: 'number',
49+
headerText: 'Customer Rating ⭐',
50+
cellTemplate: (params: any) => {
51+
const rating = document.createElement('igc-rating');
52+
rating.setAttribute('readonly', '');
53+
rating.setAttribute('step', '0.01');
54+
rating.setAttribute('value', params.value.toString());
55+
return rating;
56+
}
57+
}
58+
];
59+
}
60+
}

‎src/app/grid/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="grid-lite-wrapper">
2+
<igc-grid-lite
3+
[columns]="columns"
4+
[data]="data">
5+
</igc-grid-lite>
6+
</div>

‎src/app/grid/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
:host {
2+
contain: content;
3+
--ig-size: 2;
4+
}
5+
6+
.grid-lite-wrapper {
7+
width: 100%;
8+
height: 100%;
9+
}
10+
11+
igc-grid-lite {
12+
min-height: 65vh;
13+
}

‎src/app/grid/grid-lite/grid-lite-column-config-simple/grid-lite-column-config-simple.component.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, inject } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
4+
import { IgcGridLite } from 'igc-grid-lite';
5+
import { GridLiteDataService, ProductInfo } from '../grid-lite-data.service';
6+
7+
IgcGridLite.register();
8+
defineComponents(IgcRatingComponent);
9+
10+
@Component({
11+
selector: 'app-grid-lite-column-config-simple',
12+
templateUrl: './grid-lite-column-config-simple.component.html',
13+
styleUrls: ['./grid-lite-column-config-simple.component.scss'],
14+
imports: [CommonModule],
15+
schemas: [CUSTOM_ELEMENTS_SCHEMA]
16+
})
17+
export class GridLiteColumnConfigSimpleComponent implements OnInit {
18+
private dataService = inject(GridLiteDataService);
19+
20+
public data: ProductInfo[] = [];
21+
public columns: any[] = [];
22+
23+
private formatter = new Intl.NumberFormat('en-EN', {
24+
style: 'currency',
25+
currency: 'EUR',
26+
});
27+
28+
ngOnInit() {
29+
this.data = this.dataService.generateProducts(50);
30+
31+
this.columns = [
32+
{
33+
key: 'name',
34+
headerText: 'Product Name'
35+
},
36+
{
37+
key: 'price',
38+
headerText: 'Price',
39+
type: 'number',
40+
cellTemplate: (params: any) => {
41+
const span = document.createElement('span');
42+
span.textContent = this.formatter.format(params.value);
43+
return span;
44+
}
45+
},
46+
{
47+
key: 'sold',
48+
type: 'number',
49+
headerText: 'Units sold'
50+
},
51+
{
52+
key: 'total',
53+
headerText: 'Total sold',
54+
cellTemplate: (params: any) => {
55+
const span = document.createElement('span');
56+
span.textContent = this.formatter.format(params.value);
57+
return span;
58+
}
59+
},
60+
{
61+
key: 'rating',
62+
type: 'number',
63+
headerText: 'Customer rating',
64+
cellTemplate: (params: any) => {
65+
const rating = document.createElement('igc-rating');
66+
rating.setAttribute('readonly', '');
67+
rating.setAttribute('step', '0.01');
68+
rating.setAttribute('value', params.value.toString());
69+
return rating;
70+
}
71+
}
72+
];
73+
}
74+
}

‎src/app/grid/grid-lite/grid-lite-data-binding-dynamic/grid-lite-data-binding-dynamic.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="grid-lite-wrapper">
2+
<section>
3+
<igc-button (click)="switchData()">Switch data</igc-button>
4+
<igc-grid-lite
5+
#gridLite
6+
auto-generate
7+
[data]="data">
8+
</igc-grid-lite>
9+
</section>
10+
</div>

0 commit comments

Comments
 (0)