@frame-kit/ui-ng 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frame-kit/ui-ng",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Style-agnostic, token-driven Angular UI component library for FrameKit.",
   "license": "MIT",
   "repository": {

package/types/frame-kit-ui-ng-ui-data-table.d.ts

@@ -309,10 +309,7 @@ declare class DataTableComponent<T = unknown> {
      */
     private readonly groupCoordinator;
     constructor();
-    /**
-     * The group heading to emit before a row, or null when the row continues the
-     * group above it. The first row always opens its group.
-     */
+    /** The group heading to open before this row, if it starts a new group. */
     groupHeadingFor(row: T, index: number): string | null;
     /** Resolves the display value for a cell given its column definition and row data. */
     getCellValue(column: ColumnDef<T>, row: T): unknown;
@@ -478,6 +475,14 @@ declare class DataTableStackComponent<T = unknown> {
     readonly config: _angular_core.InputSignal<TableConfig<T> | null>;
     /** TrackBy function used by the `@for` loop over rows. */
     readonly trackByFn: _angular_core.InputSignal<(index: number, row: T) => unknown>;
+    /**
+     * Template rendered inside a group heading. Mirrors the semantic-table path
+     * so a grouped table looks grouped at every viewport.
+     */
+    readonly groupHeadingRenderer: _angular_core.InputSignal<TemplateRef<{
+        $implicit: string;
+        row: T;
+    }> | null>;
     /** Mirrors the host table's `rowSelection` input to show checkboxes on each card. */
     readonly rowSelection: _angular_core.InputSignal<boolean>;
     /** Currently selected row keys forwarded from the host table engine. */
@@ -488,6 +493,8 @@ declare class DataTableStackComponent<T = unknown> {
     readonly selectionDisabled: _angular_core.InputSignal<SelectionDisabled<T>>;
     /** Accessible label for each card's selection checkbox. */
     readonly selectionLabel: _angular_core.InputSignal<string>;
+    /** The group heading to open before this card, if it starts a new group. */
+    groupHeadingFor(row: T, index: number): string | null;
     /** Fires when the user clicks a card row, emitting the row context. */
     readonly rowClick: _angular_core.OutputEmitterRef<TableRowContext<T>>;
     /** Fires when the user toggles a card's selection checkbox, bubbling up to the host. */
@@ -507,7 +514,7 @@ declare class DataTableStackComponent<T = unknown> {
     isRowSelectionDisabled(row: T): boolean;
     private getSelectionKey;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTableStackComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTableStackComponent<any>, "fk-data-table-stack", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; "isSignal": true; }; "getRowId": { "alias": "getRowId"; "required": false; "isSignal": true; }; "selectionDisabled": { "alias": "selectionDisabled"; "required": false; "isSignal": true; }; "selectionLabel": { "alias": "selectionLabel"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "toggleRow": "toggleRow"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTableStackComponent<any>, "fk-data-table-stack", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": false; "isSignal": true; }; "groupHeadingRenderer": { "alias": "groupHeadingRenderer"; "required": false; "isSignal": true; }; "rowSelection": { "alias": "rowSelection"; "required": false; "isSignal": true; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; "isSignal": true; }; "getRowId": { "alias": "getRowId"; "required": false; "isSignal": true; }; "selectionDisabled": { "alias": "selectionDisabled"; "required": false; "isSignal": true; }; "selectionLabel": { "alias": "selectionLabel"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "toggleRow": "toggleRow"; }, never, never, true, never>;
 }
 
 export { ColumnResizeDirective, DEFAULT_TABLE_CONFIG, DataTableComponent, DataTableGroupComponent, DataTableGroupCoordinator, DataTableStackComponent, ResponsiveStrategyService, TableEngineService, VirtualizationEngineService };

package/ui/data-table/README.md

@@ -262,6 +262,9 @@ For a heading richer than the key, pass a template:
 <ng-template #dayHeading let-key let-row="row"> {{ key }} <span class="muted">{{ row.created_at | date }}</span> </ng-template>
 ```
 
+Headings render on both the semantic-table and stack (small-viewport) paths, so
+a grouped table stays grouped at every width.
+
 > **Grouping and virtualization are mutually exclusive.** Virtual scrolling
 > positions rows by multiplying an index by `rowHeight`, and a heading is not
 > that tall. Setting `groupBy` turns virtualization off rather than misplacing