I'm trying to use this library with angular 9 but it's occurring bugs related to entry components like this simple example https://stackblitz.com/edit/angular-mcs7ll

Error: No component factory found for MatPaginator. Did you add it to @NgModule.entryComponents?

And with my project that is using Angular 8 with nGrid 1 it's working perfectly, but when i try to upgrade many bugs happened

ERROR in node_modules/@pebula/ngrid/drag/lib/drag-and-drop/column/aggregation-column.d.ts:7:22 - error TS2720: Class 'PblNgridAggregationContainerDirective<T>' incorrectly implements class 'CdkLazyDropList<T, any>'. Did you mean to extend 'CdkLazyDropList<T, any>' and inherit its members as a subclass?
  Property '_draggables' is missing in type 'PblNgridAggregationContainerDirective<T>' but required in type 'CdkLazyDropList<T, any>'.

7 export declare class PblNgridAggregationContainerDirective<T = any> extends CdkDropList<T> implements OnDestroy, CdkLazyDropList<T> {
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@pebula/ngrid/drag/lib/drag-and-drop/core/lazy-drag-drop.d.ts:14:5
    14     _draggables: QueryList<CdkDrag>;
           ~~~~~~~~~~~
    '_draggables' is declared here.
node_modules/@pebula/ngrid/drag/lib/drag-and-drop/column/column-reorder-plugin.d.ts:15:22 - error TS2720: Class 'PblNgridColumnReorderPluginDirective<T>' incorrectly implements class 'CdkLazyDropList<T, PblNgridColumnReorderPluginDirective<T>>'. Did you mean to extend 'CdkLazyDropList<T, PblNgridColumnReorderPluginDirective<T>>' and inherit its members as a subclass?
  Property '_draggables' is missing in type 'PblNgridColumnReorderPluginDirective<T>' but required in type 'CdkLazyDropList<T, PblNgridColumnReorderPluginDirective<T>>'.

15 export declare class PblNgridColumnReorderPluginDirective<T = any> extends CdkDropList<T> implements OnInit, OnDestroy, CdkLazyDropList<T, PblNgridColumnReorderPluginDirective<T>> {
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@pebula/ngrid/drag/lib/drag-and-drop/core/lazy-drag-drop.d.ts:14:5
    14     _draggables: QueryList<CdkDrag>;
           ~~~~~~~~~~~
    '_draggables' is declared here.
node_modules/@pebula/ngrid/drag/lib/drag-and-drop/column/column-reorder-plugin.d.ts:54:119 - error TS2344: Type 'PblNgridColumnReorderPluginDirective<T>' does not satisfy the constraint 'CdkLazyDropList<T, any>'.
  Property '_draggables' is missing in type 'PblNgridColumnReorderPluginDirective<T>' but required in type 'CdkLazyDropList<T, any>'.

54 export declare class PblNgridColumnDragDirective<T = any> extends CdkDrag<T> implements AfterViewInit, CdkLazyDrag<T, PblNgridColumnReorderPluginDirective<T>, PblNgridColumnDragDirective<T>> {
                                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@pebula/ngrid/drag/lib/drag-and-drop/core/lazy-drag-drop.d.ts:14:5
    14     _draggables: QueryList<CdkDrag>;
           ~~~~~~~~~~~
    '_draggables' is declared here.
node_modules/@pebula/ngrid/drag/lib/drag-and-drop/row/row-reorder-plugin.d.ts:13:22 - error TS2720: Class 'PblNgridRowReorderPluginDirective<T>' incorrectly implements class 'CdkLazyDropList<T, PblNgridRowReorderPluginDirective<T>>'. Did you mean to extend 'CdkLazyDropList<T, PblNgridRowReorderPluginDirective<T>>' and inherit its members as a subclass?
  Property '_draggables' is missing in type 'PblNgridRowReorderPluginDirective<T>' but required in type 'CdkLazyDropList<T, PblNgridRowReorderPluginDirective<T>>'.

13 export declare class PblNgridRowReorderPluginDirective<T = any> extends CdkDropList<T> implements OnDestroy, CdkLazyDropList<T, PblNgridRowReorderPluginDirective<T>> {
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@pebula/ngrid/drag/lib/drag-and-drop/core/lazy-drag-drop.d.ts:14:5
    14     _draggables: QueryList<CdkDrag>;
           ~~~~~~~~~~~
    '_draggables' is declared here.
node_modules/@pebula/ngrid/drag/lib/drag-and-drop/row/row-reorder-plugin.d.ts:37:101 - error TS2344: Type 'PblNgridRowReorderPluginDirective<T>' does not satisfy the constraint 'CdkLazyDropList<T, any>'.
  Property '_draggables' is missing in type 'PblNgridRowReorderPluginDirective<T>' but required in type 'CdkLazyDropList<T, any>'.

37 export declare class PblNgridRowDragDirective<T = any> extends CdkDrag<T> implements CdkLazyDrag<T, PblNgridRowReorderPluginDirective<T>> {
                                                                                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@pebula/ngrid/drag/lib/drag-and-drop/core/lazy-drag-drop.d.ts:14:5
    14     _draggables: QueryList<CdkDrag>;
           ~~~~~~~~~~~
    '_draggables' is declared here.

Then when i change ... CdkDropList<T> ... to ... CdkLazyDropList<T> ... my project worked but when using ng serve the entry components bug happen

ERROR Error: Uncaught (in promise): Error: No component factory found for DragPluginDefaultTemplatesComponent. Did you add it to @NgModule.entryComponents?
Error: No component factory found for DragPluginDefaultTemplatesComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:27414)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:27490)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:27487)
    at Function.loadCommonTemplates (pebula-ngrid.js:14430)
    at new PblNgridModule (pebula-ngrid.js:14383)
    at _createClass (core.js:32044)
    at _createProviderInstance (core.js:32005)
    at initNgModule (core.js:31909)
    at new NgModuleRef_ (core.js:32926)
    at createNgModuleRef (core.js:32909)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:41244)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)

