Future Features and Ideas (2025+)

[ghiscoding]

• 1. PDF Export, see UI-Grid data export and in code
• 2. possible Backend Service package to support Hasura , see this comment
• 3. Row Detail with portal/teleport (see previous discussion)

  • you are talking about component portaling. in angular via cdk https://material.angular.io/cdk/portal/overview (see article) and react createPortal hook https://react.dev/reference/react-dom/createPortal. in Vue it should be this https://vuejs.org/guide/built-ins/teleport.html

• 4. 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
• 5. 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 use onSetOptions to resync (but might fall into infinite loop though)
• 6. 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)
• 7. could we try to move some (e.g.: RowDetail, RxJS), 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 above)
• 8. rewrite Custom Tooltip with native popover attribute (see discussion native popovers #1709)
  • better wait for css anchor support since that is pretty much required for auto-positioning (without anchoring, it's pretty much the same as a regular div positioning)
  • in the future we could also use popover & invoker implicit anchor
  • see Google I/O presentation: https://www.youtube.com/watch?v=VTCIStB6y8s&t=8s
• 9. rewrite Composite Editor with native <dialog> DOM element
• 10. menu auto-positioning by available body space could eventually be replaced by css-anchor-positioning (see interop 2025)
  • this may take a while since it's still experimental in Safari and isn't yet available in Firefox
• 11. wonder if it's ever possible to use Web Workers to run Export to Excel? In theory, I think it wasn't possible because we need to have access to the dataview and process code like exportWithFormatter but perhaps it's just a matter of sending all of that to the worker? Ask co-pilot for help
• 12. can we use alien-signals instead of our built-in Binding Helper / Binding Service?
  • might be better to wait for next major
  • see PR chore: use Signals in Custom Pagination instead of custom binding helper #2128
• 13. a possible assumption is that Signal will eventually be JS native and when that happens we'll want to incorporate in here
  • see TC39 proposal-signals
  • will that replace our RxJS implementation? It might be a very long shot if this ever happen, but it might be a possibility
• 14. use --module node20 in the future (comes with TS v5.9)
• 15. update TypeScript to latest (currently can't use latest because of Angular, maybe v20 will help)
  • remove baseUrl from all tsconfig
• 16. to decrease build size, we could use DOM utils from ms-select and drop duplicates from SlickGrid (might need to re-export utils)
• 17. should we move row move handler directly into the plugin instead of asking the user to always implement it themselves
• 18. change ms-select lazy load to use resolve() and reject() callbacks (same as Tree Data Lazy Load), but that will require a major version
• 19. remove references to old date picker (flatpickr) docs
• 20. bump Node requirement in root (local Dev only) to Node 24 so that we can get rid of tinyglobby in my other dev libs (remove-glob, native-copyfiles) with next major versions
• 21. remove use of tinyglobby in compress.mjs via Node 24 and import { globSync } from 'node:fs';
• 22. Angular:
  • run all Angular migrations: https://angular.dev/reference/migrations
  • eventually use Angular's built-in integration of Vitest build runner, get rid of AnalogJS, this is currently a new experimental feature in Angular 20
  • see experimental unit testing system
  • see also How to use Angular 20 experimental Vitest support outside of ng test
  • actually I might just drop Analog and Vitest from Angular-Slickgrid, there's not that much benefit to keep unit tests in there when no other framework wrappers has tests (currently it's only the vanilla one and Angular-Slickgrid that have unit tests). Dropping this would allow me to drop Analog+Nx and would also allow bumping TypeScript to latest v5.9+ since only the tests are affected by the TypeScript bump (the build works fine with fixed TS version in package, not sure why Vitest doesn't work well though)
  • remove any pnpm overrides and bump to Vite 7 in Angular-Slickgrid
  • upgrade ngx-bootstrap to new major version with breaking changes in next Angular-Slickgrid major
  • migrate all Angular examples to Standalone Components
    • migrate Angular-Slickgrid component/module on the next major only, to avoid breaking changes (see below)
    • also need to rollback commit 429aae1 to be fully Standalone in next major
    • we might also be able to switch @input to Signals based
• 23. add oxlint separate config for each frameworks using JS plugins in a monorepo, for example Angular:

{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": [],
  "jsPlugins": ["@angular/eslint-plugin"],
}

---

compare Bundle size tools

• packagephobia
• bundlejs

---

Angular Standalone Components

// angular-slickgrid.component.ts
// ...
+ import { NgTemplateOutlet } from '@angular/common';

@Component({
  selector: 'angular-slickgrid',
  templateUrl: './angular-slickgrid.component.html',
  providers: [
    // make everything transient (non-singleton)
    AngularUtilService,
    TranslaterService,
  ],
-  standalone: false,
+  imports: [NgTemplateOutlet],
})

// angular-slickgrid.module.ts
// ...
@NgModule({
-  imports: [CommonModule, TranslateModule],
-  declarations: [AngularSlickgridComponent],
+  imports: [CommonModule, TranslateModule, AngularSlickgridComponent],
  exports: [AngularSlickgridComponent],
})

- import { AngularSlickgridModule } from 'angular-slickgrid';
+ import { AngularSlickgridComponent } from 'angular-slickgrid';

@Component({
  templateUrl: './example01.component.html',
-  imports: [AngularSlickgridModule],
+  imports: [AngularSlickgridComponent],
})