apex-grid
    Preparing search index...

    Class ApexGrid<T>

    Apex grid 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.

    apex-grid

    sorting - Emitted when sorting is initiated through the UI.

    sorted - Emitted when a sort operation initiated through the UI has completed.

    filtering - Emitted when filtering is initiated through the UI.

    filtered - Emitted when a filter operation initiated through the UI has completed.

    Type Parameters

    • T extends object

    Hierarchy

    Index

    Other

    autoGenerate columns data dataPipelineConfiguration sortConfiguration dataView filterExpressions rows sortExpressions totalItems clearFilter clearSort filter getColumn sort updateColumns

    styles

    styles

    Other

    autoGenerate: boolean = false

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

    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.

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

    auto-generate

    columns: ColumnConfiguration<T, keyof T>[] = []

    Column configuration for the grid.

    data: T[] = []

    The data source for the grid.

    dataPipelineConfiguration: DataPipelineConfiguration<T>

    Configuration object which controls remote data operations for the grid.

    sortConfiguration: GridSortConfiguration = ...

    Sort configuration property for the grid.

    • get dataView(): readonly T[]

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

      Returns readonly T[]

    • get rows(): ApexGridRow<T>[]

      Returns the collection of rendered row elements in the grid.

      Returns ApexGridRow<T>[]

      Since the grid has virtualization, this property returns only the currently rendered chunk of elements in the DOM.

    • get totalItems(): number

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

      Returns number

    • Resets the current filter state of the control.

      Parameters

      • Optionalkey: keyof T

      Returns void

    • Resets the current sort state of the control.

      Parameters

      • Optionalkey: keyof T

      Returns void

    styles

    styles: CSSResult = bootstrap

    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:

    <script>
      // Generated and unique per request:
      window.litNonce = 'a1b2c3d4';
    </script>

    Settings

    Member Visibility

    On This Page

    Other
    styles