@handsontable/angular-wrapper 17.1.0-rc9 → 18.0.0-rc1
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 +0 -74
- package/fesm2022/handsontable-angular-wrapper.mjs +535 -316
- package/fesm2022/handsontable-angular-wrapper.mjs.map +1 -1
- package/lib/editor/base-editor-adapter.d.ts +6 -0
- package/lib/editor/hot-cell-editor-advanced.component.d.ts +14 -46
- package/lib/editor/hot-cell-editor-base.directive.d.ts +25 -0
- package/lib/editor/hot-cell-editor.component.d.ts +16 -55
- package/lib/editor/models/factory-editor-properties.d.ts +9 -1
- package/lib/hot-table.component.d.ts +11 -9
- package/lib/hot-table.module.d.ts +1 -5
- package/lib/models/column-settings.d.ts +6 -0
- package/lib/renderer/hot-cell-renderer-advanced.component.d.ts +5 -22
- package/lib/renderer/hot-cell-renderer-base.directive.d.ts +23 -0
- package/lib/renderer/hot-cell-renderer.component.d.ts +6 -22
- package/lib/renderer/hot-dynamic-renderer-component.service.d.ts +90 -1
- package/lib/services/hot-settings-resolver.service.d.ts +29 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,9 +55,6 @@
|
|
|
55
55
|
✅ [Hiding columns](https://handsontable.com/docs/angular-data-grid/column-hiding/) <br>
|
|
56
56
|
✅ [Right-click context menu](https://handsontable.com/docs/angular-data-grid/context-menu/) <br>
|
|
57
57
|
✅ [Row pagination](https://handsontable.com/docs/angular-data-grid/rows-pagination/) <br>
|
|
58
|
-
✅ [Server-side data](https://handsontable.com/docs/angular-data-grid/server-side-data/) <br>
|
|
59
|
-
✅ [Notifications](https://handsontable.com/docs/angular-data-grid/notification/) <br>
|
|
60
|
-
✅ [Export to Excel](https://handsontable.com/docs/angular-data-grid/export-to-excel/) <br>
|
|
61
58
|
|
|
62
59
|
<div id="installation">
|
|
63
60
|
|
|
@@ -137,77 +134,6 @@ export class HotTableWrapperComponent {
|
|
|
137
134
|
|
|
138
135
|
<br>
|
|
139
136
|
|
|
140
|
-
## ⏳ Lazy loading with `@defer` (Angular 17+)
|
|
141
|
-
|
|
142
|
-
`HotTableComponent` is a standalone component and works with Angular's built-in
|
|
143
|
-
`@defer` block out of the box — no extra configuration required.
|
|
144
|
-
|
|
145
|
-
### Recommended pattern
|
|
146
|
-
|
|
147
|
-
```ts
|
|
148
|
-
import { Component, signal } from '@angular/core';
|
|
149
|
-
import { HotTableComponent } from '@handsontable/angular-wrapper';
|
|
150
|
-
|
|
151
|
-
@Component({
|
|
152
|
-
standalone: true,
|
|
153
|
-
imports: [HotTableComponent],
|
|
154
|
-
template: `
|
|
155
|
-
<button (click)="show.set(true)">Load grid</button>
|
|
156
|
-
|
|
157
|
-
@defer (when show()) {
|
|
158
|
-
<hot-table [data]="data" [settings]="settings"></hot-table>
|
|
159
|
-
} @placeholder {
|
|
160
|
-
<p>Click the button to load the grid.</p>
|
|
161
|
-
} @loading (minimum 300ms) {
|
|
162
|
-
<p>Loading…</p>
|
|
163
|
-
} @error {
|
|
164
|
-
<p>Failed to load the grid.</p>
|
|
165
|
-
}
|
|
166
|
-
`,
|
|
167
|
-
})
|
|
168
|
-
export class PageComponent {
|
|
169
|
-
show = signal(false);
|
|
170
|
-
data = [['Alice', 'has'], ['Bob', 'data']];
|
|
171
|
-
settings = { rowHeaders: true, colHeaders: ['Name', 'Note'] };
|
|
172
|
-
}
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
### How it works
|
|
176
|
-
|
|
177
|
-
| Block | When shown |
|
|
178
|
-
|---|---|
|
|
179
|
-
| `@defer (when show())` | renders `<hot-table>` after the signal becomes `true` |
|
|
180
|
-
| `@placeholder` | shown immediately before the trigger fires |
|
|
181
|
-
| `@loading (minimum 300ms)` | shown while the JS chunk is being fetched |
|
|
182
|
-
| `@error` | shown if the dynamic import fails |
|
|
183
|
-
|
|
184
|
-
### Other trigger options
|
|
185
|
-
|
|
186
|
-
```html
|
|
187
|
-
<!-- on viewport — loads when the placeholder scrolls into view -->
|
|
188
|
-
@defer (on viewport) { <hot-table …> }
|
|
189
|
-
|
|
190
|
-
<!-- on interaction — loads on first click/focus inside the placeholder -->
|
|
191
|
-
@defer (on interaction) { <hot-table …> }
|
|
192
|
-
|
|
193
|
-
<!-- on idle — loads during browser idle time -->
|
|
194
|
-
@defer (on idle) { <hot-table …> }
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
### Important: `registerAllModules()`
|
|
198
|
-
|
|
199
|
-
Call `registerAllModules()` in `app.config.ts` **before** the deferred block
|
|
200
|
-
triggers — it is synchronous and must run before any Handsontable instance is
|
|
201
|
-
created. The recommended place is at module level, outside any component:
|
|
202
|
-
|
|
203
|
-
```ts
|
|
204
|
-
// app.config.ts
|
|
205
|
-
import { registerAllModules } from 'handsontable/registry';
|
|
206
|
-
registerAllModules(); // runs once at app startup, safe with @defer
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
<br>
|
|
210
|
-
|
|
211
137
|
## 🎨 Themes
|
|
212
138
|
|
|
213
139
|
Handsontable themes control how your data table looks: colors, spacing, typography, borders, and overall visual style.
|