Skip to content

Commit 07d34d2

Browse files
damyanpetevdamyanpetev
committed
docs(grid-lite): add readme for the component
1 parent 325503c commit 07d34d2

1 file changed

Lines changed: 290 additions & 0 deletions

File tree

  • projects/igniteui-angular/grids/lite

‎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)

0 commit comments

Comments
 (0)