@revolist/revogrid
Version:
Virtual reactive data grid spreadsheet component - RevoGrid.
1,089 lines • 113 kB
TypeScript
/* eslint-disable */
/* tslint:disable */
/**
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
import { GridPlugin } from "./plugins/base.plugin";
import { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
import { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
import { SortingConfig, SortingOrder } from "./plugins";
import { GroupingOptions } from "./plugins/groupingRow/grouping.row.types";
import { VNode } from "./stencil-public-runtime";
import { FocusedData } from "./components/revoGrid/viewport.service";
import { ColumnCollection } from "./utils/column.utils";
import { DataInput } from "./plugins/export/types";
import { Observable } from "./utils";
import { DSourceState, Groups } from "./store/index";
import { ResizeProps } from "./components/header/resizable.directive";
import { HeaderRenderProps } from "./components/header/header-renderer";
import { HeaderGroupRendererProps } from "./components/header/header-group-renderer";
import { EventData } from "./components/overlay/selection.utils";
export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
export { GridPlugin } from "./plugins/base.plugin";
export { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
export { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
export { SortingConfig, SortingOrder } from "./plugins";
export { GroupingOptions } from "./plugins/groupingRow/grouping.row.types";
export { VNode } from "./stencil-public-runtime";
export { FocusedData } from "./components/revoGrid/viewport.service";
export { ColumnCollection } from "./utils/column.utils";
export { DataInput } from "./plugins/export/types";
export { Observable } from "./utils";
export { DSourceState, Groups } from "./store/index";
export { ResizeProps } from "./components/header/resizable.directive";
export { HeaderRenderProps } from "./components/header/header-renderer";
export { HeaderGroupRendererProps } from "./components/header/header-group-renderer";
export { EventData } from "./components/overlay/selection.utils";
export namespace Components {
/**
* Revogrid - High-performance, customizable grid library for managing large datasets.
* ### Events guide
* For a comprehensive events guide, check the [Events API Page](/guide/api/events).
* All events propagate to the root level of the grid. [Dependency tree](#Dependencies).
* ### Type definitions
* Read [type definition file](https://github.com/revolist/revogrid/blob/master/src/interfaces.d.ts) for the full interface information.
* All complex property types such as `ColumnRegular`, `ColumnProp`, `ColumnDataSchemaModel` can be found there.
* ### HTMLRevoGridElement
* @example data-rgCol-rgRow - main data slot. Applies extra elements in <revogr-data />.
* @example focus-rgCol-rgRow - focus layer for main data. Applies extra elements in <revogr-focus />.
*/
interface RevoGrid {
/**
* Enable accessibility. If disabled, the grid will not be accessible.
* @default true
*/
"accessible": boolean;
/**
* Add trimmed by type
*/
"addTrimmed": (trimmed: Record<number, boolean>, trimmedType?: string, type?: DimensionRows) => Promise<CustomEvent<{ trimmed: Record<number, boolean>; trimmedType: string; type: string; }>>;
/**
* Additional data to be passed to plugins, renders or editors. For example if you need to pass Vue component instance.
*/
"additionalData": AdditionalData;
/**
* Apply changes in editor when closed except 'Escape' cases. If custom editor in use method getValue required. Check interfaces.d.ts `EditorBase` for more info.
*/
"applyOnClose": boolean;
/**
* Autosize config. Enables columns autoSize. For more details check `autoSizeColumn` plugin. By default disabled, hence operation is not performance efficient. `true` to enable with default params (double header separator click for autosize). Or define config. See `AutoSizeColumnConfig` for more details.
*/
"autoSizeColumn": boolean | AutoSizeColumnConfig;
/**
* Disable native drag&drop plugin.
*/
"canDrag": boolean;
/**
* When true cell focus appear.
*/
"canFocus": boolean;
/**
* Enable column move plugin.
*/
"canMoveColumns": boolean;
/**
* Clear current grid focus. Grid has no longer focus on it.
*/
"clearFocus": () => Promise<void>;
/**
* Clears column sorting
*/
"clearSorting": () => Promise<void>;
/**
* Indicates default column size.
*/
"colSize": number;
/**
* Column Types Format. Every type represent multiple column properties. Types will be merged but can be replaced with column properties. Types were made as separate objects to be reusable per multiple columns.
*/
"columnTypes": { [name: string]: ColumnType };
/**
* Columns - defines an array of grid columns. Can be column or grouped column.
*/
"columns": (ColumnRegular | ColumnGrouping)[];
/**
* Disable lazy rendering mode for the `X axis`. Use when not many columns present and you don't need rerenader cells during scroll. Can be used for initial rendering performance improvement.
*/
"disableVirtualX": boolean;
/**
* Disable lazy rendering mode for the `Y axis`. Use when not many rows present and you don't need rerenader cells during scroll. Can be used for initial rendering performance improvement.
*/
"disableVirtualY": boolean;
/**
* Custom editors register.
*/
"editors": Editors;
/**
* Enable export plugin.
*/
"exporting": boolean;
/**
* Enables filter plugin. Can be boolean. Or can be filter collection See `FilterCollection` for more info.
*/
"filter": boolean | ColumnFilterConfig;
/**
* Apply changes typed in editor on editor close except Escape cases. If custom editor in use method `getValue` required. Check `interfaces.d.ts` `EditorBase` for more info.
*/
"focusTemplate": FocusTemplateFunc;
/**
* Defines how many rows/columns should be rendered outside visible area.
*/
"frameSize": number;
/**
* Provides access to column internal store observer Can be used for plugin support
* @param type - type of column
*/
"getColumnStore": (type?: DimensionCols) => Promise<Observable<DSourceState<ColumnRegular, DimensionCols>>>;
/**
* Receive all columns in data source
*/
"getColumns": () => Promise<ColumnRegular[]>;
/**
* Get size of content Including all pinned data
*/
"getContentSize": () => Promise<Cell>;
/**
* Get the currently focused cell.
*/
"getFocused": () => Promise<FocusedData | null>;
/**
* Get all active plugins instances
*/
"getPlugins": () => Promise<PluginBaseComponent[]>;
/**
* Get the currently selected Range.
*/
"getSelectedRange": () => Promise<(RangeArea & AllDimensionType) | null>;
/**
* Get data from source
*/
"getSource": (type?: DimensionRows) => Promise<DataType[]>;
/**
* Provides access to rows internal store observer Can be used for plugin support
* @param type - type of source
*/
"getSourceStore": (type?: DimensionRows) => Promise<Observable<DSourceState<DataType, DimensionRows>>>;
/**
* Get data from visible part of source Trimmed/filtered rows will be excluded
* @param type - type of source
*/
"getVisibleSource": (type?: DimensionRows) => Promise<any[]>;
/**
* Group rows based on this property. Define properties to be groped by grouping plugin See `GroupingOptions`.
*/
"grouping": GroupingOptions;
/**
* Please only hide the attribution if you are subscribed to Pro version
*/
"hideAttribution": boolean;
/**
* Prevent rendering until job is done. Can be used for initial rendering performance improvement. When several plugins require initial rendering this will prevent double initial rendering.
*/
"jobsBeforeRender": Promise<any>[];
/**
* Pinned bottom Source: {[T in ColumnProp]: any} - defines pinned bottom rows data source.
*/
"pinnedBottomSource": DataType[];
/**
* Pinned top Source: {[T in ColumnProp]: any} - defines pinned top rows data source.
*/
"pinnedTopSource": DataType[];
/**
* Custom grid plugins. Can be added or removed at runtime. Every plugin should be inherited from BasePlugin class. For more details check [Plugin guide](https://rv-grid.com/guide/plugin/)
*/
"plugins": GridPlugin[];
/**
* When true, user can range selection.
*/
"range": boolean;
/**
* When true, grid in read only mode.
*/
"readonly": boolean;
/**
* Refreshes data viewport. Can be specific part as rgRow or pinned rgRow or 'all' by default.
*/
"refresh": (type?: DimensionRows | "all") => Promise<void>;
/**
* Refresh extra elements. Triggers re-rendering of extra elements and functions. Part of extraElements and registerVNode methods. Useful for plugins.
*/
"refreshExtraElements": () => Promise<void>;
/**
* Register new virtual node inside of grid. Used for additional items creation such as plugin elements. Should be set before grid render inside of plugins. Can return VNode result of h() function or a function that returns VNode. Function can be used for performance improvement and additional renders.
*/
"registerVNode": (
| VNode
| ((c: ExtraNodeFuncConfig) => VNode)
)[];
/**
* When true, columns are resizable.
*/
"resize": boolean;
/**
* Row class property mapping. Map custom classes to rows from row object data. Define this property in rgRow object and this will be mapped as rgRow class.
*/
"rowClass": string;
/**
* Custom row properies to be applied. See `RowDefinition` for more info.
*/
"rowDefinitions": RowDefinition[];
/**
* Excel like functionality. Show row numbers. Also can be used for custom row header render if object provided.
*/
"rowHeaders": RowHeaders | boolean;
/**
* Indicates default rgRow size. By default 0, means theme package size will be applied Alternatively you can use `rowSize` to reset viewport
*/
"rowSize": number;
/**
* Scrolls viewport to specified column by index.
*/
"scrollToColumnIndex": (coordinate?: number) => Promise<void>;
/**
* Scrolls viewport to specified column by prop
*/
"scrollToColumnProp": (prop: ColumnProp, dimension?: DimensionTypeCol) => Promise<void>;
/**
* Scrolls view port to coordinate
*/
"scrollToCoordinate": (cell: Partial<Cell>) => Promise<void>;
/**
* Scrolls viewport to specified row by index.
*/
"scrollToRow": (coordinate?: number) => Promise<void>;
/**
* Open editor for cell.
*/
"setCellEdit": (rgRow: number, prop: ColumnProp, rowSource?: DimensionRows) => Promise<void>;
/**
* Set focus range.
*/
"setCellsFocus": (cellStart?: Cell, cellEnd?: Cell, colType?: string, rowType?: string) => Promise<void>;
/**
* Refreshes data at specified cell. Useful for performance optimization. No viewport update will be triggered.
* @example const grid = document.querySelector('revo-grid'); grid.setDataAt({ row: 0, col: 0, val: 'test' }); // refresh
*/
"setDataAt": ({ row, col, colType, rowType, val, skipDataUpdate }: { row: number; col: number; val?: any; skipDataUpdate?: boolean; } & AllDimensionType) => Promise<void | undefined>;
/**
* Alternative way to set sorting. `{columns: [{prop: 'name', order: 'asc'}]}` Use SortingPlugin to get current sorting state
*/
"sorting"?: SortingConfig;
/**
* Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop.
*/
"source": DataType[];
/**
* Stretch strategy for columns by `StretchColumn` plugin. For example if there are more space on the right last column size would be increased.
*/
"stretch": boolean | string;
/**
* Theme name.
*/
"theme": Theme;
/**
* Trimmed rows. Functionality which allows to hide rows from main data set. `trimmedRows` are physical `rgRow` indexes to hide.
*/
"trimmedRows": Record<number, boolean>;
/**
* Update column sorting
* @param column - column prop and cellCompare
* @param order - order to apply
* @param additive - if false will replace current order later passed to SortingPlugin
*/
"updateColumnSorting": (column: Pick<ColumnRegular, "prop" | "cellCompare">, order: "asc" | "desc" | undefined, additive: boolean) => Promise<void>;
/**
* Update columns
*/
"updateColumns": (cols: ColumnRegular[]) => Promise<void>;
/**
* When true enable clipboard.
*/
"useClipboard": boolean;
}
interface RevogrAttribution {
}
/**
* This Clipboard provides functionality for handling clipboard events in a web application.
*/
interface RevogrClipboard {
"doCopy": (e: DataTransfer, data?: DataFormat[][]) => Promise<void>;
/**
* If readonly mode - disabled Paste event
*/
"readonly": boolean;
}
/**
* This component is responsible for rendering data
* Rows, columns, groups and cells
*/
interface RevogrData {
/**
* Additional data to pass to renderer Used in plugins such as vue or react to pass root app entity to cells
*/
"additionalData": any;
/**
* Column source
*/
"colData": Observable<DSourceState<ColumnRegular, DimensionCols>>;
/**
* Column data type
*/
"colType": DimensionCols | 'rowHeaders';
/**
* Data rows source
*/
"dataStore": Observable<DSourceState<DataType, DimensionRows>>;
/**
* Dimension settings Y
*/
"dimensionRow": Observable<DimensionSettingsState>;
/**
* Prevent rendering until job is done. Can be used for initial rendering performance improvement. When several plugins require initial rendering this will prevent double initial rendering.
*/
"jobsBeforeRender": (Promise<any> | (() => Promise<any>))[];
/**
* Range allowed
*/
"range": boolean;
/**
* Readonly mode
*/
"readonly": boolean;
/**
* Defines property from which to read row class
*/
"rowClass": string;
/**
* Selection, range, focus for row selection
*/
"rowSelectionStore": Observable<SelectionStoreState>;
/**
* Row data type
*/
"type": DimensionRows;
/**
* Pointed cell update.
*/
"updateCell": (e: { row: number; col: number; }) => Promise<void>;
/**
* Viewport X
*/
"viewportCol": Observable<ViewportState>;
/**
* Viewport Y
*/
"viewportRow": Observable<ViewportState>;
}
/**
* Represents a cell editor in a grid.
* It manages the editing of cells by handling events, saving data, rendering the editor UI,
* and managing the lifecycle of the editor instance.
*/
interface RevogrEdit {
/**
* Additional data to pass to renderer
*/
"additionalData": any;
/**
* Before editor got disconnected. Can be triggered multiple times before actual disconnect.
*/
"beforeDisconnect": () => Promise<void>;
/**
* Cancel pending changes flag. Editor will be closed without autosave.
*/
"cancelChanges": () => Promise<void>;
/**
* Column data for editor.
*/
"column": ColumnDataSchemaModel | null;
/**
* Cell to edit data.
*/
"editCell": EditCell;
/**
* Custom editors register
*/
"editor": EditorCtr | null;
/**
* Save on editor close. Defines if data should be saved on editor close.
*/
"saveOnClose": boolean;
}
/**
* Contains extra elements for stencil components.
* Performs rendering and updates for external components.
* @example In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:
* function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {
* // use `config.refresh()` for component to re-render
* return h('div')
* }
* revogrid.registerVNode = [
* ...existingNodes,
* paginationPanel.bind(this)
* ];
* /**
*/
interface RevogrExtra {
/**
* Nodes to render
*/
"nodes": (
| VNode
| ((c: ExtraNodeFuncConfig) => VNode)
)[];
/**
* Refreshes the extra component. Useful if you want to manually force the component to re-render.
*/
"refresh": () => Promise<void>;
}
interface RevogrFilterPanel {
/**
* If true, closes the filter panel when clicking outside
*/
"closeOnOutsideClick": boolean;
/**
* Disables dynamic filtering. A way to apply filters on Save only
*/
"disableDynamicFiltering": boolean;
"filterCaptions": Partial<FilterCaptions> | undefined;
"filterEntities": Record<string, LogicFunction>;
"filterNames": Record<string, string>;
"getChanges": () => Promise<ShowData | undefined>;
"show": (newEntity?: ShowData) => Promise<void>;
}
/**
* Focus component. Shows focus layer around the cell that is currently in focus.
* @example focus-rgCol-rgRow
*/
interface RevogrFocus {
/**
* Column source
*/
"colData": Observable<DSourceState<ColumnRegular, DimensionCols>>;
/**
* Column type
*/
"colType": DimensionCols;
/**
* Data rows source
*/
"dataStore": Observable<DSourceState<DataType, DimensionRows>>;
/**
* Dimension settings X
*/
"dimensionCol": Observable<DimensionSettingsState>;
/**
* Dimension settings Y
*/
"dimensionRow": Observable<DimensionSettingsState>;
/**
* Focus template custom function. Can be used to render custom focus layer.
*/
"focusTemplate": FocusTemplateFunc | null;
/**
* Row type
*/
"rowType": DimensionRows;
/**
* Selection, range, focus for selection
*/
"selectionStore": Observable<SelectionStoreState>;
}
interface RevogrHeader {
/**
* Extra properties to pass into header renderer, such as vue or react components to handle parent
*/
"additionalData": any;
/**
* If columns can be resized
*/
"canResize": boolean;
/**
* Columns - defines an array of grid columns.
*/
"colData": ColumnRegular[];
/**
* Column filter
*/
"columnFilter": boolean;
/**
* Dimension settings X
*/
"dimensionCol": Observable<DimensionSettingsState>;
/**
* Grouping depth, how many levels of grouping
*/
"groupingDepth": number;
/**
* Column groups
*/
"groups": Groups;
/**
* Readonly mode
*/
"readonly": boolean;
/**
* Defines resize position
*/
"resizeHandler": ResizeProps['active'];
/**
* Selection, range, focus
*/
"selectionStore": Observable<SelectionStoreState>;
/**
* Column type
*/
"type": DimensionCols | 'rowHeaders';
/**
* Viewport X
*/
"viewportCol": Observable<ViewportState>;
}
/**
* Component for handling row order editor.
*/
interface RevogrOrderEditor {
"clearOrder": () => Promise<void>;
/**
* Static stores, not expected to change during component lifetime
*/
"dataStore": Observable<DSourceState<DataType, DimensionRows>>;
/**
* Dimension settings X
*/
"dimensionCol": Observable<DimensionSettingsState>;
/**
* Dimension settings Y
*/
"dimensionRow": Observable<DimensionSettingsState>;
"dragStart": (e: DragStartEvent) => Promise<void>;
"endOrder": (e: MouseEvent) => Promise<void>;
/**
* Parent element
*/
"parent": HTMLElement;
"rowType": DimensionRows;
}
/**
* Component for overlaying the grid with the selection.
*/
interface RevogrOverlaySelection {
/**
* Additional data to pass to renderer.
*/
"additionalData": any;
/**
* If true applys changes when cell closes if not Escape.
*/
"applyChangesOnClose": boolean;
/**
* Enable revogr-order-editor component (read more in revogr-order-editor component). Allows D&D.
*/
"canDrag": boolean;
/**
* Column data store.
*/
"colData": Observable<DSourceState<ColumnRegular, DimensionCols>>;
/**
* Row data store.
*/
"dataStore": Observable<DSourceState<DataType, DimensionRows>>;
/**
* Dimension settings X.
*/
"dimensionCol": Observable<DimensionSettingsState>;
/**
* Dimension settings Y.
*/
"dimensionRow": Observable<DimensionSettingsState>;
/**
* Custom editors register.
*/
"editors": Editors;
/**
* Is mobile view mode.
*/
"isMobileDevice": boolean;
/**
* Last real coordinates positions + 1.
*/
"lastCell": Cell;
/**
* Range selection allowed.
*/
"range": boolean;
/**
* Readonly mode.
*/
"readonly": boolean;
/**
* Selection, range, focus.
*/
"selectionStore": Observable<SelectionStoreState>;
/**
* Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
*/
"useClipboard": boolean;
}
/**
* Row headers component
* Visible on the left side of the table
*/
interface RevogrRowHeaders {
/**
* Additional data to pass to renderer
*/
"additionalData": any;
/**
* Viewport data
*/
"dataPorts": ViewportData[];
/**
* Header props
*/
"headerProp": Record<string, any>;
/**
* Header height to setup row headers
*/
"height": number;
/**
* Prevent rendering until job is done. Can be used for initial rendering performance improvement. When several plugins require initial rendering this will prevent double initial rendering.
*/
"jobsBeforeRender": Promise<any>[];
/**
* Enable resize
*/
"resize": boolean;
/**
* Row class
*/
"rowClass": string;
/**
* Row header column
*/
"rowHeaderColumn": RowHeaders;
}
/**
* Virtual scroll component
*/
interface RevogrScrollVirtual {
/**
* Update if `delta` exists in case we don't know current position or if it's external change
*/
"changeScroll": (e: ViewPortScrollEvent) => Promise<ViewPortScrollEvent>;
/**
* Client size
*/
"clientSize": number;
/**
* Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)
*/
"dimension": DimensionType;
/**
* Dimensions
*/
"realSize": number;
"setScroll": (e: ViewPortScrollEvent) => Promise<void>;
/**
* Virtual size
*/
"virtualSize": number;
}
/**
* Temporary range selection component. Shows temporary range selection.
*/
interface RevogrTempRange {
/**
* Dimension column store
*/
"dimensionCol": Observable<DimensionSettingsState>;
/**
* Dimension row store
*/
"dimensionRow": Observable<DimensionSettingsState>;
/**
* Selection store, shows current selection and focus
*/
"selectionStore": Observable<SelectionStoreState>;
}
/**
* Viewport scroll component for RevoGrid
*/
interface RevogrViewportScroll {
/**
* Extra layer for scroll event monitoring, where MouseWheel event is not passing We need to trigger scroll event in case there is no mousewheel event
*/
"applyScroll": (type: DimensionType, e: UIEvent) => Promise<void>;
/**
* update on delta in case we don't know existing position or external change
* @param e
*/
"changeScroll": (e: ViewPortScrollEvent, silent?: boolean) => Promise<ViewPortScrollEvent | undefined>;
"colType": DimensionCols | 'rowHeaders';
/**
* Height of inner content
*/
"contentHeight": number;
/**
* Width of inner content
*/
"contentWidth": number;
/**
* Enable row header
*/
"rowHeader": boolean;
"setScroll": (e: ViewPortScrollEvent) => Promise<void>;
}
interface VnodeHtml {
"redraw": (() => VNode[]) | null | undefined;
}
}
export interface RevoGridCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevoGridElement;
}
export interface RevogrClipboardCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrClipboardElement;
}
export interface RevogrDataCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrDataElement;
}
export interface RevogrEditCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrEditElement;
}
export interface RevogrFilterPanelCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrFilterPanelElement;
}
export interface RevogrFocusCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrFocusElement;
}
export interface RevogrHeaderCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrHeaderElement;
}
export interface RevogrOrderEditorCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrOrderEditorElement;
}
export interface RevogrOverlaySelectionCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrOverlaySelectionElement;
}
export interface RevogrRowHeadersCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrRowHeadersElement;
}
export interface RevogrScrollVirtualCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrScrollVirtualElement;
}
export interface RevogrViewportScrollCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLRevogrViewportScrollElement;
}
export interface VnodeHtmlCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLVnodeHtmlElement;
}
declare global {
interface HTMLRevoGridElementEventMap {
"contentsizechanged": MultiDimensionType;
"beforeedit": BeforeSaveDataDetails;
"beforerangeedit": BeforeRangeSaveDataDetails;
"afteredit": AfterEditEvent;
"beforeautofill": ChangedRange;
"beforerange": ChangedRange;
"afterfocus": FocusAfterRenderEvent;
"roworderchanged": { from: number; to: number };
"beforesorting": {
column: ColumnRegular;
order: 'desc' | 'asc';
additive: boolean;
};
"beforesourcesortingapply": {
type: DimensionRows;
sorting?: SortingOrder;
};
"beforesortingapply": {
column: ColumnRegular;
order: 'desc' | 'asc';
additive: boolean;
};
"rowdragstart": RowDragStartDetails;
"headerclick": ColumnRegular;
"beforecellfocus": BeforeSaveDataDetails;
"beforefocuslost": FocusedData | null;
"beforesourceset": {
type: DimensionRows;
source: DataType[];
};
"beforeanysource": {
type: DimensionRows;
source: DataType[];
};
"aftersourceset": {
type: DimensionRows;
source: DataType[];
};
"afteranysource": {
type: DimensionRows;
source: DataType[];
};
"beforecolumnsset": ColumnCollection;
"beforecolumnapplied": ColumnCollection;
"aftercolumnsset": {
columns: ColumnCollection;
order: SortingOrder;
};
"beforefilterapply": { collection: Record<ColumnProp, FilterCollectionItem> };
"beforefiltertrimmed": {
collection: Record<ColumnProp, FilterCollectionItem>;
itemsToFilter: Record<number, boolean>;
};
"beforetrimmed": {
trimmed: Record<number, boolean>;
trimmedType: string;
type: string;
};
"aftertrimmed": any;
"viewportscroll": ViewPortScrollEvent;
"beforeexport": DataInput;
"beforeeditstart": BeforeSaveDataDetails;
"aftercolumnresize": {
[index: number]: ColumnRegular;
};
"beforerowdefinition": { vals: any; oldVals: any };
"filterconfigchanged": any;
"sortingconfigchanged": SortingConfig;
"rowheaderschanged": any;
"beforegridrender": any;
"aftergridrender": any;
"aftergridinit": any;
"additionaldatachanged": any;
"afterthemechanged": Theme;
"created": any;
}
/**
* Revogrid - High-performance, customizable grid library for managing large datasets.
* ### Events guide
* For a comprehensive events guide, check the [Events API Page](/guide/api/events).
* All events propagate to the root level of the grid. [Dependency tree](#Dependencies).
* ### Type definitions
* Read [type definition file](https://github.com/revolist/revogrid/blob/master/src/interfaces.d.ts) for the full interface information.
* All complex property types such as `ColumnRegular`, `ColumnProp`, `ColumnDataSchemaModel` can be found there.
* ### HTMLRevoGridElement
* @example data-rgCol-rgRow - main data slot. Applies extra elements in <revogr-data />.
* @example focus-rgCol-rgRow - focus layer for main data. Applies extra elements in <revogr-focus />.
*/
interface HTMLRevoGridElement extends Components.RevoGrid, HTMLStencilElement {
addEventListener<K extends keyof HTMLRevoGridElementEventMap>(type: K, listener: (this: HTMLRevoGridElement, ev: RevoGridCustomEvent<HTMLRevoGridElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLRevoGridElementEventMap>(type: K, listener: (this: HTMLRevoGridElement, ev: RevoGridCustomEvent<HTMLRevoGridElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLRevoGridElement: {
prototype: HTMLRevoGridElement;
new (): HTMLRevoGridElement;
};
interface HTMLRevogrAttributionElement extends Components.RevogrAttribution, HTMLStencilElement {
}
var HTMLRevogrAttributionElement: {
prototype: HTMLRevogrAttributionElement;
new (): HTMLRevogrAttributionElement;
};
interface HTMLRevogrClipboardElementEventMap {
"beforepaste": {
raw: string;
isHTML: boolean;
event: ClipboardEvent;
dataText: string;
};
"beforepasteapply": {
raw: string;
parsed: string[][];
event: ClipboardEvent;
};
"pasteregion": string[][];
"afterpasteapply": {
raw: string;
parsed: string[][];
event: ClipboardEvent;
};
"beforecut": {
event: ClipboardEvent;
};
"clearregion": DataTransfer;
"beforecopy": {
event: ClipboardEvent;
};
"beforecopyapply": {
event: DataTransfer;
data?: string[][];
};
"copyregion": DataTransfer;
}
/**
* This Clipboard provides functionality for handling clipboard events in a web application.
*/
interface HTMLRevogrClipboardElement extends Components.RevogrClipboard, HTMLStencilElement {
addEventListener<K extends keyof HTMLRevogrClipboardElementEventMap>(type: K, listener: (this: HTMLRevogrClipboardElement, ev: RevogrClipboardCustomEvent<HTMLRevogrClipboardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLRevogrClipboardElementEventMap>(type: K, listener: (this: HTMLRevogrClipboardElement, ev: RevogrClipboardCustomEvent<HTMLRevogrClipboardElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLRevogrClipboardElement: {
prototype: HTMLRevogrClipboardElement;
new (): HTMLRevogrClipboardElement;
};
interface HTMLRevogrDataElementEventMap {
"beforerowrender": BeforeRowRenderEvent;
"afterrender": { type: DimensionRows };
"beforecellrender": BeforeCellRenderEvent<CellTemplateProp>;
"beforedatarender": AllDimensionType;
"dragstartcell": DragStartEvent;
}
/**
* This component is responsible for rendering data
* Rows, columns, groups and cells
*/
interface HTMLRevogrDataElement extends Components.RevogrData, HTMLStencilElement {
addEventListener<K extends keyof HTMLRevogrDataElementEventMap>(type: K, listener: (this: HTMLRevogrDataElement, ev: RevogrDataCustomEvent<HTMLRevogrDataElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLRevogrDataElementEventMap>(type: K, listener: (this: HTMLRevogrDataElement, ev: RevogrDataCustomEvent<HTMLRevogrDataElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLRevogrDataElement: {
prototype: HTMLRevogrDataElement;
new (): HTMLRevogrDataElement;
};
interface HTMLRevogrEditElementEventMap {
"celleditinit": SaveDataDetails;
"closeedit": boolean | undefined;
}
/**
* Represents a cell editor in a grid.
* It manages the editing of cells by handling events, saving data, rendering the editor UI,
* and managing the lifecycle of the editor instance.
*/
interface HTMLRevogrEditElement extends Components.RevogrEdit, HTMLStencilElement {
addEventListener<K extends keyof HTMLRevogrEditElementEventMap>(type: K, listener: (this: HTMLRevogrEditElement, ev: RevogrEditCustomEvent<HTMLRevogrEditElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLRevogrEditElementEventMap>(type: K, listener: (this: HTMLRevogrEditElement, ev: RevogrEditCustomEvent<HTMLRevogrEditElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLRevogrEditElement: {
prototype: HTMLRevogrEditElement;
new (): HTMLRevogrEditElement;
};
/**
* Contains extra elements for stencil components.
* Performs rendering and updates for external components.
* @example In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:
* function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {
* // use `config.refresh()` for component to re-render
* return h('div')
* }
* revogrid.registerVNode = [
* ...existingNodes,
* paginationPanel.bind(this)
* ];
* /**
*/
interface HTMLRevogrExtraElement extends Components.RevogrExtra, HTMLStencilElement {
}
var HTMLRevogrExtraElement: {
prototype: HTMLRevogrExtraElement;
new (): HTMLRevogrExtraElement;
};
interface HTMLRevogrFilterPanelElementEventMap {
"filterChange": MultiFilterItem;
"resetChange": ColumnProp;
}
interface HTMLRevogrFilterPanelElement extends Components.RevogrFilterPanel, HTMLStencilElement {
addEventListener<K extends keyof HTMLRevogrFilterPanelElementEventMap>(type: K, listener: (this: HTMLRevogrFilterPanelElement, ev: RevogrFilterPanelCustomEvent<HTMLRevogrFilterPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLRevogrFilterPanelElementEventMap>(type: K, listener: (this: HTMLRevogrFilterPanelElement, ev: RevogrFilterPanelCustomEvent<HTMLRevogrFilterPanelElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLRevogrFilterPanelElement: {
prototype: HTMLRevogrFilterPanelElement;
new (): HTMLRevogrFilterPanelElement;
};
interface HTMLRevogrFocusElementEventMap {
"beforefocusrender": FocusRenderEvent;
"beforescrollintoview": { el: HTMLElement };
"afterfocus": FocusAfterRenderEvent;
}
/**
* Focus component. Shows focus layer around the cell that is currently in focus.
* @example focus-rgCol-rgRow
*/
interface HTMLRevogrFocusElement extends Components.RevogrFocus, HTMLStencilElement {
addEventListener<K extends keyof HTMLRevogrFocusElementEventMap>(type: K, listener: (this: HTMLRevogrFocusElement, ev: RevogrFocusCustomEvent<HTMLRevogrFocusElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLRevogrFocusElementEventMap>(type: K, listener: (this: HTMLRevogrFocusElement, ev: RevogrFocusCustomEvent<HTMLRevogrFocusElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLRevogrFocusElement: {
prototype: HTMLRevogrFocusElement;
new (): HTMLRevogrFocusElement;
};
interface HTMLRevogrHeaderElementEventMap {
"beforeheaderclick": InitialHeaderClick;
"headerresize": ViewSettingSizeProp;
"beforeheaderresize": ColumnRegular[];
"headerdblclick": InitialHeaderClick;
"beforeheaderrender": HeaderRenderProps;
"beforegroupheaderrender": HeaderGroupRendererProps;
"afterheaderrender": ProvidersColumns;
}
interface HTMLRevogrHeaderElement extends Components.RevogrHeader, HTMLStencilElement {
addEventListener<K extends keyof HTMLRevogrHeaderElementEventMap>(type: K, listener: (this: HTMLRevogrHeaderElement, ev: RevogrHeaderCustomEvent<HTMLRevogrHeaderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLRevogrHeaderElementEventMap>(type: K, listener: (this: HTMLRevogrHeaderElement, ev: RevogrHeaderCustomEvent<HTMLRevogrHeaderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLRevogrHeaderElement: {
prototype: HTMLRevogrHeaderElement;
new (): HTMLRevogrHeaderElement;
};
interface HTMLRevogrOrderEditorElementEventMap {
"rowdragstartinit": RowDragStartDetails;
"rowdragendinit": { rowType: DimensionRows };
"rowdragmoveinit": Posit