Skip to content

Commit f3ff61f

Browse files
kdinevkdinev
authored
Merge branch 'master' into update-node-versions
2 parents cc01aee + 9c27468 commit f3ff61f

21 files changed

Lines changed: 1352 additions & 4 deletions

‎LICENSE‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ Covered Components, Directives and Services with MIT License:
3939
- igx-divider
4040
- igx-drop-down
4141
- igx-expansion-panel
42+
- igx-grid-lite
4243
- igx-icon
4344
- igx-input-group
4445
- igx-linear-bar
@@ -81,7 +82,7 @@ Covered Components, Directives and Services with MIT License:
8182
- IgxTextHighlightService
8283
- igxToggle
8384

84-
The MIT License applies exclusively to the components (encompassing all related modules and directives), directives, and services listed above and their associated source code.
85+
The MIT License applies exclusively to the components (encompassing all related modules and directives), directives, and services listed above and their associated source code.
8586
All other parts of this package remain under the Infragistics Commercial License.
8687

8788
The MIT License (MIT)

‎package-lock.json‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@
126126
"hammerjs": "^2.0.8",
127127
"ig-typedoc-theme": "^7.0.1",
128128
"igniteui-dockmanager": "^1.17.0",
129+
"igniteui-grid-lite": "~0.4.0",
129130
"igniteui-i18n-resources": "^1.0.2",
130131
"igniteui-sassdoc-theme": "^2.1.0",
131132
"igniteui-webcomponents": "^6.5.0",

‎projects/igniteui-angular/core/src/data-operations/filtering-expression.interface.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export enum FilteringLogic {
88
}
99

1010
/* marshalByValue */
11+
/* tsPlainInterface */
1112
/**
1213
* Represents filtering expressions.
1314
*/

‎projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -424,6 +424,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
424424
return this.parentIsland ? this.parentIsland.actionStrip : super.actionStrip;
425425
}
426426

427+
/* blazorCSSuppress */
427428
public override get advancedFilteringExpressionsTree(): IFilteringExpressionsTree {
428429
return super.advancedFilteringExpressionsTree;
429430
}
@@ -592,6 +593,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
592593
}
593594
}
594595

596+
/* blazorCSSuppress */
595597
public override get resourceStrings() {
596598
return super.resourceStrings;
597599
}

