slickgrid-vue 0.1.0

package/src/components/slickgridVueProps.interface.ts

@@ -0,0 +1,150 @@
+import type {
+  DragRowMove,
+  ExtensionList,
+  OnActiveCellChangedEventArgs,
+  OnAddNewRowEventArgs,
+  OnAutosizeColumnsEventArgs,
+  OnBeforeAppendCellEventArgs,
+  OnBeforeCellEditorDestroyEventArgs,
+  OnBeforeColumnsResizeEventArgs,
+  OnBeforeEditCellEventArgs,
+  OnBeforeFooterRowCellDestroyEventArgs,
+  OnBeforeHeaderCellDestroyEventArgs,
+  OnBeforeHeaderRowCellDestroyEventArgs,
+  OnBeforeSetColumnsEventArgs,
+  OnCellChangeEventArgs,
+  OnCellCssStylesChangedEventArgs,
+  OnClickEventArgs,
+  OnColumnsDragEventArgs,
+  OnColumnsReorderedEventArgs,
+  OnColumnsResizeDblClickEventArgs,
+  OnColumnsResizedEventArgs,
+  OnCompositeEditorChangeEventArgs,
+  OnDblClickEventArgs,
+  OnFooterClickEventArgs,
+  OnFooterContextMenuEventArgs,
+  OnFooterRowCellRenderedEventArgs,
+  OnGroupCollapsedEventArgs,
+  OnGroupExpandedEventArgs,
+  OnHeaderCellRenderedEventArgs,
+  OnHeaderClickEventArgs,
+  OnHeaderContextMenuEventArgs,
+  OnHeaderMouseEventArgs,
+  OnHeaderRowCellRenderedEventArgs,
+  OnKeyDownEventArgs,
+  OnRenderedEventArgs,
+  OnRowCountChangedEventArgs,
+  OnRowsChangedEventArgs,
+  OnRowsOrCountChangedEventArgs,
+  OnScrollEventArgs,
+  OnSelectedRowsChangedEventArgs,
+  OnSetItemsCalledEventArgs,
+  OnSetOptionsEventArgs,
+  OnValidationErrorEventArgs,
+  PaginationChangedArgs,
+  PagingInfo,
+  SingleColumnSort,
+  SlickControlList,
+  SlickGrid,
+  SlickPluginList,
+} from '@slickgrid-universal/common';
+import type { Slot } from 'vue';
+
+import type { SlickgridVueInstance } from '../models/index.js';
+
+export interface SlickgridVueProps {
+  header?: Slot;
+  footer?: Slot;
+  extensions?: ExtensionList<SlickControlList | SlickPluginList>;
+  gridId: string;
+  instances?: SlickgridVueInstance;
+
+  // Custom Events list
+  // ---------------------
+  // NOTE: we need to add an extra "onOn" prefix to all events because of how VueJS handles events
+  // for example onOnClick can actually be used as "@onClick" event
+
+  // Slick Grid events
+  onOnActiveCellChanged?: (e: CustomEvent<{ eventData: any; args: OnActiveCellChangedEventArgs; }>) => void;
+  onOnActiveCellPositionChanged?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
+  onOnAddNewRow?: (e: CustomEvent<{ eventData: any; args: OnAddNewRowEventArgs; }>) => void;
+  onOnAutosizeColumns?: (e: CustomEvent<{ eventData: any; args: OnAutosizeColumnsEventArgs; }>) => void;
+  onOnBeforeAppendCell?: (e: CustomEvent<{ eventData: any; args: OnBeforeAppendCellEventArgs; }>) => void;
+  onOnBeforeSearchChange?: (e: CustomEvent<{ eventData: any; args: OnCellChangeEventArgs; }>) => void;
+  onOnBeforeCellEditorDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeCellEditorDestroyEventArgs; }>) => void;
+  onOnBeforeColumnsResize?: (e: CustomEvent<{ eventData: any; args: OnBeforeColumnsResizeEventArgs; }>) => void;
+  onOnBeforeDestroy?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
+  onOnBeforeEditCell?: (e: CustomEvent<{ eventData: any; args: OnBeforeEditCellEventArgs; }>) => void;
+  onOnBeforeHeaderCellDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeHeaderCellDestroyEventArgs; }>) => void;
+  onOnBeforeHeaderRowCellDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeHeaderRowCellDestroyEventArgs; }>) => void;
+  onOnBeforeFooterRowCellDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeFooterRowCellDestroyEventArgs; }>) => void;
+  onOnBeforeSetColumns?: (e: CustomEvent<{ eventData: any; args: OnBeforeSetColumnsEventArgs; }>) => void;
+  onOnBeforeSort?: (e: CustomEvent<{ eventData: any; args: SingleColumnSort; }>) => void;
+  onOnCellChange?: (e: CustomEvent<{ eventData: any; args: OnCellChangeEventArgs; }>) => void;
+  onOnCellCssStylesChanged?: (e: CustomEvent<{ eventData: any; args: OnCellCssStylesChangedEventArgs; }>) => void;
+  onOnClick?: (e: CustomEvent<{ eventData: any; args: OnClickEventArgs; }>) => void;
+  onOnColumnsDrag?: (e: CustomEvent<{ eventData: any; args: OnColumnsDragEventArgs; }>) => void;
+  onOnColumnsReordered?: (e: CustomEvent<{ eventData: any; args: OnColumnsReorderedEventArgs; }>) => void;
+  onOnColumnsResized?: (e: CustomEvent<{ eventData: any; args: OnColumnsResizedEventArgs; }>) => void;
+  onOnColumnsResizeDblClick?: (e: CustomEvent<{ eventData: any; args: OnColumnsResizeDblClickEventArgs; }>) => void;
+  onOnCompositeEditorChange?: (e: CustomEvent<{ eventData: any; args: OnCompositeEditorChangeEventArgs; }>) => void;
+  onOnContextMenu?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
+  onOnDrag?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
+  onOnDragEnd?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
+  onOnDragInit?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
+  onOnDragStart?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
+  onOnDblClick?: (e: CustomEvent<{ eventData: any; args: OnDblClickEventArgs; }>) => void;
+  onOnFooterContextMenu?: (e: CustomEvent<{ eventData: any; args: OnFooterContextMenuEventArgs; }>) => void;
+  onOnFooterRowCellRendered?: (e: CustomEvent<{ eventData: any; args: OnFooterRowCellRenderedEventArgs; }>) => void;
+  onOnHeaderCellRendered?: (e: CustomEvent<{ eventData: any; args: OnHeaderCellRenderedEventArgs; }>) => void;
+  onOnFooterClick?: (e: CustomEvent<{ eventData: any; args: OnFooterClickEventArgs; }>) => void;
+  onOnHeaderClick?: (e: CustomEvent<{ eventData: any; args: OnHeaderClickEventArgs; }>) => void;
+  onOnHeaderContextMenu?: (e: CustomEvent<{ eventData: any; args: OnHeaderContextMenuEventArgs; }>) => void;
+  onOnHeaderMouseEnter?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
+  onOnHeaderMouseLeave?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
+  onOnHeaderRowCellRendered?: (e: CustomEvent<{ eventData: any; args: OnHeaderRowCellRenderedEventArgs; }>) => void;
+  onOnHeaderRowMouseEnter?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
+  onOnHeaderRowMouseLeave?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
+  onOnKeyDown?: (e: CustomEvent<{ eventData: any; args: OnKeyDownEventArgs; }>) => void;
+  onOnMouseEnter?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
+  onOnMouseLeave?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
+  onOnValidationError?: (e: CustomEvent<{ eventData: any; args: OnValidationErrorEventArgs; }>) => void;
+  onOnViewportChanged?: (e: CustomEvent<{ eventData: any; args: { grid: SlickGrid; }; }>) => void;
+  onOnRendered?: (e: CustomEvent<{ eventData: any; args: OnRenderedEventArgs; }>) => void;
+  onOnSelectedRowsChanged?: (e: CustomEvent<{ eventData: any; args: OnSelectedRowsChangedEventArgs; }>) => void;
+  onOnSetOptions?: (e: CustomEvent<{ eventData: any; args: OnSetOptionsEventArgs; }>) => void;
+  onOnScroll?: (e: CustomEvent<{ eventData: any; args: OnScrollEventArgs; }>) => void;
+  onOnSort?: (e: CustomEvent<{ eventData: any; args: SingleColumnSort; }>) => void;
+
+  // Slick DataView events
+  onOnBeforePagingInfoChanged?: (e: CustomEvent<{ eventData: any; args: PagingInfo; }>) => void;
+  onOnGroupExpanded?: (e: CustomEvent<{ eventData: any; args: OnGroupExpandedEventArgs; }>) => void;
+  onOnGroupCollapsed?: (e: CustomEvent<{ eventData: any; args: OnGroupCollapsedEventArgs; }>) => void;
+  onOnPagingInfoChanged?: (e: CustomEvent<{ eventData: any; args: PagingInfo; }>) => void;
+  onOnRowCountChanged?: (e: CustomEvent<{ eventData: any; args: OnRowCountChangedEventArgs; }>) => void;
+  onOnRowsChanged?: (e: CustomEvent<{ eventData: any; args: OnRowsChangedEventArgs; }>) => void;
+  onOnRowsOrCountChanged?: (e: CustomEvent<{ eventData: any; args: OnRowsOrCountChangedEventArgs; }>) => void;
+  onOnSetItemsCalled?: (e: CustomEvent<{ eventData: any; args: OnSetItemsCalledEventArgs; }>) => void;
+
+  // Slickgrid-Vue events
+  onOnAfterExportToExcel?: (e: CustomEvent<any>) => void;
+  onOnBeforePaginationChange?: (e: CustomEvent<any>) => void;
+  onOnBeforeExportToExcel?: (e: CustomEvent<any>) => void;
+  onOnBeforeFilterChange?: (e: CustomEvent<any>) => void;
+  onOnBeforeFilterClear?: (e: CustomEvent<any>) => void;
+  onOnBeforeSortChange?: (e: CustomEvent<any>) => void;
+  onOnBeforeToggleTreeCollapse?: (e: CustomEvent<any>) => void;
+  onOnFilterChanged?: (e: CustomEvent<any>) => void;
+  onOnFilterCleared?: (e: CustomEvent<any>) => void;
+  onOnItemDeleted?: (e: CustomEvent<any>) => void;
+  onOnGridStateChanged?: (e: CustomEvent<any>) => void;
+  onOnPaginationChanged?: (e: CustomEvent<PaginationChangedArgs>) => void;
+  onOnReactGridCreated?: (e: CustomEvent<any>) => void;
+  onOnSelectedRowIdsChanged?: (e: CustomEvent<any>) => void;
+  onOnSortChanged?: (e: CustomEvent<any>) => void;
+  onOnToggleTreeCollapsed?: (e: CustomEvent<any>) => void;
+  onOnTreeItemToggled?: (e: CustomEvent<any>) => void;
+  onOnTreeFullToggleEnd?: (e: CustomEvent<any>) => void;
+  onOnTreeFullToggleStart?: (e: CustomEvent<any>) => void;
+  onVueGridCreated?: (e: CustomEvent<SlickgridVueInstance>) => void;
+}

