Future Ideas and possible features

[ghiscoding]

Below is a list of ideas, there's a good change that it will never come to fruition but I'm just listing them as possible ideas anyway

• 1. Vue port (PR feat: create new Slickgrid-Vue package to support VueJS framework #1753)
• 2. PDF Export, see UI-Grid data export and in code
• 3. row span, see comments and GerHobbelt initial commit (ref PR feat: add final rowspan implementation #1798)
  • SyncFusion has a nice example
• 4. we only have 1 preheader, so this mean we can't use simple features that use the same preheader because of the conflicts (DraggableGrouping/HeaderGrouping)
  • ref PR feat(core): add optional Top-Header for Drag Grouping & Header Grouping #1556
• 5. possible use of Web Worker for Export Services to avoid blocking main thread while downloading
  • gave it a try but it doesn't look feasible since Web Workers don't even work with binding scope, it only works with local code that has no connection (scope) to the outside which seems impossible in here since we need to use the SlickGrid/DataView variable bindings to read every row and all kind of other things
• 6. Infinite Scroll for Backend Services (see Ag-Grid Infinite Row Model)
  • PR feat: Infinite Scroll for Backend Services #1609
  • PR feat: add Infinite Scroll with local JSON data #1628
• 7. try to use SortableJS ESM import and see if it helps with build size
  • import Sortable from 'sortablejs/modular/sortable.core.esm.js'; (see SortableJS Getting Started)
  • make sure Column Reordering and Draggable Grouping also still works
  • currently makes 2/3 of unit tests to fail in PR perf: use SortableJS ESM import to save 1kb #1621 because Jest only supports CJS, so I'll cancel this for now but might revisit if migrating to Vitest with full ESM
  • EDIT: I gave it another try after migrating to Vitest and sortable.core.esm.js doesn't play well with current Types @types/sortablejs because the names don't match. Considering that this is a pain to get proper Types, I think I'll just keep current approach and 1kb bigger is not that much of a difference. The hope is that one day, SortableJS offers better ESM support (but I won't put much hope on this happening anytime soon sadly)
• 8. drag rows between 2 grids and/or drag row to outside container like a recycle bin
  • 1. between 2 grids (won't do since this requires a new plugin and no one ever requested this feature), alternatively any user could simply create their own plugin themselves.
  • 2. drag rows to recycle bin
• 9. stop using Jest Global types, see this potential PR of another project to handle it Migrate to Vitest instead
  • ref PR chore: migrate from Jest to Vitest for ESM support #1663
• 10. can we further improve Date Sorting speed (perf)? (see if we can use other sorting type for large dataset, i.e. quick sort)
  • ref PR perf: option to improve Date Sorting by pre-parsing date items only once #1691
  • see these articles Sorting Algorithms in JavaScript or TypeScript / Introduction to Sorting Algorithms in JavaScript
• 11. custom pagination is not currently replaceable by the user, but it probably should be eventually to be fully customizable
• 12. add silenceWarnings to all ports in next version only
• 13. I think that GroupingAndColspanService should be renamed to HeaderGroupingService since there's nothing related to colspan (the colspan was actually meant to represent that header can span across multiple columns, but SlickGrid always called it Header Grouping, so let's use that name instead in the next minor version)
• 14. we should probably add peer deps to all ports, for example: "peerDependencies": { "react": ">= 18.0.0" }
• 15. currently Grid Option are required but I think it should be made optional
• 16. add new example to showcase data CSV import to build a grid (PR feat: dynamically create grid from imported CSV data #1772)
• 17. can we replace fetch-jsonp with native Fetch? Maybe this SO
• 18. possible Backend Service package to support Hasura , see this comment
• 19. auto-resize height by dataset length instead of full window height available. From grid row height & dataset length we can calculate grid height
• add full dataContext object when Grouping (currently only has field value and count without any access to the dataContext)

next potential major version ideas (Q2 - 2025)

• 20. drop CJS? Yep we'll schedule it for our next major release around Node 18 EOL
  • this would require migrating from Jest to Vitest (ref PR chore: migrate from Jest to Vitest for ESM support #1663)
• 21. change rowTopOffsetRenderType default value from top to transform in next major release
  • see PR perf: add new rowTopOffsetRenderType grid option to use "transform" #1650
• 22. possibly switch to column hidden property, which we tried in the past via this SlickGrid PR. It could be an issue in ColumnPicker/GridMenu, requires more in depth testing
• 23. drop Node 18 and upgrade dependencies that require Node 20
• 24. remove internal deep copy of GridOption and allow user to update any options by pointer or reference
  • see this Angular-Slickgrid issue for more context
  • it might not be possible to make it like a pointer ref (and reactive) but we could add a watch on the grid options to resync
• 25. rename previous CRUD singular event names to plural names and always return an array
  • onItemAdded, onItemDeleted, onItemUpdated, onItemUpserted
• 26. provide an ESM only PR to un-flatten-tree repo, or fork the project as a last resource (only if future PR of ESM isn't accepted)
• 27. in Angular-Slickgrid, we should probably:
  • switch to Vite builder, https://angular.dev/tools/cli/build-system-migration
  • upgrade ngx-translate, https://ngx-translate.org/getting-started/migration-guide/
  • upgrade to Angular 19
  • migrate from Jest to Vitest using Analog (see Faster testing with Angular and Vitest)
  • align all example numbers with other ports (i.e. Row Detail is 19 in Aurelia/React but is 21 in Angular)
  • should we make RxJS optional?
  • npm publish might be a challenge because we need to publish the content of dist/ as the publish root
• 28. in Aurelia-Slickgrid, we could:
  • migrate dev from WebPack to ViteJS, need to make sure this doesn't impact users of WebPack afterward
• 29. in Slickgrid-React, we could:
  • upgrade to React 19, see their blog post and upgrade guide
  • major upgrade i18next to v24 and i18next-http-backend to v3 (same for Aurelia-Slickgrid)
  • https://blog.logrocket.com/using-custom-events-react/
  • can we make i18next optional in Slickgrid-React like I've done in Slickgrid-Vue?
  • use Vite preview (instead of servor) to run Cypress tests
• 30. in Slickgid-Vue we could:
  • increase peer dep to Vue 3.5
• 31. perhaps @formkit/drag-and-drop might be a good alternative to SortableJS which doesn't provide an out of the box ESM (they provide sortable.core.esm.js but it breaks @types/sortablejs, which isn't ideal)
  • preliminary trial shows couple of issues (animation not working, event not provided, quite different implementation)
• 32. upgrade to new major version of Vanilla-Calendar-Pro v3, see vanilla-calendar3 branch, however it's missing changes for the use of the new .set() method (see comment)
• 33. possibly use the modern and simpler Clipboard API instead of creating temp textarea to fake a copy
  • we have 2 places where this is being used, inside SlickExternalCopyManager and in SlickContextMenu (copy cell)
  • see SlickGrid branch
  • see WebSchool - JavaScript Clipboard API
  • actually this can be simplified by using this implementation SO
  • assign Ctrl+C to copy single cell (but without ExcelCopyBuffer enabled to avoid overriding each other)
• 34. possibly move node-extend from utils/nodeExtend to a separate npm org for utils, maybe @universal/node-extend or something similar, the reason being that the official node-extend repo have no intention of going ESM as per this node-extend issue and I want to move it outside of the Slickgrid-Universal world so that other users can take advantage of an ESM package (or maybe even myself in projects not requiring SlickGrid)
• 35. could we try to move some (ie: RowDetail), or all, extensions as optional and maybe do something similar to what I've done in Lerna-Lite code which is to use await import(plugin). I'm guessing that ViteJS is potentially doing similar with SASS which doesn't work until you npm install SASS
  • could we auto-enable certain flags when their associated external resources are loaded? (i.e. ExcelExportService => enableExcelExport) (not sure yet since this might be the inverse of step 34 below)
• 36. potentially create a frameworks folder in the workspace and provide optional install for each frameworks in readme via pnpm install --filter
  • will require GitBook in Monorepo changes / use our "...-demos" repos for live demos
  • move vanilla examples into the new framework folder => /frameworks/vanilla
• 37. if frameworks folder is implemented, we could align all ports to 9.x version (because Angular/Aurelia ports are already at 8.x)
  • move vanilla bundle in the frameworks folder
• 38. add Prettier formatter to the project (it might need multiple config in each framework ports)
• 39. replace whatwg-fetch with native NodeJS fetch, probably requires Node 20.x and higher (requires Node 18.13+)
• 40. possibly rename the default slickgrid theme to remove Bootstrap from its name since it works without BS (see this note)
  • actually it might be better to add a new one since it requires slick-without-bootstrap-min-styling.scss (PR feat: add a Default Theme to avoid expectation of certain Bootstrap stylings #1806)
• 41. add comma , separator on DateTimeIso Formatter to separate date & time (this might break parsing though, need to investigate)
• 42. update jsGrids website with all my ports with updated links
• 43. VSCode debugger should work for all frameworks, might not be working with new Slickgrid-Vue

Drag-and-drop test code (click to expand)

Test Code

protected setupColumnReorder(): void {
    let columnScrollTimer: number;
    let canDragScroll = false;
    let reorderedIds: Array<string | number> = [];
    const scrollColumnsRight = () => (this._viewportScrollContainerX.scrollLeft += 10);
    const scrollColumnsLeft = () => (this._viewportScrollContainerX.scrollLeft -= 10);

    dragAndDrop({
      parent: document.querySelector('.slick-header-columns')!,
      getValues: () => Array.from(document.querySelectorAll('.slick-header-column')),
      setValues: (newValues) => {
        console.log('newValues', newValues);
        reorderedIds = newValues.map((el: any) => el.dataset!.id);
      },
      config: {
        onDragstart: (e, state) => {
          console.log('Dragging started', e, state);
          canDragScroll = !this.hasFrozenColumns() || getOffset(e.draggedNode.el).left > getOffset(this._viewportScrollContainerX).left;

          if (canDragScroll && state.coordinates.x > this._container.clientWidth) {
            if (!columnScrollTimer) {
              columnScrollTimer = window.setInterval(scrollColumnsRight, 100);
            }
          } else if (canDragScroll && state.coordinates.x < getOffset(this._viewportScrollContainerX).left) {
            if (!columnScrollTimer) {
              columnScrollTimer = window.setInterval(scrollColumnsLeft, 100);
            }
          } else {
            window.clearInterval(columnScrollTimer);
          }
        },
        onDragend: (e) => {
          console.log('Dragging ended', e);
          window.clearInterval(columnScrollTimer);

          if (!this.getEditorLock()?.commitCurrentEdit()) {
            return;
          }

          if (reorderedIds.length) {
            // let reorderedIds = this.sortableSideLeftInstance?.toArray() ?? [];
            // const reorderedIds: Array<string | number> = (e.values ?? []).map((el: any) => el.dataset!.id);
            console.log('reorderedIds', reorderedIds);
            // reorderedIds = reorderedIds.concat(this.sortableSideRightInstance?.toArray() ?? []);

            const reorderedColumns: C[] = [];
            for (let i = 0; i < reorderedIds.length; i++) {
              reorderedColumns.push(this.columns[this.getColumnIndex(reorderedIds[i])]);
            }
            this.setColumns(reorderedColumns);

            this.triggerEvent(this.onColumnsReordered, { impactedColumns: this.columns });
            // e.stopPropagation();
            this.setupColumnResize();
            if (this.activeCellNode) {
              this.setFocus(); // refocus on active cell
            }
          }
        },
        // onSort: (event) => {
        //   console.log('Sorting', event);
        //   return !(event.draggedNode as any).classList.contains(this._options.unorderableColumnCssClass as string);
        // },
        plugins: [animations({ duration: 500 })],
        synthDraggingClass: 'slick-header-column-active',
      },
    });
}

React Changes with onChange={handleChange}

 const handleChange = (event) => {
  const { name, value } = event.target;
  setFormData({
    ...formData,
    [name]: value
  });
};

[ghiscoding]

27. in Angular-Slickgrid, we should probably:

• migrate from Jest to Vitest using Analog (see Faster testing with Angular and Vitest)

@zewa666 I wouldn't mind the help on this if you want to take a look at it in Angular-Slickgrid, it will be required before moving the project in here (I just don't want to have to test frameworks in here)

[zewa666]

we've got our apps converted to use both vite and vitest. so shoot if I can help

[ghiscoding]

if you can provide a PR in Angular-Slickgrid to migrate to Vitest, I'd be more than happy 😉

[zewa666]

cant promise anything about when as I'm currently burried with work, but I will asap

[ghiscoding]

np, it's not that much of a rush since I'm not planning major release until around April (near NodeJS release) so..