‎projects/igniteui-angular/grids/lite/README.md‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
# IgxGridLite
2+
3+
**IgxGridLite** is a lightweight Angular wrapper component for the `igniteui-grid-lite` web component, providing a simple and performant data grid solution with essential features like sorting, filtering, and virtualization.
4+
5+
A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/overview)
6+
7+
## Usage
8+
9+
```html
10+
<igx-grid-lite [data]="data" [autoGenerate]="true">
11+
</igx-grid-lite>
12+
```
13+
14+
Or with manual column definitions:
15+
16+
```html
17+
<igx-grid-lite [data]="data">
18+
<igx-grid-lite-column
19+
field="firstName"
20+
header="First Name">
21+
</igx-grid-lite-column>
22+
<igx-grid-lite-column
23+
field="age"
24+
header="Age"
25+
dataType="number">
26+
</igx-grid-lite-column>
27+
</igx-grid-lite>
28+
```
29+
30+
## Getting Started
31+
32+
### Installation
33+
To get started, install Ignite UI for Angular package as well as the Ignite UI for Web Component one that powers the UI:
34+
35+
```shell
36+
npm install igniteui-grid-lite
37+
```
38+
39+
### Dependencies
40+
41+
The Grid Lite is exported as a standalone component, thus all you need to do in your application is to import the `IgxGridLiteComponent` and `IgxGridLiteColumnComponent` in your component:
42+
43+
```typescript
44+
import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite';
45+
46+
@Component({
47+
selector: 'app-grid-lite-sample',
48+
templateUrl: './grid-lite-sample.html',
49+
standalone: true,
50+
imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent]
51+
})
52+
export class GridLiteSampleComponent {
53+
public data = [
54+
{ id: 1, firstName: 'John', lastName: 'Doe', age: 30 },
55+
{ id: 2, firstName: 'Jane', lastName: 'Smith', age: 25 }
56+
];
57+
}
58+
```
59+
60+
### Basic Configuration
61+
62+
Define the grid with auto-generated columns:
63+
64+
```html
65+
<igx-grid-lite [data]="data" [autoGenerate]="true">
66+
</igx-grid-lite>
67+
```
68+
69+
Or define columns manually:
70+
71+
```html
72+
<igx-grid-lite [data]="data">
73+
<igx-grid-lite-column field="id" header="ID" dataType="number"></igx-grid-lite-column>
74+
<igx-grid-lite-column field="firstName" header="First Name"></igx-grid-lite-column>
75+
<igx-grid-lite-column field="lastName" header="Last Name"></igx-grid-lite-column>
76+
<igx-grid-lite-column field="age" header="Age" dataType="number"></igx-grid-lite-column>
77+
</igx-grid-lite>
78+
```
79+
80+
### Sorting
81+
82+
Configure sorting mode:
83+
84+
```typescript
85+
protected sortingOptions: IgxGridLiteSortingOptions = {
86+
mode: 'single'
87+
}
88+
```
89+
90+
```html
91+
<igx-grid-lite [data]="data" [sortingOptions]="sortingOptions">
92+
</igx-grid-lite>
93+
```
94+
95+
Set initial sorting expressions:
96+
97+
```typescript
98+
protected sortingExpressions: IgxGridLiteSortingExpression[] = [
99+
{
100+
key: 'firstName',
101+
direction: 'ascending'
102+
}
103+
]
104+
```
105+
106+
```html
107+
<igx-grid-lite [data]="data" [sortingExpressions]="sortingExpressions">
108+
</igx-grid-lite>
109+
```
110+
111+
### Filtering
112+
113+
Set initial filtering expressions:
114+
115+
```typescript
116+
protected filteringExpressions: IgxGridLiteFilteringExpression[] = [
117+
{
118+
key: 'age',
119+
condition: 'greaterThan',
120+
searchTerm: 50
121+
}
122+
]
123+
```
124+
125+
```html
126+
<igx-grid-lite [data]="data" [filteringExpressions]="filteringExpressions">
127+
</igx-grid-lite>
128+
```
129+
130+
### Custom Templates
131+
132+
Define custom header templates:
133+
134+
```html
135+
<igx-grid-lite [data]="data">
136+
<igx-grid-lite-column field="firstName" header="First Name">
137+
<ng-template igxGridLiteHeader let-column>
138+
<div>{{ column.header }} (Custom)</div>
139+
</ng-template>
140+
</igx-grid-lite-column>
141+
</igx-grid-lite>
142+
```
143+
144+
Define custom cell templates:
145+
146+
```html
147+
<igx-grid-lite [data]="data">
148+
<igx-grid-lite-column field="active" header="Active">
149+
<ng-template igxGridLiteCell let-value>
150+
@if (value === true) {
151+
<span>Yes</span>
152+
} @else {
153+
<span>No</span>
154+
}
155+
</ng-template>
156+
</igx-grid-lite-column>
157+
</igx-grid-lite>
158+
```
159+
160+
### Events
161+
162+
Listen to sorting and filtering events:
163+
164+
```html
165+
<igx-grid-lite
166+
[data]="data"
167+
(sorting)="onSorting($event)"
168+
(sorted)="onSorted($event)"
169+
(filtering)="onFiltering($event)"
170+
(filtered)="onFiltered($event)">
171+
</igx-grid-lite>
172+
```
173+
174+
```typescript
175+
public onSorting(event: CustomEvent<IgxGridLiteSortingExpression>) {
176+
console.log('Sorting initiated:', event.detail);
177+
}
178+
179+
public onSorted(event: CustomEvent<IgxGridLiteSortingExpression>) {
180+
console.log('Sorting completed:', event.detail);
181+
}
182+
183+
public onFiltering(event: CustomEvent<IgxGridLiteFilteringExpression>) {
184+
console.log('Filtering initiated:', event.detail);
185+
}
186+
187+
public onFiltered(event: CustomEvent<IgxGridLiteFilteringExpression>) {
188+
console.log('Filtering completed:', event.detail);
189+
}
190+
```
191+
192+
## API
193+
194+
### Inputs
195+
196+
**IgxGridLiteComponent**
197+
198+
| Name | Type | Description |
199+
|------|------|-------------|
200+
| `data` | `any[]` | The data source for the grid |
201+
| `autoGenerate` | `boolean` | Whether to auto-generate columns from data. Default is `false` |
202+
| `sortingOptions` | `IgxGridLiteSortingOptions` | Configuration for sorting behavior (single/multiple mode) |
203+
| `sortingExpressions` | `IgxGridLiteSortingExpression[]` | Initial sorting state |
204+
| `filteringExpressions` | `IgxGridLiteFilteringExpression[]` | Initial filtering state |
205+
| `dataPipelineConfiguration` | `IgxGridLiteDataPipelineConfiguration` | Configuration for remote data operations |
206+
207+
**IgxGridLiteColumnComponent**
208+
209+
| Name | Type | Description |
210+
|------|------|-------------|
211+
| `field` | `string` | The data field to bind to |
212+
| `header` | `string` | The column header text |
213+
| `dataType` | `'string' \| 'number' \| 'boolean' | The data type of the column. Default is `'string'` |
214+
| `width` | `string` | The width of the column |
215+
| `hidden` | `boolean` | Indicates whether the column is hidden. Default is `false` |
216+
| `resizable` | `boolean` | Indicates whether the column is resizable. Default is `false` |
217+
| `sortable` | `boolean` | Indicates whether the column is sortable. Default is `false` |
218+
| `sortingCaseSensitive` | `boolean` | Whether sort operations will be case sensitive. Default is `false` |
219+
| `sortConfiguration` | `IgxGridLiteColumnSortConfiguration<T>` | Sort configuration for the column (e.g., custom comparer) |
220+
| `filterable` | `boolean` | Indicates whether the column is filterable. Default is `false` |
221+
| `filteringCaseSensitive` | `boolean` | Whether filter operations will be case sensitive. Default is `false` |
222+
| `headerTemplate` | `TemplateRef` | Custom template for the header |
223+
| `cellTemplate` | `TemplateRef` | Custom template for cells |
224+
225+
### Outputs
226+
227+
| Name | Type | Description |
228+
|------|------|-------------|
229+
| `sorting` | `CustomEvent<IgxGridLiteSortingExpression>` | Emitted when sorting is initiated |
230+
| `sorted` | `CustomEvent<IgxGridLiteSortingExpression>` | Emitted when sorting completes |
231+
| `filtering` | `CustomEvent<IgxGridLiteFilteringExpression>` | Emitted when filtering is initiated |
232+
| `filtered` | `CustomEvent<IgxGridLiteFilteringExpression>` | Emitted when filtering completes |
233+
234+
### Properties
235+
236+
| Name | Type | Description |
237+
|------|------|-------------|
238+
| `columns` | `IgxGridLiteColumnConfiguration[]` | Gets the column configuration |
239+
| `rows` | `any[]` | Gets the currently rendered rows |
240+
| `dataView` | `ReadonlyArray<T>` | Gets the data after sort/filter operations |
241+
242+
### Methods
243+
244+
| Name | Parameters | Description |
245+
|------|------------|-------------|
246+
| `sort` | `expressions: IgxGridLiteSortingExpression \| IgxGridLiteSortingExpression[]` | Performs a sort operation |
247+
| `clearSort` | `key?: Keys<T>` | Clears sorting for a specific column or all columns |
248+
| `filter` | `config: IgxGridLiteFilteringExpression \| IgxGridLiteFilteringExpression[]` | Performs a filter operation |
249+
| `clearFilter` | `key?: Keys<T>` | Clears filtering for a specific column or all columns |
250+
| `navigateTo` | `row: number, column?: Keys<T>, activate?: boolean` | Navigates to a specific cell |
251+
| `getColumn` | `id: Keys<T> \| number` | Returns column configuration by field or index |
252+
253+
## Template Directives
254+
255+
### igxGridLiteHeader
256+
257+
Context properties:
258+
- `$implicit` - The column configuration object
259+
- `column` - The column configuration object
260+
261+
```html
262+
<ng-template igxGridLiteHeader let-column>
263+
<div>{{ column.header }}</div>
264+
</ng-template>
265+
```
266+
267+
### igxGridLiteCell
268+
269+
Context properties:
270+
- `$implicit` - The cell value
271+
- `value` - The cell value
272+
- `column` - The column configuration
273+
- `rowIndex` - The row index
274+
- `data` - The row data object
275+
276+
```html
277+
<ng-template igxGridLiteCell let-value let-data="data">
278+
<div>{{ value }} - {{ data.otherField }}</div>
279+
</ng-template>
280+
```
281+
282+
## Related Components
283+
284+
- [IgxGrid](../grid/README.md) - Full-featured data grid with advanced capabilities
285+
- [IgxTreeGrid](../tree-grid/README.md) - same-schema hierarchical or flat self-referencing data grid
286+
- [IgxHierarchicalGrid](../hierarchical-grid/README.md) - Multi-level hierarchical schema data grid
287+
288+
## Additional Resources
289+
290+
- [Official Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid-lite/overview)

‎projects/igniteui-angular/grids/lite/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './src/public_api';

‎projects/igniteui-angular/grids/lite/ng-package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

0 commit comments

Comments
 (0)