Merge pull request #728 from revolist/provider-core

feat: improved providers core with column

Author: revolist

src/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-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, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+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";
@@ -21,7 +21,7 @@ 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, Providers, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+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";
@@ -1067,7 +1067,7 @@ declare global {
         "headerdblclick": InitialHeaderClick;
         "beforeheaderrender": HeaderRenderProps;
         "beforegroupheaderrender": HeaderGroupRendererProps;
-        "afterheaderrender": Providers<DimensionCols | 'rowHeaders'>;
+        "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;
@@ -1938,7 +1938,7 @@ declare namespace LocalJSX {
         /**
           * After all header cells rendered. Finalizes cell rendering.
          */
-        "onAfterheaderrender"?: (event: RevogrHeaderCustomEvent<Providers<DimensionCols | 'rowHeaders'>>) => void;
+        "onAfterheaderrender"?: (event: RevogrHeaderCustomEvent<ProvidersColumns>) => void;
         /**
           * Before each group header cell render function. Allows to override group header cell properties
          */

src/components/data/revogr-data.tsx

@@ -172,8 +172,10 @@ export class RevogrData {
     // make sure we have correct data, before render
     this.providers = {
       type: this.type,
+      colType: this.colType,
       readonly: this.readonly,
       data: this.dataStore,
+      columns: this.colData,
       viewport: this.viewportCol,
       dimension: this.dimensionRow,
       selection: this.rowSelectionStore,

src/components/header/header-group-renderer.tsx

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { Group } from '@store';
-import type { CellProps, Providers, DimensionCols } from '@type';
+import type { CellProps, ProvidersColumns } from '@type';
 import { ResizeEvent, ResizeProps } from './resizable.directive';
 import { HEADER_CLASS, MIN_COL_SIZE } from '../../utils/consts';
 import { HeaderCellRenderer } from './header-cell-renderer';
@@ -9,7 +9,7 @@ export type HeaderGroupRendererProps = {
   start: number;
   end: number;
   group: Group;
-  providers: Providers<DimensionCols | 'rowHeaders'>;
+  providers: ProvidersColumns;
   additionalData: any;
   canResize?: boolean;
   onResize?(e: ResizeEvent): void;

src/components/header/revogr-header.tsx

@@ -17,13 +17,13 @@ import type {
   ColumnRegular,
   DimensionSettingsState,
   InitialHeaderClick,
-  Providers,
   ViewportState,
   ViewSettingSizeProp,
   DimensionCols,
   SelectionStoreState,
   RangeArea,
   VirtualPositionItem,
+  ProvidersColumns,
 } from '@type';
 import type { Observable } from '../../utils';
 import GroupHeaderRenderer, {
@@ -137,7 +137,7 @@ export class RevogrHeaderComponent {
    * After all header cells rendered. Finalizes cell rendering.
    */
   @Event({ eventName: 'afterheaderrender' })
-  afterHeaderRender: EventEmitter<Providers<DimensionCols | 'rowHeaders'>>;
+  afterHeaderRender: EventEmitter<ProvidersColumns>;
 
   // #endregion
 
@@ -269,7 +269,7 @@ export class RevogrHeaderComponent {
     return groupRow;
   }
 
-  get providers(): Providers<DimensionCols | 'rowHeaders'> {
+  get providers(): ProvidersColumns<DimensionCols | 'rowHeaders'> {
     return {
       type: this.type,
       readonly: this.readonly,

src/types/interfaces.ts

@@ -257,7 +257,7 @@ export interface ColumnTemplateProp extends ColumnRegular {
   /**
    * Providers injected into the template.
    */
-  providers: Providers<DimensionCols | 'rowHeaders'>;
+  providers: ProvidersColumns;
   /**
    * Index of the column, used for mapping value to cell from data source model/row.
    */
@@ -280,23 +280,40 @@ export type CellProps = JSXBase.HTMLAttributes<HTMLDivElement> & {
   [attr: string]: string | number | object | boolean | undefined;
 };
 
+/**
+ * Providers for columns which are going to be injected into each header renderer
+ */
+export interface ProvidersColumns<T = DimensionCols | 'rowHeaders'> extends Omit<Providers<T>, 'data' | 'columns' | 'colType'> {
+  /**
+   * Column data source store
+   */
+  data: ColumnRegular[];
+}
 
 /**
  * Providers for grid which are going to be injected into each cell template
  */
-export type Providers<T = DimensionRows> = {
+export interface Providers<T = DimensionRows> {
   /**
    * Dimension type (e.g. row or column)
    */
   type: T;
+  /**
+   * Dimension type (e.g. row or column)
+   */
+  colType: DimensionCols | 'rowHeaders';
   /**
    * Flag indicating if grid is in readonly mode
    */
   readonly: boolean;
   /**
    * Data source store
    */
-  data: Observable<DataSourceState<any, any>> | ColumnRegular[];
+  data: Observable<DataSourceState<any, any>>;
+  /**
+   * Column data source store
+   */
+  columns: Observable<DataSourceState<ColumnRegular, DimensionCols>>;
   /**
    * Viewport store
    */
@@ -309,7 +326,7 @@ export type Providers<T = DimensionRows> = {
    * Selection store
    */
   selection: Observable<SelectionStoreState>;
-};
+}
 /**
  * `HyperFunc` is a function that takes an HTML tag or component, and returns a
  * JSX element. This function is used to create JSX elements in a context where
@@ -498,7 +515,7 @@ export type InitialHeaderClick = {
    * The column that was clicked.
    */
   column: ColumnRegular;
-  providers: Providers<DimensionCols | 'rowHeaders'>;
+  providers: ProvidersColumns;
 };
 
 /**