spiderly 19.9.3 → 19.9.5

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

@@ -88,6 +88,12 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     /** 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[];
@@ -113,7 +119,66 @@ export declare class SpiderlyDataTableComponent implements OnInit, AfterViewInit
     ngAfterViewInit(): void;
     private setupRemovableSort;
     ngOnInit(): void;
-    /** The declared default as PrimeNG sort meta, or null when none is declared. */
+    /**
+     * 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;
@@ -195,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
@@ -205,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;
@@ -219,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.3",
+  "version": "19.9.5",
   "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;