Skip to content

Commit 2bd3393

Browse files
damyanpetevdamyanpetev
authored
Merge pull request #1562 from IgniteUI/dpetev/webcomponents-grids-fixes
Web Components Grids fixes
2 parents f2e86d5 + 7b0d992 commit 2bd3393

File tree

11 files changed

+216
-285
lines changed

11 files changed

+216
-285
lines changed

‎packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { describe, it, expect } from 'vitest';
22
import $(ClassName) from './$(path).js';
33

4-
describe('IgcDataGridComponent', () => {
4+
describe('IgcGridComponent', () => {
55
it('<app-$(path)> is an instance of $(ClassName)', async () => {
66
const element = document.createElement('app-$(path)');
77
expect(element).to.be.instanceOf($(ClassName));

‎packages/cli/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts‎

Lines changed: 56 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,76 @@
11
import { html, css, LitElement } from 'lit';
2-
import { customElement } from 'lit/decorators.js';
3-
import {
4-
IgcDataGridModule,
5-
IgcGridColumnOptionsModule,
6-
IgcDataGridComponent,
7-
IgcColumnGroupDescription,
8-
} from 'igniteui-webcomponents-grids';
9-
import { ModuleManager } from 'igniteui-webcomponents-core';
2+
import { customElement, state } from 'lit/decorators.js';
3+
import { IgcGridComponent, IgcGroupingExpression, SortingDirection } from 'igniteui-webcomponents-grids';
104

11-
ModuleManager.register(
12-
IgcDataGridModule,
13-
IgcGridColumnOptionsModule,
14-
);
5+
import gridThemeLightMaterial from 'igniteui-webcomponents-grids/grids/themes/light/material.css?inline'
6+
7+
IgcGridComponent.register();
158

169
@customElement('app-$(path)')
1710
export default class $(ClassName) extends LitElement {
18-
data: any[] = [{
19-
Country: 'USA',
20-
CountryFlag: 'https://static.infragistics.com/xplatform/images/flags/USA.png',
21-
Margin: 3,
22-
OrderDate: new Date(2021, 4, 3),
23-
OrderItems: 7,
24-
OrderValue: 500,
25-
ProductID: 1001,
26-
ProductName: 'Patriot Memory',
27-
ProductPrice: 2000,
28-
Status: 'Shipped',
29-
},
30-
{
31-
Country: 'Croatia',
32-
CountryFlag: 'https://static.infragistics.com/xplatform/images/flags/Croatia.png',
33-
Margin: 5,
34-
OrderDate: new Date(2021, 1, 10),
35-
OrderItems: 11,
36-
OrderValue: 760,
37-
ProductID: 1002,
38-
ProductName: 'Asus GPU',
39-
ProductPrice: 3000,
40-
Status: 'Packing',
41-
}];
42-
4311
static styles = css`
4412
:host {
4513
height: 100%;
4614
margin: 0px;
4715
padding-right: 20px;
4816
width: calc(100% - 600px);
4917
}
18+
igc-grid img {
19+
object-fit: contain;
20+
height: 100%;
21+
width: 100%;
22+
}
5023
`;
5124

25+
@state()
26+
data: any[] = [{
27+
country: 'USA',
28+
countryFlag: 'https://static.infragistics.com/xplatform/images/flags/USA.png',
29+
margin: 0.03,
30+
orderDate: new Date(2021, 4, 3),
31+
orderItems: 7,
32+
orderValue: 500,
33+
productID: 1001,
34+
productName: 'Patriot Memory',
35+
productPrice: 2000,
36+
status: 'Shipped',
37+
},
38+
{
39+
country: 'Croatia',
40+
countryFlag: 'https://static.infragistics.com/xplatform/images/flags/Croatia.png',
41+
margin: 0.05,
42+
orderDate: new Date(2021, 1, 10),
43+
orderItems: 11,
44+
orderValue: 760,
45+
productID: 1002,
46+
productName: 'Asus GPU',
47+
productPrice: 3000,
48+
status: 'Packing',
49+
}];
50+
51+
@state()
52+
groupingExpressions: IgcGroupingExpression[] = [
53+
{ fieldName: 'status', dir: SortingDirection.Desc },
54+
];
55+
5256
render() {
5357
return html`
54-
<igc-data-grid
55-
id="grid"
56-
height="100%"
57-
width="100%"
58-
auto-generate-columns="false"
59-
is-column-options-enabled="true"
58+
<style>${gridThemeLightMaterial}</style>
59+
<igc-grid
60+
class="ig-typography"
61+
.data=${this.data}
62+
.groupingExpressions=${this.groupingExpressions}
63+
filter-mode="excelStyleFilter"
6064
>
61-
<igc-text-column field="ProductID" header-text="ID" width="*>95"></igc-text-column>
62-
<igc-text-column field="ProductName" header-text="Product" width="*>160"></igc-text-column>
63-
<igc-image-column field="CountryFlag" header-text="Country" width="*>120" contentOpacity="1"
64-
padding-top="5" padding-bottom="5"></igc-image-column>
65-
<igc-numeric-column field="OrderItems" header-text="Orders" width="*>105"></igc-numeric-column>
66-
<igc-numeric-column field="OrderValue" header-text="Order Value" width="*>140" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>
67-
<igc-date-time-column field="OrderDate" header-text="Order Date" width="*>135" dateTimeFormat="DateShort" ></igc-date-time-column>
68-
<igc-numeric-column field="Margin" header-text="Margin" width="*>115" positive-suffix="%"></igc-numeric-column>
69-
<igc-text-column field="Status" header-text="Status" width="*>100"></igc-text-column>
70-
</igc-data-grid>
65+
<igc-column field="productID" header="ID" width="90px"></igc-column>
66+
<igc-column field="productName" header="Product" width="160px"></igc-column>
67+
<igc-column field="countryFlag" header="Country" data-type="image" width="100px"></igc-column>
68+
<igc-column field="orderItems" header="Orders" data-type="number" width="100px"></igc-column>
69+
<igc-column field="orderValue" header="Order Value" data-type="currency" width="140px"></igc-column>
70+
<igc-column field="orderDate" header="Order Date" data-type="date"></igc-column>
71+
<igc-column field="margin" header="Margin" data-type="percent" width="100px"></igc-column>
72+
<igc-column field="status" header="Status" width="100px" groupable></igc-column>
73+
</igc-grid>
7174
`;
7275
}
73-
74-
firstUpdated() {
75-
const grid = this.shadowRoot?.getElementById('grid') as IgcDataGridComponent;
76-
grid.dataSource = this.data;
77-
78-
const grouping = new IgcColumnGroupDescription();
79-
grouping.field = 'Status';
80-
grouping.displayName = 'Status';
81-
grid.groupDescriptions.add(grouping);
82-
}
8376
}

‎packages/cli/templates/webcomponents/igc-ts/grid/default/index.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,7 @@ class IgcGridTemplate extends IgniteUIForWebComponentsTemplate {
1010
this.projectType = "igc-ts";
1111
this.name = "Grid";
1212
this.description = "IgcGrid with local data";
13-
this.packages = [
14-
"igniteui-webcomponents-core@~6.0.0",
15-
"igniteui-webcomponents-grids@~6.0.0",
16-
"igniteui-webcomponents-inputs@~6.0.0",
17-
"igniteui-webcomponents-layouts@~6.0.0"
18-
];
13+
this.packages = [ "igniteui-webcomponents-grids@~6.0.0" ];
1914
}
2015
}
2116
module.exports = new IgcGridTemplate();

0 commit comments

Comments
 (0)