@sdcorejs/angular 19.0.0-rc.1

package/components/table/src/directives/sd-table-footer-def.directive.d.ts

@@ -0,0 +1,16 @@
+import { TemplateRef } from '@angular/core';
+import { SdTableColumn } from '../models/table-column.model';
+import { SdTableItem } from '../models/table-item.model';
+import * as i0 from "@angular/core";
+interface Context<T = any> {
+    items: SdTableItem<T>[];
+    column: SdTableColumn<T>;
+}
+export declare class SdMaterialFooterDefDirective<T = any> {
+    static ngTemplateContextGuard<T>(_dir: SdMaterialFooterDefDirective<T>, _ctx: unknown): _ctx is Context<T>;
+    sdTableFooterDef: import("@angular/core").InputSignal<string>;
+    templateRef: TemplateRef<Context<T>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdMaterialFooterDefDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdMaterialFooterDefDirective<any>, "[sdTableFooterDef]", never, { "sdTableFooterDef": { "alias": "sdTableFooterDef"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/components/table/src/directives/sd-table-group-def.directive.d.ts

@@ -0,0 +1,44 @@
+import { TemplateRef } from '@angular/core';
+import { SdTableItem } from '../models/table-item.model';
+import * as i0 from "@angular/core";
+export interface SdTableGroupDefContext<T = any> {
+    /** Children items thuộc group hiện tại (kèm wrapper SdTableItem). */
+    items: SdTableItem<T>[];
+    /** Children raw data (đã unwrap khỏi SdTableItem) — tiện dùng trong template. */
+    data: T[];
+    /** Hash key của group (Utilities.hash(values)). */
+    key: string;
+    /** Resolved giá trị các field group — vd `{ customerId: 1, customerName: 'A' }`. */
+    values: Record<string, any>;
+    /** true nếu group đang expand, false nếu collapse (chỉ ý nghĩa khi option.group.collapsible). */
+    isExpanded: boolean;
+    /** true nếu mọi children selectable đều selected. */
+    isSelected: boolean;
+    /** true nếu một phần children selected (partial). */
+    indeterminate: boolean;
+    /** Toggle expand/collapse (chỉ chạy nếu collapsible). */
+    toggleExpand: () => void;
+    /** Toggle select-all cho cả group (chỉ chạy nếu selector visible). */
+    toggleSelect: () => void;
+}
+/**
+ * Directive cung cấp custom template render group header row trong sd-table.
+ * Thay thế cho htmlTemplate callback cũ — cho phép Angular template binding,
+ * pipes, components con (sd-badge, sd-button, …) bên trong.
+ *
+ * Ví dụ:
+ * ```html
+ * <sd-table [option]="opt">
+ *   <ng-template sdTableGroupDef let-values="values" let-items="items" let-indeterminate="indeterminate">
+ *     <b>Khách hàng: {{ values.customerName }}</b>
+ *     <span>{{ items.length }} đơn hàng</span>
+ *   </ng-template>
+ * </sd-table>
+ * ```
+ */
+export declare class SdTableGroupDefDirective<T = any> {
+    static ngTemplateContextGuard<T>(_dir: SdTableGroupDefDirective<T>, _ctx: unknown): _ctx is SdTableGroupDefContext<T>;
+    templateRef: TemplateRef<SdTableGroupDefContext<T>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTableGroupDefDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTableGroupDefDirective<any>, "[sdTableGroupDef]", never, {}, {}, never, never, true, never>;
+}

package/components/table/src/directives/sd-table-title-def.directive.d.ts

@@ -0,0 +1,14 @@
+import { TemplateRef } from '@angular/core';
+import { SdTableColumn } from '../models/table-column.model';
+import * as i0 from "@angular/core";
+interface Context<T = any> {
+    column: SdTableColumn<T>;
+}
+export declare class SdTableTitleDefDirective<T = any> {
+    static ngTemplateContextGuard<T>(_dir: SdTableTitleDefDirective<T>, _ctx: unknown): _ctx is Context<T>;
+    sdTableTitleDef: import("@angular/core").InputSignal<string>;
+    templateRef: TemplateRef<Context<T>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTableTitleDefDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTableTitleDefDirective<any>, "[sdTableTitleDef]", never, { "sdTableTitleDef": { "alias": "sdTableTitleDef"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export {};

package/components/table/src/directives/sticky-shadow.directive.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from "@angular/core";
+/**
+ * Directive thêm hiệu ứng đổ bóng (elevation-2) vào cột sticky cuối cùng bên trái
+ * và cột sticky đầu tiên bên phải, tạo ngăn cách trực quan với phần được scroll.
+ *
+ * Chỉ dùng nội bộ trong sd-table, không chìa ra ngoài.
+ *
+ * Gắn vào scroll container của table:
+ * @example
+ * <div class="c-table" stickyShadow>...</div>
+ */
+export declare class StickyShadowDirective {
+    #private;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<StickyShadowDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StickyShadowDirective, "[stickyShadow]", never, {}, {}, never, never, true, never>;
+}

package/components/table/src/models/index.d.ts

@@ -0,0 +1,5 @@
+export * from './table-option.model';
+export * from './table-column.model';
+export * from './table-command.model';
+export * from './table-option-tree.model';
+export type { SdTableItem, SdTableMeta, SdTableDisplay } from './table-item.model';

package/components/table/src/models/table-column.model.d.ts

@@ -0,0 +1,119 @@
+import { Signal, TemplateRef } from '@angular/core';
+import { SdBadge } from '@sdcorejs/angular/components/badge';
+import { SdSearch } from '@sdcorejs/angular/forms';
+import { NestedKeyOf, Operator } from '@sdcorejs/utils/models';
+import { SdUnwrapSignal } from '@sdcorejs/angular/utilities/models';
+export type SdTableColumn<T = any> = SdTableColumnText<T> | SdTableColumnNumber<T> | SdTableColumnBool<T> | SdTableColumnDate<T> | SdTableColumnValues<T> | SdTableColumnLazyValues<T> | SdTableColumnChildren<T>;
+export type SdTableColumnTransformFunc<T = any> = (value: any, rowData: T, args?: {
+    isExport?: boolean;
+}) => string | Promise<string>;
+interface Badge {
+    type?: SdUnwrapSignal<SdBadge['type']>;
+    color?: SdUnwrapSignal<SdBadge['color']>;
+    icon?: SdUnwrapSignal<SdBadge['icon']>;
+    title?: SdUnwrapSignal<SdBadge['title']>;
+}
+type UseBadgeFunc<T = any> = (value: any, rowData: T) => Badge;
+type UseBadgeValuesFunc<T = any, K = any> = (value: any, rowData: T, items: K[]) => Badge;
+interface ColumnTitleOption {
+    title: string;
+    templateRef?: TemplateRef<any>;
+}
+interface ColumnCellOption {
+    templateRef?: TemplateRef<any>;
+    copiable?: boolean;
+    truncate?: {
+        enable?: boolean;
+        type?: 'more' | 'tooltip';
+    };
+}
+interface SdTableColumnBase<T = any> {
+    title: string | ColumnTitleOption;
+    cell?: ColumnCellOption;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    hidden?: boolean;
+    invisible?: boolean;
+    fixed?: boolean;
+    align?: 'right';
+    htmlTemplate?: (value: any, rowData: T) => string;
+    transform?: SdTableColumnTransformFunc<T>;
+    tooltip?: (value: any, rowData: T) => string;
+    click?: (value: any, rowData: T) => void;
+    sortable?: boolean;
+    filter?: {
+        disabled?: boolean;
+        default?: any;
+        operator?: {
+            default?: Operator;
+            enable?: boolean;
+            list?: Operator[];
+        };
+        filterDef?: TemplateRef<any>;
+    };
+    export?: {
+        disabled?: boolean;
+        description?: string;
+    };
+}
+interface SdTableColumnText<T = any> extends SdTableColumnBase<T> {
+    field: NestedKeyOf<T>;
+    type: 'string';
+    useBadge?: UseBadgeFunc<T>;
+}
+interface SdTableColumnNumber<T = any> extends SdTableColumnBase<T> {
+    field: NestedKeyOf<T>;
+    type: 'number';
+    useBadge?: UseBadgeFunc<T>;
+    filter?: SdTableColumnBase['filter'] & {
+        type?: 'split-number';
+    };
+}
+interface SdTableColumnBool<T = any> extends SdTableColumnBase<T> {
+    field: NestedKeyOf<T>;
+    type: 'boolean';
+    useBadge?: UseBadgeFunc<T>;
+    option?: {
+        displayOnTrue?: string;
+        displayOnFalse?: string;
+    };
+}
+interface SdTableColumnDate<T = any> extends SdTableColumnBase<T> {
+    field: NestedKeyOf<T>;
+    type: 'date' | 'datetime' | 'time';
+    useBadge?: UseBadgeFunc<T>;
+    filter?: SdTableColumnBase['filter'] & {
+        type?: 'daterange' | 'date' | 'split-date';
+    };
+}
+export interface SdTableColumnValues<T = any, K = Record<string, any>> extends SdTableColumnBase<T> {
+    field: NestedKeyOf<T>;
+    type: 'values';
+    useBadge?: UseBadgeValuesFunc<T, K>;
+    option: {
+        items: K[] | Signal<K[]> | (() => Promise<K[]>);
+        valueField: NestedKeyOf<K>;
+        displayField: NestedKeyOf<K>;
+        selection?: 'MULTIPLE';
+    };
+}
+export interface SdTableColumnLazyValues<T = any, K = Record<string, any>> extends SdTableColumnBase<T> {
+    field: NestedKeyOf<T>;
+    type: 'lazy-values';
+    useBadge?: UseBadgeFunc<T>;
+    option: {
+        items: SdSearch<K>;
+        valueField: NestedKeyOf<K>;
+        displayField: NestedKeyOf<K>;
+        views?: (values: string[]) => Promise<K[]>;
+        selection?: 'MULTIPLE';
+    };
+}
+export type SdTableColumnNormal<T = any> = Exclude<SdTableColumn<T>, SdTableColumnChildren<T>>;
+export interface SdTableColumnChildren<T = any> extends SdTableColumnBase<T> {
+    field: string;
+    type: 'children';
+    children: SdTableColumnNormal<T>[];
+}
+export {};

package/components/table/src/models/table-command.model.d.ts

@@ -0,0 +1,25 @@
+import { MaterialIconFontSet } from '@sdcorejs/angular/utilities/models';
+import { Color } from '@sdcorejs/utils/models';
+export interface SdTableCommandOption<T = any> {
+    align?: 'left' | 'right';
+    commands?: SdTableCommand<T>[];
+}
+export type SdTableCommand<T = any> = SdTableCommandNormal<T> | SdTableCommandChildren<T>;
+export interface SdTableCommandNormal<T = any> {
+    color?: Color;
+    icon?: string | ((rowData: T) => string);
+    fontSet?: MaterialIconFontSet;
+    title?: string | ((rowData: T) => string);
+    disabled?: boolean | ((rowData: T) => boolean);
+    hidden?: boolean | ((rowData: T) => boolean | Promise<boolean>);
+    click: (rowData: T) => void;
+    htmlTemplate?: (rowData: T) => string;
+}
+export interface SdTableCommandChildren<T = any> {
+    icon?: string | ((rowData: T) => string);
+    fontSet?: MaterialIconFontSet;
+    title?: string | ((rowData: T) => string);
+    disabled?: boolean | ((rowData: T) => boolean);
+    hidden?: boolean | ((rowData: T) => boolean | Promise<boolean>);
+    children: SdTableCommandNormal<T>[];
+}

package/components/table/src/models/table-item.model.d.ts

@@ -0,0 +1,65 @@
+import { SdBadge } from '@sdcorejs/angular/components/badge';
+import { SdUnwrapSignal } from '@sdcorejs/angular/utilities/models';
+export interface SdTableMetaSelector {
+    selectable?: boolean;
+    isSelected?: boolean;
+    actions?: string[];
+}
+export interface SdTableMetaExpand {
+    isExpanded?: boolean;
+    isExpanding?: boolean;
+    data?: any;
+}
+export interface SdTableMetaTree<T = any> {
+    level: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+    isExpanding?: boolean;
+    parentId?: string;
+    /** Cached formatted child SdTableItem[] — populated on first expand/format */
+    childItems?: SdTableItem<T>[];
+    /**
+     * Hierarchical index path từ root tới row hiện tại — sibling-index (1-based) per level.
+     * Vd root thứ nhất = [1], child thứ 2 của root đó = [1, 2], grandchild thứ 1 = [1, 2, 1].
+     * Template STT join('.') → "1", "1.2", "1.2.1". Populate trong `flattenTree`.
+     */
+    indexPath?: number[];
+}
+export interface SdTableDisplay {
+    tooltip?: string;
+    badge?: {
+        type: SdUnwrapSignal<SdBadge['type']>;
+        color: SdUnwrapSignal<SdBadge['color']>;
+        icon?: SdUnwrapSignal<SdBadge['icon']>;
+        title?: SdUnwrapSignal<SdBadge['title']>;
+    };
+    cellStyle?: Record<string, string>;
+    data: string | number | undefined | null;
+    isHtml: boolean;
+    click?: () => void;
+}
+export interface SdTableMetaGroup<T = any> {
+    /** Children items thuộc group này (chỉ set trên group header row). */
+    items?: SdTableItem<T>[];
+    /** true = row này là synthetic group header (sinh bởi SdGroupPipe). */
+    isGroupHeader?: boolean;
+    /** Hash key của group (= Utilities.hash(values)). */
+    key?: string;
+    /** Resolved group-field values (vd `{ customerId: 1, customerName: 'A' }`). */
+    values?: Record<string, any>;
+    /** Trạng thái expand. Chỉ ý nghĩa khi `option.group.collapsible = true`. */
+    isExpanded?: boolean;
+}
+export interface SdTableMeta<T> {
+    id: string;
+    display: Record<string, SdTableDisplay>;
+    selector?: SdTableMetaSelector;
+    expand?: SdTableMetaExpand;
+    group?: SdTableMetaGroup<T>;
+    tree?: SdTableMetaTree<T>;
+}
+export interface SdTableItem<T = any> {
+    meta: SdTableMeta<T>;
+    data: T;
+}
+export declare const MapToSdTableItem: <T = any>(item: T) => SdTableItem<T>;

package/components/table/src/models/table-option-config.model.d.ts

@@ -0,0 +1,42 @@
+import { SdTableColumn } from './table-column.model';
+export interface TableOptionConfig {
+    visible?: boolean;
+    resizable?: boolean;
+    onResize?: (field: string, width: string, columnWidth: Record<string, string>) => void;
+}
+export interface OriginColumn {
+    field: string;
+    title: string;
+    width?: string;
+    invisible?: boolean;
+    fixed?: boolean;
+    truncate?: boolean;
+}
+export interface ConfiguredColumn {
+    origin: OriginColumn;
+    title?: string;
+    width?: string;
+    invisible?: boolean;
+    fixed?: boolean;
+    truncate?: boolean;
+}
+export interface ConfiguredTable {
+    columns?: ConfiguredColumn[];
+}
+export interface ConfiguredTableResult {
+    column: Record<string, {
+        title?: string;
+        width?: string;
+    }>;
+    fixedColumn: Record<string, {
+        title?: string;
+        width?: string;
+    }>;
+    firstColumns: SdTableColumn[];
+    secondColumns: SdTableColumn[];
+    firstHeaders: string[];
+    secondHeaders: string[];
+    displayedColumns: string[];
+    displayedFooters: string[];
+    multipleHeader: boolean;
+}

package/components/table/src/models/table-option-expand.model.d.ts

@@ -0,0 +1,6 @@
+export interface SdTableOptionExpand<T = any> {
+    disabled?: (rowData: T) => boolean;
+    onExpand?: (rowData: T) => Promise<any> | any;
+    multiple?: boolean;
+    always?: boolean;
+}

package/components/table/src/models/table-option-export.model.d.ts

@@ -0,0 +1,42 @@
+import { NestedKeyOf } from '@sdcorejs/utils/models';
+import { SdTableFilterRequest } from '../services/table-filter/table-filter.model';
+export type SdTableOptionExport<T = any> = SdTableOptionExportDefault<T> | SdTableOptionExportCustom;
+export interface SdTableOptionExportDefault<T = any> {
+    type?: 'default';
+    key?: string;
+    visible?: 'ALL' | 'EXCEL' | 'CSV';
+    enableUpload?: boolean;
+    fileName?: string;
+    max?: number;
+    maxItemsPerRequest?: number;
+    batch?: number;
+    items?: (filterRequest: SdTableFilterRequest) => T[] | Promise<T[]> | Promise<{
+        items: any[];
+        total: number;
+    }>;
+    mapping?: (items: T[], fileName?: string) => T[] | Promise<T[]>;
+    columns?: SdTableOptionExportColumn<T>[];
+    sheets?: SdTableOptionExportSheet[];
+}
+export interface SdTableOptionExportCustom {
+    type: 'custom';
+    onExport: (filterRequest: SdTableFilterRequest) => Promise<void>;
+}
+export interface SdTableOptionExportColumn<T = any> {
+    field: NestedKeyOf<T>;
+    title: string;
+    description?: string;
+    width?: string;
+    transform?: (value: any, rowData: T) => string;
+    export?: {
+        disabled: boolean;
+    };
+}
+export interface SdTableOptionExportSheet<T = any> {
+    name: string;
+    items: T[] | (() => T[] | Promise<T[]>);
+    headers: {
+        value: NestedKeyOf<T>;
+        display: string;
+    }[];
+}

package/components/table/src/models/table-option-group.model.d.ts

@@ -0,0 +1,21 @@
+import { NestedKeyOf } from '@sdcorejs/utils/models';
+export interface SdTableOptionGroup<T = any> {
+    /**
+     * Danh sách field dùng để nhóm. Item có cùng giá trị tất cả `fields` sẽ vào cùng group.
+     * Ví dụ `['customerId']` group orders theo khách hàng.
+     * Type-safe qua `NestedKeyOf<T>` — hỗ trợ dot-notation cho nested object (vd `'customer.id'`).
+     */
+    fields: NestedKeyOf<T>[];
+    /**
+     * Mặc định group có collapse được không. true = render với UI có thể expand/collapse;
+     * false = luôn show toàn bộ children (mặc định).
+     */
+    collapsible?: boolean;
+    /** Nếu collapsible, mặc định trạng thái ban đầu: true = collapsed, false = expanded (default). */
+    defaultCollapsed?: boolean;
+    /**
+     * Predicate tùy chọn cho selection. Khi check `selectable` của group header.
+     * Mặc định: chỉ nhóm có >=1 child `selectable` mới hiển thị checkbox.
+     */
+    selectable?: (children: T[]) => boolean;
+}

package/components/table/src/models/table-option-paginate.model.d.ts

@@ -0,0 +1,7 @@
+export interface SdTableOptionPaginate {
+    pageSize?: number;
+    pages?: number[];
+    showFirstLastButtons?: boolean;
+    hidePageSize?: boolean;
+    hidden?: boolean;
+}

package/components/table/src/models/table-option-reload.model.d.ts

@@ -0,0 +1,7 @@
+import { SdTableItem } from './table-item.model';
+export interface SdTableOptionReload<T = any> {
+    visible?: boolean;
+    onReload?: (items: SdTableItem<T>[], args?: {
+        fromSource?: 'PAGING' | 'RELOAD';
+    }) => Promise<void> | void;
+}

package/components/table/src/models/table-option-selector.model.d.ts

@@ -0,0 +1,105 @@
+import { SdButton } from '@sdcorejs/angular/components/button';
+import { SdUnwrapSignal } from '@sdcorejs/angular/utilities/models';
+export interface SdTableOptionSelector<T = any> {
+    /** Bật/tắt cột checkbox selector. Mặc định: true. */
+    visible?: boolean;
+    /** Chỉ cho chọn 1 dòng tại một thời điểm. */
+    single?: boolean;
+    /** Danh sách action hiển thị khi có item được chọn. */
+    actions?: SdTableAction<T>[];
+    /** Nội dung hiển thị bên cạnh selector/action bar. */
+    message?: string | ((selectedItems?: T[]) => string);
+    /** Callback khi user chọn/bỏ chọn một dòng. */
+    onSelect?: (rowData?: T, selectedItems?: T[]) => void;
+    /** Callback khi user chọn tất cả hoặc bỏ chọn tất cả. */
+    onSelectAll?: (selectedItems: T[]) => void;
+    /** Disable checkbox của từng dòng theo điều kiện. */
+    disabled?: (rowData?: T, selectedItems?: T[]) => boolean;
+    /**
+     * Predicate để tự động pre-select item sau mỗi lần load.
+     * Table sẽ gọi hàm này cho từng item và set isSelected = true nếu trả về true.
+     * Dùng khi cần programmatically set selected items từ bên ngoài.
+     */
+    defaultSelected?: (rowData: T) => boolean;
+    /**
+     * Giữ lại selection khi user chuyển trang / filter / sort / reload.
+     * Selection chỉ bị clear khi user bấm nút X (onClearSelection) hoặc bỏ chọn từng item.
+     *
+     * - Default (false): selection bị mất khi data items được re-fetch (server-side) hoặc
+     *   item references thay đổi. Action bar chỉ hiển thị số item selected ở page hiện tại.
+     * - Enabled (true): table giữ map nội bộ selectedItems theo `meta.id` (hash của data).
+     *   Sau mỗi #render, restore `isSelected` cho item nào id đã có trong map.
+     *   `selectedTableItems()` trả về TOÀN BỘ item đã chọn xuyên trang (kể cả off-page),
+     *   nên action bar + callback `click(items)` nhận đầy đủ data đang được chọn.
+     *
+     * Lưu ý: matching dựa trên `Utilities.hash(data)` — hai item có cùng data shape sẽ
+     * trùng id (mong muốn). Nếu data có timestamp/random field thay đổi giữa các lần fetch,
+     * id sẽ khác và selection không restore được.
+     */
+    preserveSelection?: boolean;
+}
+export type SdTableAction<T = any> = SdTableActionNormal<T> | SdTableActionChildren<T>;
+export interface SdTableActionNormal<T = any> {
+    /**
+     * Tên icon hiển thị trên action button.
+     * Giá trị này được render qua `mat-icon`, vì vậy nên dùng đúng tên glyph của Material Icons.
+     * Tra cứu icon tại: https://fonts.google.com/icons
+     */
+    icon?: string;
+    /**
+     * Font set của Material icon.
+     * Kiểu thực tế lấy từ `SdButton['fontSet']` và chỉ hỗ trợ các giá trị thuộc `MaterialIconFontSet`,
+     * ví dụ: `material-icons`, `material-icons-outlined`, `material-icons-round`,
+     * `material-icons-sharp`.
+     * Nếu không truyền, `SdButton` sẽ dùng font set mặc định của nó.
+     */
+    fontSet?: SdUnwrapSignal<SdButton['fontSet']>;
+    /** Tooltip hiển thị khi hover action button. */
+    tooltip?: SdUnwrapSignal<SdButton['tooltip']>;
+    /** Text label hiển thị trên button action. */
+    title?: SdUnwrapSignal<SdButton['title']>;
+    /**
+     * Màu của `SdButton`.
+     * Kiểu thực tế map theo `SdButton['color']`, hiện dùng các token như
+     * `primary`, `secondary`, `info`, `success`, `warning`, `error`.
+     */
+    color?: SdUnwrapSignal<SdButton['color']>;
+    /**
+     * Variant hiển thị của `SdButton`.
+     * Kiểu thực tế là `fill | light | outline | link`.
+     */
+    type?: SdUnwrapSignal<SdButton['type']>;
+    /** Ẩn action theo cờ tĩnh hoặc theo điều kiện của dữ liệu dòng. */
+    hidden?: boolean | ((rowData?: T) => boolean);
+    /** Gom action vào nhóm hiển thị compact nếu table hỗ trợ grouped actions. */
+    isGrouped?: boolean;
+    /** Hàm xử lý khi click action, nhận toàn bộ item đang được chọn. */
+    click: (selectedItems?: T[]) => void;
+}
+interface SdTableActionChildren<T = any> {
+    /**
+     * Tên icon của action cha (group action).
+     * Giá trị nên là tên glyph Material Icons: https://fonts.google.com/icons
+     */
+    icon?: string;
+    /**
+     * Font set của Material icon cho action cha.
+     * Dùng cùng kiểu dữ liệu với `SdButton['fontSet']`.
+     */
+    fontSet?: SdUnwrapSignal<SdButton['fontSet']>;
+    /** Tooltip của action cha. */
+    tooltip?: SdUnwrapSignal<SdButton['tooltip']>;
+    /** Label của action cha. */
+    title?: SdUnwrapSignal<SdButton['title']>;
+    /** Màu của action cha theo kiểu `SdButton['color']`. */
+    color?: SdUnwrapSignal<SdButton['color']>;
+    /** Variant hiển thị của action cha theo kiểu `SdButton['type']`. */
+    type?: SdUnwrapSignal<SdButton['type']>;
+    /** Ẩn action cha theo cờ tĩnh hoặc theo điều kiện của dữ liệu dòng. */
+    hidden?: boolean | ((rowData?: T) => boolean);
+    /** Gom action cha vào nhóm hiển thị compact nếu table hỗ trợ grouped actions. */
+    isGrouped?: boolean;
+    /** Danh sách action con hiển thị bên trong group action này. */
+    children: SdTableActionNormal<T>[];
+}
+export {};

package/components/table/src/models/table-option-sort.model.d.ts

@@ -0,0 +1,3 @@
+export interface SdTableOptionSort {
+    enable?: boolean;
+}

package/components/table/src/models/table-option-style.model.d.ts

@@ -0,0 +1,11 @@
+export interface SdTableRowCssContext {
+    level: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+}
+export interface SdTableOptionStyle<T = any> {
+    shadow?: boolean;
+    maxHeight?: string;
+    minHeight?: string;
+    rowCss?: (rowData: T, index?: number, ctx?: SdTableRowCssContext) => Record<string, string>;
+}

package/components/table/src/models/table-option-tree.model.d.ts

@@ -0,0 +1,12 @@
+export interface SdTableOptionTree<T = any> {
+    /** Key trên object row chứa mảng children. Mặc định: 'children' */
+    childrenKey?: string;
+    /** Giới hạn độ sâu cây. undefined = không giới hạn. */
+    maxDepth?: number;
+    /** false | true | number (mở tới cấp N) */
+    defaultExpanded?: boolean | number;
+    /** Lazy load khi row chưa có children embedded */
+    onExpandChildren?: (rowData: T) => Promise<T[]> | T[];
+    /** Pixel indent mỗi cấp. Mặc định: 20 */
+    indentSize?: number;
+}