slickgrid-react 4.0.2 → 4.2.0

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

@@ -0,0 +1,12 @@
+import { EventSubscription } from '@slickgrid-universal/common';
+
+/**
+ * A class that will be used for internal communication of parent-child
+ *
+ * All methods are abstract for typings purposes only
+ */
+export abstract class SlickgridEventAggregator {
+  abstract publish(event: string, data: any): void;
+
+  abstract subscribe(event: string, callback: (data: any) => void): EventSubscription;
+}

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

@@ -0,0 +1,195 @@
+import {
+  BackendUtilityService,
+  CollectionService,
+  Column,
+  ContainerService,
+  ExtensionList,
+  ExtensionService,
+  ExtensionUtility,
+  FilterService,
+  GridOption,
+  GridEventService,
+  GridService,
+  GridStateService,
+  GroupingAndColspanService,
+  Pagination,
+  PaginationService,
+  ResizerService,
+  RxJsFacade,
+  SharedService,
+  SlickControlList,
+  SlickDataView,
+  SlickPluginList,
+  SortService,
+  TranslaterService,
+  TreeDataService,
+  SlickGridEventData,
+  OnActiveCellChangedEventArgs,
+  DragRowMove,
+  OnAddNewRowEventArgs,
+  OnAutosizeColumnsEventArgs,
+  OnBeforeAppendCellEventArgs,
+  OnBeforeCellEditorDestroyEventArgs,
+  OnBeforeColumnsResizeEventArgs,
+  OnBeforeEditCellEventArgs,
+  OnBeforeFooterRowCellDestroyEventArgs,
+  OnBeforeHeaderCellDestroyEventArgs,
+  OnBeforeHeaderRowCellDestroyEventArgs,
+  OnBeforeSetColumnsEventArgs,
+  OnCellChangeEventArgs,
+  OnCellCssStylesChangedEventArgs,
+  OnClickEventArgs,
+  OnColumnsDragEventArgs,
+  OnColumnsReorderedEventArgs,
+  OnColumnsResizeDblClickEventArgs,
+  OnColumnsResizedEventArgs,
+  OnCompositeEditorChangeEventArgs,
+  OnDblClickEventArgs,
+  OnFooterClickEventArgs,
+  OnFooterContextMenuEventArgs,
+  OnFooterRowCellRenderedEventArgs,
+  OnHeaderCellRenderedEventArgs,
+  OnHeaderClickEventArgs,
+  OnHeaderContextMenuEventArgs,
+  OnHeaderMouseEventArgs,
+  OnHeaderRowCellRenderedEventArgs,
+  OnKeyDownEventArgs,
+  OnRenderedEventArgs,
+  OnScrollEventArgs,
+  OnSelectedRowsChangedEventArgs,
+  OnSetOptionsEventArgs,
+  OnValidationErrorEventArgs,
+  SingleColumnSort,
+  OnGroupCollapsedEventArgs,
+  OnGroupExpandedEventArgs,
+  OnRowCountChangedEventArgs,
+  OnRowsChangedEventArgs,
+  OnRowsOrCountChangedEventArgs,
+  OnSetItemsCalledEventArgs,
+  PagingInfo,
+} from '@slickgrid-universal/common';
+import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+import { SlickgridReactInstance } from '../models';
+import { ReactUtilService } from '../services';
+
+export interface SlickgridReactProps {
+  header?: JSX.Element;
+  footer?: JSX.Element;
+  reactUtilService: ReactUtilService;
+  containerService: ContainerService;
+  translaterService: TranslaterService;
+  externalServices?: {
+    backendUtilityService?: BackendUtilityService,
+    collectionService?: CollectionService,
+    eventPubSubService?: EventPubSubService,
+    extensionService?: ExtensionService,
+    extensionUtility?: ExtensionUtility,
+    filterService?: FilterService,
+    gridEventService?: GridEventService,
+    gridService?: GridService,
+    gridStateService?: GridStateService,
+    groupingAndColspanService?: GroupingAndColspanService,
+    paginationService?: PaginationService,
+    resizerService?: ResizerService,
+    rxjs?: RxJsFacade,
+    sharedService?: SharedService,
+    sortService?: SortService,
+    treeDataService?: TreeDataService,
+  }
+  customDataView?: SlickDataView;
+  dataset: any[];
+  datasetHierarchical?: any[] | null;
+  extensions?: ExtensionList<SlickControlList | SlickPluginList>;
+  gridId: string;
+  gridOptions?: GridOption;
+  columnDefinitions: Column[];
+  instances?: SlickgridReactInstance;
+  paginationOptions?: Pagination;
+
+  // Custom Events list
+  // ---------------------
+
+  // Slick Grid events
+  onActiveCellChanged?: (e: CustomEvent<{ eventData: any; args: OnActiveCellChangedEventArgs; }>) => void;
+  onActiveCellPositionChanged?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onAddNewRow?: (e: CustomEvent<{ eventData: any; args: OnAddNewRowEventArgs; }>) => void;
+  onAutosizeColumns?: (e: CustomEvent<{ eventData: any; args: OnAutosizeColumnsEventArgs; }>) => void;
+  onBeforeAppendCell?: (e: CustomEvent<{ eventData: any; args: OnBeforeAppendCellEventArgs; }>) => void;
+  onBeforeSearchChange?: (e: CustomEvent<{ eventData: any; args: OnCellChangeEventArgs; }>) => void;
+  onBeforeCellEditorDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeCellEditorDestroyEventArgs; }>) => void;
+  onBeforeColumnsResize?: (e: CustomEvent<{ eventData: any; args: OnBeforeColumnsResizeEventArgs; }>) => void;
+  onBeforeDestroy?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onBeforeEditCell?: (e: CustomEvent<{ eventData: any; args: OnBeforeEditCellEventArgs; }>) => void;
+  onBeforeHeaderCellDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeHeaderCellDestroyEventArgs; }>) => void;
+  onBeforeHeaderRowCellDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeHeaderRowCellDestroyEventArgs; }>) => void;
+  onBeforeFooterRowCellDestroy?: (e: CustomEvent<{ eventData: any; args: OnBeforeFooterRowCellDestroyEventArgs; }>) => void;
+  onBeforeSetColumns?: (e: CustomEvent<{ eventData: any; args: OnBeforeSetColumnsEventArgs; }>) => void;
+  onBeforeSort?: (e: CustomEvent<{ eventData: any; args: SingleColumnSort; }>) => void;
+  onCellChange?: (e: CustomEvent<{ eventData: any; args: OnCellChangeEventArgs; }>) => void;
+  onCellCssStylesChanged?: (e: CustomEvent<{ eventData: any; args: OnCellCssStylesChangedEventArgs; }>) => void;
+  onClick?: (e: CustomEvent<{ eventData: any; args: OnClickEventArgs; }>) => void;
+  onColumnsDrag?: (e: CustomEvent<{ eventData: any; args: OnColumnsDragEventArgs; }>) => void;
+  onColumnsReordered?: (e: CustomEvent<{ eventData: any; args: OnColumnsReorderedEventArgs; }>) => void;
+  onColumnsResized?: (e: CustomEvent<{ eventData: any; args: OnColumnsResizedEventArgs; }>) => void;
+  onColumnsResizeDblClick?: (e: CustomEvent<{ eventData: any; args: OnColumnsResizeDblClickEventArgs; }>) => void;
+  onCompositeEditorChange?: (e: CustomEvent<{ eventData: any; args: OnCompositeEditorChangeEventArgs; }>) => void;
+  onContextMenu?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onDrag?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
+  onDragEnd?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
+  onDragInit?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
+  onDragStart?: (e: CustomEvent<{ eventData: any; args: DragRowMove; }>) => void;
+  onDblClick?: (e: CustomEvent<{ eventData: any; args: OnDblClickEventArgs; }>) => void;
+  onFooterContextMenu?: (e: CustomEvent<{ eventData: any; args: OnFooterContextMenuEventArgs; }>) => void;
+  onFooterRowCellRendered?: (e: CustomEvent<{ eventData: any; args: OnFooterRowCellRenderedEventArgs; }>) => void;
+  onHeaderCellRendered?: (e: CustomEvent<{ eventData: any; args: OnHeaderCellRenderedEventArgs; }>) => void;
+  onFooterClick?: (e: CustomEvent<{ eventData: any; args: OnFooterClickEventArgs; }>) => void;
+  onHeaderClick?: (e: CustomEvent<{ eventData: any; args: OnHeaderClickEventArgs; }>) => void;
+  onHeaderContextMenu?: (e: CustomEvent<{ eventData: any; args: OnHeaderContextMenuEventArgs; }>) => void;
+  onHeaderMouseEnter?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
+  onHeaderMouseLeave?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
+  onHeaderRowCellRendered?: (e: CustomEvent<{ eventData: any; args: OnHeaderRowCellRenderedEventArgs; }>) => void;
+  onHeaderRowMouseEnter?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
+  onHeaderRowMouseLeave?: (e: CustomEvent<{ eventData: any; args: OnHeaderMouseEventArgs; }>) => void;
+  onKeyDown?: (e: CustomEvent<{ eventData: any; args: OnKeyDownEventArgs; }>) => void;
+  onMouseEnter?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onMouseLeave?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onValidationError?: (e: CustomEvent<{ eventData: any; args: OnValidationErrorEventArgs; }>) => void;
+  onViewportChanged?: (e: CustomEvent<{ eventData: any; args: SlickGridEventData; }>) => void;
+  onRendered?: (e: CustomEvent<{ eventData: any; args: OnRenderedEventArgs; }>) => void;
+  onSelectedRowsChanged?: (e: CustomEvent<{ eventData: any; args: OnSelectedRowsChangedEventArgs; }>) => void;
+  onSetOptions?: (e: CustomEvent<{ eventData: any; args: OnSetOptionsEventArgs; }>) => void;
+  onScroll?: (e: CustomEvent<{ eventData: any; args: OnScrollEventArgs; }>) => void;
+  onSort?: (e: CustomEvent<{ eventData: any; args: SingleColumnSort; }>) => void;
+
+  // Slick DataView events
+  onBeforePagingInfoChanged?: (e: CustomEvent<{ eventData: any; args: PagingInfo; }>) => void;
+  onGroupExpanded?: (e: CustomEvent<{ eventData: any; args: OnGroupExpandedEventArgs; }>) => void;
+  onGroupCollapsed?: (e: CustomEvent<{ eventData: any; args: OnGroupCollapsedEventArgs; }>) => void;
+  onPagingInfoChanged?: (e: CustomEvent<{ eventData: any; args: PagingInfo; }>) => void;
+  onRowCountChanged?: (e: CustomEvent<{ eventData: any; args: OnRowCountChangedEventArgs; }>) => void;
+  onRowsChanged?: (e: CustomEvent<{ eventData: any; args: OnRowsChangedEventArgs; }>) => void;
+  onRowsOrCountChanged?: (e: CustomEvent<{ eventData: any; args: OnRowsOrCountChangedEventArgs; }>) => void;
+  onSetItemsCalled?: (e: CustomEvent<{ eventData: any; args: OnSetItemsCalledEventArgs; }>) => void;
+
+
+  // Slickgrid-React events
+  onAfterExportToExcel?: (e: CustomEvent<any>) => void;
+  onBeforePaginationChange?: (e: CustomEvent<any>) => void;
+  onBeforeExportToExcel?: (e: CustomEvent<any>) => void;
+  onBeforeFilterChange?: (e: CustomEvent<any>) => void;
+  onBeforeFilterClear?: (e: CustomEvent<any>) => void;
+  onBeforeSortChange?: (e: CustomEvent<any>) => void;
+  onBeforeToggleTreeCollapse?: (e: CustomEvent<any>) => void;
+  onFilterChanged?: (e: CustomEvent<any>) => void;
+  onFilterCleared?: (e: CustomEvent<any>) => void;
+  onItemDeleted?: (e: CustomEvent<any>) => void;
+  onGridStateChanged?: (e: CustomEvent<any>) => void;
+  onPaginationChanged?: (e: CustomEvent<any>) => void;
+  onReactGridCreated?: (e: CustomEvent<any>) => void;
+  onSelectedRowIdsChanged?: (e: CustomEvent<any>) => void;
+  onSortChanged?: (e: CustomEvent<any>) => void;
+  onToggleTreeCollapsed?: (e: CustomEvent<any>) => void;
+  onTreeItemToggled?: (e: CustomEvent<any>) => void;
+  onTreeFullToggleEnd?: (e: CustomEvent<any>) => void;
+  onTreeFullToggleStart?: (e: CustomEvent<any>) => void;
+}

