@dereekb/dbx-web 12.1.7 → 12.1.8

package/lib/extension/download/text/download.text.component.d.ts

@@ -1,5 +1,5 @@
 import { ElementRef } from '@angular/core';
-import { WorkUsingObservable, LoadingState } from '@dereekb/rxjs';
+import { WorkUsingObservable, LoadingState, MaybeObservableOrValue } from '@dereekb/rxjs';
 import { type Maybe } from '@dereekb/util';
 import { Observable } from 'rxjs';
 import { DownloadTextContent } from './download.text';
@@ -19,19 +19,17 @@ export declare class DbxDownloadTextViewComponent extends AbstractSubscriptionDi
     readonly showTitle: import("@angular/core").InputSignal<boolean>;
     readonly showPreview: import("@angular/core").InputSignal<boolean>;
     readonly content: import("@angular/core").InputSignal<Maybe<DownloadTextContent>>;
-    readonly contentState: import("@angular/core").InputSignal<Maybe<LoadingState<DownloadTextContent>>>;
+    readonly contentState: import("@angular/core").InputSignal<MaybeObservableOrValue<LoadingState<DownloadTextContent>>>;
+    readonly contentState$: Observable<Maybe<LoadingState<DownloadTextContent>>>;
+    readonly contentStateSignal: import("@angular/core").Signal<Maybe<LoadingState<DownloadTextContent>>>;
     readonly contentLoadingStateSignal: import("@angular/core").Signal<Maybe<LoadingState<DownloadTextContent>>>;
     readonly contentLoadingState$: Observable<Maybe<LoadingState<DownloadTextContent>>>;
     readonly content$: Observable<Maybe<DownloadTextContent>>;
-    readonly contentData$: Observable<string | undefined>;
-    readonly fileName$: Observable<string>;
-    readonly fileUrl$: Observable<Maybe<SafeResourceUrl>>;
-    readonly downloadReady$: Observable<boolean>;
     readonly contentSignal: import("@angular/core").Signal<Maybe<DownloadTextContent>>;
     readonly contentDataSignal: import("@angular/core").Signal<string | undefined>;
-    readonly fileNameSignal: import("@angular/core").Signal<string | undefined>;
-    readonly fileUrlSignal: import("@angular/core").Signal<Maybe<SafeResourceUrl>>;
-    readonly downloadReadySignal: import("@angular/core").Signal<boolean | undefined>;
+    readonly fileUrlSignal: import("@angular/core").Signal<SafeResourceUrl | undefined>;
+    readonly fileNameSignal: import("@angular/core").Signal<string>;
+    readonly downloadReadySignal: import("@angular/core").Signal<boolean>;
     readonly context: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, LoadingState<DownloadTextContent>, import("@dereekb/rxjs").LoadingContextEvent & LoadingState<DownloadTextContent>>;
     readonly handleCopyToClipboard: WorkUsingObservable;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDownloadTextViewComponent, never>;

package/lib/extension/table/_table.scss

@@ -36,6 +36,13 @@
       font-weight: 800;
     }
   }
+
+  // MARK: Full summary row
+  .dbx-table-view-full-summary-row-container > .mat-mdc-row {
+    border-top-color: var(--mat-table-row-item-outline-color, var(--mat-app-outline, rgba(0, 0, 0, 0.12)));
+    border-top-width: var(--mat-table-row-item-outline-width, 1px);
+    border-top-style: solid;
+  }
 }
 
 @mixin color($theme-config) {

package/lib/layout/style/_style.scss

@@ -56,6 +56,10 @@
     }
   }
 
