import { ContextProvider } from '@lit/context'; import { nothing } from 'lit'; import { DataOperationsController } from '../controllers/data-operation.js'; import { GridDOMController } from '../controllers/dom.js'; import { StateController } from '../controllers/state.js'; import { EventEmitterBase } from '../internal/mixins/event-emitter.js'; import type { ColumnConfiguration, DataPipelineConfiguration, GridSortConfiguration, Keys } from '../internal/types.js'; import type { FilterExpression } from '../operations/filter/types.js'; import type { SortExpression } from '../operations/sort/types.js'; import ApexFilterRow from './filter-row.js'; import ApexGridHeaderRow from './header-row.js'; import ApexGridRow from './row.js'; import ApexVirtualizer from './virtualizer.js'; /** * Event object for the filtering event of the grid. */ export interface ApexFilteringEvent { /** * The target column for the filter operation. */ key: Keys; /** * The filter expression(s) to apply. */ expressions: FilterExpression[]; /** * The type of modification which will be applied to the filter * state of the column. * * @remarks * `add` - a new filter expression will be added to the state of the column. * `modify` - an existing filter expression will be modified. * `remove` - the expression(s) will be removed from the state of the column. */ type: 'add' | 'modify' | 'remove'; } /** * Event object for the filtered event of the grid. */ export interface ApexFilteredEvent { /** * The target column for the filter operation. */ key: Keys; /** * The filter state of the column after the operation. */ state: FilterExpression[]; } /** * Events for the apex-grid. */ export interface ApexGridEventMap { /** * Emitted when sorting is initiated through the UI. * Returns the sort expression which will be used for the operation. * * @remarks * The event is cancellable which prevents the operation from being applied. * The expression can be modified prior to the operation running. * * @event */ sorting: CustomEvent>; /** * Emitted when a sort operation initiated through the UI has completed. * Returns the sort expression used for the operation. * * @event */ sorted: CustomEvent>; /** * Emitted when filtering is initiated through the UI. * * @remarks * The event is cancellable which prevents the operation from being applied. * The expression can be modified prior to the operation running. * * @event */ filtering: CustomEvent>; /** * Emitted when a filter operation initiated through the UI has completed. * Returns the filter state for the affected column. * * @event */ filtered: CustomEvent>; } /** * 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. * * @element apex-grid * * @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. * */ export declare class ApexGrid extends EventEmitterBase> { static get tagName(): "apex-grid"; static styles: import("lit").CSSResult; static register(): void; protected stateController: StateController; protected DOM: GridDOMController; protected dataController: DataOperationsController; protected stateProvider: ContextProvider<{ __context__: StateController; }, this>; protected scrollContainer: ApexVirtualizer; protected headerRow: ApexGridHeaderRow; protected filterRow: ApexFilterRow; protected dataState: Array; protected _rows: NodeListOf>; /** Column configuration for the grid. */ columns: Array>; /** The data source for the grid. */ data: Array; /** * Whether the grid will try to "resolve" its column configuration based on the passed * data source. * * @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 * ```typescript * // assuming autoGenerate is set to true * grid.columns = []; * grid.data = [...]; * ``` * * @attr auto-generate */ autoGenerate: boolean; /** Sort configuration property for the grid. */ sortConfiguration: GridSortConfiguration; /** * Configuration object which controls remote data operations for the grid. */ dataPipelineConfiguration: DataPipelineConfiguration; /** * Set the sort state for the grid. */ set sortExpressions(expressions: SortExpression[]); /** * Get the sort state for the grid. */ get sortExpressions(): SortExpression[]; /** * Set the filter state for the grid. */ set filterExpressions(expressions: FilterExpression[]); /** * Get the filter state for the grid. */ get filterExpressions(): FilterExpression[]; /** * 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. */ get rows(): ApexGridRow[]; /** * Returns the state of the data source after sort/filter operations * have been applied. */ get dataView(): ReadonlyArray; /** * The total number of items in the {@link ApexGrid.dataView} collection. */ get totalItems(): number; protected watchColumns(_: ColumnConfiguration[], newConfig?: ColumnConfiguration[]): void; protected dataChanged(): void; protected pipeline(): Promise; constructor(); /** * Performs a filter operation in the grid based on the passed expression(s). */ filter(config: FilterExpression | FilterExpression[]): void; /** * Performs a sort operation in the grid based on the passed expression(s). */ sort(expressions: SortExpression | SortExpression[]): void; /** * Resets the current sort state of the control. */ clearSort(key?: Keys): void; /** * Resets the current filter state of the control. */ clearFilter(key?: Keys): void; /** * Returns a {@link ColumnConfiguration} for a given column. */ getColumn(id: Keys | number): ColumnConfiguration | undefined; /** * Updates the column configuration of the grid. */ updateColumns(columns: ColumnConfiguration | ColumnConfiguration[]): void; protected bodyClickHandler(event: MouseEvent): void; protected bodyKeydownHandler(event: KeyboardEvent): void; protected renderHeaderRow(): import("lit-html").TemplateResult<1>; protected renderBody(): import("lit-html").TemplateResult<1>; protected renderFilterRow(): typeof nothing | import("lit-html").TemplateResult<1>; protected render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { [ApexGrid.tagName]: ApexGrid; } }