@oneteme/jquery-table 0.0.13 → 0.0.14
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 +69 -6
- package/esm2022/lib/component/export.manager.mjs +3 -3
- package/esm2022/lib/component/table.component.mjs +161 -57
- package/esm2022/lib/jquery-table.model.mjs +1 -1
- package/fesm2022/oneteme-jquery-table.mjs +162 -58
- package/fesm2022/oneteme-jquery-table.mjs.map +1 -1
- package/lib/component/table.component.d.ts +36 -14
- package/lib/jquery-table.model.d.ts +18 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
Bibliothèque Angular qui encapsule Angular Material Table avec une API orientée configuration runtime.
|
|
4
4
|
|
|
5
|
+
> **Documentation et démonstrations** : [ouvrir l'application de documentation](https://oneteme.github.io/jquery-charts/)
|
|
6
|
+
>
|
|
7
|
+
> La documentation interactive présente les colonnes configurables, la recherche, le Group by, les slices, les préférences et l'intégration avec l'Organizer.
|
|
8
|
+
|
|
9
|
+
## Nouveautés intégrées
|
|
10
|
+
|
|
11
|
+
- préférences persistantes par tableau via `TablePreferencesConfig` et `localStorage` ;
|
|
12
|
+
- export CSV limité aux lignes filtrées et aux colonnes visibles, avec transformation personnalisable ;
|
|
13
|
+
- Group by avec pagination indépendante et slices dynamiques depuis le menu View ;
|
|
14
|
+
- colonnes lazy avec états `idle`, `loading`, `loaded` et `error` ;
|
|
15
|
+
- snapshots de configuration pour conserver les colonnes visibles, l'ordre, les largeurs, le tri, le regroupement et les filtres.
|
|
16
|
+
|
|
5
17
|
## Features
|
|
6
18
|
|
|
7
19
|
- Configuration déclarative du tableau via `TableProvider`
|
|
@@ -288,13 +300,13 @@ Seuls les champs fournis écrasent les défauts français. Voir `JqtI18n` pour l
|
|
|
288
300
|
|
|
289
301
|
## Fonctionnalité — Group by
|
|
290
302
|
|
|
291
|
-
Le regroupement
|
|
303
|
+
Le regroupement est disponible par défaut pour les colonnes qui possèdent un `header`. Utilisez `groupable: false` pour retirer une colonne du menu Group by ; `groupable: true` reste utile pour une colonne sans `header`.
|
|
292
304
|
|
|
293
305
|
```ts
|
|
294
306
|
columns: [
|
|
295
|
-
{ key: 'team', header: 'Équipe'
|
|
296
|
-
{ key: 'status', header: 'Statut'
|
|
297
|
-
{ key: 'name', header: 'Nom' },
|
|
307
|
+
{ key: 'team', header: 'Équipe' },
|
|
308
|
+
{ key: 'status', header: 'Statut' },
|
|
309
|
+
{ key: 'name', header: 'Nom', groupable: false },
|
|
298
310
|
],
|
|
299
311
|
view: { enabled: true },
|
|
300
312
|
pagination: {
|
|
@@ -339,11 +351,12 @@ slices: [
|
|
|
339
351
|
|
|
340
352
|
### Slices dynamiques (depuis le menu View)
|
|
341
353
|
|
|
342
|
-
|
|
354
|
+
Les colonnes qui possèdent un `header` sont disponibles par défaut comme slices dynamiques depuis le menu View. Utilisez `sliceable: false` pour retirer une colonne ; `sliceable: true` reste utile pour une colonne sans `header`.
|
|
343
355
|
|
|
344
356
|
```ts
|
|
345
357
|
columns: [
|
|
346
|
-
{ key: 'team', header: 'Équipe'
|
|
358
|
+
{ key: 'team', header: 'Équipe' },
|
|
359
|
+
{ key: 'reference', header: 'Référence', sliceable: false },
|
|
347
360
|
],
|
|
348
361
|
view: { enabled: true },
|
|
349
362
|
```
|
|
@@ -505,9 +518,59 @@ jquery-table {
|
|
|
505
518
|
/* Accent & danger */
|
|
506
519
|
--jqt-primary-color: #1d4ed8;
|
|
507
520
|
--jqt-danger-color: #dc2626;
|
|
521
|
+
|
|
522
|
+
/* Header / footer */
|
|
523
|
+
--jqt-header-bg: #f5f5f5;
|
|
524
|
+
--jqt-header-text-color: #374151;
|
|
525
|
+
--jqt-header-height: 56px;
|
|
526
|
+
--jqt-header-cell-padding-y: 0px;
|
|
527
|
+
--jqt-footer-bg: #f5f5f5;
|
|
528
|
+
--jqt-footer-text-color: #374151;
|
|
529
|
+
--jqt-footer-icon-color: #374151;
|
|
530
|
+
--jqt-footer-height: 56px;
|
|
531
|
+
|
|
532
|
+
/* Contrôles de la toolbar */
|
|
533
|
+
--jqt-toolbar-control-height: 34px;
|
|
534
|
+
|
|
535
|
+
/* Panneau de slices */
|
|
536
|
+
--jqt-slice-panel-min-width: 155px;
|
|
537
|
+
--jqt-slice-panel-max-width: 190px;
|
|
538
|
+
--jqt-slice-header-height: 34px;
|
|
539
|
+
--jqt-slice-header-margin-bottom: 8px;
|
|
540
|
+
--jqt-slice-body-padding: 4px 10px 10px;
|
|
541
|
+
--jqt-slice-section-title-font-size: 14px;
|
|
542
|
+
--jqt-slice-item-font-size: 13px;
|
|
543
|
+
--jqt-slice-item-min-height: 30px;
|
|
544
|
+
--jqt-slice-item-padding: 5px 10px 5px 16px;
|
|
545
|
+
|
|
546
|
+
/* Bouton Organizer */
|
|
547
|
+
--jqt-organizer-button-height: 34px;
|
|
548
|
+
--jqt-organizer-button-width: 34px;
|
|
549
|
+
--jqt-organizer-button-min-width: 34px;
|
|
550
|
+
--jqt-organizer-button-radius: 8px;
|
|
551
|
+
--jqt-organizer-button-border-color: #e0e0e0;
|
|
552
|
+
--jqt-organizer-button-background: #ffffff;
|
|
553
|
+
--jqt-organizer-button-hover-border-color: #9e9e9e;
|
|
554
|
+
--jqt-organizer-button-hover-background: #ffffff;
|
|
555
|
+
--jqt-organizer-button-icon-color: #000000;
|
|
508
556
|
}
|
|
509
557
|
```
|
|
510
558
|
|
|
559
|
+
Le bouton Organizer intégré peut aussi être configuré via `TableProvider` :
|
|
560
|
+
|
|
561
|
+
```ts
|
|
562
|
+
const table: TableProvider<Row> = {
|
|
563
|
+
organizer: {
|
|
564
|
+
buttonLabel: 'Vue',
|
|
565
|
+
buttonIcon: 'tune',
|
|
566
|
+
showButtonIcon: true,
|
|
567
|
+
hideMenuValues: false,
|
|
568
|
+
},
|
|
569
|
+
};
|
|
570
|
+
```
|
|
571
|
+
|
|
572
|
+
Les variables CSS sont héritées par le tableau, son panneau de slices et son Organizer. Elles permettent notamment de réduire le header/footer, d'ajuster la largeur et la densité des filtres, et de modifier le bouton sans cibler les classes internes Angular Material.
|
|
573
|
+
|
|
511
574
|
---
|
|
512
575
|
|
|
513
576
|
## Utilitaires exportés
|
|
@@ -36,10 +36,10 @@ export class ExportManager {
|
|
|
36
36
|
URL.revokeObjectURL(url);
|
|
37
37
|
}
|
|
38
38
|
_csvEscape(value) {
|
|
39
|
-
if (value.includes(',') || value.includes('"') || value.includes('\n')) {
|
|
40
|
-
return '"' + value.
|
|
39
|
+
if (value.includes(',') || value.includes('"') || value.includes('\n') || value.includes('\r')) {
|
|
40
|
+
return '"' + value.replaceAll('"', '""') + '"';
|
|
41
41
|
}
|
|
42
42
|
return value;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
45
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwb3J0Lm1hbmFnZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9vbmV0ZW1lL2pxdWVyeS10YWJsZS9zcmMvbGliL2NvbXBvbmVudC9leHBvcnQubWFuYWdlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQTs7Ozs7R0FLRztBQUNILE1BQU0sT0FBTyxhQUFhO0lBQ3hCLFlBQ21CLE9BQWtCLEVBQ2xCLFVBQTBDLEVBQzFDLFNBQWlELEVBQ2pELGdCQUE2RTtRQUg3RSxZQUFPLEdBQVAsT0FBTyxDQUFXO1FBQ2xCLGVBQVUsR0FBVixVQUFVLENBQWdDO1FBQzFDLGNBQVMsR0FBVCxTQUFTLENBQXdDO1FBQ2pELHFCQUFnQixHQUFoQixnQkFBZ0IsQ0FBNkQ7SUFDN0YsQ0FBQztJQUVKLE1BQU07UUFDSixNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDN0IsSUFBSSxDQUFDLEdBQUcsRUFBRSxPQUFPO1lBQUUsT0FBTztRQUMxQixNQUFNLElBQUksR0FBTSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDL0IsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBQ2xDLE1BQU0sUUFBUSxHQUFHLENBQUMsR0FBRyxDQUFDLFFBQVEsSUFBSSxRQUFRLENBQUMsR0FBRyxNQUFNLENBQUM7UUFFckQsTUFBTSxNQUFNLEdBQUcsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDOUUsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRTtZQUNsQyxJQUFJLEdBQUcsQ0FBQyxTQUFTLEVBQUU7Z0JBQ2pCLE1BQU0sQ0FBQyxHQUFHLEdBQUcsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLENBQUM7Z0JBQzdCLE9BQU8sT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQzthQUM1RTtZQUNELE9BQU8sT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLEdBQUcsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDdkcsQ0FBQyxDQUFDLENBQUM7UUFFSCxtREFBbUQ7UUFDbkQsTUFBTSxJQUFJLEdBQUcsSUFBSSxJQUFJLENBQUMsQ0FBQyxRQUFRLEdBQUcsQ0FBQyxNQUFNLEVBQUUsR0FBRyxLQUFLLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxFQUFFLElBQUksRUFBRSx3QkFBd0IsRUFBRSxDQUFDLENBQUM7UUFDdEcsTUFBTSxHQUFHLEdBQUksR0FBRyxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN2QyxNQUFNLENBQUMsR0FBTSxRQUFRLENBQUMsYUFBYSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ3pDLENBQUMsQ0FBQyxJQUFJLEdBQUcsR0FBRyxDQUFDO1FBQ2IsQ0FBQyxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUMsUUFBUSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFFBQVEsR0FBRyxNQUFNLENBQUM7UUFDdEUsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ1YsR0FBRyxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUMzQixDQUFDO0lBRU8sVUFBVSxDQUFDLEtBQWE7UUFDOUIsSUFBSSxLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxJQUFJLEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksS0FBSyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQzlGLE9BQU8sR0FBRyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsR0FBRyxFQUFFLElBQUksQ0FBQyxHQUFHLEdBQUcsQ0FBQztTQUNoRDtRQUNELE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQztDQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVGFibGVDb2x1bW5Qcm92aWRlciwgVGFibGVFeHBvcnRDb25maWcgfSBmcm9tICcuLi9qcXVlcnktdGFibGUubW9kZWwnO1xuXG4vKipcbiAqIEV4cG9ydE1hbmFnZXJcbiAqXG4gKiBFbmNhcHN1bGUgbCdleHBvcnQgQ1NWIDogY29uc3RydWN0aW9uIGR1IGZpY2hpZXIgQk9NL1VURi04LCDDqWNoYXBwZW1lbnQgZXQgZMOpY2xlbmNoZW1lbnQgZHUgdMOpbMOpY2hhcmdlbWVudC5cbiAqIEF1Y3VuZSBkw6lwZW5kYW5jZSBBbmd1bGFyIOKAlCBpbmTDqXBlbmRhbnQgZHUgY3ljbGUgZGUgdmllIGR1IGNvbXBvc2FudC5cbiAqL1xuZXhwb3J0IGNsYXNzIEV4cG9ydE1hbmFnZXI8VD4ge1xuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIHJlYWRvbmx5IGdldFJvd3M6ICgpID0+IFRbXSxcbiAgICBwcml2YXRlIHJlYWRvbmx5IGdldENvbHVtbnM6ICgpID0+IFRhYmxlQ29sdW1uUHJvdmlkZXI8VD5bXSxcbiAgICBwcml2YXRlIHJlYWRvbmx5IGdldENvbmZpZzogKCkgPT4gVGFibGVFeHBvcnRDb25maWc8VD4gfCB1bmRlZmluZWQsXG4gICAgcHJpdmF0ZSByZWFkb25seSByZXNvbHZlQ2VsbFZhbHVlOiAoY29sOiBUYWJsZUNvbHVtblByb3ZpZGVyPFQ+LCByb3c6IFQsIGluZGV4OiBudW1iZXIpID0+IGFueSxcbiAgKSB7fVxuXG4gIGV4cG9ydCgpOiB2b2lkIHtcbiAgICBjb25zdCBjZmcgPSB0aGlzLmdldENvbmZpZygpO1xuICAgIGlmICghY2ZnPy5lbmFibGVkKSByZXR1cm47XG4gICAgY29uc3Qgcm93cyAgICA9IHRoaXMuZ2V0Um93cygpO1xuICAgIGNvbnN0IGNvbHVtbnMgPSB0aGlzLmdldENvbHVtbnMoKTtcbiAgICBjb25zdCBmaWxlbmFtZSA9IChjZmcuZmlsZW5hbWUgfHwgJ2V4cG9ydCcpICsgJy5jc3YnO1xuXG4gICAgY29uc3QgaGVhZGVyID0gY29sdW1ucy5tYXAoYyA9PiB0aGlzLl9jc3ZFc2NhcGUoYy5oZWFkZXIgfHwgYy5rZXkpKS5qb2luKCcsJyk7XG4gICAgY29uc3QgbGluZXMgPSByb3dzLm1hcCgocm93LCBpZHgpID0+IHtcbiAgICAgIGlmIChjZmcudHJhbnNmb3JtKSB7XG4gICAgICAgIGNvbnN0IHQgPSBjZmcudHJhbnNmb3JtKHJvdyk7XG4gICAgICAgIHJldHVybiBjb2x1bW5zLm1hcChjID0+IHRoaXMuX2NzdkVzY2FwZShTdHJpbmcodFtjLmtleV0gPz8gJycpKSkuam9pbignLCcpO1xuICAgICAgfVxuICAgICAgcmV0dXJuIGNvbHVtbnMubWFwKGMgPT4gdGhpcy5fY3N2RXNjYXBlKFN0cmluZyh0aGlzLnJlc29sdmVDZWxsVmFsdWUoYywgcm93LCBpZHgpID8/ICcnKSkpLmpvaW4oJywnKTtcbiAgICB9KTtcblxuICAgIC8vIEJPTSBVVEYtOCBwb3VyIHVuZSBvdXZlcnR1cmUgY29ycmVjdGUgc291cyBFeGNlbFxuICAgIGNvbnN0IGJsb2IgPSBuZXcgQmxvYihbJ1xcdUZFRkYnICsgW2hlYWRlciwgLi4ubGluZXNdLmpvaW4oJ1xcbicpXSwgeyB0eXBlOiAndGV4dC9jc3Y7Y2hhcnNldD11dGYtOCcgfSk7XG4gICAgY29uc3QgdXJsICA9IFVSTC5jcmVhdGVPYmplY3RVUkwoYmxvYik7XG4gICAgY29uc3QgYSAgICA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2EnKTtcbiAgICBhLmhyZWYgPSB1cmw7XG4gICAgYS5kb3dubG9hZCA9IGZpbGVuYW1lLmVuZHNXaXRoKCcuY3N2JykgPyBmaWxlbmFtZSA6IGZpbGVuYW1lICsgJy5jc3YnO1xuICAgIGEuY2xpY2soKTtcbiAgICBVUkwucmV2b2tlT2JqZWN0VVJMKHVybCk7XG4gIH1cblxuICBwcml2YXRlIF9jc3ZFc2NhcGUodmFsdWU6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgaWYgKHZhbHVlLmluY2x1ZGVzKCcsJykgfHwgdmFsdWUuaW5jbHVkZXMoJ1wiJykgfHwgdmFsdWUuaW5jbHVkZXMoJ1xcbicpIHx8IHZhbHVlLmluY2x1ZGVzKCdcXHInKSkge1xuICAgICAgcmV0dXJuICdcIicgKyB2YWx1ZS5yZXBsYWNlQWxsKCdcIicsICdcIlwiJykgKyAnXCInO1xuICAgIH1cbiAgICByZXR1cm4gdmFsdWU7XG4gIH1cbn1cbiJdfQ==
|