Skip to content

Commit 8c75cc7

Browse files
Copilotdamyanpetev
Copilot
and
damyanpetev
committed
Transform all Grid Lite samples to use declarative column API v0.4.0
Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
1 parent 75424ab commit 8c75cc7

25 files changed

Lines changed: 297 additions & 459 deletions

File tree

‎samples/grids/grid-lite/column-config-basic/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"lint": "eslint ./src/**/*.{ts,tsx}"
1515
},
1616
"dependencies": {
17-
"igniteui-grid-lite": "^0.0.1",
17+
"igniteui-grid-lite": "~0.4.0",
1818
"igniteui-react": "^19.4.0",
1919
"igniteui-webcomponents": "^6.3.0",
2020
"lit-html": "^3.2.0",

‎samples/grids/grid-lite/column-config-basic/src/index.tsx‎

Lines changed: 36 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -35,50 +35,36 @@ export default class Sample extends React.Component<any, any> {
3535
if (this.gridRef.current) {
3636
const data: ProductInfo[] = this.dataService.generateProducts(50);
3737

38-
const columns = [
39-
{
40-
key: 'name',
41-
headerText: 'Product Name'
42-
},
43-
{
44-
key: 'price',
45-
headerText: 'Price',
46-
type: 'number',
47-
cellTemplate: (params: any) => {
48-
const span = document.createElement('span');
49-
span.textContent = this.formatter.format(params.value);
50-
return span;
51-
}
52-
},
53-
{
54-
key: 'sold',
55-
type: 'number',
56-
headerText: 'Units sold'
57-
},
58-
{
59-
key: 'total',
60-
headerText: 'Total sold',
61-
cellTemplate: (params: any) => {
62-
const span = document.createElement('span');
63-
span.textContent = this.formatter.format(params.value);
64-
return span;
65-
}
66-
},
67-
{
68-
key: 'rating',
69-
type: 'number',
70-
headerText: 'Customer rating',
71-
cellTemplate: (params: any) => {
72-
const rating = document.createElement('igc-rating');
73-
rating.setAttribute('readonly', '');
74-
rating.setAttribute('step', '0.01');
75-
rating.setAttribute('value', params.value.toString());
76-
return rating;
77-
}
78-
}
79-
];
38+
// Set cellTemplate for columns with custom rendering
39+
const priceCol = this.gridRef.current.columns.find((c: any) => c.field === 'price');
40+
if (priceCol) {
41+
priceCol.cellTemplate = (params: any) => {
42+
const span = document.createElement('span');
43+
span.textContent = this.formatter.format(params.value);
44+
return span;
45+
};
46+
}
47+
48+
const totalCol = this.gridRef.current.columns.find((c: any) => c.field === 'total');
49+
if (totalCol) {
50+
totalCol.cellTemplate = (params: any) => {
51+
const span = document.createElement('span');
52+
span.textContent = this.formatter.format(params.value);
53+
return span;
54+
};
55+
}
56+
57+
const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating');
58+
if (ratingCol) {
59+
ratingCol.cellTemplate = (params: any) => {
60+
const rating = document.createElement('igc-rating');
61+
rating.setAttribute('readonly', '');
62+
rating.setAttribute('step', '0.01');
63+
rating.setAttribute('value', params.value.toString());
64+
return rating;
65+
};
66+
}
8067

81-
this.gridRef.current.columns = columns;
8268
this.gridRef.current.data = data;
8369
}
8470
}
@@ -87,7 +73,13 @@ export default class Sample extends React.Component<any, any> {
8773
return (
8874
<div className="container sample ig-typography">
8975
<div className="grid-lite-wrapper">
90-
<igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
76+
<igc-grid-lite ref={this.gridRef} id="grid-lite">
77+
<igc-grid-lite-column field="name" header="Product Name"></igc-grid-lite-column>
78+
<igc-grid-lite-column field="price" header="Price" data-type="number"></igc-grid-lite-column>
79+
<igc-grid-lite-column field="sold" data-type="number" header="Units sold"></igc-grid-lite-column>
80+
<igc-grid-lite-column field="total" header="Total sold"></igc-grid-lite-column>
81+
<igc-grid-lite-column field="rating" data-type="number" header="Customer rating"></igc-grid-lite-column>
82+
</igc-grid-lite>
9183
</div>
9284
</div>
9385
);

‎samples/grids/grid-lite/column-config-dynamic/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"lint": "eslint ./src/**/*.{ts,tsx}"
1515
},
1616
"dependencies": {
17-
"igniteui-grid-lite": "^0.0.1",
17+
"igniteui-grid-lite": "~0.4.0",
1818
"igniteui-react": "^19.4.0",
1919
"igniteui-webcomponents": "^6.3.0",
2020
"lit-html": "^3.2.0",

‎samples/grids/grid-lite/column-config-dynamic/src/index.tsx‎

Lines changed: 55 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -35,34 +35,34 @@ export default class Sample extends React.Component<any, any> {
3535
};
3636
protected columns = [
3737
{
38-
key: 'id',
38+
field: 'id',
3939
hidden: true,
40-
headerText: 'ID'
40+
header: 'ID'
4141
},
4242
{
43-
key: 'name',
44-
headerText: 'Product Name'
43+
field: 'name',
44+
header: 'Product Name'
4545
},
4646
{
47-
key: 'price',
48-
headerText: 'Price',
49-
type: 'number',
47+
field: 'price',
48+
header: 'Price',
49+
dataType: 'number',
5050
cellTemplate: this.format
5151
},
5252
{
53-
key: 'sold',
54-
type: 'number',
55-
headerText: 'Units sold'
53+
field: 'sold',
54+
dataType: 'number',
55+
header: 'Units sold'
5656
},
5757
{
58-
key: 'total',
59-
headerText: 'Total sold',
58+
field: 'total',
59+
header: 'Total sold',
6060
cellTemplate: this.format
6161
},
6262
{
63-
key: 'rating',
64-
type: 'number',
65-
headerText: 'Customer rating',
63+
field: 'rating',
64+
dataType: 'number',
65+
header: 'Customer rating',
6666
cellTemplate: (params: any) => {
6767
const rating = document.createElement('igc-rating');
6868
rating.setAttribute('readonly', '');
@@ -86,25 +86,41 @@ export default class Sample extends React.Component<any, any> {
8686
if (this.gridRef.current) {
8787
const data: ProductInfo[] = this.dataService.generateProducts(50);
8888

89-
this.gridRef.current.columns = this.columns;
89+
// Set cellTemplates programmatically for columns that need them
90+
const priceCol = this.gridRef.current.columns.find((c: any) => c.field === 'price');
91+
if (priceCol && this.columns.find(col => col.field === 'price')?.cellTemplate) {
92+
priceCol.cellTemplate = this.format;
93+
}
94+
95+
const totalCol = this.gridRef.current.columns.find((c: any) => c.field === 'total');
96+
if (totalCol && this.columns.find(col => col.field === 'total')?.cellTemplate) {
97+
totalCol.cellTemplate = this.format;
98+
}
99+
100+
const ratingCol = this.gridRef.current.columns.find((c: any) => c.field === 'rating');
101+
const ratingColDef = this.columns.find(col => col.field === 'rating');
102+
if (ratingCol && ratingColDef?.cellTemplate) {
103+
ratingCol.cellTemplate = ratingColDef.cellTemplate;
104+
}
105+
90106
this.gridRef.current.data = data;
91107
}
92108
}
93109

94110
toggleFormatters(checked: boolean) {
95111
if (this.gridRef.current) {
96112
this.gridRef.current.updateColumns(
97-
['price', 'total'].map((key) => ({
98-
key,
113+
['price', 'total'].map((field) => ({
114+
field,
99115
cellTemplate: checked ? this.format : undefined,
100116
}))
101117
);
102118
}
103119
}
104120

105-
toggleColumnProperty(columnKey: string, property: string, value: boolean) {
121+
toggleColumnProperty(columnField: string, property: string, value: boolean) {
106122
if (this.gridRef.current) {
107-
this.gridRef.current.updateColumns({ key: columnKey, [property]: value });
123+
this.gridRef.current.updateColumns({ field: columnField, [property]: value });
108124
}
109125
}
110126

@@ -124,31 +140,31 @@ export default class Sample extends React.Component<any, any> {
124140
<IgrButton variant="outlined"><span>Column Properties</span></IgrButton>
125141
</div>
126142
{this.columns.map((column: any) => (
127-
<IgrDropdownItem key={column.key}>
143+
<IgrDropdownItem key={column.field}>
128144
<div className="config">
129-
<span className="config-key">{column.headerText}</span>
145+
<span className="config-key">{column.header}</span>
130146
<IgrCheckbox
131147
labelPosition="before"
132148
checked={!column.hidden}
133-
onChange={(e: any) => this.toggleColumnProperty(column.key, 'hidden', !e.target.checked)}>
149+
onChange={(e: any) => this.toggleColumnProperty(column.field, 'hidden', !e.target.checked)}>
134150
Hidden
135151
</IgrCheckbox>
136152
<IgrCheckbox
137153
labelPosition="before"
138154
checked={column.resizable !== false}
139-
onChange={(e: any) => this.toggleColumnProperty(column.key, 'resizable', e.target.checked)}>
155+
onChange={(e: any) => this.toggleColumnProperty(column.field, 'resizable', e.target.checked)}>
140156
Resizable
141157
</IgrCheckbox>
142158
<IgrCheckbox
143159
labelPosition="before"
144-
checked={column.filter === true}
145-
onChange={(e: any) => this.toggleColumnProperty(column.key, 'filter', e.target.checked)}>
160+
checked={column.filterable === true}
161+
onChange={(e: any) => this.toggleColumnProperty(column.field, 'filterable', e.target.checked)}>
146162
Filter
147163
</IgrCheckbox>
148164
<IgrCheckbox
149165
labelPosition="before"
150-
checked={column.sort === true}
151-
onChange={(e: any) => this.toggleColumnProperty(column.key, 'sort', e.target.checked)}>
166+
checked={column.sortable === true}
167+
onChange={(e: any) => this.toggleColumnProperty(column.field, 'sortable', e.target.checked)}>
152168
Sort
153169
</IgrCheckbox>
154170
</div>
@@ -167,7 +183,17 @@ export default class Sample extends React.Component<any, any> {
167183
</IgrSwitch>
168184
</section>
169185
<div className="grid-lite-wrapper">
170-
<igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
186+
<igc-grid-lite ref={this.gridRef} id="grid-lite">
187+
{this.columns.map((column: any) => (
188+
<igc-grid-lite-column
189+
key={column.field}
190+
field={column.field}
191+
header={column.header}
192+
data-type={column.dataType}
193+
hidden={column.hidden}
194+
></igc-grid-lite-column>
195+
))}
196+
</igc-grid-lite>
171197
</div>
172198
</div >
173199
);

‎samples/grids/grid-lite/column-config-headers/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"lint": "eslint ./src/**/*.{ts,tsx}"
1515
},
1616
"dependencies": {
17-
"igniteui-grid-lite": "^0.0.1",
17+
"igniteui-grid-lite": "~0.4.0",
1818
"igniteui-react": "^19.4.0",
1919
"igniteui-webcomponents": "^6.3.0",
2020
"lit-html": "^3.2.0",

‎samples/grids/grid-lite/column-config-headers/src/index.tsx‎

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23,34 +23,6 @@ export default class Sample extends React.Component<any, any> {
2323
componentDidMount() {
2424
if (this.gridRef.current) {
2525
const data: User[] = this.dataService.generateUsers(50);
26-
27-
const columns = [
28-
{
29-
key: 'id',
30-
headerText: '🆔 ID',
31-
width: '150px'
32-
},
33-
{
34-
key: 'firstName',
35-
headerText: '👤 First Name'
36-
},
37-
{
38-
key: 'lastName',
39-
headerText: '👤 Last Name'
40-
},
41-
{
42-
key: 'age',
43-
headerText: '🎂 Age',
44-
type: 'number',
45-
width: '100px'
46-
},
47-
{
48-
key: 'email',
49-
headerText: '📧 Email'
50-
}
51-
];
52-
53-
this.gridRef.current.columns = columns;
5426
this.gridRef.current.data = data;
5527
}
5628
}
@@ -59,7 +31,13 @@ export default class Sample extends React.Component<any, any> {
5931
return (
6032
<div className="container sample ig-typography">
6133
<div className="grid-lite-wrapper">
62-
<igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
34+
<igc-grid-lite ref={this.gridRef} id="grid-lite">
35+
<igc-grid-lite-column field="id" header="🆔 ID" width="150px"></igc-grid-lite-column>
36+
<igc-grid-lite-column field="firstName" header="👤 First Name"></igc-grid-lite-column>
37+
<igc-grid-lite-column field="lastName" header="👤 Last Name"></igc-grid-lite-column>
38+
<igc-grid-lite-column field="age" header="🎂 Age" data-type="number" width="100px"></igc-grid-lite-column>
39+
<igc-grid-lite-column field="email" header="📧 Email"></igc-grid-lite-column>
40+
</igc-grid-lite>
6341
</div>
6442
</div>
6543
);

‎samples/grids/grid-lite/data-binding/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"lint": "eslint ./src/**/*.{ts,tsx}"
1515
},
1616
"dependencies": {
17-
"igniteui-grid-lite": "^0.0.1",
17+
"igniteui-grid-lite": "~0.4.0",
1818
"igniteui-react": "^19.4.0",
1919
"igniteui-webcomponents": "^6.3.0",
2020
"lit-html": "^3.2.0",

‎samples/grids/grid-lite/filtering-config-events/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"lint": "eslint ./src/**/*.{ts,tsx}"
1515
},
1616
"dependencies": {
17-
"igniteui-grid-lite": "^0.0.1",
17+
"igniteui-grid-lite": "~0.4.0",
1818
"igniteui-react": "^19.4.0",
1919
"igniteui-webcomponents": "^6.3.0",
2020
"lit-html": "^3.2.0",

‎samples/grids/grid-lite/filtering-config-events/src/index.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,6 @@ export default class Sample extends React.Component<any, any> {
3232
componentDidMount() {
3333
if (this.gridRef.current) {
3434
const data: User[] = this.dataService.generateUsers(50);
35-
36-
const columns = [
37-
{ key: 'firstName', headerText: 'First name', filter: true },
38-
{ key: 'lastName', headerText: 'Last name', filter: true },
39-
{ key: 'age', headerText: 'Age', filter: true, type: 'number' },
40-
{ key: 'email', headerText: 'Email', filter: true }
41-
];
42-
43-
this.gridRef.current.columns = columns;
4435
this.gridRef.current.data = data;
4536

4637
// Listen to filter events
@@ -77,7 +68,12 @@ export default class Sample extends React.Component<any, any> {
7768
return (
7869
<div className="container sample ig-typography">
7970
<div className="grid-lite-wrapper">
80-
<igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
71+
<igc-grid-lite ref={this.gridRef} id="grid-lite">
72+
<igc-grid-lite-column field="firstName" header="First name" filterable></igc-grid-lite-column>
73+
<igc-grid-lite-column field="lastName" header="Last name" filterable></igc-grid-lite-column>
74+
<igc-grid-lite-column field="age" header="Age" filterable data-type="number"></igc-grid-lite-column>
75+
<igc-grid-lite-column field="email" header="Email" filterable></igc-grid-lite-column>
76+
</igc-grid-lite>
8177
<div ref={this.logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: this.state.logContent }}></div>
8278
</div>
8379
</div>

‎samples/grids/grid-lite/filtering-config-remote/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"lint": "eslint ./src/**/*.{ts,tsx}"
1515
},
1616
"dependencies": {
17-
"igniteui-grid-lite": "^0.0.1",
17+
"igniteui-grid-lite": "~0.4.0",
1818
"igniteui-react": "^19.4.0",
1919
"igniteui-webcomponents": "^6.3.0",
2020
"lit-html": "^3.2.0",

0 commit comments

Comments
 (0)