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 { type CSVExportOptions, type ExportFormat, type ExportOptions } from '../internal/export.js'; import { EventEmitterBase } from '../internal/mixins/event-emitter.js'; import type { ColumnConfiguration, DataPipelineConfiguration, GridEditingConfiguration, GridExpansionConfiguration, GridSelectionConfiguration, GridSortConfiguration, GridTreeConfiguration, Keys, PaginationConfiguration, PaginationState, PinPosition } 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 ApexGridPaginator from './paginator.js'; import ApexGridRow from './row.js'; import ApexGridToolbar from './toolbar.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[]; } /** * Event payload for the cancellable `pageChanging` event. */ export interface ApexPageChangingEvent { /** * The current page (zero-based) before the change. */ page: number; /** * The current page size before the change. */ pageSize: number; /** * The proposed page (zero-based) the grid will navigate to. */ nextPage: number; /** * The proposed page size after the change. */ nextPageSize: number; } /** * Event payload for the `pageChanged` event. Mirrors {@link PaginationState}. */ export interface ApexPageChangedEvent extends PaginationState { } /** * Event payload for the cancellable `quickFilterChanging` event. */ export interface ApexQuickFilterChangingEvent { /** * The current quick-filter value before the change. */ value: string; /** * The proposed quick-filter value. */ nextValue: string; } /** * Event payload for the `quickFilterChanged` event. */ export interface ApexQuickFilterChangedEvent { /** * The resolved quick-filter value after the change. */ value: string; } /** * Drop position relative to a target column when reordering. */ export type ColumnDropPosition = 'before' | 'after'; /** * Event payload for the cancellable `cellValueChanging` event. */ export interface ApexCellValueChangingEvent { /** * The column key of the edited cell. */ key: Keys; /** * The view-relative row index (matches {@link ApexGrid.pageItems}). */ rowIndex: number; /** * The data record being edited (a live reference to the row in * {@link ApexGrid.data}). */ data: T; /** * The value before the edit. */ oldValue: unknown; /** * The candidate new value. */ newValue: unknown; } /** * Event payload for the `cellValueChanged` event. */ export interface ApexCellValueChangedEvent { /** * The column key of the edited cell. */ key: Keys; /** * The view-relative row index after the change. */ rowIndex: number; /** * The data record after the change (a live reference to the row in * {@link ApexGrid.data}). */ data: T; /** * The applied value. */ value: unknown; } /** * Event payload for the `rowEditStarted` event. */ export interface ApexRowEditStartedEvent { /** * The view-relative row index entering edit mode. */ rowIndex: number; } /** * Event payload for the `rowEditEnded` event. */ export interface ApexRowEditEndedEvent { /** * The view-relative row index that left edit mode. */ rowIndex: number; /** * `true` when pending edits were applied, `false` when discarded. */ committed: boolean; } /** * Event payload for the cancellable `columnMoving` event. */ export interface ApexColumnMovingEvent { /** * The column being moved. */ key: Keys; /** * The current index of the moving column in {@link ApexGrid.columns}. */ fromIndex: number; /** * The target column key. The dragged column will be placed `position` * (before/after) this column. */ toKey: Keys; /** * Whether the dragged column is being placed before or after `toKey`. */ position: ColumnDropPosition; } /** * Event payload for the `columnMoved` event. */ export interface ApexColumnMovedEvent { /** * The column that was moved. */ key: Keys; /** * The original index in {@link ApexGrid.columns}. */ fromIndex: number; /** * The resolved index in {@link ApexGrid.columns} after the move. */ toIndex: number; } /** * Event payload for the cancellable `rowSelecting` event. */ export interface ApexRowSelectingEvent { /** * The rows that will become selected by this change. */ added: T[]; /** * The rows that will become deselected by this change. */ removed: T[]; /** * The full current selection before this change is applied. */ current: T[]; /** * The full selection after this change would be applied. Listeners can * inspect this to decide whether to cancel. */ next: T[]; } /** * Event payload for the `rowSelected` event. */ export interface ApexRowSelectedEvent { /** * The rows that became selected in this change. */ added: T[]; /** * The rows that became deselected in this change. */ removed: T[]; /** * The full current selection after the change has been applied. */ selected: T[]; } /** * Event payload for the cancellable `treeRowExpanding` event. */ export interface ApexTreeRowExpandingEvent { /** Rows that will become expanded by this change. */ added: T[]; /** Rows that will become collapsed by this change. */ removed: T[]; /** The full current tree-expansion set before this change is applied. */ current: T[]; /** The full set after this change would be applied. */ next: T[]; } /** * Event payload for the `treeRowExpanded` event. */ export interface ApexTreeRowExpandedEvent { /** Rows that became expanded in this change. */ added: T[]; /** Rows that became collapsed in this change. */ removed: T[]; /** The full tree-expansion set after the change has been applied. */ expanded: T[]; } /** * Event payload for the cancellable `rowExpanding` event. */ export interface ApexRowExpandingEvent { /** The rows that will become expanded by this change. */ added: T[]; /** The rows that will become collapsed by this change. */ removed: T[]; /** The full current expansion set before this change is applied. */ current: T[]; /** * The full expansion set after this change would be applied. Listeners can * inspect this to decide whether to cancel. */ next: T[]; } /** * Event payload for the `rowExpanded` event. */ export interface ApexRowExpandedEvent { /** The rows that became expanded in this change. */ added: T[]; /** The rows that became collapsed in this change. */ removed: T[]; /** The full expansion set after the change has been applied. */ expanded: T[]; } /** * Event payload for the cancellable `columnPinning` event. */ export interface ApexColumnPinningEvent { /** * The target column key. */ key: Keys; /** * The current pin position before the change (`null` if unpinned). */ previous: PinPosition; /** * The proposed pin position (`null` to unpin). */ next: PinPosition; } /** * Event payload for the `columnPinned` event. */ export interface ApexColumnPinnedEvent { /** * The target column key. */ key: Keys; /** * The resolved pin position after the change. */ pinned: PinPosition; } /** * 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>; /** * Emitted before the grid navigates to a new page or applies a new page size. * * @remarks * Cancellable — calling `preventDefault()` (or returning a falsy result from * `addEventListener` synchronously) aborts the page change. * * @event */ pageChanging: CustomEvent; /** * Emitted after a page or page-size change has been applied and the pipeline has run. * * @event */ pageChanged: CustomEvent; /** * Emitted before the quick-filter value is applied. * * @remarks * Cancellable — calling `preventDefault()` aborts the change. The value can * be replaced inside the listener by reassigning {@link ApexGrid.quickFilter}. * * @event */ quickFilterChanging: CustomEvent; /** * Emitted after a quick-filter change has been applied and the pipeline has run. * * @event */ quickFilterChanged: CustomEvent; /** * Emitted before a column's pin position changes. * * @remarks * Cancellable — calling `preventDefault()` aborts the change. * * @event */ columnPinning: CustomEvent>; /** * Emitted after a column's pin position change has been applied. * * @event */ columnPinned: CustomEvent>; /** * Emitted before a column is moved through the UI or {@link ApexGrid.moveColumn}. * * @remarks * Cancellable — calling `preventDefault()` aborts the move. The event detail * carries the source column key, its current array index, the target column * key and the drop position. * * @event */ columnMoving: CustomEvent>; /** * Emitted after a column has been moved. * * @event */ columnMoved: CustomEvent>; /** * Emitted before a cell value is committed. * * @remarks * Cancellable — `preventDefault()` rolls back the candidate value. In row * edit mode the event still fires per-cell at commit time. * * @event */ cellValueChanging: CustomEvent>; /** * Emitted after a cell value has been committed. * * @event */ cellValueChanged: CustomEvent>; /** * Emitted when a row enters edit mode (row edit mode only). * * @event */ rowEditStarted: CustomEvent; /** * Emitted when a row leaves edit mode, with `committed` reporting whether * pending edits were applied (row edit mode only). * * @event */ rowEditEnded: CustomEvent; /** * Emitted before the tree-row expansion set changes. * * @remarks * Fires only when {@link ApexGrid.tree} is enabled and a row's tree * expansion is toggled (via the chevron, the public API, or * `expand-all/collapse-all`). Cancellable. * * @event */ treeRowExpanding: CustomEvent>; /** * Emitted after a tree-row expansion change has been applied. * * @event */ treeRowExpanded: CustomEvent>; /** * Emitted before the row expansion set changes. * * @remarks * Cancellable — calling `preventDefault()` aborts the change. Fires for * every expansion-mutating call (toggle, expand-all, programmatic * `expandedRows = ...`). * * @event */ rowExpanding: CustomEvent>; /** * Emitted after a row-expansion change has been applied. * * @event */ rowExpanded: CustomEvent>; /** * Emitted before the row selection set changes. * * @remarks * Cancellable — calling `preventDefault()` aborts the selection change. * Fires for every selection-mutating call (toggle, range select, select-all, * programmatic `selectedRows = ...`). * * @event */ rowSelecting: CustomEvent>; /** * Emitted after a row-selection change has been applied. * * @event */ rowSelected: 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. * * @remarks * A working, styled grid requires three things: * 1. Register the element: `import 'apex-grid/define'` (or `ApexGrid.register()`). * 2. Give the host element a bounded height, e.g. `apex-grid { height: 480px }` — * the virtualizer collapses without one. * 3. Do NOT set `display` on the host — the component declares `:host { display: grid }` * internally and any override breaks the track layout. * * The grid is styled out of the box through `--ag-*` CSS custom properties — * there is no theme to import and no `configureTheme()` call. Override `--ag-*` * tokens on the host (or any ancestor) to rebrand; when `igniteui-webcomponents` * is present, the brand tokens auto-tint from its palette. For dark mode, set * the `theme="dark"` attribute on the host for the built-in slate dark palette * (further `--ag-*` overrides still compose on top). Add `tinted` (e.g. * `theme="tinted"` or `theme="dark tinted"`) to mix the brand into the chrome * so the grid wears its brand even at rest. See the README "Getting Started" * and "Theming" sections for the full example and token list. * * @element apex-grid * * @attr {string} theme - Space-separated theme flags. `dark` opts into the built-in dark palette; `tinted` mixes `--ag-brand` into the chrome surfaces. Combine as `theme="dark tinted"`. * * @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. * @fires pageChanging - Cancellable. Emitted before page/page-size changes are applied. * @fires pageChanged - Emitted after a page/page-size change has been applied. * @fires quickFilterChanging - Cancellable. Emitted before a quick-filter value is applied. * @fires quickFilterChanged - Emitted after a quick-filter change has been applied. * @fires columnPinning - Cancellable. Emitted before a column's pin position changes. * @fires columnPinned - Emitted after a column's pin position has changed. * @fires columnMoving - Cancellable. Emitted before a column is moved. * @fires columnMoved - Emitted after a column has been moved. * @fires cellValueChanging - Cancellable. Emitted before a cell value is committed. * @fires cellValueChanged - Emitted after a cell value has been committed. * @fires rowEditStarted - Emitted when a row enters edit mode (row mode only). * @fires rowEditEnded - Emitted when a row leaves edit mode (row mode only). * @fires rowSelecting - Cancellable. Emitted before a selection-set change is applied. * @fires rowSelected - Emitted after a selection-set change has been applied. * @fires rowExpanding - Cancellable. Emitted before the row-expansion set changes (master-detail). * @fires rowExpanded - Emitted after a row-expansion change has been applied. * @fires treeRowExpanding - Cancellable. Emitted before a tree-row expansion change (tree mode). * @fires treeRowExpanded - Emitted after a tree-row expansion change has been applied. * * @csspart live-region - Visually-hidden ARIA live region used for screen-reader announcements. * * @cssprop [--ag-brand] - Brand color for selection, focus rings, and accents. Auto-tints from `--ig-primary-500` when igniteui is present. * @cssprop [--ag-brand-strong] - Brand color for hover / pressed states. * @cssprop [--ag-grid-shadow] - Grid edge/shadow override. Default is a flat 1px hairline edge; set to `var(--ag-shadow-card)` for the elevated card look, or `none` to remove it. * @cssprop [--ag-grid-bg] - Host card background. Defaults to a subtle light gradient; override with a flat color (or use `theme="dark"`) for dark themes. * @cssprop [--ag-surface] - Grid card background (must be opaque). * @cssprop [--ag-surface-alt] - Alternating row tint. * @cssprop [--ag-surface-elevated] - Header background. * @cssprop [--ag-hairline] - Header / structural gridline color. * @cssprop [--ag-border] - Row separator color. * @cssprop [--ag-text] - Primary text color. * @cssprop [--ag-text-body] - Row text color. * @cssprop [--ag-text-muted] - Muted text (roles, labels). * @cssprop [--ag-row-hover] - Row hover wash. * @cssprop [--ag-row-h] - Row height. * @cssprop [--ag-header-h] - Header height. * @cssprop [--ag-radius] - Outer card corner radius. * @cssprop [--ag-font] - Grid font family. * @cssprop [--ag-fs-cell] - Cell font size. * * @see {@link https://github.com/apexcharts/apex-grid/blob/main/packages/core/src/styles/_tokens.scss | _tokens.scss} for the complete `--ag-*` token list. */ export declare class ApexGrid extends EventEmitterBase> { static get tagName(): string; static styles: import("lit").CSSResult; /** * Registers `` and its internal dependencies with the custom-element * registry. Idempotent — safe to call more than once. * * @remarks * Registering the element is only step one of four required for a visible, styled * grid. You must also configure an Ignite UI theme + CSS, give the host a bounded * height, and avoid overriding `display` on the host. See the README * "Getting Started" section for the full setup. */ static register(): void; protected stateController: StateController; protected DOM: GridDOMController; protected dataController: DataOperationsController; /** * Builds the grid's {@link StateController}. This is the single construction * site for `stateController` — overriding it (rather than re-declaring the * field) is the supported seam for derived grids to inject optional * {@link GridFeatureModule}s while preserving field-initializer ordering. * The community grid registers no extra modules. */ protected createStateController(): StateController; protected stateProvider: ContextProvider<{ __context__: StateController; }, this>; protected scrollContainer: ApexVirtualizer; protected headerRow: ApexGridHeaderRow; protected filterRow: ApexFilterRow; protected paginator: ApexGridPaginator; protected toolbar: ApexGridToolbar; 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; /** * Pagination configuration for the grid. * * @remarks * Pagination is disabled by default. Set `enabled: true` and (optionally) `pageSize` * to render the built-in `` and slice the dataView. For * server-side pagination set `mode: 'remote'` and supply `totalItems`. The grid * emits the cancellable `pageChanging` event before applying a change and the * `pageChanged` event after the pipeline has run. * * @example * ```ts * grid.pagination = { enabled: true, pageSize: 25 }; * grid.addEventListener('pageChanged', (event) => { * console.log('Now on page', event.detail.page, 'of', event.detail.pageCount); * }); * ``` */ pagination?: PaginationConfiguration; /** * The quick-filter (global search) value applied to the dataView. * * @remarks * When non-empty, the grid filters records whose visible-column values contain * the term (case-insensitive substring match). Customise by providing * {@link DataPipelineConfiguration.quickFilter}. * * @attr quick-filter */ quickFilter: string; /** * Whether the built-in quick-filter input is rendered in the toolbar. * * @remarks * The {@link ApexGrid.quickFilter} value can be controlled programmatically * regardless of this flag; this only controls the toolbar input UI. * * @attr show-quick-filter */ showQuickFilter: boolean; /** * Whether the built-in export menu is rendered in the toolbar. * * @remarks * When `true`, the toolbar shows a download button on the trailing side; * clicking it opens a menu with one entry per {@link ApexGrid.exportFormats} * (CSV in the community grid) that calls {@link ApexGrid.exportAs}. * {@link ApexGrid.exportToCSV} remains callable programmatically regardless * of this flag. * * @attr show-export */ showExport: boolean; /** * Enables drag-and-drop column reordering on the column headers. * * @remarks * Per-column opt-out is available through {@link BaseColumnConfiguration.reorderable}. * Reordering is constrained to a column's own pinning group — start-pinned * columns can only swap with start-pinned, unpinned with unpinned, and * end-pinned with end-pinned. * * @attr column-reordering */ columnReordering: boolean; /** * Inline editing configuration for the grid. * * @remarks * Editing is disabled by default. Set `enabled: true` and (optionally) `mode` * (`'cell' | 'row'`) and `trigger` (`'click' | 'doubleClick'`) to opt in. * Per-column opt-in is required via {@link BaseColumnConfiguration.editable}. * * @example * ```ts * grid.editing = { enabled: true, mode: 'cell', trigger: 'doubleClick' }; * ``` */ editing?: GridEditingConfiguration; /** * Row selection configuration for the grid. * * @remarks * Selection is disabled by default. Set `enabled: true` and (optionally) * `mode` (`'single' | 'multiple'`) and `showCheckboxColumn` to opt in. * * @example * ```ts * grid.selection = { enabled: true, mode: 'multiple', showCheckboxColumn: true }; * ``` */ selection?: GridSelectionConfiguration; /** * The currently selected rows, in insertion order. * * @remarks * Returned as a plain array snapshot — mutating the returned array does * not change the grid's selection. Set this property to replace the * selection programmatically (goes through the cancellable * `rowSelecting` event). */ get selectedRows(): T[]; set selectedRows(rows: ReadonlyArray); /** * Selects `row`, replacing the existing selection in `'single'` mode or * adding to it in `'multiple'` mode. * * @returns `true` if the selection changed, `false` if the change was * rejected by a `rowSelecting` listener or selection is disabled. */ selectRow(row: T): Promise; /** * Deselects `row`. No-op if `row` is not currently selected. */ deselectRow(row: T): Promise; /** * Toggles selection of `row`. */ toggleRowSelection(row: T): Promise; /** * Selects every row in the current view ({@link dataView}). No-op in * `'single'` selection mode. */ selectAllRows(): Promise; /** * Clears the row selection. */ clearSelection(): Promise; /** * Whether `row` is currently selected. */ isRowSelected(row: T): boolean; /** * Row-expansion (master-detail) configuration for the grid. * * @remarks * Expansion is disabled by default. Set `enabled: true` and supply a * `detailTemplate` to opt in. The default UX renders a chevron toggle in a * dedicated leading column; set `showToggleColumn: false` to drive * expansion entirely through the public API or a custom cell template. * * @example * ```ts * grid.expansion = { * enabled: true, * detailTemplate: ({ data }) => html``, * }; * ``` */ expansion?: GridExpansionConfiguration; /** * The currently expanded rows, in insertion order. * * @remarks * Returned as a plain array snapshot — mutating the returned array does * not change the grid's expansion state. Set this property to replace the * expansion set programmatically (goes through the cancellable * `rowExpanding` event). */ get expandedRows(): T[]; set expandedRows(rows: ReadonlyArray); /** * Expands `row`. No-op when the row is already expanded, expansion is * disabled, or the optional `isExpandable` predicate rejects it. */ expandRow(row: T): Promise; /** * Collapses `row`. No-op when the row is not currently expanded. */ collapseRow(row: T): Promise; /** * Toggles expansion of `row`. */ toggleRowExpansion(row: T): Promise; /** * Expands every row in {@link ApexGrid.dataView} that passes the optional * `isExpandable` predicate. */ expandAllRows(): Promise; /** * Collapses every currently expanded row. */ collapseAllRows(): Promise; /** * Whether `row` is currently expanded. */ isRowExpanded(row: T): boolean; /** * Tree-data (nested rows) configuration for the grid. * * @remarks * Tree mode keeps {@link ApexGrid.data} flat; the grid derives the * hierarchy from a user-supplied `getDataPath(row)` callback (AG Grid's * "tree data" pattern). When enabled, the first visible data column (or * the column referenced by `groupColumnKey`) renders a chevron toggle * and depth-based indentation. * * @example * ```ts * grid.tree = { * enabled: true, * getDataPath: (row) => row.path, // e.g., ['Adrian'], ['Adrian', 'Bryan'] * defaultExpanded: true, * }; * ``` */ tree?: GridTreeConfiguration; /** * Toggles tree-expansion of `row`. No-op when tree mode is disabled or * the row has no children. */ toggleTreeRow(row: T): Promise; /** * Expands a tree row. No-op when the row is already expanded, has no * children, or tree mode is disabled. */ expandTreeRow(row: T): Promise; /** * Collapses a tree row. No-op when the row is not currently expanded. */ collapseTreeRow(row: T): Promise; /** Expands every parent row in the current tree. */ expandAllTreeRows(): Promise; /** Collapses every currently-expanded tree row. */ collapseAllTreeRows(): Promise; /** Whether `row` is currently expanded in the tree. */ isTreeRowExpanded(row: T): boolean; /** * 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 columns in visual render order: `'start'`-pinned columns first, then * unpinned columns, then `'end'`-pinned columns. * * @remarks * Use this when you need to iterate the columns in the same order the grid * actually displays them (for example to build a column chooser). Public APIs * like {@link ApexGrid.getColumn} continue to operate on the user-supplied * {@link ApexGrid.columns} array. */ get displayColumns(): ReadonlyArray>; /** * The total number of items in the {@link ApexGrid.dataView} collection. * * @remarks * This is always the post-filter, post-sort row count — pagination does not change it. * Use {@link ApexGrid.pageItems} to read the rows currently rendered into the body. */ get totalItems(): number; /** * The records currently rendered into the virtualized body. * * @remarks * Equal to {@link ApexGrid.dataView} when pagination is disabled. With pagination * enabled (`'local'` mode) this is the active page slice. */ get pageItems(): ReadonlyArray; /** * The current zero-based page index. */ get page(): number; set page(value: number); /** * The current page size. */ get pageSize(): number; set pageSize(value: number); /** * The total number of pages computed from {@link ApexGrid.totalItems} and {@link ApexGrid.pageSize}. */ get pageCount(): number; protected watchColumns(_: ColumnConfiguration[], newConfig?: ColumnConfiguration[]): void; protected dataChanged(): void; protected pipeline(): Promise; protected paginationChanged(): void; protected quickFilterChanged(): void; protected updated(): void; protected firstUpdated(): void; /** * 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; /** * Navigates the grid to the given zero-based `page` index. * * @remarks * Emits the cancellable `pageChanging` event before applying the change and the * `pageChanged` event after. Out-of-range values are clamped into `[0, pageCount - 1]`. * * @param page - The target zero-based page index. * @returns `true` if the change was applied, `false` if cancelled or a no-op. * * @example * ```ts * await grid.gotoPage(2); * ``` */ gotoPage(page: number): Promise; /** * Updates the grid's page size and returns to the first page. * * @remarks * Emits the cancellable `pageChanging` event before applying the change and the * `pageChanged` event after. * * @param size - The new page size (must be a positive integer). * @returns `true` if the change was applied, `false` if cancelled or a no-op. */ setPageSize(size: number): Promise; /** * Navigates to the next page. No-op if already on the last page. */ nextPage(): Promise; /** * Navigates to the previous page. No-op if already on the first page. */ previousPage(): Promise; /** * Navigates to the first page. */ firstPage(): Promise; /** * Navigates to the last page. */ lastPage(): Promise; /** * Applies a new quick-filter (global search) value, emitting the cancellable * `quickFilterChanging` event first and the `quickFilterChanged` event after the * pipeline has run. * * @param value - The new quick-filter value. Pass `''` to clear. * @returns `true` if the change was applied, `false` if cancelled or a no-op. * * @example * ```ts * await grid.setQuickFilter('john'); * ``` */ setQuickFilter(value: string): Promise; /** * Returns a {@link ColumnConfiguration} for a given column. */ getColumn(id: Keys | number): ColumnConfiguration | undefined; /** * Updates the column configuration of the grid. * * @remarks * Each updated column is replaced with a fresh object reference so that cells * and headers re-render with the new template / configuration. The * user-supplied `columns` array is also reassigned for Lit reactivity. */ updateColumns(columns: ColumnConfiguration | ColumnConfiguration[]): void; /** * Pins a column to one of the grid's edges, or unpins it when `position` is `null`. * * @remarks * Emits the cancellable `columnPinning` event first and the `columnPinned` * event after the update is applied. The user-supplied {@link ApexGrid.columns} * array is not reordered — only the visual render order changes. * * @param key - The target column key. * @param position - `'start'`, `'end'`, or `null` to unpin. * @returns `true` if the change was applied, `false` if cancelled or a no-op. * * @example * ```ts * await grid.pinColumn('name', 'start'); * await grid.pinColumn('actions', 'end'); * ``` */ pinColumn(key: Keys, position: PinPosition): Promise; /** * Unpins a column. Equivalent to {@link ApexGrid.pinColumn}(`key`, `null`). * * @param key - The target column key. * @returns `true` if the change was applied, `false` if the column was already * unpinned or the operation was cancelled. */ unpinColumn(key: Keys): Promise; /** * The cell currently in edit mode, or `null`. */ get editingCell(): { rowIndex: number; columnKey: Keys; } | null; /** * The view-relative index of the row currently in edit mode (row edit mode * only), or `null`. */ get editingRow(): number | null; /** * Begins editing the cell at `(rowIndex, columnKey)`. * * @remarks * `rowIndex` is the view-relative index (matches {@link ApexGrid.pageItems}). * Returns `false` when the column isn't editable, the row index is out of * range, or the request was rejected (for example in row mode with pending * changes that couldn't be committed). */ editCell(rowIndex: number, columnKey: Keys): Promise; /** * Begins editing the entire row at `rowIndex` (row edit mode only). * * @returns `false` when editing is disabled, the grid is in cell mode, or * the row index is out of range. */ editRow(rowIndex: number): Promise; /** * Commits the current edit. * * @remarks * In cell mode this writes the active cell's pending value. In row mode it * flushes all pending values for the active row. Emits `cellValueChanging` * per changed cell (cancellable) and `cellValueChanged` after, followed by * `rowEditEnded` in row mode. */ commitEdit(): Promise; /** * Discards the current edit without writing back to {@link ApexGrid.data}. */ cancelEdit(): void; /** * Exports the current grid contents as a CSV string and (in a browser * context) triggers a download. * * @remarks * By default the export uses the post-filter/post-sort `dataView`, includes * every visible column with `exportable !== false`, and prepends a UTF-8 BOM * so Excel opens the file with the right encoding. Pass `source: 'page'` to * export only the current page, `source: 'selected'` to export the current * row selection, or `source: 'all'` to export the raw `data` array. The * returned string is the same content written to the file — useful for * tests or routing the bytes elsewhere. * * @example * ```ts * grid.exportToCSV(); // download data.csv * grid.exportToCSV({ filename: 'users', source: 'selected' }); * const text = grid.exportToCSV({ filename: '' }); // string only, no download * ``` */ exportToCSV(options?: CSVExportOptions): string; /** * The export formats offered in the toolbar's export menu, in order. * * @remarks * The community grid offers CSV only. This is the seam derived grids use to * contribute more formats: `@apexcharts/grid-enterprise` overrides it to add * `'xlsx'`. The toolbar renders one menu item per entry and dispatches the * chosen id to {@link ApexGrid.exportAs}. */ get exportFormats(): ReadonlyArray; /** * Exports the grid in the given format (one of {@link ApexGrid.exportFormats}). * Called by the toolbar's export menu. The community grid handles `'csv'`; * derived grids override to handle additional formats, delegating to `super` * for the ones they don't add. */ exportAs(formatId: string, options?: ExportOptions): void; /** * Moves a column relative to another column. * * @remarks * Emits the cancellable `columnMoving` event first and `columnMoved` after. * Reordering only succeeds when the source and target columns share the same * pinning group (start / unpinned / end) — cross-group moves return `false`. * Use {@link ApexGrid.pinColumn} to change a column's pinning group first. * * @param fromKey - The column to move. * @param toKey - The reference column. * @param position - Whether to place `fromKey` before or after `toKey`. Defaults to `'before'`. * @returns `true` if the move was applied, `false` if cancelled or a no-op. * * @example * ```ts * await grid.moveColumn('email', 'name', 'after'); * ``` */ moveColumn(fromKey: Keys, toKey: Keys, position?: ColumnDropPosition): Promise; protected bodyClickHandler(event: MouseEvent): void; protected bodyKeydownHandler(event: KeyboardEvent): void; /** * Forwards body-cell pointer interactions (press / drag-over / release) to * feature modules via {@link StateController.handleCellInteraction}. Gated on * there being at least one registered module so the community grid does no * per-event work (it registers none). The seam a range-selection feature * builds on. */ protected bodyPointerHandler(event: PointerEvent): void; protected renderHeaderRow(): import("lit-html").TemplateResult<1>; protected renderBody(): import("lit-html").TemplateResult<1>; protected renderFilterRow(): import("lit-html").TemplateResult<1> | typeof nothing; protected renderToolbar(): import("lit-html").TemplateResult<1> | typeof nothing; protected renderPaginator(): import("lit-html").TemplateResult<1> | typeof nothing; /** * Renders a visually-hidden polite live region. Status messages set via * {@link announce} land here; screen readers will read them aloud without * stealing focus. We intentionally keep this in the shadow root so we * don't have to coordinate consumer DOM placement. */ protected renderLiveRegion(): import("lit-html").TemplateResult<1>; protected render(): import("lit-html").TemplateResult<1>; /** * Sets the live region's announcement text. Screen readers configured to * read polite live updates will read the new value aloud. * * @remarks * Use this from custom UI affordances (e.g. an "Apply filter" button) so * the change is announced. Built-in operations (sort / filter / page / * select / expand) call this internally already. */ announce(message: string): void; } declare global { interface HTMLElementTagNameMap { } }