+  .dbx-h100 {
+    height: 100%;
+  }
+
   .d-block,
   .dbx-block {
     display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "12.1.7",
+  "version": "12.1.8",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/table/lib/date/daterange.table.cell.input.component.d.ts

@@ -35,7 +35,7 @@ export declare const DEFAULT_DBX_TABLE_DATE_RANGE_DAY_BUTTON_FORMAT = "MMM dd";
  * Cell input for a DateRangeDayDistanceInput value.
  */
 export declare class DbxTableDateRangeDayDistanceInputCellInputComponent implements OnInit, OnDestroy {
-    readonly tableStore: DbxTableStore<DateRangeDayDistanceInput, unknown, unknown>;
+    readonly tableStore: DbxTableStore<DateRangeDayDistanceInput, unknown, unknown, unknown>;
     private readonly _syncSub;
     private readonly _valueSub;
     private readonly _pickerOpenedSignal;

package/table/lib/index.d.ts

@@ -8,6 +8,9 @@ export * from './table.column.header.component';
 export * from './table.column.footer.component';
 export * from './table.component';
 export * from './table.directive';
+export * from './table.group.directive';
+export * from './table.group.header.component';
+export * from './table.group.footer.component';
 export * from './table.item.action.component';
 export * from './table.item.cell.component';
 export * from './table.item.directive';

package/table/lib/table.cell.action.component.d.ts

@@ -1,7 +1,7 @@
 import { DbxTableStore } from './table.store';
 import * as i0 from "@angular/core";
 export declare class DbxTableActionCellComponent {
-    readonly tableStore: DbxTableStore<any, any, any>;
+    readonly tableStore: DbxTableStore<any, any, any, any>;
     readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableActionCellComponent, never>;

package/table/lib/table.cell.input.component.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
  * A table header component used for injecting the input picker view.
  */
 export declare class DbxTableInputCellComponent {
-    readonly tableStore: DbxTableStore<any, any, any>;
+    readonly tableStore: DbxTableStore<any, any, any, any>;
     readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableInputCellComponent, never>;

package/table/lib/table.cell.summaryend.component.d.ts

@@ -1,7 +1,7 @@
 import { DbxTableStore } from './table.store';
 import * as i0 from "@angular/core";
 export declare class DbxTableSummaryEndCellComponent {
-    readonly tableStore: DbxTableStore<any, any, any>;
+    readonly tableStore: DbxTableStore<any, any, any, any>;
     readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableSummaryEndCellComponent, never>;

package/table/lib/table.cell.summarystart.component.d.ts

@@ -4,7 +4,7 @@ import * as i0 from "@angular/core";
  * A table header component used for injecting the input picker view.
  */
 export declare class DbxTableSummaryStartCellComponent {
-    readonly tableStore: DbxTableStore<any, any, any>;
+    readonly tableStore: DbxTableStore<any, any, any, any>;
     readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableSummaryStartCellComponent, never>;

package/table/lib/table.column.directive.d.ts

@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
  * Abstract directive that has a column input.
  */
 export declare class AbstractDbxTableColumnDirective<C> {
-    readonly tableStore: DbxTableStore<unknown, C, unknown>;
+    readonly tableStore: DbxTableStore<unknown, C, unknown, unknown>;
     readonly column: import("@angular/core").InputSignal<Maybe<DbxTableColumn<C>>>;
     readonly column$: import("rxjs").Observable<DbxTableColumn<C>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxTableColumnDirective<any>, never>;

package/table/lib/table.component.d.ts

@@ -1,33 +1,56 @@
-import { TrackByFunction } from '@angular/core';
+import { TrackByFunction, Signal } from '@angular/core';
 import { DbxTableStore } from './table.store';
+import { LoadingState } from '@dereekb/rxjs';
 import { Observable } from 'rxjs';
+import { DbxTableItemGroup } from './table';
 import * as i0 from "@angular/core";
 export declare const DBX_TABLE_ITEMS_COLUMN_NAME = "_items";
 export declare const DBX_TABLE_ACTIONS_COLUMN_NAME = "_actions";
+export interface DbxTableViewGroupElement<T, G> {
+    readonly type: 'group';
+    readonly location: 'header' | 'footer';
+    readonly group: DbxTableItemGroup<T, G>;
+}
+export interface DbxTableViewItemElement<T, G> {
+    readonly type: 'item';
+    readonly item: T;
+}
+export type DbxTableViewElement<T, G> = DbxTableViewGroupElement<T, G> | DbxTableViewItemElement<T, G>;
+export declare function isDbxTableViewGroupElement<T, G>(element: DbxTableViewElement<T, G>): element is DbxTableViewGroupElement<T, G>;
+export declare function isDbxTableViewItemElement<T, G>(element: DbxTableViewElement<T, G>): element is DbxTableViewItemElement<T, G>;
 /**
  * A table with fixed content
  */
-export declare class DbxTableViewComponent<I, C, T> {
-    readonly tableStore: DbxTableStore<I, C, T>;
+export declare class DbxTableViewComponent<I, C, T, G = unknown> {
+    readonly tableStore: DbxTableStore<I, C, T, G>;
     readonly DEFAULT_TRACK_BY_FUNCTION: TrackByFunction<any>;
     readonly scrollDistance: import("@angular/core").InputSignal<number>;
     readonly throttleScroll: import("@angular/core").InputSignal<number>;
     readonly itemsColumnName = "_items";
     readonly actionsColumnName = "_actions";
-    readonly innerColumns$: Observable<import("@dereekb/dbx-web/table").DbxTableColumn<C>[]>;
+    readonly innerColumns$: Observable<import("./table").DbxTableColumn<C>[]>;
     readonly innerColumnNames$: Observable<string[]>;
-    readonly innerColumnsSignal: import("@angular/core").Signal<import("@dereekb/dbx-web/table").DbxTableColumn<C>[] | undefined>;
-    readonly innerColumnNamesSignal: import("@angular/core").Signal<string[] | undefined>;
-    readonly elements$: Observable<T[]>;
+    readonly innerColumnsSignal: Signal<import("./table").DbxTableColumn<C>[] | undefined>;
+    readonly innerColumnNamesSignal: Signal<string[] | undefined>;
+    readonly elementsState$: Observable<LoadingState<DbxTableViewElement<T, G>[]>>;
+    readonly elements$: Observable<DbxTableViewElement<T, G>[]>;
     readonly displayedColumns$: Observable<string[]>;
-    readonly displayedColumnsSignal: import("@angular/core").Signal<string[]>;
+    readonly displayedColumnsSignal: Signal<string[]>;
+    readonly visibleColumnsSignal: Signal<number>;
     readonly trackByFunction$: Observable<TrackByFunction<T>>;
-    readonly trackByFunctionSignal: import("@angular/core").Signal<TrackByFunction<any> | TrackByFunction<T>>;
-    readonly context: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, import("@dereekb/rxjs").LoadingState<import("@dereekb/dbx-web/table").DbxTableContextData<I, C, T>>, import("@dereekb/rxjs").LoadingContextEvent & import("@dereekb/rxjs").LoadingState<import("@dereekb/dbx-web/table").DbxTableContextData<I, C, T>>>;
-    readonly dataLoadingContext: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, import("@dereekb/rxjs").PageListLoadingState<T>, import("@dereekb/rxjs").LoadingContextEvent & import("@dereekb/rxjs").PageListLoadingState<T>>;
-    readonly contextSignal: import("@angular/core").Signal<import("@dereekb/rxjs").LoadingState<import("@dereekb/dbx-web/table").DbxTableContextData<I, C, T>> | undefined>;
-    readonly dataLoadingContextSignal: import("@angular/core").Signal<import("@dereekb/rxjs").PageListLoadingState<T> | undefined>;
+    readonly inputTrackByFunctionSignal: Signal<TrackByFunction<any> | TrackByFunction<T>>;
+    readonly trackElementByFunctionSignal: Signal<TrackByFunction<DbxTableViewElement<T, G>>>;
+    readonly context: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, LoadingState<import("./table").DbxTableContextData<I, C, T>>, import("@dereekb/rxjs").LoadingContextEvent & LoadingState<import("./table").DbxTableContextData<I, C, T>>>;
+    readonly dataLoadingContext: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, LoadingState<DbxTableViewElement<T, G>[]>, import("@dereekb/rxjs").LoadingContextEvent & LoadingState<DbxTableViewElement<T, G>[]>>;
+    readonly contextSignal: Signal<LoadingState<import("./table").DbxTableContextData<I, C, T>> | undefined>;
+    readonly dataLoadingContextSignal: Signal<LoadingState<DbxTableViewElement<T, G>[]> | undefined>;
+    readonly viewDelegateSignal: Signal<import("./table").DbxTableViewDelegate<I, C, T, G> | undefined>;
     onScrollDown(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableViewComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTableViewComponent<any, any, any>, "dbx-table-view", never, { "scrollDistance": { "alias": "scrollDistance"; "required": false; "isSignal": true; }; "throttleScroll": { "alias": "throttleScroll"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    showItemRow(_: number, row: DbxTableViewElement<T, G>): boolean;
+    showGroupHeaderRow(_: number, row: DbxTableViewElement<T, G>): boolean;
+    showGroupFooterRow(_: number, row: DbxTableViewElement<T, G>): boolean;
+    readonly showFooterRowSignal: Signal<boolean | undefined>;
+    readonly showFullSummaryRowSignal: Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableViewComponent<any, any, any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTableViewComponent<any, any, any, any>, "dbx-table-view", never, { "scrollDistance": { "alias": "scrollDistance"; "required": false; "isSignal": true; }; "throttleScroll": { "alias": "throttleScroll"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/table/lib/table.d.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-import { LoadingState, PageListLoadingState } from '@dereekb/rxjs';
+import { LoadingState, ObservableOrValue, PageListLoadingState } from '@dereekb/rxjs';
 import { type Maybe } from '@dereekb/util';
 import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import { TrackByFunction } from '@angular/core';
@@ -42,14 +42,34 @@ export interface DbxTableColumn<C> {
      */
     readonly meta: C;
 }
+export declare const NO_GROUPS_ID = "none";
+/**
+ * Unique identifier used for grouping items together.
+ */
+export type DbxTableGroupId = string;
+export interface DbxTableItemGroup<T, G = unknown> {
+    readonly groupId: DbxTableGroupId;
+    readonly items: T[];
+    readonly meta: G;
+}
+export interface DefaultDbxTableItemGroup<T, G = unknown> extends DbxTableItemGroup<T, G> {
+    readonly groupId: typeof NO_GROUPS_ID;
+    readonly default: true;
+}
+export declare function defaultDbxTableItemGroup<T, G = unknown>(items: T[]): DefaultDbxTableItemGroup<T, G>;
+export type DbxTableGroupByFunction<T, G = unknown> = (items: T[]) => ObservableOrValue<DbxTableItemGroup<T, G>[]>;
 /**
  * Delegate used for generating view configurations given the input.
  */
-export interface DbxTableViewDelegate<I = unknown, C = unknown, T = unknown> {
+export interface DbxTableViewDelegate<I = unknown, C = unknown, T = unknown, G = unknown> {
     /**
      * Track by
      */
     readonly trackBy?: TrackByFunction<T>;
+    /**
+     * If provided, will group items together
+     */
+    readonly groupBy?: DbxTableGroupByFunction<T, G>;
     /**
      * Input picker view configuration
      */
@@ -59,13 +79,33 @@ export interface DbxTableViewDelegate<I = unknown, C = unknown, T = unknown> {
      */
     readonly actionHeader?: Maybe<DbxInjectionComponentConfig<any>>;
     /**
-     * Summary row header view configuration
+     * Full-width summary row view configuration.
+     */
+    readonly fullSummaryRow?: Maybe<DbxInjectionComponentConfig<any>>;
+    /**
+     * Summary row header view configuration.
      */
     readonly summaryRowHeader?: Maybe<DbxInjectionComponentConfig<any>>;
     /**
      * Summary row end view configuration
      */
     readonly summaryRowEnd?: Maybe<DbxInjectionComponentConfig<any>>;
+    /**
+     * Group row header view configuration for a specific group.
+     *
+     * If this function returns undefined, the group row will not be shown.
+     *
+     * @param group
+     */
+    groupHeader?(group: DbxTableItemGroup<T, G>): Maybe<DbxInjectionComponentConfig<any>>;
+    /**
+     * Group row footer view configuration for a specific group.
+     *
+     * If this function returns undefined, the group row will not be shown.
+     *
+     * @param group
+     */
+    groupFooter?(group: DbxTableItemGroup<T, G>): Maybe<DbxInjectionComponentConfig<any>>;
     /**
      * Column header view configuration for a specific column.
      *
@@ -73,25 +113,25 @@ export interface DbxTableViewDelegate<I = unknown, C = unknown, T = unknown> {
      */
     columnHeader?(column: DbxTableColumn<C>): Maybe<DbxInjectionComponentConfig<any>>;
     /**
-     * Column footer view configuration for a specific column.
+     * Optional column footer view configuration for a specific column.
      *
      * @param item
      */
     columnFooter?(column: DbxTableColumn<C>): Maybe<DbxInjectionComponentConfig<any>>;
     /**
-     * Item header view configuration for a specific item.
+     * Item header view (left-most column for an item row) configuration for a specific item.
      *
      * @param item
      */
     itemHeader(item: T): Maybe<DbxInjectionComponentConfig<any>>;
     /**
-     * Item cell view configuration for a specific item and column.
+     * Item cell view (middle columns for an item row) configuration for a specific item and column.
      *
      * @param item
      */
     itemCell(column: DbxTableColumn<C>, item: T): Maybe<DbxInjectionComponentConfig<any>>;
     /**
-     * Item action view configuration for a specific item.
+     * Item action view (right-most column for an item row) configuration for a specific item.
      *
      * @param item
      */

package/table/lib/table.directive.d.ts

@@ -6,9 +6,9 @@ import * as i0 from "@angular/core";
  * Directive for providing and configuring a DbxTableStore
  */
 export declare class DbxTableDirective<I, C, T> {
-    readonly tableStore: DbxTableStore<I, C, T>;
+    readonly tableStore: DbxTableStore<I, C, T, unknown>;
     readonly dbxTableInput: import("@angular/core").InputSignal<Maybe<I>>;
-    readonly dbxTableViewDelegate: import("@angular/core").InputSignal<Maybe<DbxTableViewDelegate<I, C, T>>>;
+    readonly dbxTableViewDelegate: import("@angular/core").InputSignal<Maybe<DbxTableViewDelegate<I, C, T, unknown>>>;
     readonly dbxTableDataDelegate: import("@angular/core").InputSignal<Maybe<DbxTableContextDataDelegate<I, C, T>>>;
     protected readonly _setOnTableStoreEffect: import("@angular/core").EffectRef;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableDirective<any, any, any>, never>;

package/table/lib/table.fullsummaryrow.component.d.ts

@@ -0,0 +1,12 @@
+import { DbxTableStore } from './table.store';
+import * as i0 from "@angular/core";
+/**
+ * A table header component used for injecting the input picker view.
+ */
+export declare class DbxTableFullSummaryRowComponent {
+    readonly tableStore: DbxTableStore<any, any, any, any>;
+    readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
+    readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableFullSummaryRowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTableFullSummaryRowComponent, "dbx-table-full-summary-row", never, {}, {}, never, never, true, never>;
+}

package/table/lib/table.group.directive.d.ts

@@ -0,0 +1,14 @@
+import { DbxTableStore } from './table.store';
+import { type Maybe } from '@dereekb/util';
+import { DbxTableItemGroup } from './table';
+import * as i0 from "@angular/core";
+/**
+ * Abstract directive that has an element input.
+ */
+export declare abstract class AbstractDbxTableGroupDirective<T, C = unknown, G = unknown> {
+    readonly tableStore: DbxTableStore<unknown, C, T, G>;
+    readonly group: import("@angular/core").InputSignal<Maybe<DbxTableItemGroup<T, G>>>;
+    readonly group$: import("rxjs").Observable<DbxTableItemGroup<T, G>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxTableGroupDirective<any, any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxTableGroupDirective<any, any, any>, never, never, { "group": { "alias": "group"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+}

package/table/lib/table.group.footer.component.d.ts

@@ -0,0 +1,9 @@
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { AbstractDbxTableGroupDirective } from './table.group.directive';
+import * as i0 from "@angular/core";
+export declare class DbxTableGroupFooterComponent<T> extends AbstractDbxTableGroupDirective<T> {
+    readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<DbxInjectionComponentConfig<unknown>>>;
+    readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<DbxInjectionComponentConfig<unknown>>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableGroupFooterComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTableGroupFooterComponent<any>, "dbx-table-group-footer", never, {}, {}, never, never, true, never>;
+}

package/table/lib/table.group.header.component.d.ts

@@ -0,0 +1,9 @@
+import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
+import { AbstractDbxTableGroupDirective } from './table.group.directive';
+import * as i0 from "@angular/core";
+export declare class DbxTableGroupHeaderComponent<T> extends AbstractDbxTableGroupDirective<T> {
+    readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<DbxInjectionComponentConfig<unknown>>>;
+    readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<DbxInjectionComponentConfig<unknown>>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableGroupHeaderComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTableGroupHeaderComponent<any>, "dbx-table-group-header", never, {}, {}, never, never, true, never>;
+}

package/table/lib/table.item.action.component.d.ts

@@ -1,7 +1,7 @@
-import { AbstractDbxTableElementDirective } from './table.item.directive';
+import { AbstractDbxTableItemDirective } from './table.item.directive';
 import { DbxInjectionComponentConfig } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
-export declare class DbxTableItemActionComponent<T> extends AbstractDbxTableElementDirective<T> {
+export declare class DbxTableItemActionComponent<T> extends AbstractDbxTableItemDirective<T> {
     readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<DbxInjectionComponentConfig<unknown>>>;
     readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<DbxInjectionComponentConfig<unknown>>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableItemActionComponent<any>, never>;

package/table/lib/table.item.cell.component.d.ts

@@ -1,8 +1,8 @@
 import { type Maybe } from '@dereekb/util';
-import { AbstractDbxTableElementDirective } from './table.item.directive';
+import { AbstractDbxTableItemDirective } from './table.item.directive';
 import { DbxTableColumn } from './table';
 import * as i0 from "@angular/core";
-export declare class DbxTableItemCellComponent<T, C> extends AbstractDbxTableElementDirective<T, C> {
+export declare class DbxTableItemCellComponent<T, C> extends AbstractDbxTableItemDirective<T, C> {
     readonly column: import("@angular/core").InputSignal<Maybe<DbxTableColumn<C>>>;
     readonly config$: import("rxjs").Observable<Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     readonly configSignal: import("@angular/core").Signal<Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;

package/table/lib/table.item.directive.d.ts

@@ -4,10 +4,10 @@ import * as i0 from "@angular/core";
 /**
  * Abstract directive that has an element input.
  */
-export declare abstract class AbstractDbxTableElementDirective<T, C = unknown> {
-    readonly tableStore: DbxTableStore<unknown, C, T>;
-    readonly element: import("@angular/core").InputSignal<Maybe<T>>;
-    readonly element$: import("rxjs").Observable<T>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxTableElementDirective<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxTableElementDirective<any, any>, never, never, { "element": { "alias": "element"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
+export declare abstract class AbstractDbxTableItemDirective<T, C = unknown> {
+    readonly tableStore: DbxTableStore<unknown, C, T, unknown>;
+    readonly item: import("@angular/core").InputSignal<Maybe<T>>;
+    readonly item$: import("rxjs").Observable<T>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxTableItemDirective<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxTableItemDirective<any, any>, never, never, { "item": { "alias": "item"; "required": false; "isSignal": true; }; }, {}, never, never, false, never>;
 }

package/table/lib/table.item.header.component.d.ts

@@ -1,6 +1,6 @@
-import { AbstractDbxTableElementDirective } from './table.item.directive';
+import { AbstractDbxTableItemDirective } from './table.item.directive';
 import * as i0 from "@angular/core";
-export declare class DbxTableItemHeaderComponent<T> extends AbstractDbxTableElementDirective<T> {
+export declare class DbxTableItemHeaderComponent<T> extends AbstractDbxTableItemDirective<T> {
     readonly config$: import("rxjs").Observable<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     readonly configSignal: import("@angular/core").Signal<import("dist/packages/util/src").Maybe<import("@dereekb/dbx-core").DbxInjectionComponentConfig<any>>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableItemHeaderComponent<any>, never>;

package/table/lib/table.module.d.ts

@@ -1,20 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./table.directive";
 import * as i2 from "./table.component";
-import * as i3 from "./table.column.header.component";
-import * as i4 from "./table.column.footer.component";
-import * as i5 from "./table.cell.input.component";
-import * as i6 from "./table.cell.action.component";
-import * as i7 from "./table.item.cell.component";
-import * as i8 from "./table.item.header.component";
-import * as i9 from "./table.item.action.component";
-import * as i10 from "./table.cell.summarystart.component";
-import * as i11 from "./table.cell.summaryend.component";
-/**
- * @deprecated import DbxTableDirective and DbxTableViewComponent directly instead.
- */
 export declare class DbxTableModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTableModule, never, [typeof i1.DbxTableDirective, typeof i2.DbxTableViewComponent, typeof i3.DbxTableColumnHeaderComponent, typeof i4.DbxTableColumnFooterComponent, typeof i5.DbxTableInputCellComponent, typeof i6.DbxTableActionCellComponent, typeof i7.DbxTableItemCellComponent, typeof i8.DbxTableItemHeaderComponent, typeof i9.DbxTableItemActionComponent, typeof i10.DbxTableSummaryStartCellComponent, typeof i11.DbxTableSummaryEndCellComponent], [typeof i1.DbxTableDirective, typeof i2.DbxTableViewComponent, typeof i3.DbxTableColumnHeaderComponent, typeof i4.DbxTableColumnFooterComponent, typeof i5.DbxTableInputCellComponent, typeof i6.DbxTableActionCellComponent, typeof i7.DbxTableItemCellComponent, typeof i8.DbxTableItemHeaderComponent, typeof i9.DbxTableItemActionComponent, typeof i10.DbxTableSummaryStartCellComponent, typeof i11.DbxTableSummaryEndCellComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTableModule, never, [typeof i1.DbxTableDirective, typeof i2.DbxTableViewComponent], [typeof i1.DbxTableDirective, typeof i2.DbxTableViewComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxTableModule>;
 }

package/table/lib/table.store.d.ts

@@ -2,9 +2,9 @@ import { LoadingState, PageListLoadingState } from '@dereekb/rxjs';
 import { type Maybe } from '@dereekb/util';
 import { ComponentStore } from '@ngrx/component-store';
 import { Observable } from 'rxjs';
-import { DbxTableColumn, DbxTableContextData, DbxTableContextDataDelegate, DbxTableViewDelegate } from './table';
+import { DbxTableColumn, DbxTableContextData, DbxTableContextDataDelegate, DbxTableItemGroup, DbxTableViewDelegate } from './table';
 import * as i0 from "@angular/core";
-export interface DbxTableStoreState<I, C, T> {
+export interface DbxTableStoreState<I, C, T, G> {
     /**
      * Contextual input that is passed to the data delegate.
      */
@@ -16,23 +16,25 @@ export interface DbxTableStoreState<I, C, T> {
     /**
      * Delegate used for retrieving view configurations.
      */
-    readonly viewDelegate: Maybe<DbxTableViewDelegate<I, C, T>>;
+    readonly viewDelegate: Maybe<DbxTableViewDelegate<I, C, T, G>>;
 }
-export declare class DbxTableStore<I = unknown, C = unknown, T = unknown> extends ComponentStore<DbxTableStoreState<I, C, T>> {
+export declare class DbxTableStore<I = unknown, C = unknown, T = unknown, G = unknown> extends ComponentStore<DbxTableStoreState<I, C, T, G>> {
     constructor();
     readonly loadMore: (observableOrValue?: void | Observable<void> | undefined) => import("rxjs").Subscription;
     readonly input$: Observable<Maybe<I>>;
     readonly dataDelegate$: Observable<Maybe<DbxTableContextDataDelegate<I, C, T>>>;
-    readonly currentViewDelegate$: Observable<Maybe<DbxTableViewDelegate<I, C, T>>>;
-    readonly viewDelegate$: Observable<DbxTableViewDelegate<I, C, T>>;
+    readonly currentViewDelegate$: Observable<Maybe<DbxTableViewDelegate<I, C, T, G>>>;
+    readonly viewDelegate$: Observable<DbxTableViewDelegate<I, C, T, G>>;
     readonly dataState$: Observable<LoadingState<DbxTableContextData<I, C, T>>>;
     readonly data$: Observable<DbxTableContextData<I, C, T>>;
     readonly columns$: Observable<DbxTableColumn<C>[]>;
     readonly itemsState$: Observable<PageListLoadingState<T>>;
     readonly items$: Observable<T[]>;
+    readonly groupsState$: Observable<LoadingState<DbxTableItemGroup<T, G>[]>>;
+    readonly groups$: Observable<DbxTableItemGroup<T, G>[]>;
     readonly setInput: (() => void) | ((observableOrValue: Maybe<I> | Observable<Maybe<I>>) => import("rxjs").Subscription) | (I extends void ? () => void : (observableOrValue: Maybe<I> | Observable<Maybe<I>>) => import("rxjs").Subscription);
     readonly setDataDelegate: (() => void) | ((observableOrValue: Maybe<DbxTableContextDataDelegate<I, C, T>> | Observable<Maybe<DbxTableContextDataDelegate<I, C, T>>>) => import("rxjs").Subscription);
-    readonly setViewDelegate: (() => void) | ((observableOrValue: Maybe<DbxTableViewDelegate<I, C, T>> | Observable<Maybe<DbxTableViewDelegate<I, C, T>>>) => import("rxjs").Subscription);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableStore<any, any, any>, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<DbxTableStore<any, any, any>>;
+    readonly setViewDelegate: (() => void) | ((observableOrValue: Maybe<DbxTableViewDelegate<I, C, T, G>> | Observable<Maybe<DbxTableViewDelegate<I, C, T, G>>>) => import("rxjs").Subscription);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTableStore<any, any, any, any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxTableStore<any, any, any, any>>;
 }