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.

Constructors

Section titled "Constructors"

IgxGridLiteComponent 

new IgxGridLiteComponent(): IgxGridLiteComponent

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:138

Returns IgxGridLiteComponent

Properties

Section titled "Properties"

autoGenerate

Section titled "autoGenerate"

Whether the grid will try to "resolve" its column configuration based on the passed data source.

 
autoGenerate: InputSignalWithTransform<boolean, unknown>

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:76

Remarks

This property is ignored if any existing column configuration already exists in the grid.

data

Section titled "data"

The data source for the grid.

 
data: InputSignal<T[]>

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:67

dataPipelineConfiguration

Section titled "dataPipelineConfiguration"

Configuration object which controls remote data operations for the grid.

 
dataPipelineConfiguration: InputSignal<IgxGridLiteDataPipelineConfiguration<any> | undefined>

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:86

filteringExpressions

Section titled "filteringExpressions"

The filter state for the grid.

 
filteringExpressions: ModelSignal<IgxGridLiteFilteringExpression<T>[]>

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:104

Remarks

This is a two-way bindable property. It will be updated when filter operations complete through the UI.

sortingExpressions

Section titled "sortingExpressions"

The sort state for the grid.

 
sortingExpressions: ModelSignal<IgxGridLiteSortingExpression<T>[]>

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:95

Remarks

This is a two-way bindable property. It will be updated when sort operations complete through the UI.

sortingOptions

Section titled "sortingOptions"

Sort configuration property for the grid.

 
sortingOptions: InputSignal<GridLiteSortingOptions>

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:79

Accessors

Section titled "Accessors"

columns

Section titled "columns"

Get the column configuration of the grid.

 
get columns(): IgxGridLiteColumnConfiguration<T>[]

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:113

Returns IgxGridLiteColumnConfiguration<T>[]

dataView

Section titled "dataView"

Returns the state of the data source after sort/filter operations have been applied.

 
get dataView(): readonly T[]

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:132

Returns readonly T[]

rows

Section titled "rows"

Returns the collection of rendered row elements in the grid.

 
get rows(): IgcGridLiteRow<T>[]

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:124

Returns IgcGridLiteRow<T>[]

Methods

Section titled "Methods"

clearFilter

Section titled "clearFilter"

Resets the current filter state of the control.

 
clearFilter(key: Keys<T>): void

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:193

Parameters

  • key: Keys<T>

Returns void

clearSort

Section titled "clearSort"

Resets the current sort state of the control.

 
clearSort(key: Keys<T>): void

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:186

Parameters

  • key: Keys<T>

Returns void

filter

Section titled "filter"

Performs a filter operation in the grid based on the passed expression(s).

 
filter(config: IgxGridLiteFilteringExpression<any> | IgxGridLiteFilteringExpression<any>[]): void

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:172

Parameters

Returns void

getColumn

Section titled "getColumn"

Returns a IgxGridLiteColumnConfiguration for a given column.

 
getColumn(id: number | Keys<T>): IgxGridLiteColumnConfiguration<T> | undefined

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:219

Parameters

  • id: number | Keys<T>

Returns IgxGridLiteColumnConfiguration<T> | undefined

Section titled "navigateTo"

Navigates to a position in the grid based on provided row index and column field.

 
navigateTo(row: number, options: IgxGridLiteNavigateToOptions<T>): Promise<void>

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:203

Parameters

  • row: number

    The row index to navigate to
  • options: IgxGridLiteNavigateToOptions<T>

    The column field to navigate to and whether to activate the cell

Returns Promise<void>

sort

Section titled "sort"

Performs a sort operation in the grid based on the passed expression(s).

 
sort(expressions: IgxGridLiteSortingExpression<T> | IgxGridLiteSortingExpression<T>[]): void

Defined in projects/igniteui-angular/grids/lite/src/grid-lite.component.ts:179

Parameters

Returns void