@revolist/revogrid 4.9.41 → 4.9.42

package/dist/types/components.d.ts

@@ -5,47 +5,46 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+import { 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, Providers, 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, FilterCollection, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
+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/store.utils";
+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 { Cell as Cell1, ColumnRegular as ColumnRegular1, DataType as DataType1, DimensionCols as DimensionCols1, DimensionRows as DimensionRows1, DimensionSettingsState as DimensionSettingsState1, Observable as Observable1, SelectionStoreState as SelectionStoreState1 } from "./components";
 import { EventData } from "./components/overlay/selection.utils";
-export { AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+export { 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, Providers, 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, FilterCollection, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
+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/store.utils";
+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 { Cell as Cell1, ColumnRegular as ColumnRegular1, DataType as DataType1, DimensionCols as DimensionCols1, DimensionRows as DimensionRows1, DimensionSettingsState as DimensionSettingsState1, Observable as Observable1, SelectionStoreState as SelectionStoreState1 } from "./components";
 export { EventData } from "./components/overlay/selection.utils";
 export namespace Components {
     /**
      * Revogrid - High-performance, customizable grid library for managing large datasets.
-     * :::tip
+     * ### Events guide
+     * For a comprehensive events guide, check the [Events API Page](./events.md).
+     * 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.
-     * :::
-     * :::tip
-     * For a comprehensive events guide, check the [dependency tree](#Dependencies).
-     * All events propagate to the root level of the grid.
-     * :::
+     * ### 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 />.
      */
@@ -187,7 +186,7 @@ export namespace Components {
          */
         "pinnedTopSource": DataType[];
         /**
-          * Custom grid plugins. Has to be predefined during first grid init. Every plugin should be inherited from BasePlugin.
+          * 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[];
         /**
@@ -203,9 +202,16 @@ export namespace Components {
          */
         "refresh": (type?: DimensionRows | "all") => 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.
+          * Refresh extra elements. Triggers re-rendering of extra elements and functions. Part of extraElements and registerVNode methods. Useful for plugins.
          */
-        "registerVNode": (VNode | (() => VNode))[];
+        "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.
          */
@@ -251,9 +257,14 @@ export namespace Components {
          */
         "setCellsFocus": (cellStart?: Cell, cellEnd?: Cell, colType?: string, rowType?: string) => Promise<void>;
         /**
-          * Sets data at specified cell. Useful for performance optimization. No viewport update will be triggered.
+          * 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'}]}`
          */
-        "setDataAt": (data: { row: number; col: number; } & AllDimensionType) => Promise<void | undefined>;
+        "sorting"?: SortingConfig;
         /**
           * Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop.
          */
@@ -327,7 +338,7 @@ export namespace Components {
         /**
           * 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>[];
+        "jobsBeforeRender": (Promise<any> | (() => Promise<any>))[];
         /**
           * Range allowed
          */
@@ -396,11 +407,28 @@ export namespace Components {
          */
         "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) |  (() => VNode))[] | null;
+        "nodes": (
+    | VNode
+    | ((c: ExtraNodeFuncConfig) => VNode)
+  )[];
         /**
           * Refreshes the extra component. Useful if you want to manually force the component to re-render.
          */
@@ -413,7 +441,6 @@ export namespace Components {
         "disableDynamicFiltering": boolean;
         "filterCaptions": FilterCaptions | undefined;
         "filterEntities": Record<string, LogicFunction>;
-        "filterItems": MultiFilterItem;
         "filterNames": Record<string, string>;
         "getChanges": () => Promise<ShowData | undefined>;
         "show": (newEntity?: ShowData) => Promise<void>;
@@ -550,19 +577,19 @@ export namespace Components {
         /**
           * Column data store.
          */
-        "colData": Observable1<DSourceState<ColumnRegular1, DimensionCols1>>;
+        "colData": Observable<DSourceState<ColumnRegular, DimensionCols>>;
         /**
           * Row data store.
          */
-        "dataStore": Observable1<DSourceState<DataType1, DimensionRows1>>;
+        "dataStore": Observable<DSourceState<DataType, DimensionRows>>;
         /**
           * Dimension settings X.
          */
-        "dimensionCol": Observable1<DimensionSettingsState1>;
+        "dimensionCol": Observable<DimensionSettingsState>;
         /**
           * Dimension settings Y.
          */
-        "dimensionRow": Observable1<DimensionSettingsState1>;
+        "dimensionRow": Observable<DimensionSettingsState>;
         /**
           * Custom editors register.
          */
@@ -574,7 +601,7 @@ export namespace Components {
         /**
           * Last real coordinates positions + 1.
          */
-        "lastCell": Cell1;
+        "lastCell": Cell;
         /**
           * Range selection allowed.
          */
@@ -586,7 +613,7 @@ export namespace Components {
         /**
           * Selection, range, focus.
          */
-        "selectionStore": Observable1<SelectionStoreState1>;
+        "selectionStore": Observable<SelectionStoreState>;
         /**
           * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
          */
@@ -763,20 +790,21 @@ declare global {
         "beforerange": ChangedRange;
         "afterfocus": FocusAfterRenderEvent;
         "roworderchanged": { from: number; to: number };
-        "beforesortingapply": {
+        "beforesorting": {
     column: ColumnRegular;
     order: 'desc' | 'asc';
     additive: boolean;
   };
-        "beforesorting": {
+        "beforesourcesortingapply": {
+    type: DimensionRows;
+    sorting?: SortingOrder;
+  };
+        "beforesortingapply": {
     column: ColumnRegular;
     order: 'desc' | 'asc';
     additive: boolean;
   };
-        "rowdragstart": {
-    pos: PositionItem;
-    text: string;
-  };
+        "rowdragstart": RowDragStartDetails;
         "headerclick": ColumnRegular;
         "beforecellfocus": BeforeSaveDataDetails;
         "beforefocuslost": FocusedData | null;
@@ -802,9 +830,9 @@ declare global {
     columns: ColumnCollection;
     order: Record<ColumnProp, 'asc' | 'desc' | undefined>;
   };
-        "beforefilterapply": { collection: FilterCollection };
+        "beforefilterapply": { collection: Record<ColumnProp, FilterCollectionItem> };
         "beforefiltertrimmed": {
-    collection: FilterCollection;
+    collection: Record<ColumnProp, FilterCollectionItem>;
     itemsToFilter: Record<number, boolean>;
   };
         "beforetrimmed": {
@@ -821,23 +849,24 @@ declare global {
   };
         "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.
-     * :::tip
+     * ### Events guide
+     * For a comprehensive events guide, check the [Events API Page](./events.md).
+     * 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.
-     * :::
-     * :::tip
-     * For a comprehensive events guide, check the [dependency tree](#Dependencies).
-     * All events propagate to the root level of the grid.
-     * :::
+     * ### 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 />.
      */
@@ -912,7 +941,8 @@ declare global {
     interface HTMLRevogrDataElementEventMap {
         "beforerowrender": BeforeRowRenderEvent;
         "afterrender": { type: DimensionRows };
-        "beforecellrender": BeforeCellRenderEvent<ColumnDataSchemaModel>;
+        "beforecellrender": BeforeCellRenderEvent<CellTemplateProp>;
+        "beforedatarender": AllDimensionType;
         "dragstartcell": DragStartEvent;
     }
     /**
@@ -956,6 +986,20 @@ declare global {
         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: {
@@ -1026,13 +1070,7 @@ declare global {
         new (): HTMLRevogrHeaderElement;
     };
     interface HTMLRevogrOrderEditorElementEventMap {
-        "rowdragstartinit": {
-    cell: Cell;
-    text: string;
-    pos: PositionItem;
-    event: MouseEvent;
-    rowType: DimensionRows;
-  };
+        "rowdragstartinit": RowDragStartDetails;
         "rowdragendinit": { rowType: DimensionRows };
         "rowdragmoveinit": PositionItem & { rowType: DimensionRows };
         "rowdragmousemove": Cell & { rowType: DimensionRows };
@@ -1069,18 +1107,18 @@ declare global {
         "beforepasteregion": any;
         "celleditapply": BeforeSaveDataDetails;
         "beforecellfocusinit": BeforeSaveDataDetails;
-        "beforenextvpfocus": Cell1;
+        "beforenextvpfocus": Cell;
         "setedit": BeforeEdit;
         "beforeapplyrange": FocusRenderEvent;
         "beforesetrange": any;
-        "beforeeditrender": FocusRenderEvent;
         "setrange": RangeArea & { type: MultiDimensionType };
+        "beforeeditrender": FocusRenderEvent;
         "selectall": any;
         "canceledit": any;
         "settemprange": Nullable<TempRange> | null;
         "beforesettemprange": { tempRange: Nullable<TempRange> | null } & EventData & AllDimensionType;
         "applyfocus": FocusRenderEvent;
-        "focuscell": ApplyFocusEvent;
+        "focuscell": ApplyFocusEvent & FocusRenderEvent;
         "beforerangedataapply": FocusRenderEvent;
         "selectionchangeinit": ChangedRange;
         "beforerangecopyapply": ChangedRange;
@@ -1224,14 +1262,13 @@ declare global {
 declare namespace LocalJSX {
     /**
      * Revogrid - High-performance, customizable grid library for managing large datasets.
-     * :::tip
+     * ### Events guide
+     * For a comprehensive events guide, check the [Events API Page](./events.md).
+     * 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.
-     * :::
-     * :::tip
-     * For a comprehensive events guide, check the [dependency tree](#Dependencies).
-     * All events propagate to the root level of the grid.
-     * :::
+     * ### 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 />.
      */
@@ -1338,11 +1375,11 @@ declare namespace LocalJSX {
     order: Record<ColumnProp, 'asc' | 'desc' | undefined>;
   }>) => void;
         /**
-          * Triggered after data applied or range changed.
+          * After data applied or range changed.
          */
         "onAfteredit"?: (event: RevoGridCustomEvent<AfterEditEvent>) => void;
         /**
-          * Triggered after focus render finished. Can be used to access a focus element through `event.target`. This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
+          * After focus render finished. Can be used to access a focus element through `event.target`. This is just a duplicate of `afterfocus` from `revogr-focus.tsx`.
          */
         "onAfterfocus"?: (event: RevoGridCustomEvent<FocusAfterRenderEvent>) => void;
         /**
@@ -1376,11 +1413,11 @@ declare namespace LocalJSX {
     source: DataType[];
   }>) => void;
         /**
-          * This event is triggered before autofill is applied. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
+          * Before autofill is applied. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
          */
         "onBeforeautofill"?: (event: RevoGridCustomEvent<ChangedRange>) => void;
         /**
-          * This event is triggered before the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
+          * Before the cell focus is changed. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
          */
         "onBeforecellfocus"?: (event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void;
         /**
@@ -1392,7 +1429,7 @@ declare namespace LocalJSX {
          */
         "onBeforecolumnsset"?: (event: RevoGridCustomEvent<ColumnCollection>) => void;
         /**
-          * This event is triggered before the data is edited. To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`. To override the edit result with your own value, set the `e.val` property to your desired value.
+          * Before the data is edited. To prevent the default behavior of editing data and use your own implementation, call `e.preventDefault()`. To override the edit result with your own value, set the `e.val` property to your desired value.
          */
         "onBeforeedit"?: (event: RevoGridCustomEvent<BeforeSaveDataDetails>) => void;
         /**
@@ -1406,16 +1443,16 @@ declare namespace LocalJSX {
         /**
           * Emitted before applying a filter to the data source. Use e.preventDefault() to prevent cell focus change. Modify if you need to change filters.
          */
-        "onBeforefilterapply"?: (event: RevoGridCustomEvent<{ collection: FilterCollection }>) => void;
+        "onBeforefilterapply"?: (event: RevoGridCustomEvent<{ collection: Record<ColumnProp, FilterCollectionItem> }>) => void;
         /**
           * Emitted before applying a filter to the data source. Use e.preventDefault() to prevent the default behavior of trimming values and applying the filter. Modify the `collection` property if you want to change the filters. Modify the `itemsToFilter` property if you want to filter the indexes for trimming.
          */
         "onBeforefiltertrimmed"?: (event: RevoGridCustomEvent<{
-    collection: FilterCollection;
+    collection: Record<ColumnProp, FilterCollectionItem>;
     itemsToFilter: Record<number, boolean>;
   }>) => void;
         /**
-          * This event is triggered before the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
+          * Before the grid focus is lost. To prevent the default behavior of changing the cell focus, you can call `e.preventDefault()`.
          */
         "onBeforefocuslost"?: (event: RevoGridCustomEvent<FocusedData | null>) => void;
         /**
@@ -1423,11 +1460,11 @@ declare namespace LocalJSX {
          */
         "onBeforegridrender"?: (event: RevoGridCustomEvent<any>) => void;
         /**
-          * Triggered before range applied. Use e.preventDefault() to prevent range.
+          * Before autofill is applied. Runs before beforeautofill event. Use e.preventDefault() to prevent range.
          */
         "onBeforerange"?: (event: RevoGridCustomEvent<ChangedRange>) => void;
         /**
-          * This event is triggered before applying range data, specifically when a range selection occurs. To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
+          * Before applying range data, specifically when a range selection occurs. To customize the data and prevent the default edit data from being set, you can call `e.preventDefault()`.
          */
         "onBeforerangeedit"?: (event: RevoGridCustomEvent<BeforeRangeSaveDataDetails>) => void;
         /**
@@ -1435,7 +1472,7 @@ declare namespace LocalJSX {
          */
         "onBeforerowdefinition"?: (event: RevoGridCustomEvent<{ vals: any; oldVals: any }>) => void;
         /**
-          * Triggered by sorting.plugin.ts Before sorting event. Initial sorting triggered, if this event stops no other event called. Use e.preventDefault() to prevent sorting.
+          * By `sorting.plugin.ts` <br>Triggered immediately after header click. <br>First in sorting event sequence. Ff this event stops no other event called. <br>Use `e.preventDefault()` to prevent sorting.
          */
         "onBeforesorting"?: (event: RevoGridCustomEvent<{
     column: ColumnRegular;
@@ -1443,7 +1480,7 @@ declare namespace LocalJSX {
     additive: boolean;
   }>) => void;
         /**
-          * Triggered by sorting.plugin.ts Before sorting apply. Use e.preventDefault() to prevent sorting data change.
+          * By `sorting.plugin.ts` <br> After `beforesorting` <br>Triggered after column data updated with new sorting order. <br>Use `e.preventDefault()` to prevent sorting data change.
          */
         "onBeforesortingapply"?: (event: RevoGridCustomEvent<{
     column: ColumnRegular;
@@ -1456,6 +1493,13 @@ declare namespace LocalJSX {
         "onBeforesourceset"?: (event: RevoGridCustomEvent<{
     type: DimensionRows;
     source: DataType[];
+  }>) => void;
+        /**
+          * By `sorting.plugin.ts` <br>Same as `beforesorting` but triggered after `beforeanysource` (when source is changed). <br>Use `e.preventDefault()` to prevent sorting data change.
+         */
+        "onBeforesourcesortingapply"?: (event: RevoGridCustomEvent<{
+    type: DimensionRows;
+    sorting?: SortingOrder;
   }>) => void;
         /**
           * Emitted before trimming values. Use e.preventDefault() to prevent the default behavior of trimming values. Modify the `trimmed` property if you want to filter the indexes for trimming.
@@ -1469,6 +1513,10 @@ declare namespace LocalJSX {
           * New content size has been applied. The size excludes the header. Currently, the event responsible for applying the new content size does not provide the actual size. To retrieve the actual content size, you can utilize the `getContentSize` function after the event has been triggered.
          */
         "onContentsizechanged"?: (event: RevoGridCustomEvent<MultiDimensionType>) => void;
+        /**
+          * Emmited after grid created
+         */
+        "onCreated"?: (event: RevoGridCustomEvent<any>) => void;
         /**
           * Emitted when the filter configuration is changed
          */
@@ -1480,18 +1528,19 @@ declare namespace LocalJSX {
         /**
           * This event is triggered when the row order change is started. To prevent the default behavior of changing the row order, you can call `e.preventDefault()`. To change the item name at the start of the row order change, you can set `e.text` to the desired new name.
          */
-        "onRowdragstart"?: (event: RevoGridCustomEvent<{
-    pos: PositionItem;
-    text: string;
-  }>) => void;
+        "onRowdragstart"?: (event: RevoGridCustomEvent<RowDragStartDetails>) => void;
         /**
           * Emmited when the row headers are changed.
          */
         "onRowheaderschanged"?: (event: RevoGridCustomEvent<any>) => void;
         /**
-          * This event is triggered before the order of `rgRow` is applied. To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
+          * Before the order of `rgRow` is applied. To prevent the default behavior of changing the order of `rgRow`, you can call `e.preventDefault()`.
          */
         "onRoworderchanged"?: (event: RevoGridCustomEvent<{ from: number; to: number }>) => void;
+        /**
+          * Emitted when the sorting configuration is changed
+         */
+        "onSortingconfigchanged"?: (event: RevoGridCustomEvent<SortingConfig>) => void;
         /**
           * Emitted when the viewport is scrolled. Useful for tracking viewport scrolling events.
          */
@@ -1505,7 +1554,7 @@ declare namespace LocalJSX {
          */
         "pinnedTopSource"?: DataType[];
         /**
-          * Custom grid plugins. Has to be predefined during first grid init. Every plugin should be inherited from BasePlugin.
+          * 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[];
         /**
@@ -1517,9 +1566,12 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * 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.
+          * 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 | (() => VNode))[];
+        "registerVNode"?: (
+    | VNode
+    | ((c: ExtraNodeFuncConfig) => VNode)
+  )[];
         /**
           * When true, columns are resizable.
          */
@@ -1540,6 +1592,10 @@ declare namespace LocalJSX {
           * Indicates default rgRow size. By default 0, means theme package size will be applied  Alternatively you can use `rowSize` to reset viewport
          */
         "rowSize"?: number;
+        /**
+          * Alternative way to set sorting. `{columns: [{prop: 'name', order: 'asc'}]}`
+         */
+        "sorting"?: SortingConfig;
         /**
           * Source - defines main data source. Can be an Object or 2 dimensional array([][]); Keys/indexes referenced from columns Prop.
          */
@@ -1658,7 +1714,7 @@ declare namespace LocalJSX {
         /**
           * 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>[];
+        "jobsBeforeRender"?: (Promise<any> | (() => Promise<any>))[];
         /**
           * When data render finished for the designated type
          */
@@ -1666,7 +1722,11 @@ declare namespace LocalJSX {
         /**
           * Before each cell render function. Allows to override cell properties
          */
-        "onBeforecellrender"?: (event: RevogrDataCustomEvent<BeforeCellRenderEvent<ColumnDataSchemaModel>>) => void;
+        "onBeforecellrender"?: (event: RevogrDataCustomEvent<BeforeCellRenderEvent<CellTemplateProp>>) => void;
+        /**
+          * Before data render
+         */
+        "onBeforedatarender"?: (event: RevogrDataCustomEvent<AllDimensionType>) => void;
         /**
           * Before each row render
          */
@@ -1739,11 +1799,28 @@ declare namespace LocalJSX {
          */
         "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) |  (() => VNode))[] | null;
+        "nodes"?: (
+    | VNode
+    | ((c: ExtraNodeFuncConfig) => VNode)
+  )[];
     }
     interface RevogrFilterPanel {
         /**
@@ -1752,7 +1829,6 @@ declare namespace LocalJSX {
         "disableDynamicFiltering"?: boolean;
         "filterCaptions"?: FilterCaptions | undefined;
         "filterEntities"?: Record<string, LogicFunction>;
-        "filterItems"?: MultiFilterItem;
         "filterNames"?: Record<string, string>;
         "onFilterChange"?: (event: RevogrFilterPanelCustomEvent<MultiFilterItem>) => void;
         "onResetChange"?: (event: RevogrFilterPanelCustomEvent<ColumnProp>) => void;
@@ -1912,13 +1988,7 @@ declare namespace LocalJSX {
         /**
           * Row drag started
          */
-        "onRowdragstartinit"?: (event: RevogrOrderEditorCustomEvent<{
-    cell: Cell;
-    text: string;
-    pos: PositionItem;
-    event: MouseEvent;
-    rowType: DimensionRows;
-  }>) => void;
+        "onRowdragstartinit"?: (event: RevogrOrderEditorCustomEvent<RowDragStartDetails>) => void;
         /**
           * Row dragged, new range ready to be applied
          */
@@ -1960,19 +2030,19 @@ declare namespace LocalJSX {
         /**
           * Column data store.
          */
-        "colData"?: Observable1<DSourceState<ColumnRegular1, DimensionCols1>>;
+        "colData": Observable<DSourceState<ColumnRegular, DimensionCols>>;
         /**
           * Row data store.
          */
-        "dataStore"?: Observable1<DSourceState<DataType1, DimensionRows1>>;
+        "dataStore": Observable<DSourceState<DataType, DimensionRows>>;
         /**
           * Dimension settings X.
          */
-        "dimensionCol": Observable1<DimensionSettingsState1>;
+        "dimensionCol": Observable<DimensionSettingsState>;
         /**
           * Dimension settings Y.
          */
-        "dimensionRow"?: Observable1<DimensionSettingsState1>;
+        "dimensionRow"?: Observable<DimensionSettingsState>;
         /**
           * Custom editors register.
          */
@@ -1984,7 +2054,7 @@ declare namespace LocalJSX {
         /**
           * Last real coordinates positions + 1.
          */
-        "lastCell"?: Cell1;
+        "lastCell"?: Cell;
         /**
           * Before cell get focused. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
          */
@@ -2020,7 +2090,7 @@ declare namespace LocalJSX {
         /**
           * Fired when change of viewport happens. Usually when we switch between pinned regions.
          */
-        "onBeforenextvpfocus"?: (event: RevogrOverlaySelectionCustomEvent<Cell1>) => void;
+        "onBeforenextvpfocus"?: (event: RevogrOverlaySelectionCustomEvent<Cell>) => void;
         /**
           * Before region paste happened.
          */
@@ -2042,7 +2112,7 @@ declare namespace LocalJSX {
          */
         "onBeforesettemprange"?: (event: RevogrOverlaySelectionCustomEvent<{ tempRange: Nullable<TempRange> | null } & EventData & AllDimensionType>) => void;
         /**
-          * Used for editors support when editor close requested.
+          * Cancel edit. Used for editors support when editor close requested.
          */
         "onCanceledit"?: (event: RevogrOverlaySelectionCustomEvent<any>) => void;
         /**
@@ -2060,17 +2130,17 @@ declare namespace LocalJSX {
         /**
           * Cell get focused. To prevent the default behavior of applying the edit data, you can call `e.preventDefault()`.
          */
-        "onFocuscell"?: (event: RevogrOverlaySelectionCustomEvent<ApplyFocusEvent>) => void;
+        "onFocuscell"?: (event: RevogrOverlaySelectionCustomEvent<ApplyFocusEvent & FocusRenderEvent>) => void;
         /**
           * Range data apply. Triggers datasource edit on the root level.
          */
         "onRangeeditapply"?: (event: RevogrOverlaySelectionCustomEvent<BeforeRangeSaveDataDetails>) => void;
         /**
-          * Select all.
+          * Select all cells from keyboard.
          */
         "onSelectall"?: (event: RevogrOverlaySelectionCustomEvent<any>) => void;
         /**
-          * Selection range changed.
+          * Autofill data in range. First step in applyRangeWithData
          */
         "onSelectionchangeinit"?: (event: RevogrOverlaySelectionCustomEvent<ChangedRange>) => void;
         /**
@@ -2078,7 +2148,7 @@ declare namespace LocalJSX {
          */
         "onSetedit"?: (event: RevogrOverlaySelectionCustomEvent<BeforeEdit>) => void;
         /**
-          * Set range.
+          * Set range. Third step in triggerRangeEvent.
          */
         "onSetrange"?: (event: RevogrOverlaySelectionCustomEvent<RangeArea & { type: MultiDimensionType }>) => void;
         /**
@@ -2096,7 +2166,7 @@ declare namespace LocalJSX {
         /**
           * Selection, range, focus.
          */
-        "selectionStore"?: Observable1<SelectionStoreState1>;
+        "selectionStore": Observable<SelectionStoreState>;
         /**
           * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
          */
@@ -2252,14 +2322,13 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             /**
              * Revogrid - High-performance, customizable grid library for managing large datasets.
-             * :::tip
+             * ### Events guide
+             * For a comprehensive events guide, check the [Events API Page](./events.md).
+             * 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.
-             * :::
-             * :::tip
-             * For a comprehensive events guide, check the [dependency tree](#Dependencies).
-             * All events propagate to the root level of the grid.
-             * :::
+             * ### 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 />.
              */
@@ -2280,6 +2349,20 @@ declare module "@stencil/core" {
              * and managing the lifecycle of the editor instance.
              */
             "revogr-edit": LocalJSX.RevogrEdit & JSXBase.HTMLAttributes<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)
+             * ];
+             * /**
+             */
             "revogr-extra": LocalJSX.RevogrExtra & JSXBase.HTMLAttributes<HTMLRevogrExtraElement>;
             "revogr-filter-panel": LocalJSX.RevogrFilterPanel & JSXBase.HTMLAttributes<HTMLRevogrFilterPanelElement>;
             /**