spiderly 19.9.2 → 19.9.4

package/lib/components/spiderly-data-table/spiderly-data-table.component.d.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslocoService } from '@jsverse/transloco';
-import { SelectItem } from 'primeng/api';
+import { SelectItem, SortMeta } from 'primeng/api';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Table, TableFilterEvent, TableLazyLoadEvent } from 'primeng/table';
 import { Observable } from 'rxjs';
@@ -78,6 +78,22 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     stateKey?: string;
     /** 'session' persists across refresh only; 'local' persists indefinitely. */
     stateStorage: 'session' | 'local';
+    /**
+     * Column field the table sorts by while the user has no sort of their own — applied on
+     * first load (persisted state, when present, wins) and re-applied whenever an action
+     * would leave the table unsorted (tri-state header click, Clear filters). Shows as a
+     * regular header sort arrow. Omit to keep the backend's implicit Id DESC ordering.
+     */
+    defaultSortField?: string;
+    /** Direction for `defaultSortField`: 1 ascending (default), -1 descending. */
+    defaultSortOrder: 1 | -1;
+    initialMultiSortMeta: SortMeta[] | null;
+    /** Columns currently rendered — `cols` minus the hidden ones. Actions columns always render. */
+    visibleCols: Column[];
+    /** Cached count of visible data columns, so template bindings don't re-derive it per CD cycle. */
+    private visibleDataColsCount;
+    /** Data columns offered in the column chooser (actions columns are excluded). */
+    chooserCols: Column[];
     resolvedStateKey: string | null;
     selectedItemIds: number[];
     getAlreadySelectedItemIds: (additionalIndexes?: any) => number[];
@@ -103,6 +119,69 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     ngAfterViewInit(): void;
     private setupRemovableSort;
     ngOnInit(): void;
+    /**
+     * User visibility choices (field → visible), holding only fields the user explicitly
+     * toggled away from their declared default — so a page changing a column's declared
+     * default later flows through to every user who never touched that column.
+     */
+    private columnVisibilityOverrides;
+    /**
+     * Columns revealed by the load-time reconciliation. Kept apart from
+     * `columnVisibilityOverrides` so persisting a later unrelated toggle can't promote a
+     * transient safety reveal into a durable choice.
+     */
+    private revealedByConstraint;
+    /** A data column shows values for a `field`; anything else (the actions column) always renders. */
+    private static isDataColumn;
+    /**
+     * Storage slot for the visibility overrides. Deliberately ALWAYS localStorage, even when
+     * `stateStorage` is 'session': the column layout is a durable preference, while filters
+     * are a transient working set — different natural lifetimes.
+     */
+    private get columnsStateKey();
+    /** Actions columns always render; data columns follow reveal/override, then declared default. */
+    isColumnVisible(col: Column): boolean;
+    private refreshVisibleCols;
+    /**
+     * Locked columns can't be toggled; the last visible data column can't be hidden — the
+     * table must never collapse to just an actions column. Revealing is always allowed.
+     */
+    canToggleColumn(col: Column): boolean;
+    toggleColumn(col: Column, visible: boolean): void;
+    /** Restores every column to its declared default and forgets the stored override. */
+    resetColumnVisibility(): void;
+    /**
+     * A hidden column contributes nothing to filtering or sorting: the header is the only
+     * filter surface, so a kept constraint would restrict the data invisibly. Reloads (once)
+     * only when a constraint was actually cleared — plain hides don't need a server round-trip.
+     */
+    private clearHiddenColumnConstraints;
+    /** Whether filter metadata (single or array) carries a real constraint, not just an empty slot. */
+    private static isActiveFilterMeta;
+    private persistColumnVisibility;
+    private restoreColumnVisibility;
+    /** Parses a JSON entry from web storage; missing or corrupted entries read as null. */
+    private static readStoredJson;
+    /**
+     * PrimeNG's persisted table state (filters/sort/pagination), read directly from storage
+     * because we need it before PrimeNG's restoreState() runs on the first [value] change.
+     */
+    private persistedTableState;
+    /**
+     * Guards the "hidden contributes nothing" invariant against state this component didn't
+     * write (older blobs, hand-edited storage): a hidden column the persisted table state
+     * still filters or sorts by is revealed rather than constraining the data invisibly.
+     * In-memory only — once the constraint is gone, the user's stored choice reapplies.
+     */
+    private reconcileVisibilityWithPersistedConstraints;
+    /**
+     * The declared default as PrimeNG sort meta, or null when none is declared — or when its
+     * column is hidden ("hidden contributes nothing"): the table then falls back to the
+     * backend's implicit Id DESC, exactly as if no default were declared.
+     */
+    private defaultMultiSortMeta;
+    private persistedMultiSortMeta;
+    private applyDefaultSortIfUnsorted;
     lazyLoad(event: TableLazyLoadEvent): void;
     clientLoad(): void;
     private clientFilterCount;
