slickgrid-react 9.13.0 → 10.0.0

package/src/components/slickgrid-react.tsx

@@ -4,7 +4,6 @@ import {
   collectionObserver,
   CollectionService,
   emptyElement,
-  EventNamingStyle,
   ExtensionService,
   ExtensionUtility,
   FilterFactory,
@@ -15,6 +14,7 @@ import {
   HeaderGroupingService,
   isColumnDateType,
   PaginationService,
+  PluginFlagMappings,
   ResizerService,
   SharedService,
   SlickDataView,
@@ -34,6 +34,7 @@ import {
   type EventSubscription,
   type ExtensionList,
   type ExternalResource,
+  type ExternalResourceConstructor,
   type Metrics,
   type Observable,
   type Pagination,
@@ -106,7 +107,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   protected _isPaginationInitialized = false;
   protected _isLocalGrid = true;
   protected _paginationOptions: Pagination | undefined;
-  protected _registeredResources: ExternalResource[] = [];
+  protected _registeredResources: Array<ExternalResource | ExternalResourceConstructor> = [];
   protected _scrollEndCalled = false;
 
   protected get options(): GridOption {
@@ -262,7 +263,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
     // initialize and assign all Service Dependencies
     this._eventPubSubService = new EventPubSubService();
-    this._eventPubSubService.eventNamingStyle = EventNamingStyle.camelCase;
+    this._eventPubSubService.eventNamingStyle = 'camelCase';
 
     this.backendUtilityService = new BackendUtilityService();
     this.gridEventService = new GridEventService();
@@ -365,7 +366,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     this._isDatasetHierarchicalInitialized = isInitialized;
   }
 
-  get registeredResources(): ExternalResource[] {
+  get registeredResources(): Array<ExternalResource | ExternalResourceConstructor> {
     return this._registeredResources;
   }
 
@@ -450,7 +451,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       this._options.enableMouseWheelScrollHandler = true;
     }
 
-    this._eventPubSubService.eventNamingStyle = this._options?.eventNamingStyle ?? EventNamingStyle.camelCase;
+    this._eventPubSubService.eventNamingStyle = this._options?.eventNamingStyle ?? 'camelCase';
     this._eventPubSubService.publish(`onBeforeGridCreate`, true);
 
     // make sure the dataset is initialized (if not it will throw an error that it cannot getLength of null)
@@ -509,7 +510,6 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
     // save reference for all columns before they optionally become hidden/visible
     this.sharedService.allColumns = this._columns;
-    this.sharedService.visibleColumns = this._columns;
 
     // after subscribing to potential columns changed, we are ready to create these optional extensions
     // when we did find some to create (RowMove, RowDetail, RowSelections), it will automatically modify column definitions (by previous subscribe)
@@ -535,15 +535,15 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       this.grid.registerPlugin(this.groupItemMetadataProvider); // register GroupItemMetadataProvider when Grouping is enabled
     }
 
+    // get any possible Services that user want to register
+    this.registerResources();
+
     this.extensionService.bindDifferentExtensions();
     this.bindDifferentHooks(this.grid, this._options, this.dataView);
 
     // when it's a frozen grid, we need to keep the frozen column id for reference if we ever show/hide column from ColumnPicker/GridMenu afterward
     this.sharedService.frozenVisibleColumnId = this.grid.getFrozenColumnId();
 
-    // get any possible Services that user want to register
-    this.registerResources();
-
     // initialize the SlickGrid grid
     this.grid.init();
 
@@ -595,10 +595,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       }
 
       if (this._dataset.length > 0) {
-        if (
-          !this._isDatasetInitialized &&
-          (this._options.enableCheckboxSelector || this._options.enableRowSelection || this._options.enableHybridSelection)
-        ) {
+        if (!this._isDatasetInitialized && (this._options.enableCheckboxSelector || this._options.enableSelection)) {
           this.loadRowSelectionPresetWhenExists();
         }
         this.loadFilterPresetsWhenDatasetInitialized();
@@ -747,8 +744,8 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     if (Array.isArray(this._registeredResources)) {
       while (this._registeredResources.length > 0) {
         const res = this._registeredResources.pop();
-        if (res?.dispose) {
-          res.dispose();
+        if (typeof (res as ExternalResource)?.dispose === 'function') {
+          (res as ExternalResource).dispose!();
         }
       }
     }
@@ -881,10 +878,9 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
           }
         }
 
-        // when column are reordered, we need to update the visibleColumn array
-        this._eventHandler.subscribe(grid.onColumnsReordered, (_e, args) => {
+        // when column are reordered, we need to update SharedService flag
+        this._eventHandler.subscribe(grid.onColumnsReordered, () => {
           this.sharedService.hasColumnsReordered = true;
-          this.sharedService.visibleColumns = args.impactedColumns;
         });
 
         this._eventHandler.subscribe(grid.onSetOptions, (_e, args) => {
@@ -1113,7 +1109,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
       this.grid &&
       !isSyncGridSelectionEnabled &&
       this.options?.backendServiceApi &&
-      (this.options.enableRowSelection || this.options.enableHybridSelection || this.options.enableCheckboxSelector)
+      (this.options.enableSelection || this.options.enableCheckboxSelector)
     ) {
       this.grid.setSelectedRows([]);
     }
@@ -1258,9 +1254,8 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
 
       if (this._options.enableTranslate) {
         this.extensionService.translateColumnHeaders(undefined, newColumns);
-      } else {
-        this.extensionService.renderColumnHeaders(newColumns, true);
       }
+      this.extensionService.renderColumnHeaders(newColumns, true);
 
       if (this._options?.enableAutoSizeColumns) {
         this.grid.autosizeColumns();
@@ -1414,46 +1409,13 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     }
   }
 
-  protected insertDynamicPresetColumns(columnId: string, gridPresetColumns: Column<TData>[]) {
-    if (this._columns) {
-      const columnPosition = this._columns.findIndex((c) => c.id === columnId);
-      if (columnPosition >= 0) {
-        const dynColumn = this._columns[columnPosition];
-        if (dynColumn?.id === columnId && !gridPresetColumns.some((c) => c.id === columnId)) {
-          columnPosition > 0 ? gridPresetColumns.splice(columnPosition, 0, dynColumn) : gridPresetColumns.unshift(dynColumn);
-        }
-      }
-    }
-  }
-
   /** Load any possible Columns Grid Presets */
   protected loadColumnPresetsWhenDatasetInitialized() {
     // if user entered some Columns "presets", we need to reflect them all in the grid
     if (this.grid && this.options.presets && Array.isArray(this.options.presets.columns) && this.options.presets.columns.length > 0) {
-      const gridPresetColumns: Column<TData>[] = this.gridStateService.getAssociatedGridColumns(this.grid, this.options.presets.columns);
-      if (gridPresetColumns && Array.isArray(gridPresetColumns) && gridPresetColumns.length > 0 && Array.isArray(this._columns)) {
-        // make sure that the dynamic columns are included in presets (1.Row Move, 2. Row Selection, 3. Row Detail)
-        if (this.options.enableRowMoveManager) {
-          const rmmColId = this.options?.rowMoveManager?.columnId ?? '_move';
-          this.insertDynamicPresetColumns(rmmColId, gridPresetColumns);
-        }
-        if (this.options.enableCheckboxSelector) {
-          const chkColId = this.options?.checkboxSelector?.columnId ?? '_checkbox_selector';
-          this.insertDynamicPresetColumns(chkColId, gridPresetColumns);
-        }
-        if (this.options.enableRowDetailView) {
-          const rdvColId = this.options?.rowDetailView?.columnId ?? '_detail_selector';
-          this.insertDynamicPresetColumns(rdvColId, gridPresetColumns);
-        }
-
-        // keep copy the original optional `width` properties optionally provided by the user.
-        // We will use this when doing a resize by cell content, if user provided a `width` it won't override it.
-        gridPresetColumns.forEach((col) => (col.originalWidth = col.width));
-
-        // finally set the new presets columns (including checkbox selector if need be)
-        this.grid.setColumns(gridPresetColumns);
-        this.sharedService.visibleColumns = gridPresetColumns;
-      }
+      // delegate to GridStateService for centralized column arrangement logic
+      // we pass `false` for triggerAutoSizeColumns to maintain original behavior on preset load
+      this.gridStateService.changeColumnsArrangement(this.options.presets.columns, false);
     }
   }
 
@@ -1494,8 +1456,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   protected loadRowSelectionPresetWhenExists() {
     // if user entered some Row Selections "presets"
     const presets = this._options?.presets;
-    const enableRowSelection =
-      this._options && (this._options.enableCheckboxSelector || this._options.enableRowSelection || this._options.enableHybridSelection);
+    const enableRowSelection = this._options && (this._options.enableCheckboxSelector || this._options.enableSelection);
     if (
       enableRowSelection &&
       this.grid?.getSelectionModel() &&
@@ -1565,7 +1526,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
   }
 
   /** Add a register a new external resource, user could also optional dispose all previous resources before pushing any new resources to the resources array list. */
-  registerExternalResources(resources: ExternalResource[], disposePreviousResources = false) {
+  registerExternalResources(resources: Array<ExternalResource | ExternalResourceConstructor>, disposePreviousResources = false) {
     if (disposePreviousResources) {
       this.disposeExternalResources();
     }
@@ -1585,19 +1546,35 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     // register all services by executing their init method and providing them with the Grid object
     if (Array.isArray(this._registeredResources)) {
       for (const resource of this._registeredResources) {
-        if (resource?.className === 'RxJsResource') {
+        if ((resource as ExternalResource)?.pluginName === 'RxJsResource') {
           this.registerRxJsResource(resource as RxJsFacade);
         }
       }
     }
   }
 
-  protected initializeExternalResources(resources: ExternalResource[]) {
+  /** initialized & auto-enable external registered resources, e.g. if user registers `ExcelExportService` then let's auto-enable `enableExcelExport:true` */
+  protected autoEnableInitializedResources(resource: ExternalResource | ExternalResourceConstructor): void {
+    if (this.grid && typeof (resource as ExternalResource).init === 'function') {
+      (resource as ExternalResource).init!(this.grid, this.props.containerService);
+    }
+
+    // auto-enable unless the flag was specifically disabled by the end user
+    if ('pluginName' in (resource as ExternalResource)) {
+      const pluginFlagName = PluginFlagMappings.get((resource as ExternalResource).pluginName!);
+      if (pluginFlagName && this.options[pluginFlagName] !== false) {
+        this.options[pluginFlagName] = true;
+        this.grid?.setOptions({ [pluginFlagName]: true });
+      }
+    }
+  }
+
+  protected initializeExternalResources(resources: Array<ExternalResource | ExternalResourceConstructor>) {
+    PluginFlagMappings.set('ReactRowDetailView', 'enableRowDetailView'); // map the external Row Detail View resource to its flag
+
     if (Array.isArray(resources)) {
       for (const resource of resources) {
-        if (this.grid && typeof resource.init === 'function') {
-          resource.init(this.grid, this.props.containerService);
-        }
+        this.autoEnableInitializedResources(resource);
       }
     }
   }

package/src/global-grid-options.ts

@@ -1,255 +1,10 @@
-import { DelimiterType, EventNamingStyle, Filters, type Column, type TreeDataOption } from '@slickgrid-universal/common';
+import { GlobalGridOptions as UniversalGridOptions } from '@slickgrid-universal/common';
 import type { GridOption, RowDetailView } from './models/index.js';
 
-/**
- * Default Options that can be passed to the Slickgrid-React
- */
+/** Global Grid Options Defaults */
 export const GlobalGridOptions: Partial<GridOption> = {
-  alwaysShowVerticalScroll: true,
-  autoEdit: false,
-  asyncEditorLoading: false,
-  autoFitColumnsOnFirstLoad: true,
-  autoResize: {
-    applyResizeToContainer: true,
-    autoHeight: true,
-    autoHeightRecalcRow: 100,
-    calculateAvailableSizeBy: 'window',
-    bottomPadding: 20,
-    minHeight: 250,
-    minWidth: 300,
-    rightPadding: 0,
-  },
-  cellHighlightCssClass: 'slick-cell-modified',
-  checkboxSelector: {
-    cssClass: 'slick-cell-checkboxsel',
-    width: 40,
-  },
-  cellMenu: {
-    autoAdjustDrop: true,
-    autoAlignSide: true,
-    hideCloseButton: true,
-    hideCommandSection: false,
-    hideOptionSection: false,
-  },
-  columnGroupSeparator: ' - ',
-  columnPicker: {
-    hideForceFitButton: false,
-    hideSyncResizeButton: true,
-    headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
-  },
-  compositeEditorOptions: {
-    labels: {
-      cancelButtonKey: 'CANCEL',
-      cloneButtonKey: 'CLONE',
-      resetEditorButtonTooltipKey: 'RESET_INPUT_VALUE',
-      resetFormButtonKey: 'RESET_FORM',
-      massSelectionButtonKey: 'APPLY_TO_SELECTION',
-      massSelectionStatusKey: 'X_OF_Y_MASS_SELECTED',
-      massUpdateButtonKey: 'APPLY_MASS_UPDATE',
-      massUpdateStatusKey: 'ALL_X_RECORDS_SELECTED',
-      saveButtonKey: 'SAVE',
-    },
-    resetEditorButtonCssClass: 'mdi mdi-refresh font-15px',
-    resetFormButtonIconCssClass: 'mdi mdi-refresh font-16px mdi-flip-h',
-  },
-  contextMenu: {
-    autoAdjustDrop: true,
-    autoAlignSide: true,
-    hideCloseButton: true,
-    hideClearAllGrouping: false,
-    hideCollapseAllGroups: false,
-    hideCommandSection: false,
-    hideCopyCellValueCommand: false,
-    hideExpandAllGroups: false,
-    hideExportCsvCommand: false,
-    hideExportExcelCommand: false,
-    hideExportPdfCommand: false,
-    hideExportTextDelimitedCommand: true,
-    hideMenuOnScroll: true,
-    hideOptionSection: false,
-    iconCollapseAllGroupsCommand: 'mdi mdi-arrow-collapse',
-    iconExpandAllGroupsCommand: 'mdi mdi-arrow-expand',
-    iconClearGroupingCommand: 'mdi mdi-close',
-    iconCopyCellValueCommand: 'mdi mdi-content-copy',
-    iconExportCsvCommand: 'mdi mdi-download',
-    iconExportExcelCommand: 'mdi mdi-file-excel-outline text-success',
-    iconExportTextDelimitedCommand: 'mdi mdi-download',
-  },
-  customFooterOptions: {
-    dateFormat: 'YYYY-MM-DD, hh:mm a',
-    hideRowSelectionCount: false,
-    hideTotalItemCount: false,
-    hideLastUpdateTimestamp: true,
-    footerHeight: 25,
-    leftContainerClass: 'col-xs-12 col-sm-5',
-    rightContainerClass: 'col-xs-6 col-sm-7',
-    metricSeparator: '|',
-    metricTexts: {
-      items: 'items',
-      itemsKey: 'ITEMS',
-      of: 'of',
-      ofKey: 'OF',
-      itemsSelected: 'items selected',
-      itemsSelectedKey: 'ITEMS_SELECTED',
-    },
-  },
-  dataView: {
-    // when enabled, this will preserve the row selection even after filtering/sorting/grouping
-    syncGridSelection: {
-      preserveHidden: false,
-      preserveHiddenOnSelectionChange: true,
-    },
-    syncGridSelectionWithBackendService: false, // but disable it when using backend services
-  },
-  datasetIdPropertyName: 'id',
-  defaultFilter: Filters.input,
-  defaultBackendServiceFilterTypingDebounce: 500,
-  defaultColumnSortFieldId: 'id',
-  defaultFilterPlaceholder: '🔎︎', // magnifying glass icon
-  defaultFilterRangeOperator: 'RangeInclusive',
-  editable: false,
-  editorTypingDebounce: 450,
-  filterTypingDebounce: 0,
-  enableEmptyDataWarningMessage: true,
-  enableFilterTrimWhiteSpace: false, // do we want to trim white spaces on all Filters?
-  emptyDataWarning: {
-    className: 'slick-empty-data-warning',
-    message: 'No data to display.',
-    messageKey: 'EMPTY_DATA_WARNING_MESSAGE',
-    hideFrozenLeftWarning: false,
-    hideFrozenRightWarning: false,
-    leftViewportMarginLeft: '40%',
-    rightViewportMarginLeft: '40%',
-    frozenLeftViewportMarginLeft: '0px',
-    frozenRightViewportMarginLeft: '40%',
-  },
-  enableAutoResize: true,
-  enableAutoSizeColumns: true,
-  enableCellNavigation: false,
-  enableColumnPicker: true,
-  enableColumnReorder: true,
-  enableColumnResizeOnDoubleClick: true,
-  enableContextMenu: true,
-  enableExcelExport: false,
-  enableTextExport: false,
-  enableGridMenu: true,
-  enableHeaderMenu: true,
-  enableMouseHoverHighlightRow: true,
-  enableSorting: true,
-  enableTextSelectionOnCells: true,
-  eventNamingStyle: EventNamingStyle.camelCase,
-  explicitInitialization: true,
-  excelExportOptions: {
-    addGroupIndentation: true,
-    exportWithFormatter: false,
-    filename: 'export',
-    format: 'xlsx',
-    groupingColumnHeaderTitle: 'Group By',
-    groupCollapsedSymbol: '⮞',
-    groupExpandedSymbol: '⮟',
-    groupingAggregatorRowText: '',
-    sanitizeDataExport: false,
-  },
-  pdfExportOptions: {
-    addGroupIndentation: true,
-    exportWithFormatter: false,
-    filename: 'export',
-    pageOrientation: 'portrait',
-    pageSize: 'a4',
-    fontSize: 10,
-    headerFontSize: 11,
-    includeColumnHeaders: true,
-    htmlDecode: true,
-    sanitizeDataExport: false,
-    groupingColumnHeaderTitle: 'Group By',
-    groupCollapsedSymbol: '+',
-    groupExpandedSymbol: '-',
-    groupingAggregatorRowText: '',
-    repeatHeadersOnEachPage: true,
-  },
-  textExportOptions: {
-    delimiter: DelimiterType.comma,
-    exportWithFormatter: false,
-    filename: 'export',
-    format: 'csv',
-    groupingColumnHeaderTitle: 'Group By',
-    groupingAggregatorRowText: '',
-    sanitizeDataExport: false,
-    useUtf8WithBom: true,
-  },
-  forceFitColumns: false,
-  frozenHeaderWidthCalcDifferential: 1,
-  gridMenu: {
-    commandLabels: {
-      clearAllFiltersCommandKey: 'CLEAR_ALL_FILTERS',
-      clearAllSortingCommandKey: 'CLEAR_ALL_SORTING',
-      clearFrozenColumnsCommandKey: 'CLEAR_PINNING',
-      exportCsvCommandKey: 'EXPORT_TO_CSV',
-      exportExcelCommandKey: 'EXPORT_TO_EXCEL',
-      exportPdfCommandKey: 'EXPORT_TO_PDF',
-      exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
-      refreshDatasetCommandKey: 'REFRESH_DATASET',
-      toggleDarkModeCommandKey: 'TOGGLE_DARK_MODE',
-      toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
-      togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
-    },
-    hideClearAllFiltersCommand: false,
-    hideClearAllSortingCommand: false,
-    hideClearFrozenColumnsCommand: true, // opt-in command
-    hideExportCsvCommand: false,
-    hideExportExcelCommand: false,
-    hideExportPdfCommand: false,
-    hideExportTextDelimitedCommand: true,
-    hideForceFitButton: false,
-    hideRefreshDatasetCommand: false,
-    hideSyncResizeButton: true,
-    hideToggleDarkModeCommand: true,
-    hideToggleFilterCommand: false,
-    hideTogglePreHeaderCommand: false,
-    iconCssClass: 'mdi mdi-menu',
-    iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
-    iconClearAllSortingCommand: 'mdi mdi-sort-variant-off',
-    iconClearFrozenColumnsCommand: 'mdi mdi-close',
-    iconExportCsvCommand: 'mdi mdi-download',
-    iconExportExcelCommand: 'mdi mdi-file-excel-outline',
-    iconExportTextDelimitedCommand: 'mdi mdi-download',
-    iconRefreshDatasetCommand: 'mdi mdi-sync',
-    iconToggleDarkModeCommand: 'mdi mdi-brightness-4 mdi mdi-brightness-4',
-    iconToggleFilterCommand: 'mdi mdi-flip-vertical',
-    iconTogglePreHeaderCommand: 'mdi mdi-flip-vertical',
-    menuWidth: 16,
-    resizeOnShowHeaderRow: true,
-    headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
-  },
-  headerMenu: {
-    autoAlign: true,
-    autoAlignOffset: 12,
-    minWidth: 140,
-    iconClearFilterCommand: 'mdi mdi-filter-remove-outline',
-    iconClearSortCommand: 'mdi mdi-sort-variant-off',
-    iconFreezeColumns: 'mdi mdi-pin-outline',
-    iconUnfreezeColumns: 'mdi mdi-pin-off-outline',
-    iconSortAscCommand: 'mdi mdi-sort-ascending',
-    iconSortDescCommand: 'mdi mdi-sort-descending',
-    iconColumnHideCommand: 'mdi mdi-close',
-    iconColumnResizeByContentCommand: 'mdi mdi-arrow-expand-horizontal',
-    hideColumnResizeByContentCommand: false,
-    hideColumnHideCommand: false,
-    hideClearFilterCommand: false,
-    hideClearSortCommand: false,
-    hideFreezeColumnsCommand: true, // opt-in command
-    hideSortCommands: false,
-  },
-  multiColumnSort: true,
-  numberedMultiColumnSort: true,
-  tristateMultiColumnSort: false,
-  sortColNumberInSeparateSpan: true,
-  suppressActiveCellChangeOnEdit: false,
-  pagination: {
-    pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
-    pageSize: 25,
-    totalItems: 0,
-  },
+  ...UniversalGridOptions,
+  eventNamingStyle: 'camelCase',
   rowDetailView: {
     collapseAllOnSort: true,
     cssClass: 'detail-view-toggle',
@@ -258,43 +13,4 @@ export const GlobalGridOptions: Partial<GridOption> = {
     useRowClick: false,
     saveDetailViewOnScroll: false,
   } as RowDetailView,
-  headerRowHeight: 35,
-  rowHeight: 35,
-  topPanelHeight: 30,
-  preHeaderPanelWidth: '100%', // mostly useful for Draggable Grouping dropzone to take full width
-  translationNamespaceSeparator: ':',
-  resetFilterSearchValueAfterOnBeforeCancellation: true,
-  resizeByContentOnlyOnFirstLoad: true,
-  resizeByContentOptions: {
-    alwaysRecalculateColumnWidth: false,
-    cellPaddingWidthInPx: 14,
-    defaultRatioForStringType: 0.88,
-    formatterPaddingWidthInPx: 0,
-    maxItemToInspectCellContentWidth: 1000,
-    maxItemToInspectSingleColumnWidthByContent: 5000,
-    widthToRemoveFromExceededWidthReadjustment: 50,
-  },
-  rowTopOffsetRenderType: 'transform',
-  treeDataOptions: {
-    exportIndentMarginLeft: 5,
-    exportIndentationLeadingChar: '͏͏͏͏͏͏͏͏͏·',
-  } as unknown as TreeDataOption,
 };
-
-/**
- * Value Extractor for both ColumnPicker & GridMenu Picker
- * when using Column Header Grouping, we'll prefix the column group title
- * else we'll simply return the column name title
- */
-function pickerHeaderColumnValueExtractor(column: Column, gridOptions?: GridOption) {
-  let colName = column?.columnPickerLabel ?? column?.name ?? '';
-  if (colName instanceof HTMLElement || colName instanceof DocumentFragment) {
-    colName = colName.textContent || '';
-  }
-  const headerGroup = column?.columnGroup || '';
-  const columnGroupSeparator = gridOptions?.columnGroupSeparator ?? ' - ';
-  if (headerGroup) {
-    return headerGroup + columnGroupSeparator + colName;
-  }
-  return colName;
-}

package/src/index.ts

@@ -1,11 +1,18 @@
 import { SlickgridReact } from './components/slickgrid-react.js';
-import { SlickRowDetailView } from './extensions/slickRowDetailView.js';
-import type { GridOption, RowDetailView, SlickgridReactComponentOutput, SlickgridReactInstance } from './models/index.js';
+import type {
+  GridOption,
+  RowDetailView,
+  SlickgridReactComponentOutput,
+  SlickgridReactInstance,
+  ViewModelBindableData,
+  ViewModelBindableInputData,
+} from './models/index.js';
 import type { SlickgridConfig } from './slickgrid-config.js';
 
 export * from '@slickgrid-universal/common';
 
 // expose all public classes & contexts
+export { createReactComponentDynamically } from './services/reactUtils.js';
 export { TranslaterI18NextService, disposeAllSubscriptions } from './services/index.js';
 export { I18nextContext, I18nextProvider } from './contexts/i18nextContext.js';
 
@@ -14,7 +21,8 @@ export {
   type SlickgridReactComponentOutput,
   type GridOption,
   type RowDetailView,
+  type ViewModelBindableData,
+  type ViewModelBindableInputData,
   SlickgridReact,
   SlickgridConfig,
-  SlickRowDetailView,
 };

package/src/services/index.ts

@@ -1,3 +1,4 @@
 export * from './container.service.js';
 export * from './translaterI18Next.service.js';
+export * from './reactUtils.js';
 export * from './utilities.js';

package/dist/extensions/slickRowDetailView.d.ts

@@ -1,82 +0,0 @@
-import { SlickEventData, type EventSubscription, type OnBeforeRowDetailToggleArgs, type OnRowBackOrOutOfViewportRangeArgs, type SelectionModel, type SlickGrid } 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 } from '../models/index.js';
-export interface CreatedView {
-    id: string | number;
-    dataContext: any;
-    root: Root | null;
-    rendered?: boolean;
-}
-export declare class SlickRowDetailView extends UniversalSlickRowDetailView {
-    private readonly eventPubSubService;
-    protected _component?: any;
-    protected _preloadComponent?: any;
-    protected _preloadRoot?: Root;
-    protected _views: CreatedView[];
-    protected _subscriptions: EventSubscription[];
-    protected _userProcessFn?: (item: any) => Promise<any>;
-    protected gridContainerElement: HTMLElement;
-    _root?: Root;
-    constructor(eventPubSubService: EventPubSubService);
-    get addonOptions(): import("@slickgrid-universal/common").RowDetailViewOption;
-    protected get datasetIdPropName(): string;
-    get gridOptions(): GridOption;
-    get rowDetailViewOptions(): RowDetailView | undefined;
-    /** Dispose of the RowDetailView Extension */
-    dispose(): void;
-    /** Dispose of all the opened Row Detail Panels Components */
-    disposeAllViewComponents(): void;
-    /** Get the instance of the SlickGrid addon (control or plugin). */
-    getAddonInstance(): SlickRowDetailView | null;
-    init(grid: SlickGrid): void;
-    /**
-     * 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?: SelectionModel): this;
-    /** Redraw (re-render) all the expanded row detail View Components */
-    redrawAllViewComponents(forceRedraw?: boolean): Promise<void>;
-    /** Render all the expanded row detail View Components */
-    renderAllViewModels(): Promise<void>;
-    /** Redraw the necessary View Component */
-    redrawViewComponent(view: CreatedView): void;
-    /** Render (or re-render) the View Component (Row Detail) */
-    renderPreloadView(item: any): void;
-    /** Render (or re-render) the View Component (Row Detail) */
-    renderViewModel(item: any): void;
-    protected upsertViewRefs(item: any, root: Root | null): void;
-    protected disposeViewByItem(item: any, removeFromArray?: boolean): void;
-    protected disposeViewComponent(expandedView: CreatedView): CreatedView | void;
-    /**
-     * 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;
-    }): void;
-    /** When Row comes back to Viewport Range, we need to redraw the View */
-    protected handleOnRowBackToViewportRange(_e: SlickEventData<OnRowBackOrOutOfViewportRangeArgs>, args: {
-        item: any;
-        rowId: string | number;
-        rowIndex: number;
-        expandedRows: (string | number)[];
-        rowIdsOutOfViewport: (string | number)[];
-        grid: SlickGrid;
-    }): Promise<void>;
-    /**
-     * 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): void;
-    /**
-     * On Processing, we will notify the plugin with the new item detail once backend server call completes
-     * @param item
-     */
-    protected onProcessing(item: any): Promise<void>;
-}