feat: migrate Draggable Grouping Plugins to TypeScript

examples/example-draggable-grouping.html

@@ -409,7 +409,7 @@ <h2>View Source:</h2>
   var options = {
     enableCellNavigation: true,
     editable: true,
-    enableColumnReorder: draggableGrouping.getSetupColumnReorder,
+    enableColumnReorder: draggableGrouping.getSetupColumnReorder.bind(draggableGrouping),
     createPreHeaderPanel: true,
     showPreHeaderPanel: true,
     preHeaderPanelHeight: 28,

src/global.d.ts

@@ -33,6 +33,7 @@ import type { SlickCellExternalCopyManager } from './plugins/slick.cellexternalc
 import type { SlickCellRangeDecorator } from './plugins/slick.cellrangedecorator';
 import type { SlickCellRangeSelector } from './plugins/slick.cellrangeselector';
 import type { SlickCellSelectionModel } from './plugins/slick.cellselectionmodel';
+import type { SlickDraggableGrouping } from './plugins/slick.draggablegrouping';
 import type { SlickRowSelectionModel } from './plugins/slick.rowselectionmodel';
 import type { SlickState } from './plugins/slick.state';
 import type { SlickGroupItemMetadataProvider } from './slick.groupitemmetadataprovider';
@@ -68,6 +69,7 @@ declare global {
       DataView: typeof SlickDataView,
       GroupItemMetadataProvider: typeof SlickGroupItemMetadataProvider
     },
+    DraggableGrouping: typeof SlickDraggableGrouping,
     Editors: typeof Editors,
     Event: typeof SlickEvent,
     EventData: typeof SlickEventData,

src/models/column.interface.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/indent */
 
-import type { CellMenuOption, CustomTooltipOption, Editor, EditorValidator, Formatter, FormatterResultObject, GroupTotalsFormatter, HeaderButtonsOrMenu } from './index';
+import type { CellMenuOption, CustomTooltipOption, Editor, EditorValidator, Formatter, FormatterResultObject, GroupTotalsFormatter, Grouping, HeaderButtonsOrMenu } from './index';
 import type { SlickGrid } from '../slick.grid';
 
 type PathsToStringProps<T> = T extends string | number | boolean | Date ? [] : {
@@ -130,6 +130,9 @@ export interface Column<T = any> {
   /** Formatter override function */
   formatterOverride?: { ReturnsTextOnly: boolean; } | FormatterOverrideCallback;
 
+  /** Grouping option used by a Draggable Grouping Column */
+  grouping?: Grouping;
+
   /** Group Totals Formatter function that can be used to add grouping totals in the grid */
   groupTotalsFormatter?: GroupTotalsFormatter;
 

src/models/draggableGroupingOption.interface.ts

@@ -0,0 +1,49 @@
+import type { ColumnReorderFunction, GroupingGetterFunction } from './index';
+
+export interface DraggableGroupingOption {
+  /** an extra CSS class to add to the delete button (default undefined), if deleteIconCssClass is undefined then slick-groupby-remove-icon class will be added */
+  deleteIconCssClass?: string;
+
+  /** a url to the delete button image (default undefined) */
+  deleteIconImage?: string;
+
+  /** option to specify set own placeholder note text */
+  dropPlaceHolderText?: string;
+
+  /** an extra CSS class to add to the grouping field hint  (default undefined) */
+  groupIconCssClass?: string;
+
+  /** a url to the grouping field hint image (default undefined) */
+  groupIconImage?: string;
+
+  /** Defaults to False, should we display a toggle all button (typically aligned on the left before any of the column group) */
+  hideToggleAllButton?: boolean;
+
+  /** Defaults to False, should we show the Sorting icons on each group by element? */
+  hideGroupSortIcons?: boolean;
+
+  /** an extra CSS class to add to the sort ascending icon (default undefined), if sortAscIconCssClass is undefined then slick-groupby-sort-asc-icon class will be added */
+  sortAscIconCssClass?: string;
+
+  /** an extra CSS class to add to the sort descending icon (default undefined), if sortDescIconCssClass is undefined then slick-groupby-sort-desc-icon class will be added */
+  sortDescIconCssClass?: string;
+
+  /** Defaults to "Toggle all Groups", placeholder of the Toggle All button that can optionally show up in the pre-header row. */
+  toggleAllPlaceholderText?: string;
+
+  /** Defaults to empty string, text to show in the Toggle All button that can optionally show up in the pre-header row. */
+  toggleAllButtonText?: string;
+
+  //
+  // Methods
+  // ---------
+
+  /** provide option to clear grouping */
+  clearDroppedGroups?: () => void;
+
+  /** its function to setup draggable feature agains Header Column, should be passed on grid option. Also possible to pass custom function */
+  getSetupColumnReorder?: ColumnReorderFunction;
+
+  /** provide option to set default grouping on loading */
+  setDroppedGroups?: (groupingInfo: Array<string | GroupingGetterFunction> | string) => void;
+}

src/models/index.ts

@@ -14,6 +14,7 @@ export * from './customTooltipOption.interface';
 export * from './dataViewEvents.interface';
 export * from './domEvent.interface';
 export * from './drag.interface';
+export * from './draggableGroupingOption.interface';
 export * from './editCommand.interface';
 export * from './editor.interface';
 export * from './editorArguments.interface';

src/plugins/slick.autotooltips.ts

@@ -3,7 +3,7 @@ import { Utils as Utils_ } from '../slick.core';
 import type { SlickGrid } from '../slick.grid';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
-const Utils = (IIFE_ONLY ? Slick.Utils : Utils_) as typeof Utils_;
+const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
 
 /**
  * AutoTooltips plugin to show/hide tooltips when columns are too narrow to fit content.

src/plugins/slick.cellcopymanager.ts

@@ -3,9 +3,9 @@ import { SlickEvent as SlickEvent_, keyCode as keyCode_, Utils as Utils_, SlickR
 import type { SlickGrid } from '../slick.grid';
 
 // for (iife) load Slick methods from global Slick object, or use imports for (cjs/esm)
-const keyCode = (IIFE_ONLY ? Slick.keyCode : keyCode_);
-const SlickEvent = (IIFE_ONLY ? Slick.Event : SlickEvent_);
-const Utils = (IIFE_ONLY ? Slick.Utils : Utils_) as typeof Utils_;
+const keyCode = IIFE_ONLY ? Slick.keyCode : keyCode_;
+const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
+const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
 
 /**
  * This manager enables users to copy/paste cell data