@@ -141,7 +220,7 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     rowUnselect(id: number): void;
     getFormArrayControlByIndex(formControlName: string, index: number): SpiderlyFormControl;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyDataTableComponent, "spiderly-data-table", never, { "tableTitle": { "alias": "tableTitle"; "required": false; }; "tableIcon": { "alias": "tableIcon"; "required": false; }; "items": { "alias": "items"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "showPaginator": { "alias": "showPaginator"; "required": false; }; "showCardWrapper": { "alias": "showCardWrapper"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "getPaginatedListObservableMethod": { "alias": "getPaginatedListObservableMethod"; "required": false; }; "exportListToExcelObservableMethod": { "alias": "exportListToExcelObservableMethod"; "required": false; }; "deleteItemFromTableObservableMethod": { "alias": "deleteItemFromTableObservableMethod"; "required": false; }; "deleteListFromTableObservableMethod": { "alias": "deleteListFromTableObservableMethod"; "required": false; }; "newlySelectedItems": { "alias": "newlySelectedItems"; "required": false; }; "unselectedItems": { "alias": "unselectedItems"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selectedLazyLoadObservableMethod": { "alias": "selectedLazyLoadObservableMethod"; "required": false; }; "additionalFilterIdLong": { "alias": "additionalFilterIdLong"; "required": false; }; "showAddButton": { "alias": "showAddButton"; "required": false; }; "showExportToExcelButton": { "alias": "showExportToExcelButton"; "required": false; }; "showReloadTableButton": { "alias": "showReloadTableButton"; "required": false; }; "getFormArrayItems": { "alias": "getFormArrayItems"; "required": false; }; "hasLazyLoad": { "alias": "hasLazyLoad"; "required": false; }; "stateKey": { "alias": "stateKey"; "required": false; }; "stateStorage": { "alias": "stateStorage"; "required": false; }; "getAlreadySelectedItemIds": { "alias": "getAlreadySelectedItemIds"; "required": false; }; "getAlreadySelectedItems": { "alias": "getAlreadySelectedItems"; "required": false; }; "getFormControl": { "alias": "getFormControl"; "required": false; }; "additionalIndexes": { "alias": "additionalIndexes"; "required": false; }; "navigateOnRowClick": { "alias": "navigateOnRowClick"; "required": false; }; "rowNavigationPath": { "alias": "rowNavigationPath"; "required": false; }; }, { "onTotalRecordsChange": "onTotalRecordsChange"; "onLazyLoad": "onLazyLoad"; "onIsAllSelectedChange": "onIsAllSelectedChange"; "onRowSelect": "onRowSelect"; "onRowUnselect": "onRowUnselect"; }, ["actionsTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyDataTableComponent, "spiderly-data-table", never, { "tableTitle": { "alias": "tableTitle"; "required": false; }; "tableIcon": { "alias": "tableIcon"; "required": false; }; "items": { "alias": "items"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "showPaginator": { "alias": "showPaginator"; "required": false; }; "showCardWrapper": { "alias": "showCardWrapper"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "getPaginatedListObservableMethod": { "alias": "getPaginatedListObservableMethod"; "required": false; }; "exportListToExcelObservableMethod": { "alias": "exportListToExcelObservableMethod"; "required": false; }; "deleteItemFromTableObservableMethod": { "alias": "deleteItemFromTableObservableMethod"; "required": false; }; "deleteListFromTableObservableMethod": { "alias": "deleteListFromTableObservableMethod"; "required": false; }; "newlySelectedItems": { "alias": "newlySelectedItems"; "required": false; }; "unselectedItems": { "alias": "unselectedItems"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selectedLazyLoadObservableMethod": { "alias": "selectedLazyLoadObservableMethod"; "required": false; }; "additionalFilterIdLong": { "alias": "additionalFilterIdLong"; "required": false; }; "showAddButton": { "alias": "showAddButton"; "required": false; }; "showExportToExcelButton": { "alias": "showExportToExcelButton"; "required": false; }; "showReloadTableButton": { "alias": "showReloadTableButton"; "required": false; }; "getFormArrayItems": { "alias": "getFormArrayItems"; "required": false; }; "hasLazyLoad": { "alias": "hasLazyLoad"; "required": false; }; "stateKey": { "alias": "stateKey"; "required": false; }; "stateStorage": { "alias": "stateStorage"; "required": false; }; "defaultSortField": { "alias": "defaultSortField"; "required": false; }; "defaultSortOrder": { "alias": "defaultSortOrder"; "required": false; }; "getAlreadySelectedItemIds": { "alias": "getAlreadySelectedItemIds"; "required": false; }; "getAlreadySelectedItems": { "alias": "getAlreadySelectedItems"; "required": false; }; "getFormControl": { "alias": "getFormControl"; "required": false; }; "additionalIndexes": { "alias": "additionalIndexes"; "required": false; }; "navigateOnRowClick": { "alias": "navigateOnRowClick"; "required": false; }; "rowNavigationPath": { "alias": "rowNavigationPath"; "required": false; }; }, { "onTotalRecordsChange": "onTotalRecordsChange"; "onLazyLoad": "onLazyLoad"; "onIsAllSelectedChange": "onIsAllSelectedChange"; "onRowSelect": "onRowSelect"; "onRowUnselect": "onRowUnselect"; }, ["actionsTemplate"], never, true, never>;
 }
 export declare class Action {
     name?: string;
@@ -181,6 +260,17 @@ export declare class Column<T = any> {
     showTime?: boolean;
     decimalPlaces?: number;
     sortable?: boolean;
+    /**
+     * Whether the column is initially rendered. Defaults to `true`. Declare `visible: false` for
+     * columns that should be available in the column chooser but hidden until the user reveals them.
+     */
+    visible?: boolean;
+    /**
+     * Pins the column: it always renders and shows in the chooser as checked and disabled.
+     * Use for the row's identifying column (e.g. a product's title) so the table can never
+     * lose its anchor.
+     */
+    lockVisible?: boolean;
     /**
      * Fired when this column's cell is clicked. Receives a {@link CellClickEvent} with the row id,
      * the column field, the full row, the raw and formatted cell value, the clicked `<td>` element
@@ -191,7 +281,7 @@ export declare class Column<T = any> {
      * Not applied to editable cells — those belong to their inline input.
      */
     onCellClick?: (event: CellClickEvent) => void;
-    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, onCellClick, }?: {
+    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, onCellClick, }?: {
         name?: string;
         field?: string & keyof T;
         filterField?: string & keyof T;
@@ -205,6 +295,8 @@ export declare class Column<T = any> {
         showTime?: boolean;
         decimalPlaces?: number;
         sortable?: boolean;
+        visible?: boolean;
+        lockVisible?: boolean;
         onCellClick?: (event: CellClickEvent) => void;
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spiderly",
-  "version": "19.9.2",
+  "version": "19.9.4",
   "author": "Filip Trivan",
   "license": "MIT",
   "description": "Spiderly Angular Library to use in combination with Spiderly.",

package/styles/components/spiderly-data-table/spiderly-data-table.component.scss

@@ -43,6 +43,32 @@
     text-decoration: underline;
   }
 
+  .column-chooser {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .column-chooser-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+  }
+  .column-chooser-reset {
+    margin-top: 4px;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--p-primary-color);
+    cursor: pointer;
+    align-self: flex-start;
+    font-size: 0.875rem;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   ::ng-deep {
     .p-datatable-thead {
       position: unset !important;