package/src/slickgrid-react/constants.ts

@@ -0,0 +1,89 @@
+import { 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_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/slickgrid-react/global-grid-options.ts

@@ -0,0 +1,262 @@
+import { Column, DelimiterType, EventNamingStyle, FileType, Filters, OperatorType, TreeDataOption } from '@slickgrid-universal/common';
+import { GridOption } from './models/index';
+
+/**
+ * Default Options that can be passed to the Slickgrid-React
+ */
+export const GlobalGridOptions: Partial<GridOption> = {
+  alwaysShowVerticalScroll: true,
+  autoEdit: false,
+  asyncEditorLoading: false,
+  autoFitColumnsOnFirstLoad: true,
+  autoResize: {
+    applyResizeToContainer: true,
+    calculateAvailableSizeBy: 'window',
+    bottomPadding: 20,
+    minHeight: 180,
+    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: 'fa fa-repeat',
+    resetFormButtonIconCssClass: 'fa fa-repeat'
+  },
+  contextMenu: {
+    autoAdjustDrop: true,
+    autoAlignSide: true,
+    hideCloseButton: true,
+    hideClearAllGrouping: false,
+    hideCollapseAllGroups: false,
+    hideCommandSection: false,
+    hideCopyCellValueCommand: false,
+    hideExpandAllGroups: false,
+    hideExportCsvCommand: false,
+    hideExportExcelCommand: false,
+    hideExportTextDelimitedCommand: true,
+    hideMenuOnScroll: true,
+    hideOptionSection: false,
+    iconCollapseAllGroupsCommand: 'fa fa-compress',
+    iconExpandAllGroupsCommand: 'fa fa-expand',
+    iconClearGroupingCommand: 'fa fa-times',
+    iconCopyCellValueCommand: 'fa fa-clone',
+    iconExportCsvCommand: 'fa fa-download',
+    iconExportExcelCommand: 'fa fa-file-excel-o text-success',
+    iconExportTextDelimitedCommand: 'fa fa-download',
+    width: 200,
+  },
+  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: OperatorType.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: FileType.xlsx,
+    groupingColumnHeaderTitle: 'Group By',
+    groupCollapsedSymbol: '⮞',
+    groupExpandedSymbol: '⮟',
+    groupingAggregatorRowText: '',
+    sanitizeDataExport: false,
+  },
+  textExportOptions: {
+    delimiter: DelimiterType.comma,
+    exportWithFormatter: false,
+    filename: 'export',
+    format: FileType.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',
+      exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
+      refreshDatasetCommandKey: 'REFRESH_DATASET',
+      toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
+      togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
+    },
+    hideClearAllFiltersCommand: false,
+    hideClearAllSortingCommand: false,
+    hideClearFrozenColumnsCommand: true, // opt-in command
+    hideExportCsvCommand: false,
+    hideExportExcelCommand: false,
+    hideExportTextDelimitedCommand: true,
+    hideForceFitButton: false,
+    hideRefreshDatasetCommand: false,
+    hideSyncResizeButton: true,
+    hideToggleFilterCommand: false,
+    hideTogglePreHeaderCommand: false,
+    iconCssClass: 'fa fa-bars',
+    iconClearAllFiltersCommand: 'fa fa-filter',
+    iconClearAllSortingCommand: 'fa fa-unsorted',
+    iconClearFrozenColumnsCommand: 'fa fa-times',
+    iconExportCsvCommand: 'fa fa-download',
+    iconExportExcelCommand: 'fa fa-file-excel-o',
+    iconExportTextDelimitedCommand: 'fa fa-download',
+    iconRefreshDatasetCommand: 'fa fa-refresh',
+    iconToggleFilterCommand: 'fa fa-random',
+    iconTogglePreHeaderCommand: 'fa fa-random',
+    menuWidth: 16,
+    resizeOnShowHeaderRow: true,
+    headerColumnValueExtractor: pickerHeaderColumnValueExtractor
+  },
+  headerMenu: {
+    autoAlign: true,
+    autoAlignOffset: 12,
+    minWidth: 140,
+    iconClearFilterCommand: 'fa fa-filter',
+    iconClearSortCommand: 'fa fa-unsorted',
+    iconFreezeColumns: 'fa fa-thumb-tack',
+    iconSortAscCommand: 'fa fa-sort-amount-asc',
+    iconSortDescCommand: 'fa fa-sort-amount-desc',
+    iconColumnHideCommand: 'fa fa-times',
+    iconColumnResizeByContentCommand: 'fa fa-arrows-h',
+    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
+  },
+  headerRowHeight: 35,
+  rowHeight: 35,
+  topPanelHeight: 30,
+  translationNamespaceSeparator: ':',
+  resetFilterSearchValueAfterOnBeforeCancellation: true,
+  resizeByContentOnlyOnFirstLoad: true,
+  resizeByContentOptions: {
+    alwaysRecalculateColumnWidth: false,
+    cellCharWidthInPx: 7.8,
+    cellPaddingWidthInPx: 14,
+    defaultRatioForStringType: 0.88,
+    formatterPaddingWidthInPx: 0,
+    maxItemToInspectCellContentWidth: 1000,
+    maxItemToInspectSingleColumnWidthByContent: 5000,
+    widthToRemoveFromExceededWidthReadjustment: 50,
+  },
+  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) {
+  const headerGroup = column?.columnGroup || '';
+  const columnGroupSeparator = gridOptions?.columnGroupSeparator ?? ' - ';
+  if (headerGroup) {
+    return headerGroup + columnGroupSeparator + column.name;
+  }
+  return column?.name ?? '';
+}

