23353730325

Committed 20 Mar 2026 05:03PM UTC coverage: 9.784% (-79.5%) from 89.264%

Build # 23353730325

Build Type

Pull #17069

github

Committed by

web-flow

Commit Message

Merge cfa7e86d1 into a4dc50177

Pull Request Pull Request #17069: fix(IgxGrid): Do not apply width constraint to groups.

Coverage Stats

921 of 16963 branches covered (5.43%)

Branch coverage included in aggregate %.

1 of 3 new or added lines in 1 file covered. (33.33%)

25213 existing lines in 340 files now uncovered.

3842 of 31721 relevant lines covered (12.11%)

6.13 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1.85

/projects/igniteui-angular/grids/lite/src/grid-lite.component.ts

import { booleanAttribute, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, effect, ElementRef, inject, input, model, OnInit } from '@angular/core';
import { DataPipelineConfiguration, FilterExpression, GridLiteSortingOptions, IgcGridLite, Keys, SortingExpression } from 'igniteui-grid-lite';
import { IgxGridLiteColumnConfiguration } from './grid-lite-column.component';

export type IgxGridLiteSortingOptions = GridLiteSortingOptions;
export type IgxGridLiteDataPipelineConfiguration<T extends object = any> = DataPipelineConfiguration<T>;
export type IgxGridLiteSortingExpression<T extends object = any> = SortingExpression<T>;
export type IgxGridLiteFilteringExpression<T extends object = any> = FilterExpression<T>;


class IgxGridLite<T extends object = any> extends IgcGridLite<T> {
    public static override get tagName() {
        return 'igx-grid-lite' as any;
    }
    public static override register(): void {
        // still call super for child components:
        super.register();

        if (!customElements.get(IgxGridLite.tagName)) {
            customElements.define(IgxGridLite.tagName, IgxGridLite);
        }
    }
}

/**
 * The Grid Lite is a web component for displaying data in a tabular format quick and easy.
 *
 * Out of the box it provides row virtualization, sort and filter operations (client and server side),
 * the ability to template cells and headers and column hiding.
 *
 * @fires sorting - Emitted when sorting is initiated through the UI.
 * @fires sorted - Emitted when a sort operation initiated through the UI has completed.
 * @fires filtering - Emitted when filtering is initiated through the UI.
 * @fires filtered - Emitted when a filter operation initiated through the UI has completed.
 *
 * @developerPreview 21.1.0
 */
@Component({
    selector: 'igx-grid-lite',
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    host: {
        '[data]': "data()",
        '[autoGenerate]': "autoGenerate()",
        '[sortingOptions]': "sortingOptions()",
        '[dataPipelineConfiguration]': "dataPipelineConfiguration()",
        '(sorted)': "onSorted($any($event))",
        '(filtered)': "onFiltered($any($event))",
        'adopt-root-styles': '',
    },
    template: `<ng-content></ng-content>`
})

export class IgxGridLiteComponent<T extends object = any> implements OnInit {

    //#region Internal state

    private readonly gridRef = inject(ElementRef) as ElementRef<IgxGridLite<T>>;

    //#endregion

    //#region Inputs

    /** The data source for the grid. */
    public readonly data = input<T[]>([]);

    /**
     * Whether the grid will try to "resolve" its column configuration based on the passed
     * data source.
     *
     * @remarks
     * This property is ignored if any existing column configuration already exists in the grid.
     */
    public readonly autoGenerate = input(false, { transform: booleanAttribute });;

    /** Sort configuration property for the grid. */
    public readonly sortingOptions = input<IgxGridLiteSortingOptions>({
        mode: 'multiple'
    });

    /**
     * Configuration object which controls remote data operations for the grid.
     */
    public readonly dataPipelineConfiguration = input<IgxGridLiteDataPipelineConfiguration>();

    /**
     * The sort state for the grid.
     *
     * @remarks
     * This is a two-way bindable property. It will be updated when sort operations
     * complete through the UI.
     */
    public readonly sortingExpressions = model<IgxGridLiteSortingExpression<T>[]>([]);

    /**
     * The filter state for the grid.
     *
     * @remarks
     * This is a two-way bindable property. It will be updated when filter operations
     * complete through the UI.
     */
    public readonly filteringExpressions = model<IgxGridLiteFilteringExpression<T>[]>([]);

    //#endregion

    //#region Getters / Setters

    /**
     * Get the column configuration of the grid.
     */
    public get columns(): IgxGridLiteColumnConfiguration<T>[] {
        return this.gridRef.nativeElement.columns ?? [];
    }