package/src/constants.ts

@@ -0,0 +1,95 @@
+import type { Locale } from '@slickgrid-universal/common';
+
+export class Constants {
+  // English Locale texts when using only 1 Locale instead of I18N
+  static readonly locales: Locale = {
+    TEXT_ALL_SELECTED: 'All Selected',
+    TEXT_ALL_X_RECORDS_SELECTED: 'All {{x}} records selected',
+    TEXT_APPLY_MASS_UPDATE: 'Apply Mass Update',
+    TEXT_APPLY_TO_SELECTION: 'Update Selection',
+    TEXT_CANCEL: 'Cancel',
+    TEXT_CLEAR_ALL_FILTERS: 'Clear all Filters',
+    TEXT_CLEAR_ALL_GROUPING: 'Clear all Grouping',
+    TEXT_CLEAR_ALL_SORTING: 'Clear all Sorting',
+    TEXT_CLEAR_PINNING: 'Unfreeze Columns/Rows',
+    TEXT_CLONE: 'Clone',
+    TEXT_COLLAPSE_ALL_GROUPS: 'Collapse all Groups',
+    TEXT_CONTAINS: 'Contains',
+    TEXT_COLUMNS: 'Columns',
+    TEXT_COLUMN_RESIZE_BY_CONTENT: 'Resize by Content',
+    TEXT_COMMANDS: 'Commands',
+    TEXT_COPY: 'Copy',
+    TEXT_EQUALS: 'Equals',
+    TEXT_EQUAL_TO: 'Equal to',
+    TEXT_ENDS_WITH: 'Ends With',
+    TEXT_ERROR_EDITABLE_GRID_REQUIRED: 'Your grid must be editable in order to use the Composite Editor Modal.',
+    TEXT_ERROR_ENABLE_CELL_NAVIGATION_REQUIRED:
+      'Composite Editor requires the flag "enableCellNavigation" to be set to True in your Grid Options.',
+    TEXT_ERROR_NO_CHANGES_DETECTED: 'Sorry we could not detect any changes.',
+    TEXT_ERROR_NO_EDITOR_FOUND: 'We could not find any Editor in your Column Definition.',
+    TEXT_ERROR_NO_RECORD_FOUND: 'No records selected for edit or clone operation.',
+    TEXT_ERROR_ROW_NOT_EDITABLE: 'Current row is not editable.',
+    TEXT_ERROR_ROW_SELECTION_REQUIRED: 'You must select some rows before trying to apply new value(s).',
+    TEXT_EXPAND_ALL_GROUPS: 'Expand all Groups',
+    TEXT_EXPORT_TO_CSV: 'Export in CSV format',
+    TEXT_EXPORT_TO_TEXT_FORMAT: 'Export in Text format (Tab delimited)',
+    TEXT_EXPORT_TO_EXCEL: 'Export to Excel',
+    TEXT_EXPORT_TO_TAB_DELIMITED: 'Export in Text format (Tab delimited)',
+    TEXT_FORCE_FIT_COLUMNS: 'Force fit columns',
+    TEXT_FREEZE_COLUMNS: 'Freeze Columns',
+    TEXT_GREATER_THAN: 'Greater than',
+    TEXT_GREATER_THAN_OR_EQUAL_TO: 'Greater than or equal to',
+    TEXT_GROUP_BY: 'Group By',
+    TEXT_HIDE_COLUMN: 'Hide Column',
+    TEXT_ITEMS: 'items',
+    TEXT_ITEMS_PER_PAGE: 'items per page',
+    TEXT_ITEMS_SELECTED: 'items selected',
+    TEXT_OF: 'of',
+    TEXT_OK: 'OK',
+    TEXT_LAST_UPDATE: 'Last Update',
+    TEXT_LESS_THAN: 'Less than',
+    TEXT_LESS_THAN_OR_EQUAL_TO: 'Less than or equal to',
+    TEXT_NO_ELEMENTS_FOUND: 'Aucun élément trouvé',
+    TEXT_NOT_CONTAINS: 'Not contains',
+    TEXT_NOT_EQUAL_TO: 'Not equal to',
+    TEXT_PAGE: 'Page',
+    TEXT_REFRESH_DATASET: 'Refresh Dataset',
+    TEXT_REMOVE_FILTER: 'Remove Filter',
+    TEXT_REMOVE_SORT: 'Remove Sort',
+    TEXT_SAVE: 'Save',
+    TEXT_SELECT_ALL: 'Select All',
+    TEXT_SYNCHRONOUS_RESIZE: 'Synchronous resize',
+    TEXT_SORT_ASCENDING: 'Sort Ascending',
+    TEXT_SORT_DESCENDING: 'Sort Descending',
+    TEXT_STARTS_WITH: 'Starts With',
+    TEXT_TOGGLE_DARK_MODE: 'Toggle Dark Mode',
+    TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
+    TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
+    TEXT_X_OF_Y_SELECTED: '# of % selected',
+    TEXT_X_OF_Y_MASS_SELECTED: '{{x}} of {{y}} selected',
+  };
+
+  static readonly VALIDATION_REQUIRED_FIELD = 'Field is required';
+  static readonly VALIDATION_EDITOR_VALID_NUMBER = 'Please enter a valid number';
+  static readonly VALIDATION_EDITOR_VALID_INTEGER = 'Please enter a valid integer number';
+  static readonly VALIDATION_EDITOR_INTEGER_BETWEEN = 'Please enter a valid integer number between {{minValue}} and {{maxValue}}';
+  static readonly VALIDATION_EDITOR_INTEGER_MAX = 'Please enter a valid integer number that is lower than {{maxValue}}';
+  static readonly VALIDATION_EDITOR_INTEGER_MAX_INCLUSIVE =
+    'Please enter a valid integer number that is lower than or equal to {{maxValue}}';
+  static readonly VALIDATION_EDITOR_INTEGER_MIN = 'Please enter a valid integer number that is greater than {{minValue}}';
+  static readonly VALIDATION_EDITOR_INTEGER_MIN_INCLUSIVE =
+    'Please enter a valid integer number that is greater than or equal to {{minValue}}';
+  static readonly VALIDATION_EDITOR_NUMBER_BETWEEN = 'Please enter a valid number between {{minValue}} and {{maxValue}}';
+  static readonly VALIDATION_EDITOR_NUMBER_MAX = 'Please enter a valid number that is lower than {{maxValue}}';
+  static readonly VALIDATION_EDITOR_NUMBER_MAX_INCLUSIVE = 'Please enter a valid number that is lower than or equal to {{maxValue}}';
+  static readonly VALIDATION_EDITOR_NUMBER_MIN = 'Please enter a valid number that is greater than {{minValue}}';
+  static readonly VALIDATION_EDITOR_NUMBER_MIN_INCLUSIVE = 'Please enter a valid number that is greater than or equal to {{minValue}}';
+  static readonly VALIDATION_EDITOR_DECIMAL_BETWEEN = 'Please enter a valid number with a maximum of {{maxDecimal}} decimals';
+  static readonly VALIDATION_EDITOR_TEXT_LENGTH_BETWEEN =
+    'Please make sure your text length is between {{minLength}} and {{maxLength}} characters';
+  static readonly VALIDATION_EDITOR_TEXT_MAX_LENGTH = 'Please make sure your text is less than {{maxLength}} characters';
+  static readonly VALIDATION_EDITOR_TEXT_MAX_LENGTH_INCLUSIVE =
+    'Please make sure your text is less than or equal to {{maxLength}} characters';
+  static readonly VALIDATION_EDITOR_TEXT_MIN_LENGTH = 'Please make sure your text is more than {{minLength}} character(s)';
+  static readonly VALIDATION_EDITOR_TEXT_MIN_LENGTH_INCLUSIVE = 'Please make sure your text is at least {{minLength}} character(s)';
+}