package/src/slickgrid-react/index.ts

@@ -0,0 +1,28 @@
+import 'regenerator-runtime/runtime.js';
+export * from '@slickgrid-universal/common';
+
+import { SlickgridReact } from './components/slickgrid-react';
+import { SlickgridEventAggregator } from './components/slickgridEventAggregator';
+import { SlickgridConfig } from './slickgrid-config';
+
+import {
+  SlickgridReactInstance,
+  SlickgridReactComponentOutput,
+  GridOption,
+} from './models/index';
+
+// expose all public classes
+export {
+  ReactUtilService,
+  TranslaterService,
+  disposeAllSubscriptions
+} from './services/index';
+
+export {
+  SlickgridEventAggregator,
+  SlickgridReactInstance,
+  SlickgridReactComponentOutput,
+  GridOption,
+  SlickgridReact,
+  SlickgridConfig
+};

package/src/slickgrid-react/models/gridOption.interface.ts

@@ -0,0 +1,7 @@
+import { GridOption as UniversalGridOption } from '@slickgrid-universal/common';
+import * as i18next from 'i18next';
+
+export interface GridOption extends UniversalGridOption {
+  /** I18N translation service instance */
+  i18n?: i18next.i18n;
+}

package/src/slickgrid-react/models/index.ts

@@ -0,0 +1,3 @@
+export * from './slickgridReactInstance.interface';
+export * from './reactComponentOutput.interface';
+export * from './gridOption.interface';

