Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export class IgxGridLiteColumnComponent<T extends object = any> {
//#region Inputs

/** The field from the data for this column. */
public readonly field = input<Keys<T>>();
public readonly field = input<NoInfer<Keys<T>>>();

/** The data type of the column's values. */
public readonly dataType = input<DataType>('string');
Expand Down
28 changes: 20 additions & 8 deletions src/app/grid-lite/grid-lite.sample.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,26 @@
</ng-template>
</igx-grid-lite-column>

<igx-grid-lite-column
field="age"
dataType="number"
header="Age"
filterable
resizable
sortable
></igx-grid-lite-column>
@for(column of columns; track column.field) {
<igx-grid-lite-column
[field]="column.field"
[header]="column.header"
[dataType]="column.dataType"
filterable
resizable
sortable
>
</igx-grid-lite-column>
}
@for(column of typedColumns; track column.field) {
<igx-grid-lite-column
[field]="column.field"
[header]="column.header"
[dataType]="column.dataType"
>
</igx-grid-lite-column>
}

<igx-grid-lite-column field="active" dataType="boolean" header="Active">
<ng-template
igxGridLiteCell
Expand Down
27 changes: 22 additions & 5 deletions src/app/grid-lite/grid-lite.sample.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,36 @@
import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, viewChild } from '@angular/core';
import { IgxGridLiteCellTemplateDirective, IgxGridLiteColumnComponent, IgxGridLiteComponent, IgxGridLiteFilteringExpression, IgxGridLiteHeaderTemplateDirective, IgxGridLiteSortingExpression, IgxGridLiteSortingOptions } from "igniteui-angular/grids/lite";
import { GridLiteDataService } from './data.service';
import { Component, inject, viewChild } from '@angular/core';
import { IgxCheckboxComponent } from 'igniteui-angular';
import {
IgxGridLiteCellTemplateDirective,
IgxGridLiteColumnComponent,
type IgxGridLiteColumnConfiguration,
IgxGridLiteComponent,
type IgxGridLiteFilteringExpression,
IgxGridLiteHeaderTemplateDirective,
type IgxGridLiteSortingExpression,
type IgxGridLiteSortingOptions,
} from "igniteui-angular/grids/lite";
import { GridLiteDataService, type User } from './data.service';

@Component({
selector: 'app-grid-lite-sample',
templateUrl: 'grid-lite.sample.html',
styleUrls: ['grid-lite.sample.scss'],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [IgxCheckboxComponent, IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteHeaderTemplateDirective, IgxGridLiteCellTemplateDirective]
})
export class GridLiteSampleComponent {
protected grid = viewChild<IgxGridLiteComponent<any>>('grid');
protected data = [];
protected data: User[] = [];
private dataService = inject(GridLiteDataService);

public columns: IgxGridLiteColumnConfiguration[] = [
{ field: 'age', header: 'Age', dataType: 'number' },
];

public typedColumns: IgxGridLiteColumnConfiguration<User>[] = [
{ field: 'email', header: 'Email', dataType: 'string' },
];

protected sortingExpressions: IgxGridLiteSortingExpression[] = [
{
key: 'firstName',
Expand Down
Loading