slickgrid-react 5.8.0 → 5.9.0

package/src/slickgrid-react/components/slickgrid-react.tsx

@@ -1,13 +1,10 @@
-// import 3rd party vendor libs
-import i18next from 'i18next';
-import React from 'react';
-
 import {
   // interfaces/types
   type AutocompleterEditor,
   type BackendService,
   type BackendServiceApi,
   type BackendServiceOption,
+  type BasePaginationComponent,
   type Column,
   type DataViewOption,
   type EventSubscription,
@@ -18,8 +15,8 @@ import {
   type Locale,
   type Metrics,
   type Pagination,
+  type PaginationMetadata,
   type SelectEditor,
-  type ServicePagination,
   SlickDataView,
   SlickEventHandler,
   SlickGrid,
@@ -35,7 +32,7 @@ import {
   GridEventService,
   GridService,
   GridStateService,
-  GroupingAndColspanService,
+  HeaderGroupingService,
   type Observable,
   PaginationService,
   ResizerService,
@@ -56,22 +53,21 @@ import { SlickFooterComponent } from '@slickgrid-universal/custom-footer-compone
 import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
 import { SlickPaginationComponent } from '@slickgrid-universal/pagination-component';
 import { extend } from '@slickgrid-universal/utils';
-
 import { dequal } from 'dequal/lite';
+import i18next from 'i18next';
+import React from 'react';
+import type { Subscription } from 'rxjs';
+
 import { Constants } from '../constants';
 import { GlobalGridOptions } from '../global-grid-options';
 import type { SlickgridReactInstance, GridOption, } from '../models/index';
-import {
-  ReactUtilService,
-  disposeAllSubscriptions,
-  TranslaterService,
-} from '../services/index';
-import type { Subscription } from 'rxjs';
-
+import { disposeAllSubscriptions } from '../services/utilities';
 import { GlobalContainerService } from '../services/singletons';
+import { loadReactComponentDynamically } from '../services/reactUtils';
+import { TranslaterService } from '../services/translater.service';
 import type { SlickgridReactProps } from './slickgridReactProps';
 
-const WARN_NO_PREPARSE_DATE_SIZE = 5000; // data size to warn user when pre-parse isn't enabled
+const WARN_NO_PREPARSE_DATE_SIZE = 10000; // data size to warn user when pre-parse isn't enabled
 
 interface State {
   showPagination: boolean;
@@ -153,7 +149,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   // components
   slickEmptyWarning: SlickEmptyWarningComponent | undefined;
   slickFooter: SlickFooterComponent | undefined;
-  slickPagination: SlickPaginationComponent | undefined;
+  slickPagination: BasePaginationComponent | undefined;
 
   // services
   backendUtilityService!: BackendUtilityService;
@@ -165,13 +161,8 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   gridEventService: GridEventService;
   gridService: GridService;
   gridStateService: GridStateService;
-  groupingService: GroupingAndColspanService;
-  protected get paginationService(): PaginationService {
-    return this.state?.paginationService;
-  }
-  protected set paginationService(value: PaginationService) {
-    this.setStateValue('paginationService', value);
-  }
+  groupingService!: HeaderGroupingService;
+  headerGroupingService: HeaderGroupingService;
   resizerService!: ResizerService;
   rxjs?: RxJsFacade;
   sharedService: SharedService;
@@ -186,7 +177,6 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   instances: SlickgridReactInstance | null = null;
 
   static defaultProps = {
-    reactUtilService: new ReactUtilService(),
     containerService: GlobalContainerService,
     translaterService: new TranslaterService(),
     dataset: [],
@@ -251,6 +241,13 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     this._isDatasetHierarchicalInitialized = true;
   }
 
+  protected get paginationService(): PaginationService {
+    return this.state?.paginationService;
+  }
+  protected set paginationService(value: PaginationService) {
+    this.setStateValue('paginationService', value);
+  }
+
   constructor(public readonly props: SlickgridReactProps) {
     super(props);
     const slickgridConfig = new SlickgridConfig();
@@ -293,7 +290,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
     this.gridStateService = new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
     this.gridService = new GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService);
-    this.groupingService = new GroupingAndColspanService(this.extensionUtility, this._eventPubSubService);
+    this.headerGroupingService = new HeaderGroupingService(this.extensionUtility);
 
     this.serviceList = [
       this.extensionService,
@@ -301,7 +298,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       this.gridEventService,
       this.gridService,
       this.gridStateService,
-      this.groupingService,
+      this.headerGroupingService,
       this.paginationService,
       this.resizerService,
       this.sortService,
@@ -322,7 +319,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     this.props.containerService.registerInstance('GridEventService', this.gridEventService);
     this.props.containerService.registerInstance('GridService', this.gridService);
     this.props.containerService.registerInstance('GridStateService', this.gridStateService);
-    this.props.containerService.registerInstance('GroupingAndColspanService', this.groupingService);
+    this.props.containerService.registerInstance('HeaderGroupingService', this.headerGroupingService);
     this.props.containerService.registerInstance('PaginationService', this.paginationService);
     this.props.containerService.registerInstance('ResizerService', this.resizerService);
     this.props.containerService.registerInstance('SharedService', this.sharedService);
@@ -591,12 +588,13 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       // return all available Services (non-singleton)
       backendService: this.backendService,
       eventPubSubService: this._eventPubSubService,
+      extensionService: this.extensionService,
       filterService: this.filterService,
       gridEventService: this.gridEventService,
       gridStateService: this.gridStateService,
       gridService: this.gridService,
-      groupingService: this.groupingService,
-      extensionService: this.extensionService,
+      groupingService: this.headerGroupingService,
+      headerGroupingService: this.headerGroupingService,
       paginationService: this.paginationService,
       resizerService: this.resizerService,
       sortService: this.sortService,
@@ -765,7 +763,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       if (gridOptions.enableTranslate) {
         this.extensionService.translateAllExtensions(lang);
         if ((gridOptions.createPreHeaderPanel && gridOptions.createTopHeaderPanel) || (gridOptions.createPreHeaderPanel && !gridOptions.enableDraggableGrouping)) {
-          this.groupingService.translateGroupingAndColSpan();
+          this.headerGroupingService.translateHeaderGrouping();
         }
       }
     });
@@ -1021,7 +1019,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
    * On a Pagination changed, we will trigger a Grid State changed with the new pagination info
    * Also if we use Row Selection or the Checkbox Selector with a Backend Service (Odata, GraphQL), we need to reset any selection
    */
-  paginationChanged(pagination: ServicePagination) {
+  paginationChanged(pagination: PaginationMetadata) {
     const isSyncGridSelectionEnabled = this.gridStateService?.needToPreserveRowSelection() ?? false;
     if (this.grid && !isSyncGridSelectionEnabled && this.gridOptions?.backendServiceApi && (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector)) {
       this.grid.setSelectedRows([]);
@@ -1134,7 +1132,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   protected setPaginationOptionsWhenPresetDefined(gridOptions: GridOption, paginationOptions: Pagination): Pagination {
     if (gridOptions.presets?.pagination && gridOptions.pagination) {
       if (this.hasBackendInfiniteScroll()) {
-        console.warn('[Aurelia-Slickgrid] `presets.pagination` is not supported with Infinite Scroll, reverting to first page.');
+        console.warn('[Slickgrid-React] `presets.pagination` is not supported with Infinite Scroll, reverting to first page.');
       } else {
         paginationOptions.pageSize = gridOptions.presets.pagination.pageSize;
         paginationOptions.pageNumber = gridOptions.presets.pagination.pageNumber;
@@ -1226,8 +1224,8 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       this.paginationService.totalItems = this.totalItems;
       this.paginationService.init(this.grid, paginationOptions, this.backendServiceApi);
       this.subscriptions.push(
-        this._eventPubSubService.subscribe<ServicePagination>('onPaginationChanged', paginationChanges => this.paginationChanged(paginationChanges)),
-        this._eventPubSubService.subscribe<ServicePagination>('onPaginationOptionsChanged', paginationChanges => this.paginationOptionsChanged(paginationChanges)),
+        this._eventPubSubService.subscribe<PaginationMetadata>('onPaginationChanged', paginationChanges => this.paginationChanged(paginationChanges)),
+        this._eventPubSubService.subscribe<PaginationMetadata>('onPaginationOptionsChanged', paginationChanges => this.paginationOptionsChanged(paginationChanges)),
         this._eventPubSubService.subscribe<{ visible: boolean; }>('onPaginationVisibilityChanged', (visibility: { visible: boolean }) => {
           this.showPagination = visibility?.visible ?? false;
           if (this.gridOptions?.backendServiceApi) {
@@ -1249,11 +1247,22 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
    * @param {Boolean} showPagination - show (new render) or not (dispose) the Pagination
    * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
    */
-  protected renderPagination(showPagination = true) {
-    if (this._gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
-      this.slickPagination = new SlickPaginationComponent(this.paginationService, this._eventPubSubService, this.sharedService, this.props.translaterService);
-      this.slickPagination.renderPagination(this._elm as HTMLDivElement);
-      this._isPaginationInitialized = true;
+  protected async renderPagination(showPagination = true) {
+    if (this.grid && this._gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
+      if (this.gridOptions.customPaginationComponent) {
+        const paginationContainer = document.createElement('section');
+        this._elm!.appendChild(paginationContainer);
+        const { component } = await loadReactComponentDynamically<BasePaginationComponent>(this.gridOptions.customPaginationComponent, paginationContainer);
+        this.slickPagination = component;
+      } else {
+        this.slickPagination = new SlickPaginationComponent();
+      }
+
+      if (this.slickPagination) {
+        this.slickPagination.init(this.grid, this.paginationService, this._eventPubSubService, this.props.translaterService);
+        this.slickPagination.renderPagination(this._elm as HTMLDivElement);
+        this._isPaginationInitialized = true;
+      }
     } else if (!showPagination) {
       this.slickPagination?.dispose();
       this._isPaginationInitialized = false;
@@ -1268,7 +1277,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
       if (collectionAsync instanceof Promise) {
         // wait for the "collectionAsync", once resolved we will save it into the "collection"
-        // the collectionAsync can be of 3 types HttpClient, HttpFetch or a Promise
+        // the collectionAsync can be of 3 types Fetch, Promise or RxJS when available
         collectionAsync.then((response: any | any[]) => {
           if (Array.isArray(response)) {
             this.updateEditorCollection(column, response); // from Promise
@@ -1446,7 +1455,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     this._registeredResources = [];
   }
 
-  /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource) */
+  /** Pre-Register any Resource that don't require SlickGrid to be instantiated (for example RxJS Resource & RowDetail) */
   protected preRegisterResources() {
     this._registeredResources = this.gridOptions.externalResources || [];
 
@@ -1482,7 +1491,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
     // when using Grouping/DraggableGrouping/Colspan register its Service
     if ((this.gridOptions.createPreHeaderPanel && this.gridOptions.createTopHeaderPanel) || (this.gridOptions.createPreHeaderPanel && !this.gridOptions.enableDraggableGrouping)) {
-      this._registeredResources.push(this.groupingService);
+      this._registeredResources.push(this.headerGroupingService);
     }
 
     // when using Tree Data View, register its Service
@@ -1564,10 +1573,10 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   }
 
   protected suggestDateParsingWhenHelpful() {
-    if (this.dataView?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.preParseDateColumns && this.grid.getColumns().some(c => isColumnDateType(c.type))) {
+    if (this.dataView?.getItemCount() > WARN_NO_PREPARSE_DATE_SIZE && !this.gridOptions.silenceWarnings && !this.gridOptions.preParseDateColumns && this.grid.getColumns().some(c => isColumnDateType(c.type))) {
       console.warn(
         '[Slickgrid-Universal] For getting better perf, we suggest you enable the `preParseDateColumns` grid option, ' +
-        'for more info visit:: https://ghiscoding.gitbook.io/slickgrid-universal/column-functionalities/sorting#pre-parse-date-columns-for-better-perf'
+        'for more info visit => https://ghiscoding.gitbook.io/slickgrid-react/column-functionalities/sorting#pre-parse-date-columns-for-better-perf'
       );
     }
   }

package/src/slickgrid-react/components/slickgridReactProps.ts

@@ -54,12 +54,10 @@ import type {
   SlickGrid,
 } from '@slickgrid-universal/common';
 import type { SlickgridReactInstance } from '../models';
-import type { ReactUtilService } from '../services';
 
 export interface SlickgridReactProps {
   header?: JSX.Element;
   footer?: JSX.Element;
-  reactUtilService: ReactUtilService;
   containerService: ContainerService;
   translaterService: TranslaterService;
   customDataView?: SlickDataView;

package/src/slickgrid-react/extensions/slickRowDetailView.ts

@@ -0,0 +1,383 @@
+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 { Root } from 'react-dom/client';
+
+import type { GridOption, RowDetailView, ViewModelBindableInputData } from '../models/index';
+import { loadReactComponentDynamically } from '../services/reactUtils';
+
+const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
+const PRELOAD_CONTAINER_PREFIX = 'container_loading';
+
+export interface CreatedView {
+  id: string | number;
+  dataContext: any;
+  root: Root | 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;
+  _root?: Root;
+
+  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 detailContainer = document.createElement('section');
+      containerElements[containerElements.length - 1]!.appendChild(detailContainer);
+
+      console.log('elm', containerElements[containerElements.length - 1])
+      const { root } = await loadReactComponentDynamically(this._preloadComponent, detailContainer as HTMLElement);
+      const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
+      this._root = root;
+      if (viewObj) {
+        viewObj.root = root;
+      }
+    }
+  }
+
+  /** 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 bindableData = {
+        model: item,
+        addon: this,
+        grid: this._grid,
+        dataView: this.dataView,
+        parent: this.rowDetailViewOptions?.parent,
+      } as ViewModelBindableInputData;
+      const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
+
+      // 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
+      const { root } = await loadReactComponentDynamically(this._component, containerElements[containerElements.length - 1] as HTMLElement, bindableData /*, viewObj?.root */);
+      if (!viewObj) {
+        this.addViewInfoToViewsRef(item, root);
+      }
+    }
+  }
+
+  // --
+  // protected functions
+  // ------------------
+
+  protected addViewInfoToViewsRef(item: any, root: Root | null) {
+    const viewInfo: CreatedView = {
+      id: item[this.datasetIdPropName],
+      dataContext: item,
+      root
+    };
+    const idPropName = this.gridOptions.datasetIdPropertyName || 'id';
+    addToArrayWhenNotExists(this._views, viewInfo, idPropName);
+  }
+
+  protected disposeViewComponent(expandedView: CreatedView): CreatedView | void {
+    if (expandedView) {
+      if (expandedView?.root) {
+        const container = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${this._views[0].id}`);
+        if (container?.length) {
+          expandedView.root.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);
+    } 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 (response.hasOwnProperty(this.datasetIdPropName)) {
+        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 || !awaitedItemDetail.hasOwnProperty(this.datasetIdPropName)) {
+        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 || {});
+    }
+  }
+}

package/src/slickgrid-react/global-grid-options.ts

@@ -1,5 +1,5 @@
 import { type Column, DelimiterType, EventNamingStyle, FileType, Filters, OperatorType, type TreeDataOption } from '@slickgrid-universal/common';
-import type { GridOption } from './models/index';
+import type { GridOption, RowDetailView } from './models/index';
 
 /**
  * Default Options that can be passed to the Slickgrid-React
@@ -227,6 +227,15 @@ export const GlobalGridOptions: Partial<GridOption> = {
     pageSize: 25,
     totalItems: 0
   },
+  rowDetailView: {
+    collapseAllOnSort: true,
+    cssClass: 'detail-view-toggle',
+    panelRows: 1,
+    keyPrefix: '__',
+    useRowClick: false,
+    useSimpleViewportCalc: true,
+    saveDetailViewOnScroll: false,
+  } as RowDetailView,
   headerRowHeight: 35,
   rowHeight: 35,
   topPanelHeight: 30,