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

Section titled "Properties"

autoGenerate

Section titled "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:231

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

Section titled "data"

The data source for the grid.

 
data: T[] = []

Defined in src/components/grid.ts:204

dataPipelineConfiguration

Section titled "dataPipelineConfiguration"

Configuration object which controls remote data operations for the grid.

 
dataPipelineConfiguration: DataPipelineConfiguration<T>

Defined in src/components/grid.ts:243

sortingOptions

Section titled "sortingOptions"

Sort configuration property for the grid.

 
sortingOptions: GridLiteSortingOptions

Defined in src/components/grid.ts:235

styles

Section titled "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:149

Accessors

Section titled "Accessors"

_pipelineComplete

Section titled "_pipelineComplete"

Resolves once the latest pipeline run renders. sorted and filtered await it.

 
get _pipelineComplete(): Promise<void>

Defined in src/components/grid.ts:194

Returns Promise<void>

columns

Section titled "columns"

Returns the column configuration of the grid.

 
get columns(): ColumnConfiguration<T>[]

Defined in src/components/grid.ts:303

Returns ColumnConfiguration<T>[]

Sets the column configuration for the grid.

 
set columns(configuration: ColumnConfiguration<T>[]): void

Defined in src/components/grid.ts:296

Parameters

Returns void

dataView

Section titled "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:322

Returns readonly T[]

filterExpressions

Section titled "filterExpressions"

Get the filter state for the grid.

 
get filterExpressions(): FilterExpression<T>[]

Defined in src/components/grid.ts:283

Returns FilterExpression<T>[]

Set the filter state for the grid.

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

Defined in src/components/grid.ts:270

Parameters

Returns void

rows

Section titled "rows"

Returns the collection of rendered row elements in the grid.

 
get rows(): IgcGridLiteRow<T>[]

Defined in src/components/grid.ts:314

Returns IgcGridLiteRow<T>[]

sortingExpressions

Section titled "sortingExpressions"

Get the sort state for the grid.

 
get sortingExpressions(): SortingExpression<T>[]

Defined in src/components/grid.ts:263

Returns SortingExpression<T>[]

Set the sort state for the grid.

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

Defined in src/components/grid.ts:248

Parameters

Returns void

totalItems

Section titled "totalItems"

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

 
get totalItems(): number

Defined in src/components/grid.ts:329

Returns number

Methods

Section titled "Methods"

clearFilter

Section titled "clearFilter"

Resets the current filter state of the control.

 
clearFilter(key: Keys<T>): void

Defined in src/components/grid.ts:481

Parameters

Returns void

clearSort

Section titled "clearSort"

Resets the current sort state of the control.

 
clearSort(key: Keys<T>): void

Defined in src/components/grid.ts:473

Parameters

Returns void

filter

Section titled "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:448

Parameters

Returns void

getColumn

Section titled "getColumn"

Returns a ColumnConfiguration for a given column.

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

Defined in src/components/grid.ts:515

Parameters

  • id: number | Keys<T>

Returns ColumnConfiguration<T> | undefined

Section titled "navigateTo"

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

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

Defined in src/components/grid.ts:491

Parameters

  • row: number

    The row index to navigate to
  • options: NavigateToOptions<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: SortingExpression<T> | SortingExpression<T>[]): void

Defined in src/components/grid.ts:466

Parameters

Returns void

Events

Section titled "Events"

filtered

Section titled "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:127

filtering

Section titled "filtering"

Emitted when filtering is initiated through the UI.

 
filtering: CustomEvent<IgcFilteringEvent<T>>

Defined in src/components/grid.ts:120

sorted

Section titled "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:110

sorting

Section titled "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:103