@sd-angular/core 19.0.0-beta.1 → 19.0.0-beta.100

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

@@ -1,8 +1,7 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class SdMaterialSubInformationDefDirective {
+export declare class SdTableExpandDefDirective {
     templateRef: TemplateRef<any>;
-    constructor(templateRef: TemplateRef<any>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<SdMaterialSubInformationDefDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SdMaterialSubInformationDefDirective, "[sdTableExpandDef]", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTableExpandDefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTableExpandDefDirective, "[sdTableExpandDef]", never, {}, {}, never, never, true, never>;
 }

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

@@ -4,13 +4,11 @@ interface Context {
     externalFilter?: Record<string, any>;
 }
 export declare class SdTableFilterDefDirective {
-    templateRef?: TemplateRef<any> | undefined;
     static ngTemplateContextGuard(dir: Context, ctx: unknown): ctx is Context;
-    sdTableFilterDef?: string;
-    defaultShowing?: boolean;
-    set _defaultShowing(val: boolean | '' | undefined);
-    constructor(templateRef?: TemplateRef<any> | undefined);
+    sdTableFilterDef: import("@angular/core").InputSignal<string>;
+    defaultShowing: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    templateRef: TemplateRef<any> | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdTableFilterDefDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTableFilterDefDirective, "[sdTableFilterDef]", never, { "sdTableFilterDef": { "alias": "sdTableFilterDef"; "required": false; }; "_defaultShowing": { "alias": "defaultShowing"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTableFilterDefDirective, "[sdTableFilterDef]", never, { "sdTableFilterDef": { "alias": "sdTableFilterDef"; "required": true; "isSignal": true; }; "defaultShowing": { "alias": "defaultShowing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export {};

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

@@ -1,9 +1,8 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class SdMaterialFooterDefDirective {
+    sdTableFooterDef: import("@angular/core").InputSignal<string>;
     templateRef: TemplateRef<any>;
-    sdTableFooterDef?: string;
-    constructor(templateRef: TemplateRef<any>);
     static ɵfac: i0.ɵɵFactoryDeclaration<SdMaterialFooterDefDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SdMaterialFooterDefDirective, "[sdTableFooterDef]", never, { "sdTableFooterDef": { "alias": "sdTableFooterDef"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdMaterialFooterDefDirective, "[sdTableFooterDef]", never, { "sdTableFooterDef": { "alias": "sdTableFooterDef"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

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

@@ -0,0 +1,8 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SdTableTitleDefDirective {
+    sdTableTitleDef: import("@angular/core").InputSignal<string>;
+    templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdTableTitleDefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SdTableTitleDefDirective, "[sdTableTitleDef]", never, { "sdTableTitleDef": { "alias": "sdTableTitleDef"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -1,3 +1,4 @@
 export * from './table-option.model';
 export * from './table-column.model';
 export * from './table-command.model';
+export * from './table-option-tree.model';

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

@@ -1,15 +1,35 @@
-import { TemplateRef } from '@angular/core';
+import { Signal, TemplateRef } from '@angular/core';
 import { SdBadge } from '@sd-angular/core/components/badge';
 import { SdSearch } from '@sd-angular/core/forms';
-import { SdColor, SdOperator } from '@sd-angular/core/utilities';
+import { SdNestedKeyOf, SdOperator } from '@sd-angular/core/utilities';
+import { SdUnwrapSignal } from '@sd-angular/core/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 SdTableColumnBase<T = any> {
+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;
-    titleHtml?: string;
-    description?: 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;
@@ -17,13 +37,6 @@ interface SdTableColumnBase<T = any> {
     invisible?: boolean;
     fixed?: boolean;
     align?: 'right';
-    useBadge?: (value: any, rowData: T) => {
-        type?: SdBadge['type'];
-        color?: SdBadge['color'];
-        icon?: SdBadge['icon'];
-        title?: SdBadge['title'];
-    };
-    cellStyle?: (value: any, rowData: T) => Record<string, string>;
     htmlTemplate?: (value: any, rowData: T) => string;
     transform?: SdTableColumnTransformFunc<T>;
     tooltip?: (value: any, rowData: T) => string;
@@ -37,67 +50,63 @@ interface SdTableColumnBase<T = any> {
             enable?: boolean;
             list?: SdOperator[];
         };
+        filterDef?: TemplateRef<any>;
     };
     export?: {
         disabled?: boolean;
+        description?: string;
     };
-    cellDef?: TemplateRef<any>;
-    copiable?: boolean;
 }
 interface SdTableColumnText<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'string';
-    badge?: (value: any, rowData: T) => SdColor;
-    badgeIcon?: (value: any, rowData: T) => string;
-    badgeType?: SdBadge['type'];
+    useBadge?: UseBadgeFunc<T>;
 }
 interface SdTableColumnNumber<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'number';
-    badge?: (value: any, rowData: T) => SdColor;
-    badgeIcon?: (value: any, rowData: T) => string;
-    badgeType?: SdBadge['type'];
+    useBadge?: UseBadgeFunc<T>;
     filter?: SdTableColumnBase['filter'] & {
         type?: 'split-number';
     };
 }
 interface SdTableColumnBool<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'boolean';
+    useBadge?: UseBadgeFunc<T>;
     option?: {
         displayOnTrue?: string;
         displayOnFalse?: string;
     };
 }
 interface SdTableColumnDate<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'date' | 'datetime' | 'time';
+    useBadge?: UseBadgeFunc<T>;
     filter?: SdTableColumnBase['filter'] & {
         type?: 'daterange' | 'date' | 'split-date';
     };
 }
-export interface SdTableColumnValues<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+export interface SdTableColumnValues<T = any, K = Record<string, any>> extends SdTableColumnBase<T> {
+    field: SdNestedKeyOf<T>;
     type: 'values';
-    badge?: (value: any, rowData: T) => SdColor;
-    badgeIcon?: (value: any, rowData: T) => string;
-    badgeType?: SdBadge['type'];
+    useBadge?: UseBadgeValuesFunc<T, K>;
     option: {
-        valueField: string;
-        displayField: string;
-        items: any[] | (() => Promise<any[]>);
-        selection?: 'AUTOCOMPLETE' | 'MULTIPLE' | 'MULTIPLEAUTOCOMPLETE';
+        items: K[] | Signal<K[]> | (() => Promise<K[]>);
+        valueField: SdNestedKeyOf<K>;
+        displayField: SdNestedKeyOf<K>;
+        selection?: 'MULTIPLE';
     };
 }
-export interface SdTableColumnLazyValues<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+export interface SdTableColumnLazyValues<T = any, K = Record<string, any>> extends SdTableColumnBase<T> {
+    field: SdNestedKeyOf<T>;
     type: 'lazy-values';
+    useBadge?: UseBadgeFunc<T>;
     option: {
-        valueField: string;
-        displayField: string;
-        items: SdSearch;
-        views?: (values: string[]) => Promise<any[]>;
-        mapValue?: (value: any, rowData?: T) => string | string[];
+        items: SdSearch<K>;
+        valueField: SdNestedKeyOf<K>;
+        displayField: SdNestedKeyOf<K>;
+        views?: (values: string[]) => Promise<K[]>;
         selection?: 'MULTIPLE';
     };
 }

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

@@ -1,9 +1,13 @@
-import { SdColor } from '@sd-angular/core/utilities/models';
+import { MaterialIconFontSet, SdColor } from '@sd-angular/core/utilities/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?: SdColor;
     icon?: string | ((rowData: T) => string);
-    fontSet?: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp';
+    fontSet?: MaterialIconFontSet;
     title?: string | ((rowData: T) => string);
     disabled?: boolean | ((rowData: T) => boolean);
     hidden?: boolean | ((rowData: T) => boolean | Promise<boolean>);
@@ -12,7 +16,7 @@ export interface SdTableCommandNormal<T = any> {
 }
 export interface SdTableCommandChildren<T = any> {
     icon?: string | ((rowData: T) => string);
-    fontSet?: 'material-icons' | 'material-icons-outlined' | 'material-icons-round' | 'material-icons-sharp';
+    fontSet?: MaterialIconFontSet;
     title?: string | ((rowData: T) => string);
     disabled?: boolean | ((rowData: T) => boolean);
     hidden?: boolean | ((rowData: T) => boolean | Promise<boolean>);

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

@@ -1,4 +1,5 @@
 import { SdBadge } from '@sd-angular/core/components/badge';
+import { SdUnwrapSignal } from '@sd-angular/core/utilities/models';
 export interface SdTableMetaSelector {
     selectable?: boolean;
     isSelected?: boolean;
@@ -9,12 +10,22 @@ export interface SdTableMetaExpand {
     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>[];
+}
 export interface SdTableDisplay {
     tooltip?: string;
     badge?: {
-        type: SdBadge['type'] | undefined | null;
-        color: SdBadge['color'] | undefined | null;
-        icon: string | undefined | null;
+        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;
@@ -30,6 +41,7 @@ export interface SdTableMeta<T> {
         htmlTemplate?: string;
         items?: SdTableItem<T>[];
     };
+    tree?: SdTableMetaTree<T>;
 }
 export interface SdTableItem<T = any> {
     meta: SdTableMeta<T>;

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

@@ -1,12 +1,16 @@
 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;
@@ -14,6 +18,7 @@ export interface ConfiguredColumn {
     width?: string;
     invisible?: boolean;
     fixed?: boolean;
+    truncate?: boolean;
 }
 export interface ConfiguredTable {
     columns?: ConfiguredColumn[];

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

@@ -1,3 +1,4 @@
+import { SdNestedKeyOf } from '@sd-angular/core/utilities';
 import { SdTableFilterRequest } from '../services/table-filter/table-filter.model';
 export type SdTableOptionExport<T = any> = SdTableOptionExportDefault<T> | SdTableOptionExportCustom;
 export interface SdTableOptionExportDefault<T = any> {
@@ -22,7 +23,7 @@ export interface SdTableOptionExportCustom {
     onExport: (filterRequest: SdTableFilterRequest) => Promise<void>;
 }
 export interface SdTableOptionExportColumn<T = any> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     title: string;
     description?: string;
     width?: string;
@@ -35,7 +36,7 @@ export interface SdTableOptionExportSheet<T = any> {
     name: string;
     items: T[] | (() => T[] | Promise<T[]>);
     headers: {
-        value: Extract<keyof T, string>;
+        value: SdNestedKeyOf<T>;
         display: string;
     }[];
 }

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

@@ -1,34 +1,89 @@
 import { SdButton } from '@sd-angular/core/components/button';
+import { SdUnwrapSignal } from '@sd-angular/core/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;
 }
 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;
-    fontSet?: SdButton['fontSet'];
-    tooltip?: SdButton['tooltip'];
-    title?: SdButton['title'];
-    color?: SdButton['color'];
-    type?: SdButton['type'];
+    /**
+     * 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`, `material-symbols-outlined`.
+     * 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;
-    fontSet?: SdButton['fontSet'];
-    tooltip?: SdButton['tooltip'];
-    title?: SdButton['title'];
-    color?: SdButton['color'];
-    type?: SdButton['type'];
+    /**
+     * 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-style.model.d.ts

@@ -1,6 +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) => Record<string, 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;
+}

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

@@ -1,42 +1,171 @@
-import { SdTableColumn } from './table-column.model';
-import { SdTableCommand } from './table-command.model';
+import { SdPagingReq } from '@sd-angular/core/utilities';
 import { SdTableFilterRequest, SdTableOptionFilter } from '../services/table-filter/table-filter.model';
+import { SdTableColumn } from './table-column.model';
+import { SdTableCommand, SdTableCommandOption } from './table-command.model';
+import { TableOptionConfig } from './table-option-config.model';
+import { SdTableOptionExpand } from './table-option-expand.model';
 import { SdTableOptionExport } from './table-option-export.model';
+import { SdTableOptionGroup } from './table-option-group.model';
+import { SdTableOptionPaginate } from './table-option-paginate.model';
 import { SdTableOptionReload } from './table-option-reload.model';
-import { SdTableOptionExpand } from './table-option-expand.model';
 import { SdTableOptionSelector } from './table-option-selector.model';
-import { SdTableOptionStyle } from './table-option-style.model';
-import { SdTableOptionGroup } from './table-option-group.model';
 import { SdTableOptionSort } from './table-option-sort.model';
-import { SdTableOptionPaginate } from './table-option-paginate.model';
-import { TableOptionConfig } from './table-option-config.model';
+import { SdTableOptionStyle } from './table-option-style.model';
+import { SdTableOptionTree } from './table-option-tree.model';
 export type SdTableOption<T = any> = SdTableLocalOption<T> | SdTableServerOption<T>;
 interface SdTableBaseOption<T = any> {
+    /**
+     * Key định danh của table option.
+     * Thường dùng khi một số tính năng con cần lưu trạng thái riêng theo table,
+     * ví dụ các option có hỗ trợ cache/config theo key.
+     */
     key?: string;
+    /**
+     * Cấu hình hiển thị/phục hồi config của table.
+     * Xem thêm kiểu chi tiết tại `TableOptionConfig`.
+     */
     config?: TableOptionConfig;
+    /**
+     * Cấu hình chọn dòng (checkbox selector, action theo selection, pre-select...).
+     * Xem thêm tại `SdTableOptionSelector`.
+     */
     selector?: SdTableOptionSelector<T>;
+    /**
+     * Cấu hình expand row.
+     * Xem thêm tại `SdTableOptionExpand` để biết cách disable, expand nhiều dòng,
+     * hoặc luôn hiển thị vùng expand.
+     */
     expand?: SdTableOptionExpand<T>;
+    /**
+     * Bật/tắt sorting ở cấp table.
+     * Xem thêm tại `SdTableOptionSort`.
+     */
     sort?: SdTableOptionSort;
+    /**
+     * Cấu hình phân trang.
+     * Xem thêm tại `SdTableOptionPaginate`.
+     */
     paginate?: SdTableOptionPaginate;
+    /**
+     * Cấu hình hành vi reload dữ liệu.
+     * Xem thêm tại `SdTableOptionReload`.
+     */
     reload?: SdTableOptionReload<T>;
+    /**
+     * Cấu hình export dữ liệu.
+     * Xem thêm tại `SdTableOptionExport` để biết mode `default`/`custom`, mapping,
+     * sheet export và giới hạn số dòng.
+     */
     export?: SdTableOptionExport<T>;
+    /**
+     * Cấu hình group dữ liệu theo nhiều field.
+     * Xem thêm tại `SdTableOptionGroup`.
+     */
     group?: SdTableOptionGroup<T>;
+    /**
+     * Cấu hình tree rows — render children inline dưới parent.
+     * Xem thêm tại `SdTableOptionTree`.
+     */
+    tree?: SdTableOptionTree<T>;
+    /**
+     * Cấu hình filter của table.
+     * Xem thêm tại `SdTableOptionFilter` để biết filter inline, external filter,
+     * manual filter, cacheable và callback clear filter.
+     */
     filter?: SdTableOptionFilter;
+    /**
+     * Cấu hình cột đánh số thứ tự (STT) ở đầu mỗi dòng.
+     * Khi enabled = true, table render thêm 1 cột STT (sticky đầu, sau selector).
+     * Số thứ tự tính theo global index (pageIndex * pageSize + i + 1) để tương thích phân trang.
+     */
+    index?: {
+        /** Bật/tắt cột STT. */
+        enabled?: boolean;
+        /** Tiêu đề header (mặc định '#'). */
+        title?: string;
+        /** Width của cột (mặc định '50px'). */
+        width?: string;
+    };
+    /**
+     * Cấu hình kéo-thả đổi thứ tự dòng.
+     * Chỉ bật khi table cho phép reorder dữ liệu phía client.
+     */
+    rowReorder?: {
+        /** Bật/tắt tính năng reorder row. */
+        enabled?: boolean;
+        /**
+         * Callback sau khi reorder xong.
+         * `newRows` là mảng sau khi đã đổi vị trí ở UI,
+         * `movedItem` là item vừa được kéo,
+         * `fromIndex` và `toIndex` là vị trí cũ/mới.
+         */
+        onChange?: (newRows: T[], movedItem: T, fromIndex: number, toIndex: number) => void;
+        /**
+         * Tên icon hiển thị cho drag handle.
+         * Nếu không truyền thì table dùng icon reorder mặc định của Material.
+         * Nếu truyền custom icon, nên dùng tên glyph của Material Icons:
+         * https://fonts.google.com/icons
+         */
+        icon?: string;
+        /**
+         * Disable khả năng reorder theo từng dòng.
+         * Trả về `true` để chặn kéo-thả dòng tương ứng.
+         */
+        disabled?: (row: T, index: number) => boolean;
+    };
+    /**
+     * Danh sách command thao tác theo từng dòng.
+     * Xem thêm tại `SdTableCommand`.
+     */
     commands?: SdTableCommand<T>[];
+    /**
+     * Cấu hình vùng command tập trung.
+     * Dùng khi cần set thêm alignment hoặc bọc danh sách command trong object option.
+     * Xem thêm tại `SdTableCommandOption`.
+     */
+    command?: SdTableCommandOption<T>;
+    /**
+     * Danh sách cột hiển thị của table.
+     * Đây là phần bắt buộc. Xem thêm tại `SdTableColumn` để cấu hình field, filter,
+     * sort, transform, template và export của từng cột.
+     */
     columns: SdTableColumn<T>[];
+    /**
+     * Cấu hình style/layout chung của table.
+     * Xem thêm tại `SdTableOptionStyle`.
+     */
     style?: SdTableOptionStyle<T>;
 }
 interface SdTableLocalOption<T = any> extends SdTableBaseOption<T> {
+    /** Dùng dữ liệu local tại client. */
     type: 'local';
+    /**
+     * Hàm trả dữ liệu local cho table.
+     * Table sẽ tự gọi hàm này để lấy mảng item nguồn.
+     * Có thể trả về đồng bộ hoặc `Promise<T[]>`.
+     */
     items: () => T[] | Promise<T[]>;
 }
 interface SdTableServerOption<T = any> extends SdTableBaseOption<T> {
+    /** Dùng dữ liệu từ server, có paging/filter/sort theo request của table. */
     type: 'server';
-    items: (filterRequest: SdTableFilterRequest<T>) => Promise<{
+    /**
+     * Hàm lấy dữ liệu từ server.
+     * `filterRequest` chứa trạng thái filter/sort/visible columns ở dạng của table.
+     * `pagingReq` là dữ liệu paging đã được chuẩn hóa để dễ map sang API backend.
+     * Hàm cần trả về `{ items, total }` để table render và tính phân trang.
+     */
+    items: (filterRequest: SdTableFilterRequest<T>, pagingReq: SdPagingReq<T>) => Promise<{
         items: T[];
         total: number;
     }>;
+    /**
+     * Hook chạy khi table phát sinh filter request.
+     * Dùng để can thiệp thêm trước/sau khi gọi API, ví dụ sync external state,
+     * theo dõi trạng thái valid của external filter, hoặc ghi log request filter hiện tại.
+     */
     onFilter?: (filterRequest: SdTableFilterRequest<T>, args: {
+        /** Cho biết toàn bộ external filter hiện tại có hợp lệ để trigger filter hay không. */
         externalFilterValid: boolean;
     }) => void;
 }

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

@@ -1 +1,2 @@
 export * from './filter-values.pipe';
+export * from './sd-tree.pipe';