angular-slickgrid 6.6.4 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -8
- package/app/modules/angular-slickgrid/components/angular-slickgrid.component.d.ts +4 -8
- package/app/modules/angular-slickgrid/extensions/slickRowDetailView.d.ts +2 -9
- package/app/modules/angular-slickgrid/models/gridOption.interface.d.ts +2 -2
- package/esm2022/app/modules/angular-slickgrid/components/angular-slickgrid.component.mjs +18 -43
- package/esm2022/app/modules/angular-slickgrid/extensions/slickRowDetailView.mjs +3 -3
- package/esm2022/app/modules/angular-slickgrid/global-grid-options.mjs +1 -2
- package/esm2022/app/modules/angular-slickgrid/models/gridOption.interface.mjs +1 -1
- package/esm2022/app/modules/angular-slickgrid/modules/angular-slickgrid.module.mjs +5 -5
- package/esm2022/app/modules/angular-slickgrid/services/angularUtil.service.mjs +5 -5
- package/esm2022/app/modules/angular-slickgrid/services/container.service.mjs +4 -4
- package/esm2022/app/modules/angular-slickgrid/services/translater.service.mjs +6 -6
- package/fesm2022/angular-slickgrid.mjs +35 -61
- package/fesm2022/angular-slickgrid.mjs.map +1 -1
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -11,20 +11,20 @@
|
|
|
11
11
|
[](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)
|
|
12
12
|
|
|
13
13
|
### Brief introduction
|
|
14
|
-
One of the best JavasSript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid), which was originally developed by @mleibman, is now available to Angular. SlickGrid beats most other datagrids in terms of features, customizability and performance (it can easily deal with even a million row). Angular-Slickgrid is a wrapper on top of SlickGrid and
|
|
14
|
+
One of the best JavasSript datagrid [SlickGrid](https://github.com/mleibman/SlickGrid), which was originally developed by @mleibman, is now available to Angular. SlickGrid beats most other datagrids in terms of features, customizability and performance (it can easily deal with even a million row). Angular-Slickgrid is a wrapper on top of SlickGrid and it requires [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal/) dependency since the original one was put on pause by its original author for personal reasons and originally we used the `6pac/SlickGrid` fork but that was dropped in v7.0, so we no longer need external SlickGrid dependencies anymore apart from Slickgrid-Universal since [v7.0](https://github.com/ghiscoding/Angular-Slickgrid/releases/tag/v7.0.1). Also, SlickGrid was recently refactored to be browser native, which means that jQuery is no longer required in Angular-Slickgrid v6.0 and higher.
|
|
15
15
|
|
|
16
16
|
### License
|
|
17
17
|
[MIT License](LICENSE)
|
|
18
18
|
|
|
19
19
|
## Installation
|
|
20
|
-
A good starting point is the **[
|
|
20
|
+
A good starting point is the **[Docs - Quick Start](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start)** and/or simply clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please review all documentation and closed issues before opening any new issue, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
|
|
21
21
|
|
|
22
22
|
```sh
|
|
23
23
|
npm install angular-slickgrid
|
|
24
24
|
```
|
|
25
25
|
|
|
26
26
|
### Demo page
|
|
27
|
-
`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. There are also extra styling themes for not just Bootstrap but also Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [
|
|
27
|
+
`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. There are also extra styling themes for not just Bootstrap but also Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Docs - SVG Icons](https://ghiscoding.gitbook.io/angular-slickgrid/styling/svg-icons)
|
|
28
28
|
- [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate)
|
|
29
29
|
- [Bootstrap 4 demo](https://ghiscoding.github.io/angular-slickgrid-demos) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap4-demo-with-translate)
|
|
30
30
|
|
|
@@ -52,7 +52,7 @@ If you wish to contribute then make sure to follow the steps shown in the [CONTR
|
|
|
52
52
|
Check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News & Releases.
|
|
53
53
|
|
|
54
54
|
## Troubleshooting / Documentation
|
|
55
|
-
The
|
|
55
|
+
The [Documentation](https://ghiscoding.gitbook.io/angular-slickgrid/) is powered by GitBook and is where you'll find all the documentation, so please consult the [Angular-Slickgrid - Documentation](https://ghiscoding.gitbook.io/angular-slickgrid/) before opening any issues. The [Docs - Quick Start](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start) is a great place to start with. You can also take a look at the [Demo page](https://ghiscoding.github.io/Angular-Slickgrid), it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
|
|
56
56
|
|
|
57
57
|
For common issues, see the [Troubleshooting Section](#troubleshooting-section) below
|
|
58
58
|
|
|
@@ -92,7 +92,7 @@ Angular-Slickgrid and Slickgrid-Universal both have **100%** Unit Test Coverage,
|
|
|
92
92
|
You might notice that all demos are coded with mocked dataset in each of the examples, that is mainly for demo purposes, but you might be wondering how to connect this with an `HttpClient`? Easy... just replace the mocked data, assigned to the `dataset` property, by your `HttpClient` call and that's about it. The `dataset` property can be changed or refreshed at any time and it will be reflected in the grid, which is why you can use local data and/or connect it with a `Promise` or an `Observable` with `HttpClient` (internally it's just a SETTER that refreshes the grid). See [Example 24](https://ghiscoding.github.io/Angular-Slickgrid/#/gridtabs) for a demo showing how to load a JSON file with `HttpClient`.
|
|
93
93
|
|
|
94
94
|
## Main features
|
|
95
|
-
You can see some screenshots below and
|
|
95
|
+
You can see some screenshots below and visit the [Documentation](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start) website.
|
|
96
96
|
|
|
97
97
|
## Troubleshooting Section
|
|
98
98
|
|
|
@@ -157,14 +157,14 @@ In Angular 14 and higher, Angular has a `strictTemplates` flag in your `tsconfig
|
|
|
157
157
|
The reason is because Angular-Slickgrid uses Custom Event for all its events and Angular complains because these Custom Events aren't typed. In order to fix this issue, you have 3 viable approaches:
|
|
158
158
|
|
|
159
159
|
1. disabled `strictTemplates` in your `tsconfig.json` config
|
|
160
|
-
2. cast the event in the View template to `$any` type
|
|
160
|
+
2. cast the event in the View template to `$any` type
|
|
161
161
|
- `$any($event)` for example `$any($event).detail.eventData`
|
|
162
162
|
3. cast the event in the component ViewModel to `CustomEvent`
|
|
163
163
|
```html
|
|
164
164
|
<angular-slickgrid gridId="grid28"
|
|
165
165
|
[columnDefinitions]="columnDefinitions"
|
|
166
166
|
[gridOptions]="gridOptions"
|
|
167
|
-
[dataset]="dataset"
|
|
167
|
+
[dataset]="dataset"
|
|
168
168
|
(onAngularGridCreated)="angularGridReady($event.detail)">
|
|
169
169
|
</angular-slickgrid>
|
|
170
170
|
```
|
|
@@ -176,7 +176,7 @@ angularGridReady(event: CustomEvent) {
|
|
|
176
176
|
}
|
|
177
177
|
```
|
|
178
178
|
|
|
179
|
-
The simplest is obviously the option 1 but you lose the strictness on the view templates, more details can found under the discussion [(`strictTemplates`) Template error ](https://github.com/ghiscoding/Angular-Slickgrid/discussions/815), I have also opened a similar Stack Overflow question myself:
|
|
179
|
+
The simplest is obviously the option 1 but you lose the strictness on the view templates, more details can found under the discussion [(`strictTemplates`) Template error ](https://github.com/ghiscoding/Angular-Slickgrid/discussions/815), I have also opened a similar Stack Overflow question myself:
|
|
180
180
|
[How to use Custom Event (not Event Emitter) without `strictTemplates` to complain about `$event` not being a Custom Event type?](https://stackoverflow.com/questions/68490848/how-to-use-custom-event-not-event-emitter-without-stricttemplates-to-complai).
|
|
181
181
|
|
|
182
182
|
## Screenshots
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
import 'slickgrid/slick.core';
|
|
2
|
-
import 'slickgrid/slick.interactions';
|
|
3
|
-
import 'slickgrid/slick.grid';
|
|
4
|
-
import 'slickgrid/slick.dataview';
|
|
5
1
|
import { AfterViewInit, ApplicationRef, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
|
|
6
2
|
import { TranslateService } from '@ngx-translate/core';
|
|
7
|
-
import
|
|
3
|
+
import { BackendServiceApi, Column, EventSubscription, ExternalResource, Locale, Metrics, Pagination, RxJsFacade, ServicePagination, SlickDataView, SlickEventHandler, SlickGrid } from '@slickgrid-universal/common';
|
|
8
4
|
import { ExtensionUtility, SlickGroupItemMetadataProvider, BackendUtilityService, CollectionService, ExtensionService, FilterFactory, FilterService, GridEventService, GridService, GridStateService, GroupingAndColspanService, PaginationService, ResizerService, SharedService, SortService, TreeDataService } from '@slickgrid-universal/common';
|
|
9
5
|
import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
|
|
10
6
|
import { SlickEmptyWarningComponent } from '@slickgrid-universal/empty-warning-component';
|
|
@@ -16,7 +12,7 @@ import { AngularUtilService } from '../services/angularUtil.service';
|
|
|
16
12
|
import { SlickRowDetailView } from '../extensions/slickRowDetailView';
|
|
17
13
|
import { ContainerService } from '../services/container.service';
|
|
18
14
|
import * as i0 from "@angular/core";
|
|
19
|
-
export declare class AngularSlickgridComponent implements AfterViewInit, OnDestroy {
|
|
15
|
+
export declare class AngularSlickgridComponent<TData = any> implements AfterViewInit, OnDestroy {
|
|
20
16
|
protected readonly angularUtilService: AngularUtilService;
|
|
21
17
|
protected readonly appRef: ApplicationRef;
|
|
22
18
|
protected readonly cd: ChangeDetectorRef;
|
|
@@ -200,6 +196,6 @@ export declare class AngularSlickgridComponent implements AfterViewInit, OnDestr
|
|
|
200
196
|
* Once we found the new pointer, we will reassign the "editor" and "collection" to the "internalColumnEditor" so it has newest collection
|
|
201
197
|
*/
|
|
202
198
|
protected updateEditorCollection<T = any>(column: Column<T>, newCollection: T[]): void;
|
|
203
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<AngularSlickgridComponent
|
|
204
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AngularSlickgridComponent
|
|
199
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AngularSlickgridComponent<any>, [null, null, null, null, null, { optional: true; }, { optional: true; }, null, null]>;
|
|
200
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AngularSlickgridComponent<any>, "angular-slickgrid", never, { "customDataView": { "alias": "customDataView"; "required": false; }; "gridId": { "alias": "gridId"; "required": false; }; "gridOptions": { "alias": "gridOptions"; "required": false; }; "paginationOptions": { "alias": "paginationOptions"; "required": false; }; "columnDefinitions": { "alias": "columnDefinitions"; "required": false; }; "dataset": { "alias": "dataset"; "required": false; }; "datasetHierarchical": { "alias": "datasetHierarchical"; "required": false; }; }, { "columnDefinitionsChange": "columnDefinitionsChange"; }, never, never, false, never>;
|
|
205
201
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ApplicationRef, ComponentRef, Type, ViewContainerRef } from '@angular/core';
|
|
2
|
-
import type { EventSubscription, RxJsFacade, SlickEventHandler, SlickGrid } from '@slickgrid-universal/common';
|
|
2
|
+
import type { EventSubscription, OnRowBackToViewportRangeArgs, RxJsFacade, SlickEventHandler, SlickGrid } from '@slickgrid-universal/common';
|
|
3
3
|
import { SlickRowSelectionModel } from '@slickgrid-universal/common';
|
|
4
4
|
import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
|
|
5
5
|
import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
|
|
@@ -77,12 +77,5 @@ export declare class SlickRowDetailView extends UniversalSlickRowDetailView {
|
|
|
77
77
|
item: any;
|
|
78
78
|
}): void;
|
|
79
79
|
/** When Row comes back to Viewport Range, we need to redraw the View */
|
|
80
|
-
protected handleOnRowBackToViewportRange(
|
|
81
|
-
grid: SlickGrid;
|
|
82
|
-
item: any;
|
|
83
|
-
rowId: number;
|
|
84
|
-
rowIndex: number;
|
|
85
|
-
expandedRows: any[];
|
|
86
|
-
rowIdsOutOfViewport: number[];
|
|
87
|
-
}): void;
|
|
80
|
+
protected handleOnRowBackToViewportRange(_e: Event, args: OnRowBackToViewportRangeArgs): void;
|
|
88
81
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { TranslateService } from '@ngx-translate/core';
|
|
2
|
-
import type { GridOption as UniversalGridOption } from '@slickgrid-universal/common';
|
|
2
|
+
import type { Column, GridOption as UniversalGridOption } from '@slickgrid-universal/common';
|
|
3
3
|
import type { RowDetailView } from './index';
|
|
4
|
-
export interface GridOption extends UniversalGridOption {
|
|
4
|
+
export interface GridOption<C extends Column = Column> extends UniversalGridOption<C> {
|
|
5
5
|
/** ngx-translate i18n translation service instance */
|
|
6
6
|
i18n?: TranslateService;
|
|
7
7
|
/** Row Detail View Plugin options & events (columnId, cssClass, toolTip, width) */
|