package/src/extensions/slickRowDetailView.ts

@@ -0,0 +1,416 @@
+import {
+  addToArrayWhenNotExists,
+  type EventSubscription,
+  type OnBeforeRowDetailToggleArgs,
+  type OnRowBackToViewportRangeArgs,
+  SlickEventData,
+  type SlickEventHandler,
+  type SlickGrid,
+  SlickRowSelectionModel,
+  unsubscribeAll,
+} from '@slickgrid-universal/common';
+import { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
+import { type App, type ComponentPublicInstance, createApp } from 'vue';
+
+import type { GridOption, RowDetailView, ViewModelBindableInputData } from '../models/index.js';
+
+const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
+const PRELOAD_CONTAINER_PREFIX = 'container_loading';
+
+type AppData = Record<string, unknown>;
+export interface CreatedView {
+  id: string | number;
+  dataContext: any;
+  app: App | null;
+  instance: ComponentPublicInstance | null;
+}
+// interface SRDV extends React.Component<Props, State>, UniversalSlickRowDetailView {}s
+
+export class SlickRowDetailView extends UniversalSlickRowDetailView {
+  protected _component?: any;
+  protected _preloadComponent?: any;
+  protected _views: CreatedView[] = [];
+  protected _subscriptions: EventSubscription[] = [];
+  protected _userProcessFn?: (item: any) => Promise<any>;
+  protected gridContainerElement!: HTMLElement;
+
+  constructor(private readonly eventPubSubService: EventPubSubService) {
+    super(eventPubSubService);
+  }
+
+  get addonOptions() {
+    return this.getOptions();
+  }
+
+  protected get datasetIdPropName(): string {
+    return this.gridOptions.datasetIdPropertyName || 'id';
+  }
+
+  get eventHandler(): SlickEventHandler {
+    return this._eventHandler;
+  }
+  set eventHandler(eventHandler: SlickEventHandler) {
+    this._eventHandler = eventHandler;
+  }
+
+  get gridOptions(): GridOption {
+    return (this._grid?.getOptions() || {}) as GridOption;
+  }
+
+  get rowDetailViewOptions(): RowDetailView | undefined {
+    return this.gridOptions.rowDetailView;
+  }
+
+  /** Dispose of the RowDetailView Extension */
+  dispose() {
+    this.disposeAllViewComponents();
+    unsubscribeAll(this._subscriptions);
+    super.dispose();
+  }
+
+  /** Dispose of all the opened Row Detail Panels Components */
+  disposeAllViewComponents() {
+    if (Array.isArray(this._views)) {
+      this._views.forEach((view) => this.disposeViewComponent(view));
+    }
+    this._views = [];
+  }
+
+  /** Get the instance of the SlickGrid addon (control or plugin). */
+  getAddonInstance(): SlickRowDetailView | null {
+    return this;
+  }
+
+  init(grid: SlickGrid) {
+    this._grid = grid;
+    super.init(this._grid);
+    this.gridContainerElement = grid.getContainerNode();
+    this.register(grid?.getSelectionModel() as SlickRowSelectionModel);
+  }
+
+  /**
+   * Create the plugin before the Grid creation, else it will behave oddly.
+   * Mostly because the column definitions might change after the grid creation
+   */
+  register(rowSelectionPlugin?: SlickRowSelectionModel) {
+    if (typeof this.gridOptions.rowDetailView?.process === 'function') {
+      // we need to keep the user "process" method and replace it with our own execution method
+      // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work
+      this._userProcessFn = this.gridOptions.rowDetailView.process as (item: any) => Promise<any>; // keep user's process method
+      this.addonOptions.process = (item) => this.onProcessing(item); // replace process method & run our internal one
+    } else {
+      throw new Error('[Slickgrid-React] You need to provide a "process" function for the Row Detail Extension to work properly');
+    }
+
+    if (this._grid && this.gridOptions?.rowDetailView) {
+      // load the Preload & RowDetail Templates (could be straight HTML or React Components)
+      // when those are React Components, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
+      if (!this.gridOptions.rowDetailView.preTemplate) {
+        this._preloadComponent = this.gridOptions?.rowDetailView?.preloadComponent;
+        this.addonOptions.preTemplate = () => this._grid.sanitizeHtmlString(`<div class="${PRELOAD_CONTAINER_PREFIX}"></div>`) as string;
+      }
+      if (!this.gridOptions.rowDetailView.postTemplate) {
+        this._component = this.gridOptions?.rowDetailView?.viewComponent;
+        this.addonOptions.postTemplate = (itemDetail: any) => {
+          return this._grid.sanitizeHtmlString(
+            `<div class="${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}"></div>`
+          ) as string;
+        };
+      }
+
+      if (this._grid && this.gridOptions) {
+        // this also requires the Row Selection Model to be registered as well
+        if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {
+          rowSelectionPlugin = new SlickRowSelectionModel(this.gridOptions.rowSelectionOptions || { selectActiveRow: true });
+          this._grid.setSelectionModel(rowSelectionPlugin);
+        }
+
+        // hook all events
+        if (this._grid && this.rowDetailViewOptions) {
+          if (this.rowDetailViewOptions.onExtensionRegistered) {
+            this.rowDetailViewOptions.onExtensionRegistered(this);
+          }
+
+          if (this.onAsyncResponse) {
+            this._eventHandler.subscribe(this.onAsyncResponse, (event, args) => {
+              if (typeof this.rowDetailViewOptions?.onAsyncResponse === 'function') {
+                this.rowDetailViewOptions.onAsyncResponse(event, args);
+              }
+            });
+          }
+
+          if (this.onAsyncEndUpdate) {
+            this._eventHandler.subscribe(this.onAsyncEndUpdate, async (event, args) => {
+              // triggers after backend called "onAsyncResponse.notify()"
+              await this.renderViewModel(args?.item);
+
+              if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
+                this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
+              }
+            });
+          }
+
+          if (this.onAfterRowDetailToggle) {
+            this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => {
+              // display preload template & re-render all the other Detail Views after toggling
+              // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
+              await this.renderPreloadView(args.item);
+              this.renderAllViewModels();
+
+              if (typeof this.rowDetailViewOptions?.onAfterRowDetailToggle === 'function') {
+                this.rowDetailViewOptions.onAfterRowDetailToggle(event, args);
+              }
+            });
+          }
+
+          if (this.onBeforeRowDetailToggle) {
+            this._eventHandler.subscribe(this.onBeforeRowDetailToggle, (event, args) => {
+              // before toggling row detail, we need to create View Component if it doesn't exist
+              this.handleOnBeforeRowDetailToggle(event, args);
+
+              if (typeof this.rowDetailViewOptions?.onBeforeRowDetailToggle === 'function') {
+                return this.rowDetailViewOptions.onBeforeRowDetailToggle(event, args);
+              }
+              return true;
+            });
+          }
+
+          if (this.onRowBackToViewportRange) {
+            this._eventHandler.subscribe(this.onRowBackToViewportRange, async (event, args) => {
+              // when row is back to viewport range, we will re-render the View Component(s)
+              await this.handleOnRowBackToViewportRange(event, args);
+
+              if (typeof this.rowDetailViewOptions?.onRowBackToViewportRange === 'function') {
+                this.rowDetailViewOptions.onRowBackToViewportRange(event, args);
+              }
+            });
+          }
+
+          if (this.onRowOutOfViewportRange) {
+            this._eventHandler.subscribe(this.onRowOutOfViewportRange, (event, args) => {
+              if (typeof this.rowDetailViewOptions?.onRowOutOfViewportRange === 'function') {
+                this.rowDetailViewOptions.onRowOutOfViewportRange(event, args);
+              }
+            });
+          }
+
+          // --
+          // hook some events needed by the Plugin itself
+
+          // we need to redraw the open detail views if we change column position (column reorder)
+          this.eventHandler.subscribe(this._grid.onColumnsReordered, this.redrawAllViewComponents.bind(this));
+
+          // on row selection changed, we also need to redraw
+          if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) {
+            this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this));
+          }
+
+          // on column sort/reorder, all row detail are collapsed so we can dispose of all the Views as well
+          this._eventHandler.subscribe(this._grid.onSort, this.disposeAllViewComponents.bind(this));
+
+          // on filter changed, we need to re-render all Views
+          this._subscriptions.push(
+            this.eventPubSubService?.subscribe(
+              ['onFilterChanged', 'onGridMenuColumnsChanged', 'onColumnPickerColumnsChanged'],
+              this.redrawAllViewComponents.bind(this)
+            ),
+            this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () =>
+              window.setTimeout(() => this.redrawAllViewComponents())
+            )
+          );
+        }
+      }
+    }
+
+    return this;
+  }
+
+  /** Redraw (re-render) all the expanded row detail View Components */
+  async redrawAllViewComponents() {
+    await Promise.all(this._views.map(async (x) => this.redrawViewComponent(x)));
+  }
+
+  /** Render all the expanded row detail View Components */
+  async renderAllViewModels() {
+    await Promise.all(this._views.filter((x) => x?.dataContext).map(async (x) => this.renderViewModel(x.dataContext)));
+  }
+
+  /** Redraw the necessary View Component */
+  async redrawViewComponent(view: CreatedView) {
+    const containerElement = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`);
+    if (containerElement?.length >= 0) {
+      await this.renderViewModel(view.dataContext);
+    }
+  }
+
+  /** Render (or re-render) the View Component (Row Detail) */
+  async renderPreloadView(item: any) {
+    const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
+    if (this._preloadComponent && containerElements?.length) {
+      const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]);
+      const bindableData = {
+        model: item,
+        addon: this,
+        grid: this._grid,
+        dataView: this.dataView,
+        // @deprecated @use `parentRef`
+        parent: this.rowDetailViewOptions?.parent,
+        parentRef: this.rowDetailViewOptions?.parent,
+      } as AppData & ViewModelBindableInputData;
+
+      const tmpDiv = document.createElement('div');
+      const app = createApp(this._preloadComponent, bindableData);
+      const instance = app.mount(tmpDiv) as ComponentPublicInstance;
+      bindableData.parent = instance;
+      containerElements[containerElements.length - 1]!.appendChild(instance.$el);
+
+      if (viewObj) {
+        viewObj.app = app;
+        viewObj.instance = instance;
+      }
+    }
+  }
+
+  /** Render (or re-render) the View Component (Row Detail) */
+  async renderViewModel(item: any) {
+    const containerElements = this.gridContainerElement.getElementsByClassName(
+      `${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`
+    );
+    if (this._component && containerElements?.length) {
+      const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]);
+      const bindableData = {
+        model: item,
+        addon: this,
+        grid: this._grid,
+        dataView: this.dataView,
+        // @deprecated @use `parentRef`
+        parent: this.rowDetailViewOptions?.parent,
+        parentRef: this.rowDetailViewOptions?.parent,
+      } as AppData & ViewModelBindableInputData;
+
+      // load our Row Detail React Component dynamically, typically we would want to use `root.render()` after the preload component (last argument below)
+      // BUT the root render doesn't seem to work and shows a blank element, so we'll use `createRoot()` every time even though it shows a console log in Dev
+      // that is the only way I got it working so let's use it anyway and console warnings are removed in production anyway
+      if (viewObj?.app) {
+        viewObj.app.unmount();
+      }
+      const tmpDiv = document.createElement('div');
+      const app = createApp(this._component, bindableData);
+      const instance = app.mount(tmpDiv) as ComponentPublicInstance;
+      bindableData.parent = app.component;
+      (containerElements[containerElements.length - 1] as HTMLElement).appendChild(instance.$el);
+      if (!viewObj) {
+        this.addViewInfoToViewsRef(item, app, instance);
+      }
+    }
+  }
+
+  // --
+  // protected functions
+  // ------------------
+
+  protected addViewInfoToViewsRef(item: any, app: App | null, instance: ComponentPublicInstance | null) {
+    const viewInfo: CreatedView = {
+      id: item[this.datasetIdPropName],
+      dataContext: item,
+      app,
+      instance,
+    };
+    const idPropName = this.gridOptions.datasetIdPropertyName || 'id';
+    addToArrayWhenNotExists(this._views, viewInfo, idPropName);
+  }
+
+  protected disposeViewComponent(expandedView: CreatedView): CreatedView | void {
+    if (expandedView) {
+      if (expandedView?.instance) {
+        const container = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${this._views[0].id}`);
+        if (container?.length) {
+          expandedView.app?.unmount();
+          container[0].textContent = '';
+          return expandedView;
+        }
+      }
+    }
+  }
+
+  /**
+   * Just before the row get expanded or collapsed we will do the following
+   * First determine if the row is expanding or collapsing,
+   * if it's expanding we will add it to our View Components reference array if we don't already have it
+   * or if it's collapsing we will remove it from our View Components reference array
+   */
+  protected handleOnBeforeRowDetailToggle(_e: SlickEventData<OnBeforeRowDetailToggleArgs>, args: { grid: SlickGrid; item: any; }) {
+    // expanding
+    if (args?.item?.__collapsed) {
+      // expanding row detail
+      this.addViewInfoToViewsRef(args.item, null, null);
+    } else {
+      // collapsing, so dispose of the View
+      const foundViewIdx = this._views.findIndex((view: CreatedView) => view.id === args.item[this.datasetIdPropName]);
+      if (foundViewIdx >= 0 && this.disposeViewComponent(this._views[foundViewIdx])) {
+        this._views.splice(foundViewIdx, 1);
+      }
+    }
+  }
+
+  /** When Row comes back to Viewport Range, we need to redraw the View */
+  protected async handleOnRowBackToViewportRange(
+    _e: SlickEventData<OnRowBackToViewportRangeArgs>,
+    args: {
+      item: any;
+      rowId: string | number;
+      rowIndex: number;
+      expandedRows: (string | number)[];
+      rowIdsOutOfViewport: (string | number)[];
+      grid: SlickGrid;
+    }
+  ) {
+    if (args?.item) {
+      await this.redrawAllViewComponents();
+    }
+  }
+
+  /**
+   * notify the onAsyncResponse with the "args.item" (required property)
+   * the plugin will then use item to populate the row detail panel with the "postTemplate"
+   * @param item
+   */
+  protected notifyTemplate(item: any) {
+    if (this.onAsyncResponse) {
+      this.onAsyncResponse.notify({ item, itemDetail: item }, new SlickEventData(), this);
+    }
+  }
+
+  /**
+   * On Processing, we will notify the plugin with the new item detail once backend server call completes
+   * @param item
+   */
+  protected async onProcessing(item: any) {
+    if (item && typeof this._userProcessFn === 'function') {
+      let awaitedItemDetail: any;
+      const userProcessFn = this._userProcessFn(item);
+
+      // wait for the "userProcessFn", once resolved we will save it into the "collection"
+      const response: any | any[] = await userProcessFn;
+
+      if (this.datasetIdPropName in response) {
+        awaitedItemDetail = response; // from Promise
+      } else if (response instanceof Response && typeof response['json'] === 'function') {
+        awaitedItemDetail = await response['json'](); // from Fetch
+      } else if (response && response['content']) {
+        awaitedItemDetail = response['content']; // from http-client
+      }
+
+      if (!awaitedItemDetail || !(this.datasetIdPropName in awaitedItemDetail)) {
+        throw new Error(
+          '[Slickgrid-React] could not process the Row Detail, please make sure that your "process" callback ' +
+          '(a Promise or an HttpClient call returning an Observable) returns an item object that has an "${this.datasetIdPropName}" property'
+        );
+      }
+
+      // notify the plugin with the new item details
+      this.notifyTemplate(awaitedItemDetail || {});
+    }
+  }
+}