    /**
     * Returns the collection of rendered row elements in the grid.
     *
     * @remarks
     * Since the grid has virtualization, this property returns only the currently rendered
     * chunk of elements in the DOM.
     */
    public get rows() {
        return this.gridRef.nativeElement.rows ?? [];
    }

    /**
     * Returns the state of the data source after sort/filter operations
     * have been applied.
     */
    public get dataView(): ReadonlyArray<T> {
        return this.gridRef.nativeElement.dataView ?? [];
    }

    //#endregion

    constructor() {
        // D.P. Temporary guarded assign instead of binding to prevent WC issue with setter logic re-doing sort/filter
        effect(() => {
            const grid = this.gridRef.nativeElement
            if (!grid) return;
            const newValue = this.filteringExpressions();
            if (new Set(newValue).symmetricDifference(new Set(grid.filterExpressions)).size !== 0) {
                grid.clearFilter();
                grid.filterExpressions = newValue;
            }
        });
        effect(() => {
            const grid = this.gridRef.nativeElement
            if (!grid) return;
            const newValue = this.sortingExpressions();
            if (new Set(newValue).symmetricDifference(new Set(grid.sortingExpressions)).size !== 0) {
                grid.clearSort();
                grid.sortingExpressions = newValue;
            }
        });
    }

    /**
     * @hidden @internal
     */
    public ngOnInit(): void {
        IgxGridLite.register();
    }

    //#region Public API

    /**
     * Performs a filter operation in the grid based on the passed expression(s).
     */
    public filter(config: IgxGridLiteFilteringExpression | IgxGridLiteFilteringExpression[]): void {
        this.gridRef.nativeElement.filter(config as FilterExpression<T> | FilterExpression<T>[]);
    }

    /**
     * Performs a sort operation in the grid based on the passed expression(s).
     */
    public sort(expressions: IgxGridLiteSortingExpression<T> | IgxGridLiteSortingExpression<T>[]) {
        this.gridRef.nativeElement.sort(expressions);
    }

    /**
     * Resets the current sort state of the control.
     */
    public clearSort(key?: Keys<T>): void {
        this.gridRef.nativeElement.clearSort(key);
    }

    /**
     * Resets the current filter state of the control.
     */
    public clearFilter(key?: Keys<T>): void {
        this.gridRef.nativeElement.clearFilter(key);
    }

    /**
     * Navigates to a position in the grid based on provided row index and column field.
     * @param row The row index to navigate to
     * @param column The column field to navigate to, if any
     * @param activate Optionally also activate the navigated cell
     */
    public async navigateTo(row: number, column?: Keys<T>, activate = false) {
        await this.gridRef.nativeElement.navigateTo(row, column, activate);
    }

    /**
     * Returns a {@link IgxGridLiteColumnConfiguration} for a given column.
     */
    public getColumn(id: Keys<T> | number): IgxGridLiteColumnConfiguration<T> | undefined {
        return this.gridRef.nativeElement.getColumn(id);
    }

    //#endregion

    //#region Event handlers

    protected onSorted(_event: CustomEvent<SortingExpression<T>>): void {
        this.sortingExpressions.set(this.gridRef.nativeElement.sortingExpressions ?? []);
    }

    protected onFiltered(_event: CustomEvent<FilterExpression<T>>): void {
        this.filteringExpressions.set(this.gridRef.nativeElement.filterExpressions ?? []);
    }

    //#endregion

}

declare global {
  interface HTMLElementTagNameMap {
    [IgxGridLite.tagName]: IgxGridLite;
  }

    interface HTMLElementEventMap {
        'sorting': CustomEvent<IgxGridLiteSortingExpression<any>>;
        'sorted': CustomEvent<IgxGridLiteSortingExpression<any>>;
        'filtering': CustomEvent<IgxGridLiteFilteringExpression<any>>;
        'filtered': CustomEvent<IgxGridLiteFilteringExpression<any>>;
    }
}

// see https://github.com/ng-packagr/ng-packagr/issues/3233
export {};