package/src/slickgrid-react/models/reactComponentOutput.interface.ts

@@ -0,0 +1,7 @@
+import React, { ReactInstance } from 'react';
+
+export interface SlickgridReactComponentOutput {
+  componentInstance?: ReactInstance;
+  componentElement?: React.CElement<any, React.Component<any, any, any>>;
+  domElement?: Element | Text | null;
+}

package/src/slickgrid-react/models/slickgridReactInstance.interface.ts

@@ -0,0 +1,70 @@
+import {
+  BackendService,
+  ExtensionService,
+  FilterService,
+  GridEventService,
+  GridService,
+  GridStateService,
+  GroupingAndColspanService,
+  PaginationService,
+  ResizerService,
+  SlickDataView,
+  SlickGrid,
+  SortService,
+  TreeDataService
+} from '@slickgrid-universal/common';
+import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+
+export interface SlickgridReactInstance {
+  element: HTMLDivElement;
+
+  /** Slick DataView object */
+  dataView: SlickDataView;
+
+  /** Slick Grid object */
+  slickGrid: SlickGrid;
+
+  // --
+  // Methods
+  /** Dispose of the grid and optionally empty the DOM element grid container as well */
+  dispose: (emptyDomElementContainer?: boolean) => void;
+
+  // --
+  // Services
+
+  /** Backend Service, when available */
+  backendService?: BackendService;
+
+  /** EventPubSub Service instance that is used internal by the lib and could be used externally to subscribe to Slickgrid-React events */
+  eventPubSubService?: EventPubSubService;
+
+  /** Extension (Plugins & Controls) Service */
+  extensionService: ExtensionService;
+
+  /** Filter Service */
+  filterService: FilterService;
+
+  /** Grid Service (grid extra functionalities) */
+  gridService: GridService;
+
+  /** Grid Events Service */
+  gridEventService: GridEventService;
+
+  /** Grid State Service */
+  gridStateService: GridStateService;
+
+  /** Grouping (and colspan) Service */
+  groupingService: GroupingAndColspanService;
+
+  /** Pagination Service (allows you to programmatically go to first/last page, etc...) */
+  paginationService?: PaginationService;
+
+  /** Resizer Service (including auto-resize) */
+  resizerService: ResizerService;
+
+  /** Sort Service */
+  sortService: SortService;
+
+  /** Tree Data View Service */
+  treeDataService: TreeDataService;
+}