Can you help me spot the issue? I really like your library. Thanks

Please describe the feature you would like to request.

It would be better if you include row grouping, .

You can see a perfect exmple at demo.odoo.com.

Once grouped, the column that used to group will be hidden

What is the use-case or motivation for this proposal?

Row grouping is mandatory for tabular data analysus

Is there anything else we should know?

just check demo.odoo.com. choose any apps, and findout how the grouping implemented

Please describe the feature you would like to request.

add option to focusRow to highlight all cells in a row on mouseclick in row or by setting it
programatically now this can be done by selecting alls cells of the row but this has the feeling of being slow as first the focusedCell is set and interface is updated and after that the selectedCells
are rendered, or if already possible provide a demo/example to overcome the slow feeling

What is the use-case or motivation for this proposal?

common behaviour in enterprise grid : selected row indicator by css on whole row or with an special first column with an row indicator to make visible to a user what the selected row is.

Is there anything else we should know?

The virtual scrolling with a pagination feature should be used to display large amounts of records without paging. When scrolling with the vertical scrollbar, the component executes HTTP requests to load and refresh the existing records. The overall behavior is smooth and with no flicker.

It does not save because there is no getter, only a setter.
This is the temporary patch that fixes the issue.
Object.defineProperty(PblNgridComponent.prototype, 'hideColumns', { get: function hideColumns() { return this._hideColumns; }});

When defining a column with pblNgridCellDef I tried to apply a class (and style) to the parent element. Directives seem to execute fine, updateParent method is called but the class is not added to the pbl-ngrid-cell.

To walk through the code, in updateParent a following check returns true:

if (this._classDiffer && this._classDiffer.hasValueChanged())

_lastClass is empty

the list this._classDiffer.value is empty so Object.keys(this._classDiffer.value) won't iterate.

Class differ's _lastSetValue contains the expected class object but this._parent.classList does not contain the expected class.

the loop for (const key of Object.keys(this._classDiffer.value)) is never executed.

What might be the reason for classDiffer to contain the expected value without ever calling updateParent?

At the same time rowClassUpdate with ngDoCheck is used to change the class for a row (returning a single string class or null if no class need to be applied) - rowClassUpdate returning a dictionary { [class: string]: boolean } does not seem to work!

Or is there something else which needs to be set to make ngridCellClass work?

Using 1.0.0-rc.9 with angular 8.2.7.

Please describe the feature you would like to request.

Ability to pass sortFunction in column definition or define sortFunction based on column 'type'
Ability to pass custom filterFunction to excelMenu for the Search functionality.

What is the use-case or motivation for this proposal?

In my case each cell contains an object with an 'html' key for display and a 'raw' value key. I display the html inside the cell template but would like to be able to sort by the raw value.

Is there anything else we should know?

Thanks

This is a tracking issue for all tasks related to the integration of E2E tests and Cypress

TODO

Write the design

What is the current behavior?

Receiving the following error on build

ERROR in node_modules/@pebula/ngrid/lib/table/features/virtual-scroll/strategies.d.ts(5,65): error TS2307: Cannot find module '@angular/cdk-experimental/scrolling'.

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

Version: 1.0.0-alpha.23

Here is my package.json:

{
  "name": "doe",
  "version": "0.25.7",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "app-build-dev": "ng build --base-href \"/doe/doeui/\" --configuration=develop --build-optimizer",
    "app-build-stage": "ng build --base-href \"/doe/doeuistage/\" --configuration=stage --build-optimizer",
    "app-build-qa": "ng build --base-href \"/doe/doeui/\" --configuration=qa --build-optimizer",
    "app-build-prod": "ng build --base-href \"/doe/doeui/\" --configuration=production --build-optimizer"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/router": "^9.0.0",
    "@angular-redux/store": "^9.0.0",
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.15",
    "@angular/compiler": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/forms": "^7.2.15",
    "@angular/http": "^7.2.15",
    "@angular/material": "^7.2.0",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/router": "^7.2.15",
    "@nicky-lenaers/ngx-scroll-to": "^2.0.0",
    "@pebula/ngrid": "1.0.0-alpha.23",
    "@pebula/ngrid-material": "1.0.0-alpha.23",
    "@pebula/utils": "1.0.0-alpha.3",
    "@swimlane/ngx-datatable": "^14.0.0",
    "angular-redux": "^1.0.0-beta",
    "angular-svg-icon": "^7.2.0",
    "await-timeout": "^0.3.0",
    "axios": "^0.18.1",
    "bootstrap": "^3.4.1",
    "buffer": "^5.2.1",
    "chart.js": "^2.8.0",
    "classlist.js": "^1.1.20150312",
    "concat-stream": "^2.0.0",
    "core-js": "^2.6.5",
    "events": "^3.0.0",
    "file-saver": "^2.0.1",
    "guid-typescript": "^1.0.9",
    "include-media": "^1.4.9",
    "lodash": "^4.17.15",
    "mustache": "^3.0.1",
    "ng2-charts": "^2.2.2",
    "ng6-breadcrumbs": "^1.0.7",
    "ngx-bootstrap": "^4.2.0",
    "ngx-json-viewer": "^2.4.0",
    "ngx-lightbox": "^1.2.0",
    "ngx-pagination": "^3.2.1",
    "ngx-toastr": "^9.2.0",
    "pretty-ms": "^2.1.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.3.3",
    "sax": "^1.2.4",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "xml-js": "^1.6.11",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^7.3.9",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/chart.js": "^2.7.51",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.123",
    "@types/node": "^8.10.45",
    "@types/xml2js": "^0.4.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

What is the expected behavior?

Column and row reordering should work.

What is the current behavior?

In the current 2.0.0-rc.1 release column and row reorder is not working. This seems to be a problem with the PblNgridDragModule. Removing this module fixes the issues.

I cloned the sample app found here https://github.com/shlomiassaf/ngrid-material-starter and when running it I get the following errors

Uncaught NullInjectorError: R3InjectorError(AppModule)[InjectionToken CDK_DRAG_CONFIG -> InjectionToken CDK_DRAG_CONFIG -> InjectionToken CDK_DRAG_CONFIG]: 
  NullInjectorError: No provider for InjectionToken CDK_DRAG_CONFIG!
    at NullInjector.get (http://localhost:4200/vendor.js:41773:27)
    at R3Injector.get (http://localhost:4200/vendor.js:55489:33)
    at R3Injector.get (http://localhost:4200/vendor.js:55489:33)
    at R3Injector.get (http://localhost:4200/vendor.js:55489:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:72821:33)
    at Object.get (http://localhost:4200/vendor.js:70657:35)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:45551:39)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:59388:12)
    at NodeInjectorFactory.PblNgridDragResizeComponent_Factory [as factory] (http://localhost:4200/vendor.js:120990:710)
    at getNodeInjectable (http://localhost:4200/vendor.js:45696:44)

Uncaught Error: Multiple components match node with tagname pbl-ngrid-drag-resize
    at throwMultipleComponentError (core.js:8043)
    at findDirectiveDefMatches (core.js:12856)
    at resolveDirectives (core.js:12610)
    at elementStartFirstCreatePass (core.js:20975)
    at Module.ɵɵelementStart (core.js:21016)
    at CommonTableTemplatesComponent_pbl_ngrid_drag_resize_2_Template (common-table-templates.component.html:11)
    at executeTemplate (core.js:11949)
    at renderView (core.js:11735)
    at TemplateRef.createEmbeddedView (core.js:15256)
    at ViewContainerRef.createEmbeddedView (core.js:15363)

What are the steps to reproduce?

Clone the sample app at https://github.com/shlomiassaf/ngrid-material-starter do an npm install and run ng serve. Note: I did upgrade all packages to the current versions (expect Typescript) because I was getting this error "export '_getShadowRoot' was not found in '@angular/cdk/platform' when I compiled.

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

"dependencies": {
    "@angular-devkit/build-optimizer": "^0.900.7",
    "@angular/animations": "~9.0.7",
    "@angular/cdk": "~9.1.3",
    "@angular/cdk-experimental": "^9.1.3",
    "@angular/common": "~9.0.7",
    "@angular/compiler": "~9.0.7",
    "@angular/core": "~9.0.7",
    "@angular/forms": "~9.0.7",
    "@angular/material": "^9.1.3",
    "@angular/platform-browser": "~9.0.7",
    "@angular/platform-browser-dynamic": "~9.0.7",
    "@angular/router": "~9.0.7",
    "@nrwl/angular": "9.1.2",
    "@nrwl/workspace": "^9.1.2",
    "@pebula/ngrid": "~2.0.0-rc.1",
    "@pebula/ngrid-material": "~2.0.0-rc.1",
    "@pebula/utils": "^1.0.2",
    "core-js": "^3.6.4",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.11.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.7",
    "@angular/cli": "9.0.7",
    "@angular/compiler-cli": "~9.0.7",
    "@angular/language-service": "~9.0.7",
    "@nrwl/cypress": "9.1.2",
    "@types/jasmine": "~3.5.9",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^13.9.2",
    "codelyzer": "^5.2.1",
    "cypress": "^4.2.0",
    "cypress-image-snapshot": "^3.1.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.1",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "prettier": "2.0.1",
    "protractor": "~5.4.3",
    "ts-node": "~8.8.1",
    "tslint": "~6.1.0",
    "typescript": "~3.7.5"
  }

Is there anything else we should know?

These errors happen when compiling with Ivy or with View Engine.

What is the expected behavior?

Total width of all column should reflect the total width of the grid or the total width of the minWidth definitions

What is the current behavior?

When minWidth is not set the total width of all column exceeds the actual total width by 15 pixels, probably due to some logic being skipped when no minWidth's are set.

What are the steps to reproduce?

I'm unable to reproduce this on StackBlitz however, I'm able to reproduce it in the demo application.

This seems like a CSS style override issue or something that happens due to a plugin that runs within the context of the demo app but not in the stackblitz demo.

Is there anything else we should know?

This might also happen when minWidth is set once, but not in every instance...

I can also happen on some other very specific width definitions which usually ignore setting width or minWidth...

This issue will sum up the scope/work required to migrate to angular & material v9.

Upgrading the library code itself is actually the small portion of the work required.
Most of the work will be on compatibility and refactoring of code used by the build process
of the library and the demo/docs application.

I will track the progress of upgrading to angular v9 (including material plugins) here.

• Update dependencies (angular v9, material v9, CLI, ng-packger, TS, webpack, etc...)

• Make it run in dev mode, explore issues and quirks.

• Turn IVY flag off (Use ViewEngine) and verify that:

  • Demo project in Dev mode build works
  • Demo project in Prod mode build works (GH-PAGES, verify SSR still works)
  • Library build works
  • Update the Starter Project to use angular 9 with the built library and verify it works. (OPTIONAL, for safety)

• Turn IVY Flag on and compile while fixing issues.
  Pay attention to:

  • Webpack plugins used to build the DEMO / DOCS application
  • ngx-build-plus plugins used in the app build process
  • ng-packger compatibility with the task extensions / transformers (ng-cli-packagr-tasks). Especially verify the SCSS build tasks and try to deprecate the copy assets tasks in favour of the built in copy feature of ng-packger

• Go over all TODO references in the code and see if the "TODO" can be applied. This usually refer to:

  • Material plugins (mostly Drag & Drop), with legacy support for v7 and v8. Remove that support.
  • Material plugins inheritance, wasn't doable before should be doable now.
  • TypeScript language features that weren't possible before, but now with 3.7 are valid.

Moved to #106

Blockers:

• - angular/angular#35580
• - angular/angular#35677 (fixed in 9.0.6)

Non Blockers:

• - angular/angular#34227
• - angular/angular#31221

First working version is published: 2.0.0-rc.0, see PR, now merged to master

For anyone who wants to see the migration commits, see the v8-to-v9-migration branch

What is the expected behavior?

Columns should not shift when scrolling

What is the current behavior?

When column widths are defined in a way that one column has no width defined, and only minWidth set, when scrolling a longer lists columns get shifted.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: stackblitz.com/edit/pebula-ngrid-starter

cc @t00

What is the expected behavior?

When scrolling horizontally and headers are in fixed mode (rendered outside of the scroll container), the headers should scroll smoothly at the same time the data rows scroll

What is the current behavior?

When scrolling horizontally and headers are in fixed mode (rendered outside of the scroll container), the headers scroll after some milliseconds, creating the experience of a lag.

See #54 (or this link, for more specific details)

• - Make the API's more clear
• - Support filter predicates through column definitions (like sorting)
• - Align sort and filter APIs to match as much as possible
• - Expose filtered and sorted data through PblDataSource
• - Document filtering

The codebase includes some use of custom decorators.

These are mainly used for declaration of things (@NgridPlugin) and observable handling (@UnRx)

These should be removed from the code completely because:

1. It forces users to use the reflection polyfill (refelect-metadata or es6/reflect) which is no longer in use in AOT compilations

2. It has limited support in some cases, especially UnRx.

For UnRx, see angular/angular#31495

It might be that the current implementation of UnRx is no longer supported when using ivy.
In addition, this approach, using decorators, will no longer be required in angular once Component Features is introduces to the public API.

Since the use is relatively limited, they should be removed from library code, left only in demo app code.

IMPLICATIONS

• Removing @NgridPlugin is a breaking change in the rare case of someone developed a plugin...
  Since 2.0.0 is still in RC we can do that without bumping major.

• Removing @UnRx means we can also remove the utils library (which is anyway being maintained by nform) and remove all reference to it. Any code there, used by the library, should move to the ngrid core package.

Upgrading to Angular 10 should be easy as there are not alot of changes.

Upgrading to the CDK will require some work since CDK drag&drop components have breaking changes

https://github.com/angular/components/blob/master/CHANGELOG.md#1000-ice-dice-2020-06-24

What is the expected behavior?

The docs and the example code refers to the use of resize option in columnFactory for enable that functionality in all the columns or per column definition but the typings doesn't have it anymore

What is the current behavior?

cannot compile because the lack of that properties.

What are the steps to reproduce?

Simply download the latest 2.0.0 version of NGrid and there isn't any option for that

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

latest angular (9) and NGrid version (2.0.0-rc.2)

Is there anything else we should know?

nothing more

What is the expected behavior?

All hidden columns should re-appear.

What is the current behavior?

There is no restore hidden columns.

What are the steps to reproduce?

• Browse to https://shlomiassaf.github.io/ngrid/
• Click on any column menu icon (tried with email, country, feedback)
• Select "Hide Column"
• Result -> Column is hidden
• Click on the upper menu icon (two arrows)
• Select "Restore Columns"
• Result -> Nothing happens

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

Version indicated on the page: Version 1.0.0-rc.9 using angular 8.2.2 and cdk 8.1.3 (hash: 2fef015)

Is there anything else we should know?

Hello,

First, thank you for having created this great library. It is a straight improvement over the regular MatTable component on many levels, and shame on me for taking so long to discover it.

I have experienced a few issues with pagination however, here is the description. A stackblitz has been added as well.

What is the expected behavior?

The paginator should allow changing pages when clicking Next/Previous button

What is the current behavior?

After clicking the Next/Previous button, the page immediately goes back to the original one if a predicate filter has been set up.

What are the steps to reproduce?

Stackblitz:
https://stackblitz.com/edit/angular-gn5iad

Having no predicate filter linked to the table makes the paginator work normally. Adding any filter predicate makes the paginator stuck on the same page. Removing the filter predicate makes it work again.

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

• Windows 8 and 10
• Tested on Chrome and Firefox
• Bug exists for Angular 7 and 8 versions
• CDK v. 8.2.3
• Angular Material v.8.2.3
• Tested with ngrid 1.0.0-rec.16 (and 1.0.0-alpha.23 as well)
• Typescript 3.1.1

Is there anything else we should know?

There is also another bug related to the paginator: setting pageSizeOptions with [5,10,15] for example still launches the table by default with 10 displayed rows. A solution to that is to use paginator.perPage after the table has been created to force the change.

Hello! Thank you for perfect library. What about scrollTo method for virtual scroll?

What is the current behavior?

None of the rows/headers are showing up. All that is visible is the borders

Code:

html:

<pbl-ngrid [columns]="columns" [dataSource]="rows" style="height: 500px" vScrollAuto wheelMode="blocking">
</pbl-ngrid>

component:

import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'test-grid',
  templateUrl: './test-grid.component.html',
  styleUrls: ['./test-grid.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestGridComponent implements OnInit {

  columns = [
    {prop: 'id', sort: true, width: '40px'},
    {prop: 'name', sort: true},
    {prop: 'gender', width: '50px'}
  ];

  rows = [
    {id:0, name:'JD', gender:'M'},
    {id:1, name:'Nathan', gender:'M'},
    {id:2, name:'Robert', gender:'M'},
    {id:3, name:'Noor', gender:'M'},
    {id:4, name:'Ross', gender:'M'},
    {id:5, name:'Andrea', gender:'F'},
  ];

  constructor() {
  }

  ngOnInit() {
  }

}

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

Running in Chrome
package.json:

{
  "name": "doe",
  "version": "0.25.7",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "app-build-dev": "ng build --base-href \"/doe/doeui/\" --configuration=develop --build-optimizer",
    "app-build-stage": "ng build --base-href \"/doe/doeuistage/\" --configuration=stage --build-optimizer",
    "app-build-qa": "ng build --base-href \"/doe/doeui/\" --configuration=qa --build-optimizer",
    "app-build-prod": "ng build --base-href \"/doe/doeui/\" --configuration=production --build-optimizer"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/router": "^9.0.0",
    "@angular-redux/store": "^9.0.0",
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^7.3.7",
    "@angular/cdk-experimental": "^7.3.7",
    "@angular/common": "^7.2.15",
    "@angular/compiler": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/forms": "^7.2.15",
    "@angular/http": "^7.2.15",
    "@angular/material": "^7.2.0",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/router": "^7.2.15",
    "@nicky-lenaers/ngx-scroll-to": "^2.0.0",
    "@pebula/ngrid": "1.0.0-alpha.23",
    "@pebula/ngrid-material": "1.0.0-alpha.23",
    "@pebula/utils": "1.0.0-alpha.3",
    "@swimlane/ngx-datatable": "^14.0.0",
    "angular-redux": "^1.0.0-beta",
    "angular-svg-icon": "^7.2.0",
    "await-timeout": "^0.3.0",
    "axios": "^0.18.1",
    "bootstrap": "^3.4.1",
    "buffer": "^5.2.1",
    "chart.js": "^2.8.0",
    "classlist.js": "^1.1.20150312",
    "concat-stream": "^2.0.0",
    "core-js": "^2.6.5",
    "events": "^3.0.0",
    "file-saver": "^2.0.1",
    "guid-typescript": "^1.0.9",
    "include-media": "^1.4.9",
    "lodash": "^4.17.15",
    "mustache": "^3.0.1",
    "ng2-charts": "^2.2.2",
    "ng6-breadcrumbs": "^1.0.7",
    "ngx-bootstrap": "^4.2.0",
    "ngx-json-viewer": "^2.4.0",
    "ngx-lightbox": "^1.2.0",
    "ngx-pagination": "^3.2.1",
    "ngx-toastr": "^9.2.0",
    "pretty-ms": "^2.1.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.3.3",
    "sax": "^1.2.4",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "web-animations-js": "^2.3.1",
    "xml-js": "^1.6.11",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^7.3.9",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/chart.js": "^2.7.51",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "^4.14.123",
    "@types/node": "^8.10.45",
    "@types/xml2js": "^0.4.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

The issue is difficult to reproduce as it only shows when certain amount of parent objects is present, with complex DOM, some flex containers. Surely due to slow IE rendering, width calculation stays behind of actual rendering causing infinite recalculation of a container width.

The example firefox grid placement settles at 919.75px and stays the same until parent container is resized:

Please describe the feature you would like to request.

In my humble opinion, there should be a mode that when you filter the data and click on select all box, only the filtered data is selected.

What is the use-case or motivation for this proposal?

I'll use the table on this link for example:
https://shlomiassaf.github.io/ngrid/demos/virtual-scroll-performance
Now, imagine that I want to select all row which has the account type: "Money Market".
So, I just need to filter the data by "money market" and then click on "select all box". But, when I remove the filter, my entire data is selected.

Is there anything else we should know?

If you think that this feature is not necessary, can you guide me? Which variable holds the filtered data? And then I think that I can just try to implement this feature by myself.

This is a tracking issue for all tasks related to CI/CD integration

TODO

Write the design

Defining a detail row template, to be used across an application is currently not possible
because PblNgridRowComponent requires an injection of the external api, which is not available where a template is defined. The context of the template is unreachable and set internally by CdkTable so pushing it from the template is also not possible.

Workaround:

Define the template inside the table you want detail row support in.

<pbl-ngrid-row *pblNgridDetailRowParentRef="let row; table as table"
               [detailRow]="row"
               matRipple>
</pbl-ngrid-row>

This story should demonstrate how to use the column header component rendering extension to render a row for filtering the column (e.g. MatSort) + a menu context that will open with stuff inside (hide, sort etc...)

This should also demo how to create a value filter that can change base on definitions.
For example, a numeric cell that switch from range (between), equals, LT, GT, in etc..

If possible, the demo should include a use of the rendering extension for header as described above and also a dedicated row, so users can see the 2 ways it can be done.

Inspiration:

The core package @pebula/ngrid does not come with these kind of components, they are not part of the core and will never be so we need to show how to create them until we have a package that does that magic.

In the process we might run into issues that will require fixes/features etc, so it's a pending to the 1.0.0 milestone.

Apologies if this exists and I just couldn't find it in the docs, but it would be very helpful to have the ability to add a CSS class to a specific row.
This way you can add styling per row.
Some possible methods to do this could be through passing in a function that returns a class (how it is in mat-table), or could be an attribute on the row data itself.

If you've patched the Array prototype in your project (not a great idea, I know), there are a couple of places in the project where the code accidentally includes the fields added to the prototype in iterations. This causes an exception from the updateStickyRows function in virtual-scroll/utils.ts. The code looks like this:

for (let i in rows) {
  if (stickyState[i]) {
    const row = rows[i];
    row.style[type] = `${coeff * (offset + (coeff * agg))}px`;
    agg += row.getBoundingClientRect().height; // TODO: cache this and update cache actively (size change)
    row.style.display = null;
  }
}

Since rows and stickyState are both arrays, any method added to the Array prototype will be included in the iteration, and if (stickyState[i]) will return true as well. Then it fails when you do row.style[type] = ..., since the row variable is actually some random function object.

There's a similar line in the file extracted-code-group.ts.

The easiest fix is to use for (let i = 0; i < rows.length; i++) instead.

What is the expected behavior?

In older version of this library i was not having any troubles in rendenring the table with horizontal scroll

"@pebula/ngrid": "1.0.0-rc.13",
"@pebula/ngrid-material": "1.0.0-rc.13",

What is the current behavior?

But now when updated to the recent version, the rendering process doesn't work anymore

"@pebula/ngrid": "^2.0.0-rc.1",
"@pebula/ngrid-material": "^2.0.0-rc.1",

Is there anything else we should know?

I just updated to most recent versions of Angular and this library
"@angular/core": "~9.1.1",

What is the expected behavior?

Should build successful

What is the current behavior?

The build fails if using cdk 8.1.3, it works on 8.1.2

What are the steps to reproduce?

make a project using NGrid
put

"@angular/cdk": "8.1.3",
"@angular/cdk-experimental": "8.1.3",

in your package.json.
Prod-building your project will fail with:
ERROR in node_modules/@pebula/ngrid/pebula-ngrid.d.ts.ɵz.html(15,40): : Property '_totalContentSizeTransform' does not exist on type 'PblCdkVirtualScrollViewportComponent'.

Apparently, totalContentSizeTransform does not exist anymore in CdkVirtualScrollViewport, which PblCdkVirtualScrollViewportComponent seems to depend on.

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

"@angular/cdk": "8.1.3",
"@angular/cdk-experimental": "8.1.3",

are effected, however:

"@angular/cdk": "8.1.2",
"@angular/cdk-experimental": "8.1.2",

are working fine

Is there anything else we should know?

I tested and debugged it in our project since it did appear this morning
OpenSlides/OpenSlides#4922

What is the expected behavior?

I think, it should be possible to pass a variable value to the property vScrollFixed of 'ngrid' for different row-sizes in several components without any performance-issues, which uses e.g. a virtual-scrolling-list created by the 'ngrid'.

What is the current behavior?

If a variable value is passed to the property vScrollFixed of 'ngrid', then the whole website becomes very slow and the data for 'ngrid' is loading very slowly.
This is also happening, if the property is binded in brackets, like [vScrollFixed]="64".

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: stackblitz.com/edit/pebula-ngrid-starter

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

Angular: 8.2.4
CDK: 8.1.4
NGrid: 1.0.0-rc.5
Typescript: 3.5.3
Browser: Chrome

Is there anything else we should know?

What is the expected behavior?

The use of material components inside the overlay

What is the current behavior?

The events seems to be delayed in the views or it looks like the events aren't updating the view, I tested with several components like mat-radio (the next gif), mat-calendar (total disaster when trying to change months and year, the view doesn't show months until I do a new click somewhere inside) and so on, the problem persist no matter which component is used

What are the steps to reproduce?

Here is the example, I used mat-calendar, you can try to use the controls and they feel and look buggy, sometimes works at first, but always you need to click other element to see the view changes

stackblitz.com/edit/pebula-ngrid-starter

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

  "name": "compensar-backend-admin",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.2",
    "@angular/cdk-experimental": "^9.2.2",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.1.1",
    "@angular/material": "^9.2.2",
    "@angular/material-moment-adapter": "^9.2.2",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "@mdi/angular-material": "^5.0.45",
    "@pebula/ngrid": "^2.0.0-rc.2",
    "@pebula/ngrid-material": "^2.0.0-rc.2",
    "class-transformer": "^0.2.3",
    "lodash.isnil": "^4.0.0",
    "ngx-cookie-service": "^3.0.4",
    "ngx-custom-validators": "^9.1.0",
    "reflect-metadata": "^0.1.13",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "winston": "^3.2.1",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

Is there anything else we should know?

nothing more

Recent refactoring (changing table to grid) introduced an issue with Firefox when resizing of ngrid (i.e. by resizing window) is not applied to the header correctly.

The cause is probably that pbl-ngrid-row-visually-hidden style on Firefox must be optimized as not visible causing it's dimensions to be not changed when resizing.

Chrome is rendering columns just fine, total width is correctly updated.

Simply changing visibility to hidden !important instead of collapsed !important seems to help but probably needs further investigation.

Hope

What is the expected behavior?

When filling the table with new data the column sort should be reset to default. Alternatively there should be a way to remove the sort programmatically.

What is the current behavior?

When we change the data - which we do by calling refresh on the datasource, but it also happens when creating a new datasource - the table keeps its column sort when there is a prop with the same value in the new data set.

What are the steps to reproduce?

https://stackblitz.com/edit/pebula-ngrid-starter-arkf6a?file=app/app.component.ts
Sort the first column and click on either button.

Is there anything else we should know?

The same thing happens for row selection, although it is working to call clear on the selection, when you set the new data.

First of all, sorry if I report something wrong, my native language is not english and this is the first time I'm reporting an issue on github, but I'll try my best.

What is the expected behavior?

I want to use both, Ngrid and Angular drag and drop at the same time.

What is the current behavior?

When I'm using Ngrid, I get the following error when trying to use angular drag and drop:

Uncaught TypeError: Cannot read property 'getViewportScrollPosition' of undefined
at PblDropListRef._listenToScrollEvents (drag-drop.js:2351)
at PblDropListRef._startReceiving (drag-drop.js:2332)
at drag-drop.js:1685
at Array.forEach ()
at PblDropListRef.start (drag-drop.js:1681)
at PblDragRef._startDragSequence (drag-drop.js:746)
at drag-drop.js:317
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Object.onInvoke (core.js:39698)
at ZoneDelegate.invoke (zone-evergreen.js:358)

What are the steps to reproduce?

This stackblitz contains all dependencies I'm using on my project. I know that, probably, this is not a direct effect of Ngrid on Angular Drag and Drop, but I wasn't able to find which one.
https://stackblitz.com/edit/pebula-ngrid-starter-w1i66a-test
If you try to drag an item from the lists below the table, it'll give the error mentioned above

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

Angular: 8.2.4
"@angular/cdk": "^8.2.3",
"@angular/material": "^8.1.4",
"@pebula/ngrid": "^1.0.0-rc.13",
Manjaro Linux,
"typescript": "~3.5.3"
Google Chrome and Firefox (not tested on Edge/Internet Explorer and Safari)

Is there anything else we should know?

If you want more information or anything, I'll be very glad to help! Thanks, in advance

You may already know this, but in case you haven't tested upgrading I thought I would point out that NGrid currently doesn't work with Ivy on Angular 9. Angular 9 by itself with Ivy disabled actually seems to work fine.

The Ivy compilation goes okay, but at runtime you get this error:

main.ts:13 TypeError: Cannot read property 'get' of undefined
    at NgModuleRef$1.get (core.js:35997)
    at NgModuleRef$1.get componentFactoryResolver [as componentFactoryResolver] (core.js:36003)
    at Function.loadCommonTemplates (pebula-ngrid.js:14758)
    at new PblNgridModule (pebula-ngrid.js:14711)
    at Object.PblNgridModule_Factory [as factory] (pebula-ngrid.js:14775)
    at R3Injector.hydrate (core.js:18516)
    at R3Injector.get (core.js:18278)
    at core.js:18208
    at Set.forEach (<anonymous>)
    at new R3Injector (core.js:18204)

I don't know enough about Ivy to tell what the error is, but I would guess it has to do with the module declaration.

I've added an Angular 9 project based on the starter template here: https://github.com/magnusbakken/ngrid-ivy I basically just ran ng update @angular/cli@next @angular/core@next, and had to work around one type error to do with require.resolve().

I'm tring to get ngrid with bootstrap theme.
I came to one problem. In bootstrap You and use contextual classes for rows or cells: https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes

When I try to define that contextual class in a cell using:

<div *pblNgridCellDef="'id'; value as value" class="table-primary">{{ value }}</div>

I define cell's content not it's cell.
As You see on screenshot it's not working right because of cell's padding:

Can You make that defining cell would affect whole cell not only it's contents?
Something like:

<ng-template *pblNgridCellDef="'id'; value as value" class="table-primary">{{ value }}</ng-template>

Or maybe pblNgridCellDef classes would be transponded to cell not cell contents?

What is the expected behavior?

Targeting ES2015+ should be possible.

What is the current behavior?

When targeting ES2015 you get errors like Cannot read property 'controller' of undefined when loading pbl-ngrid elements. The precise error seems to vary somewhat, since there are multiple pieces of code that disappear from the bundle.

What are the steps to reproduce?

I don't think I can make a StackBlitz since you can't change the tsconfig.json file there, but here's how I would reproduce the error:

1. Create a StackBlitz from the starter package: stackblitz.com/edit/pebula-ngrid-starter.
2. Download the StackBlitz zip.
3. Change the target to "es2015" in tsconfig.json.
4. Add a standard environments folder inside app, with the files environment.ts and environment.prod.ts (the latter with production: true of course).
5. I also had to add the line declare var require: any in app/datasource/index.ts to get the build to work.
6. Run ng serve --prod.

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

I've been testing with the 1.0.0-alpha.13 version on Angular 7.2 and TS 3.2. The error happens in both Chrome and Firefox, although interestingly they actually get different errors in my test project (in Chrome it complains about controller, in Firefox it's _plugin). The discrepancy is probably just because multiple things are missing in the bundle, and different browsers load things in slightly different orders.

Is there anything else we should know?

I've seen the same problem before in rintoj/ngx-virtual-scroller#323. At least in that case the error was actually caused by the build optimizer, which will remove certain functions if it erroneously thinks they're unused. You can verify that this is the cause by setting "buildOptimizer": false in angular.json, upon which the errors disappear.

The solution in that other issue was to add "sideEffects": true in package.json. I think the same thing will fix the problem here as well, but there may be some other solution.

What is the expected behavior?

The detail row should update or re-render when moving between pages and/or changing page size

What is the current behavior?

Detail row is using the previous context thus no update to the detail row

Please describe the feature you would like to request.

I would like to have the option of specifying "accent" as the color that the checkboxes use when you set matCheckboxSelection="selection" on the pbl-ngrid component.

What is the use-case or motivation for this proposal?

It would just be a nice option to have.

What is the expected behavior?

Arrow should be shown when calling the dataSource.setSort method i.e.:

this.dataSource.setSort(this.columns.table.cols[0], { order: 'desc' });

What is the current behavior?

Grid contents are correctly sorted but without visual indication of the column and order.

What are the steps to reproduce?

https://stackblitz.com/edit/pebula-ngrid-starter-rsrw8t
Changing sorting in the ngOnInit does not work either.

What is the expected behavior?

Compile and run as previous version

What is the current behavior?

Compilation breaks

What are the steps to reproduce?

Use ngrid as source inside a project. Then upgrade from angular 8.0.3 to latest angular cli version

and this error occurs when compiling

ERROR in libs/ngrid/src/lib/data-source/data-source-adapter.helpers.ts(76,13): error TS2322: Type 'DEEP_COMPARATORS<"data" | "filter" | "sort" | "pagination">[P]' is not assignable to type '(prev: PblDataSourceTriggerCache[P], curr: PblDataSourceTriggerCache[P]) => boolean'.
Type '((prev: RefreshDataWrapper, curr: RefreshDataWrapper) => boolean) | ((prev: DataSourceFilterType, curr: DataSourceFilterType) => boolean) | ((prev: PblNgridDataSourceSortChange, curr: PblNgridDataSourceSortChange) => boolean) | ((prev: { ...; }, curr: { ...; }) => boolean)' is not assignable to type '(prev: PblDataSourceTriggerCache[P], curr: PblDataSourceTriggerCache[P]) => boolean'.

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

Is there anything else we should know?

Please describe the feature you would like to request.

I need a way to formulate filter predicates (filterPredicate) on PblDataSource, so more complex data can be filtered using
this.ngridDataSource.setFilter(searchValue, this.ngrid.columnApi.columns)

What is the use-case or motivation for this proposal?

MatTableDataSource has the filterPredicate function to allow filtering for more complex data, i.e:

this.dataSource.filterPredicate = (data, filter) => {
  if (data.hiddenProperty && data.hiddenProperty.toLowerCase().includes(filter)) {
    return true;
  }
  return false;
}

That is probably a question, yet I have not been able to find it documented and reading the code did not give me a hint about filter predicates.

What is the expected behavior?

When filtering the scroll bar should update to reflect the new offset.

What is the current behavior?

Filtering does not trigger a scroll bar offset refresh.

What are the steps to reproduce?

Open the demo app.

In home page scroll to the last row and start filtering, the scroll bar does not change it's size not it's offset and no row is visible while there are results from the filter query.

More info

Actually, the offset does get updated, but in iterations, each iteration will push the scroll bar towards the last visible row in a step of rows the is equal to the ``maxBuffer / itemSize

This will run in loop until reaching a visible row, so the time it takes depends on the length of the offset started from.

This is the main ticket for state serialization / deserialization:

• Support tagging tables with unique id's
• Support serialization of the state
• Support deserialization of the state from a serialized source
• Support save / load abstraction using an async interface
• Support save / load implementation from the local storage
• Support developer-defined API to disable serialization of specific domains / properties

The goal is to be able to save state describing the grid and load that data on-demand.

Why

The are 2 main use cases to save the state:

1. Persisting user changes between sessions
2. Granular grid definitions

The 1st use case is straight forward, a user might change the look and/or behaviour of the grid and would like to persist this change across sessions ( (e.g. column hiding, reordering, resizing, etc...).

The 2nd use case is to allow the developer to cascade the grid's definitions and compose the final state from one or multiple states. For example, having a global state that will be used on all grids upon load, then adding more layers based on group, page or whatever.

This will reduce a lot of boilerplate and code required to define grid properties, column definitions and more.

To support the 2nd use-case the restoring process should support 2 modes:

• Overwrite: Restoring state even if it exists
• Merge: Restoring state only if it does not exist

In addition, the developer should be able to, for each save / restore, specify points in the state to ignore. For example, never persist the showHeader state.
This is also important for support of the combination between the 1st and 2nd use cases. For example, using the 2nd use-case to restore identityProp but ignoring it in the 1st use-case.

Source & State

The state is build from multiple mini-state chunks that come from different sources so the API should support external input.

State must be serializable, i.e. everything JSON, no functions, classes etc...

A state source should be the smallest logical unit of the domain it holds the state for. A guideline for a source might be an instance that only save primitive it holds.

For example, the grid is a source but each column instance on it is a source. The grid will save state for primitive properties and each columns instance will save state for it's own properties.

Currently known state sources:

• The grid instance (hideColumns, showFooter, showHeader, etc..)
• Current column definition set (PblColumn instances)
• Plugins

There is no definition for what a state is but a guideline might be everything that the user can change and we can deterministically point to when restoring..

For example, we know that the grid will not change so its easy to save/restore things like hideColumns, showFooter, showHeader etc..

We also know that each cell has a context which is pure state but we can't point to it when restoring because the dataset might be different when we restore so cell / row context is not serializable.

On the other hand, there are vague cases, such as columns...
We know that a column exists between restores but we must ensure the source grid of the restore (i.e. uniquely identifying the origin grid) and more over, we need to take into account non-api changes like column removal / addition etc...

We ignore persisting between code changes that might introduce API changes, this is a migration issue and should be supported in a different story.

State mapping

Grid

• showHeader
• showFooter
• focusMode
• identityProp
• usePagination
• hideColumns
• fallbackMinHeight

Columns

The state of all columns is save as 1 object that should reflect the structure of PblNgridColumnDefinitionSet so it could be passed on to the column factory (PblColumnFactory).

This includes properties from PblMetaRowDefinitions and PblColumnSet.

In addition, each column type should be handled by a specific logical serializer.

• PblBaseColumnDefinition

  • id, label, css
  • type ¹
  • widths ^{2 3}
  • data ¹

• PblMetaColumnDefinition & PblColumnGroupDefinition

  • All data

• PblColumnDefinition

  • prop (take from orgProp if instance)
  • headerType ¹
  • footerType ¹
  • sort ⁴
  • sortAlias

[ 1 ]: Object with potentially unserialized content.
[ 2 ]: Widths include width, minWidth, maxWidth
[ 3 ]: Widths are constantly updated by the grid, the serialized values should only be those set by the user and not by the resizing logic.
[ 4 ]: Only if boolean, otherwise unserializable

Apparently, Firefox is running into an endless loop if you are the translate directive from ngx-translate inside NGrid without setting the ChangeDetectionStrategy.OnPush

i.e, using translate will cause Firefox to run into an endless loop.

<div *pblNgridCellDef="'title'; row as user">
    <span translate>
        {{ user.title }}
    </span>
</div>

I tried to reproduce it with an own directive, but had no luck. Might be a issue here, in ngx-translate, or even firefox itself, since it's working just fine in chromium based browsers.

Add documentation for theming

• Using prebuilt themes
• Defining a custom theme
• Using prebuilt themes from @pebula/ngrid-material

Please describe the feature you would like to request.

The title sums it up, I would love the ability to persist the options on the columns such as:
Sort,
Hide,
Search,
Pin

If the user does not currently have access to the internet, check and use LocalStorage
If the user does have access to the internet, Use the API interface

What is the use-case or motivation for this proposal?

Users would like to have this data persist

Is there anything else we should know?

I would be very happy to add this in. I haven't looked at the code yet, but I don't think it would be too difficult if you guys think this would be a wanted addition to the grid :)

Currently, all detail rows are managed by the plugin.

There is no state management so context is lost when moving between pages (pagination)

There is a bug which keeps the detail row opened after moving a page, this needs to be fixed by closing all detail rows between pages.

However, if this is done it will not get opened again when moving back to the page.

To solve this right we need to store the state before moving to the next page.

Currently, the context does not have a state for detail row and since detail rows are external to the grid it will not have one explicitly.

So the first thing to do is to add a feature to the context, to save arbitrary date for other plugins, with that we can save the state and fix the issue.