IgcGridLite | Infragistics API Docs

IgcGridLite 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.

Element: igc-grid-lite

Properties

autoGenerate

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

autoGenerate: boolean = false

Defined in src/components/grid.ts:228

Remarks

This is usually executed on initial rendering in the DOM. It depends on having an existing data source to infer the column configuration for the grid. Passing an empty data source or having a late bound data source (such as a HTTP request) will usually result in empty column configuration for the grid.

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

In a scenario where you want to bind a new data source and still keep the auto-generation behavior, make sure to reset the column collection of the grid before passing in the new data source.

Example

// assuming autoGenerate is set to true
grid.columns = [];
grid.data = [...];

data

The data source for the grid.

data: T[] = []

Defined in src/components/grid.ts:201

dataPipelineConfiguration

Configuration object which controls remote data operations for the grid.

dataPipelineConfiguration: DataPipelineConfiguration<T>

Defined in src/components/grid.ts:240

sortingOptions

Sort configuration property for the grid.

sortingOptions: GridLiteSortingOptions

Defined in src/components/grid.ts:232

styles

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

styles: CSSResult[]

Defined in src/components/grid.ts:152

Accessors

dataView

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

get dataView(): readonly T[]

Defined in src/components/grid.ts:303

Returns readonly T[]

filterExpressions

Get the filter state for the grid.

get filterExpressions(): FilterExpression<T>[]

Defined in src/components/grid.ts:280

Returns FilterExpression<T>[]

Set the filter state for the grid.

set filterExpressions(expressions: FilterExpression<T>[]): void

Defined in src/components/grid.ts:267

Parameters

expressions: FilterExpression<T>[]

Returns void

rows

Returns the collection of rendered row elements in the grid.

get rows(): IgcGridLiteRow<T>[]

Defined in src/components/grid.ts:295

Returns IgcGridLiteRow<T>[]

sortingExpressions

Get the sort state for the grid.

get sortingExpressions(): SortingExpression<T>[]

Defined in src/components/grid.ts:260

Returns SortingExpression<T>[]

Set the sort state for the grid.

set sortingExpressions(expressions: SortingExpression<T>[]): void

Defined in src/components/grid.ts:245

Parameters

expressions: SortingExpression<T>[]

Returns void

totalItems

The total number of items in the IgcGridLite.dataView collection.

get totalItems(): number

Defined in src/components/grid.ts:310

Returns number

Methods

clearFilter

Resets the current filter state of the control.

clearFilter(key: Keys<T>): void

Defined in src/components/grid.ts:407

Parameters

key: Keys<T>

Returns void

clearSort

Resets the current sort state of the control.

clearSort(key: Keys<T>): void

Defined in src/components/grid.ts:399

Parameters

key: Keys<T>

Returns void

filter

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

filter(config: FilterExpression<T> | FilterExpression<T>[]): void

Defined in src/components/grid.ts:373

Parameters

config: FilterExpression<T> | FilterExpression<T>[]

Returns void

getColumn

Returns a ColumnConfiguration for a given column.

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

Defined in src/components/grid.ts:425

Parameters

id: number | Keys<T>

Returns ColumnConfiguration<T> | undefined

navigateTo

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

navigateTo(row: number, column: Keys<T>, activate: boolean): Promise<void>

Defined in src/components/grid.ts:418

Parameters

row: number
The row index to navigate to
column: Keys<T>
The column field to navigate to, if any
activate: boolean
Optionally also activate the navigated cell

Returns Promise<void>

sort

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

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

Defined in src/components/grid.ts:392

Parameters

expressions: SortingExpression<T> | SortingExpression<T>[]

Returns void

Events

filtered

Emitted when a filter operation initiated through the UI has completed. Returns the filter state for the affected column.

filtered: CustomEvent<IgcFilteredEvent<T>>

Defined in src/components/grid.ts:130

filtering

Emitted when filtering is initiated through the UI.

filtering: CustomEvent<IgcFilteringEvent<T>>

Defined in src/components/grid.ts:123

sorted

Emitted when a sort operation initiated through the UI has completed. Returns the sort expression used for the operation.

sorted: CustomEvent<SortingExpression<T, any>>

Defined in src/components/grid.ts:113

sorting

Emitted when sorting is initiated through the UI. Returns the sort expression which will be used for the operation.

sorting: CustomEvent<SortingExpression<T, any>>

Defined in src/components/grid.ts:106