1	import { booleanAttribute, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, effect, ElementRef, inject, input, model, OnInit } from '@angular/core';
2	import { DataPipelineConfiguration, FilterExpression, GridLiteSortingOptions, IgcGridLite, Keys, SortingExpression } from 'igniteui-grid-lite';
3	import { IgxGridLiteColumnConfiguration } from './grid-lite-column.component';
4
5	export type IgxGridLiteSortingOptions = GridLiteSortingOptions;
6	export type IgxGridLiteDataPipelineConfiguration<T extends object = any> = DataPipelineConfiguration<T>;
7	export type IgxGridLiteSortingExpression<T extends object = any> = SortingExpression<T>;
8	export type IgxGridLiteFilteringExpression<T extends object = any> = FilterExpression<T>;
9
10
11	class IgxGridLite<T extends object = any> extends IgcGridLite<T> {
12	public static override get tagName() {
UNCOV 13	return 'igx-grid-lite' as any;	×
14	}
15	public static override register(): void {
16	// still call super for child components:
UNCOV 17	super.register();	×
18
UNCOV 19	if (!customElements.get(IgxGridLite.tagName)) {	×
UNCOV 20	customElements.define(IgxGridLite.tagName, IgxGridLite);	×
21	}
22	}
23	}
24
25	/**
26	* The Grid Lite is a web component for displaying data in a tabular format quick and easy.
27	*
28	* Out of the box it provides row virtualization, sort and filter operations (client and server side),
29	* the ability to template cells and headers and column hiding.
30	*
31	* @fires sorting - Emitted when sorting is initiated through the UI.
32	* @fires sorted - Emitted when a sort operation initiated through the UI has completed.
33	* @fires filtering - Emitted when filtering is initiated through the UI.
34	* @fires filtered - Emitted when a filter operation initiated through the UI has completed.
35	*
36	* @developerPreview 21.1.0
37	*/
38	@Component({
39	selector: 'igx-grid-lite',
40	standalone: true,
41	changeDetection: ChangeDetectionStrategy.OnPush,
42	schemas: [CUSTOM_ELEMENTS_SCHEMA],
43	host: {
44	'[data]': "data()",
45	'[autoGenerate]': "autoGenerate()",
46	'[sortingOptions]': "sortingOptions()",
47	'[dataPipelineConfiguration]': "dataPipelineConfiguration()",
48	'(sorted)': "onSorted($any($event))",
49	'(filtered)': "onFiltered($any($event))",
50	'adopt-root-styles': '',
51	},
52	template: `<ng-content></ng-content>`
53	})
54
55	export class IgxGridLiteComponent<T extends object = any> implements OnInit {	3✔
56
57	//#region Internal state
58
UNCOV 59	private readonly gridRef = inject(ElementRef) as ElementRef<IgxGridLite<T>>;	×
60
61	//#endregion
62
63	//#region Inputs
64
65	/** The data source for the grid. */
UNCOV 66	public readonly data = input<T[]>([]);	×
67
68	/**
69	* Whether the grid will try to "resolve" its column configuration based on the passed
70	* data source.
71	*
72	* @remarks
73	* This property is ignored if any existing column configuration already exists in the grid.
74	*/
UNCOV 75	public readonly autoGenerate = input(false, { transform: booleanAttribute });;	×
76
77	/** Sort configuration property for the grid. */
UNCOV 78	public readonly sortingOptions = input<IgxGridLiteSortingOptions>({	×
79	mode: 'multiple'
80	});
81
82	/**
83	* Configuration object which controls remote data operations for the grid.
84	*/
UNCOV 85	public readonly dataPipelineConfiguration = input<IgxGridLiteDataPipelineConfiguration>();	×
86
87	/**
88	* The sort state for the grid.
89	*
90	* @remarks
91	* This is a two-way bindable property. It will be updated when sort operations
92	* complete through the UI.
93	*/
UNCOV 94	public readonly sortingExpressions = model<IgxGridLiteSortingExpression<T>[]>([]);	×
95
96	/**
97	* The filter state for the grid.
98	*
99	* @remarks
100	* This is a two-way bindable property. It will be updated when filter operations
101	* complete through the UI.
102	*/
UNCOV 103	public readonly filteringExpressions = model<IgxGridLiteFilteringExpression<T>[]>([]);	×
104
105	//#endregion
106
107	//#region Getters / Setters
108
109	/**
110	* Get the column configuration of the grid.
111	*/
112	public get columns(): IgxGridLiteColumnConfiguration<T>[] {
113	return this.gridRef.nativeElement.columns ?? [];	×
114	}
115
116	/**
117	* Returns the collection of rendered row elements in the grid.
118	*
119	* @remarks
120	* Since the grid has virtualization, this property returns only the currently rendered
121	* chunk of elements in the DOM.
122	*/
123	public get rows() {
UNCOV 124	return this.gridRef.nativeElement.rows ?? [];	×
125	}
126
127	/**
128	* Returns the state of the data source after sort/filter operations
129	* have been applied.
130	*/
131	public get dataView(): ReadonlyArray<T> {
UNCOV 132	return this.gridRef.nativeElement.dataView ?? [];	×
133	}
134
135	//#endregion
136
137	constructor() {
138	// D.P. Temporary guarded assign instead of binding to prevent WC issue with setter logic re-doing sort/filter
UNCOV 139	effect(() => {	×
UNCOV 140	const grid = this.gridRef.nativeElement	×
UNCOV 141	if (!grid) return;	×
UNCOV 142	const newValue = this.filteringExpressions();	×
UNCOV 143	if (new Set(newValue).symmetricDifference(new Set(grid.filterExpressions)).size !== 0) {	×
UNCOV 144	grid.clearFilter();	×
UNCOV 145	grid.filterExpressions = newValue;	×
146	}
147	});
UNCOV 148	effect(() => {	×
UNCOV 149	const grid = this.gridRef.nativeElement	×
UNCOV 150	if (!grid) return;	×
UNCOV 151	const newValue = this.sortingExpressions();	×
UNCOV 152	if (new Set(newValue).symmetricDifference(new Set(grid.sortingExpressions)).size !== 0) {	×
UNCOV 153	grid.clearSort();	×
UNCOV 154	grid.sortingExpressions = newValue;	×
155	}
156	});
157	}
158
159	/**
160	* @hidden @internal
161	*/
162	public ngOnInit(): void {
UNCOV 163	IgxGridLite.register();	×
164	}
165
166	//#region Public API
167
168	/**
169	* Performs a filter operation in the grid based on the passed expression(s).
170	*/
171	public filter(config: IgxGridLiteFilteringExpression \| IgxGridLiteFilteringExpression[]): void {
172	this.gridRef.nativeElement.filter(config as FilterExpression<T> \| FilterExpression<T>[]);	×
173	}
174
175	/**
176	* Performs a sort operation in the grid based on the passed expression(s).
177	*/
178	public sort(expressions: IgxGridLiteSortingExpression<T> \| IgxGridLiteSortingExpression<T>[]) {
179	this.gridRef.nativeElement.sort(expressions);	×
180	}
181
182	/**
183	* Resets the current sort state of the control.
184	*/
185	public clearSort(key?: Keys<T>): void {
186	this.gridRef.nativeElement.clearSort(key);	×
187	}
188
189	/**
190	* Resets the current filter state of the control.
191	*/
192	public clearFilter(key?: Keys<T>): void {
193	this.gridRef.nativeElement.clearFilter(key);	×
194	}
195
196	/**
197	* Navigates to a position in the grid based on provided row index and column field.
198	* @param row The row index to navigate to
199	* @param column The column field to navigate to, if any
200	* @param activate Optionally also activate the navigated cell
201	*/
202	public async navigateTo(row: number, column?: Keys<T>, activate = false) {	×
203	await this.gridRef.nativeElement.navigateTo(row, column, activate);	×
204	}
205
206	/**
207	* Returns a {@link IgxGridLiteColumnConfiguration} for a given column.
208	*/
209	public getColumn(id: Keys<T> \| number): IgxGridLiteColumnConfiguration<T> \| undefined {
210	return this.gridRef.nativeElement.getColumn(id);	×
211	}
212
213	//#endregion
214
215	//#region Event handlers
216
217	protected onSorted(_event: CustomEvent<SortingExpression<T>>): void {
UNCOV 218	this.sortingExpressions.set(this.gridRef.nativeElement.sortingExpressions ?? []);	×
219	}
220
221	protected onFiltered(_event: CustomEvent<FilterExpression<T>>): void {
UNCOV 222	this.filteringExpressions.set(this.gridRef.nativeElement.filterExpressions ?? []);	×
223	}
224
225	//#endregion
226
227	}
228
229	declare global {
230	interface HTMLElementTagNameMap {
231	[IgxGridLite.tagName]: IgxGridLite;
232	}
233
234	interface HTMLElementEventMap {
235	'sorting': CustomEvent<IgxGridLiteSortingExpression<any>>;
236	'sorted': CustomEvent<IgxGridLiteSortingExpression<any>>;
237	'filtering': CustomEvent<IgxGridLiteFilteringExpression<any>>;
238	'filtered': CustomEvent<IgxGridLiteFilteringExpression<any>>;
239	}
240	}
241
242	// see https://github.com/ng-packagr/ng-packagr/issues/3233
243	export {};

IgniteUI / igniteui-angular / 23353730325

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous