@mescius/spread-sheets 17.0.10 → 17.1.1

package/dist/gc.spread.sheets.d.ts

@@ -343,6 +343,14 @@ declare module GC{
             }
         
 
+        /**
+         * @typedef GC.Data.ColumnType - The column type
+         * @type {"Number"|"Text"|"Formula"|"Checkbox"|"Date"|"Currency"|"Percent"|"Phone"|"Email"|"URL"|"Lookup"|"CreatedTime"|"ModifiedTime"|"Attachment"|"Select"|"Barcode"}
+         */
+        export type ColumnType = 
+            "Number"|"Text"|"Formula"|"Checkbox"|"Date"|"Currency"|"Percent"|"Phone"|"Email"|"URL"|"Lookup"|"CreatedTime"|"ModifiedTime"|"Attachment"|"Select"|"Barcode"
+        
+
         /**
          * @typedef GC.Data.ComboBoxOptions
          * @property {string} type - The type of the cell type, supports "combobox".
@@ -728,6 +736,66 @@ declare module GC{
             "stop" | "warning" | "information"
         
 
+        /**
+         * @typedef GC.Data.FileUploadOptions
+         * @property {string} type - The type of the cell type, supports "fileUpload".
+         * @property {number} maxSize -The maximum file size that can be uploaded.
+         * @property {string} accept - The file types that can be uploaded.
+         * @property {boolean} isPreviewEnabled - Whether to display the file preview button.
+         * @property {boolean} isDownloadEnabled - Whether to display the file download button.
+         * @property {boolean} isClearEnabled - Whether to display the file clear button.
+         * @property {number} marginTop - The margin top value.
+         * @property {number} marginRight - The margin right value.
+         * @property {number} marginBottom - The margin bottom value.
+         * @property {number} marginLeft - The margin left value.
+         * @property {string} valuePath - The valuePath is used to get the cell value from File.
+         */
+        export type FileUploadOptions = 
+            {
+                /**
+                 * The type of the cell type, supports "fileUpload".
+                 */
+                type: "fileUpload";
+                maxSize?: number;
+                /**
+                 * The file types that can be uploaded.
+                 */
+                accept?: string;
+                /**
+                 * Whether to display the file preview button.
+                 */
+                isPreviewEnabled?: boolean;
+                /**
+                 * Whether to display the file download button.
+                 */
+                isDownloadEnabled?: boolean;
+                /**
+                 * Whether to display the file clear button.
+                 */
+                isClearEnabled?: boolean;
+                /**
+                 * The margin top value.
+                 */
+                marginTop?: number;
+                /**
+                 * The margin right value.
+                 */
+                marginRight?: number;
+                /**
+                 * The margin bottom value.
+                 */
+                marginBottom?: number;
+                /**
+                 * The margin left value.
+                 */
+                marginLeft?: number;
+                /**
+                 * The valuePath is used to get the cell value from File.
+                 */
+                valuePath?: string;
+            }
+        
+
         /**
          * @typedef GC.Data.FormulaListValidatorOptions
          * @property {"formulaList"} type - The data validator type.
@@ -1230,6 +1298,7 @@ declare module GC{
          * @typedef GC.Data.IColumn - The column options.
          * @property {string} name - The unique name of the column.
          * @property {string} value - The value of the column, could be a field name of table from database, or formula which uses the fields names.
+         * @property {string} type - The column type, any of "Number", "Text", "Formula", "Checkbox", "Date", "Currency", "Percent", "Phone", "Email", "URL", "Lookup", "CreatedTime", "ModifiedTime", "Attachment", "Select", "Barcode"
          * @property {string | string[]} caption - The caption of the column.
          * @property {number | string} width - The width of the column, support number in pixel, or star size.
          * @property {GC.Data.StyleOptions} style - The style of the column.
@@ -1266,6 +1335,10 @@ declare module GC{
                  * The value of the column, could be a field name of table from database, or formula which uses the fields names.
                  */
                 value?: string;
+                /**
+                 * The column type, any of "Number", "Text", "Formula", "Checkbox", "Date", "Currency", "Percent", "Phone", "Email", "URL", "Lookup", "CreatedTime", "ModifiedTime", "Attachment", "Select", "Barcode"
+                 */
+                type?: string;
                 /**
                  * The caption of the column.
                  */
@@ -1851,6 +1924,10 @@ declare module GC{
          * @property {GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler} update - The options for update operation.
          * @property {GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler} delete - The options for delete operation.
          * @property {GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler} batch - The options for batch operation.
+         * @property {GC.Data.IRemoteReadRequestOption | GC.Data.RemoteReadHandler} getColumns - The options for getting columns operation.
+         * @property {GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler} addColumn - The options for adding column operation.
+         * @property {GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler} updateColumn - The options for updating column operation.
+         * @property {GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler} removeColumn - The options for deleting column operation.
          */
         export type IRemoteTransportOption = 
             {
@@ -1874,6 +1951,22 @@ declare module GC{
                  * The options for batch operation.
                  */
                 batch?: GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler;
+                /**
+                 * The options for getting columns operation.
+                 */
+                getColumns?: GC.Data.IRemoteReadRequestOption | GC.Data.RemoteReadHandler;
+                /**
+                 * The options for adding column operation.
+                 */
+                addColumn?: GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler;
+                /**
+                 * The options for updating column operation.
+                 */
+                updateColumn?: GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler;
+                /**
+                 * The options for deleting column operation.
+                 */
+                removeColumn?: GC.Data.IRemoteRequestOption | GC.Data.RemoteChangeHandler;
             }
         
 
@@ -2169,6 +2262,34 @@ declare module GC{
             }
         
 
+        /**
+         * @typedef GC.Data.MaskType
+         * @property {string} pattern - The mask pattern.
+         * @property {string} placeholder - The mask placeholder.
+         * @property {boolean} excludeLiteral - The mask exclude literal.
+         * @property {boolean} excludePlaceholder - The mask exclude placeholder.
+         */
+        export type MaskType = 
+            {
+                /**
+                 * The mask pattern.
+                 */
+                pattern: string;
+                /**
+                 * The mask placeholder.
+                 */
+                placeholder?: string;
+                /**
+                 * The mask exclude literal.
+                 */
+                excludeLiteral?: boolean;
+                /**
+                 * The mask exclude placeholder.
+                 */
+                excludePlaceholder?: boolean;
+            }
+        
+
         /**
          * @typedef GC.Data.MonthPickerOptions
          * @property {number} startYear - The month picker's start year, default value is ten year ago.
@@ -2560,7 +2681,7 @@ declare module GC{
          * @property {boolean} wordWrap - Whether words wrap within the cell or cells.
          * @property {boolean} shrinkToFit - Whether content shrinks to fit the cell or cells.
          * @property {string} backgroundImage - The background image to display.
-         * @property {GC.Data.CheckboxOptions | GC.Data.ComboBoxOptions | GC.Data.HyperlinkOptions | GC.Data.RadioButtonCheckboxListOptions} cellType - The cell type.
+         * @property {GC.Data.CheckboxOptions | GC.Data.ComboBoxOptions | GC.Data.HyperlinkOptions | GC.Data.FileUploadOptions | GC.Data.RadioButtonCheckboxListOptions} cellType - The cell type.
          * @property {string} backgroundImageLayout - The layout for the background image, which supports "stretch", "center", "zoom", "none".
          * @property {boolean} tabStop - Whether the user can set focus to the cell using the Tab key.
          * @property {GC.Data.TextDecoration} textDecoration - The decoration added to text.
@@ -2576,6 +2697,7 @@ declare module GC{
          * @property {GC.Data.CellButtonOptions[]} cellButtons - The cell buttons.
          * @property {GC.Data.DropDownOptions[]} dropDowns - The drop downs.
          * @property {GC.Data.Decoration} decoration - The decoration.
+         * @property {GC.Data.MaskType} mask - The mask.
          */
         export type StyleOptions = 
             {
@@ -2654,7 +2776,7 @@ declare module GC{
                 /**
                  * The cell type.
                  */
-                cellType?: GC.Data.CheckboxOptions | GC.Data.ComboBoxOptions | GC.Data.HyperlinkOptions | GC.Data.RadioButtonCheckboxListOptions;
+                cellType?: GC.Data.CheckboxOptions | GC.Data.ComboBoxOptions | GC.Data.HyperlinkOptions | GC.Data.FileUploadOptions | GC.Data.RadioButtonCheckboxListOptions;
                 /**
                  * The layout for the background image, which supports "stretch", "center", "zoom", "none".
                  */
@@ -2715,6 +2837,10 @@ declare module GC{
                  * The decoration.
                  */
                 decoration?: GC.Data.Decoration;
+                /**
+                 * The mask.
+                 */
+                mask?: GC.Data.MaskType;
             }
         
 
@@ -6677,6 +6803,75 @@ declare module GC{
             }
 
 
+            export class CustomPivotTableThemeManager extends GC.Spread.Sheets.CustomThemeManagerBase{
+                /**
+                 * Represents a custom pivot table theme manager that can manage all custom pivot table themes.
+                 * @class
+                 * @param {GC.Spread.Sheets.Workbook} workbook The workbook.
+                 * @extends GC.Spread.Sheets.CustomThemeManagerBase
+                 */
+                constructor(workbook: GC.Spread.Sheets.Workbook);
+                /**
+                 * add a new pivot table theme.
+                 * @param {string | GC.Spread.Pivot.PivotTableTheme} theme the new pivot table theme or just a new pivot table theme name you want to add
+                 * @returns {GC.Spread.Pivot.PivotTableTheme | undefined} return the newly added pivot table theme, if the named pivot table theme is existed, failed to add pivot table theme and return undefined
+                 * @example
+                 * ```
+                 * // add a new pivot table theme named "custom0"
+                 * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
+                 * let pivotTableStyle = spread.customPivotTableThemes.add("custom0");
+                 * let wholeTableStyle = new GC.Spread.Pivot.PivotTableStyle();
+                 * wholeTableStyle.backColor = "#0C66E4";
+                 * tableStyle.wholeTableStyle(wholeTableStyle);
+                 * ```
+                 */
+                add(theme: string | GC.Spread.Pivot.PivotTableTheme): GC.Spread.Pivot.PivotTableTheme | undefined;
+                /**
+                 * get the pivot table themes collection.
+                 * @returns Array<GC.Spread.Pivot.PivotTableTheme>
+                 * @example
+                 * ```
+                 * // get all pivot table themes
+                 * let tableStylesCollection = spread.customPivotTableThemes.all();
+                 * ```
+                 */
+                all(): Array<GC.Spread.Pivot.PivotTableTheme>;
+                /**
+                 * get the pivot table theme by name.
+                 * @param {string} name the specific name of the pivot table theme to get
+                 * @returns {GC.Spread.Pivot.PivotTableTheme | undefined} If the corresponding pivot table theme with the spefic name is found, return the theme; otherwise, return undefined.
+                 * @example
+                 * ```
+                 * // get pivot table theme
+                 * pivotTableStyle = spread.customPivotTableThemes.get("custom0");
+                 * ```
+                 */
+                get(name: string): GC.Spread.Pivot.PivotTableTheme | undefined;
+                /**
+                 * remove the pivot table theme by name.
+                 * @param {string} name the specific name of the pivot table theme to remove
+                 * @returns {void}
+                 * @example
+                 * ```
+                 * // delete pivot table theme
+                 * spread.customPivotTableThemes.remove("custom0");
+                 * ```
+                 */
+                remove(name: string): void;
+                /**
+                 * update the pivot table theme.
+                 * @param {string} oldThemeName the specific name of the pivot table theme to update
+                 * @param {GC.Spread.Pivot.PivotTableTheme} newTheme the specific name of the pivot table theme to update
+                 * @returns {void}
+                 * @example
+                 * ```
+                 * // update pivot table theme
+                 * tableStyle = spread.customPivotTableThemes.update("custom0", new GC.Spread.Pivot.PivotTableTheme());
+                 * ```
+                 */
+                update(oldThemeName: string,  newTheme: GC.Spread.Pivot.PivotTableTheme): void;
+            }
+
             export class PivotPanel{
                 /**
                  * Represents the pivot panel of pivot table.
@@ -6782,9 +6977,9 @@ declare module GC{
                  * @param {number} row Indicates the pivot table start row.
                  * @param {number} col Indicates the pivot table start column.
                  * @param {GC.Spread.Pivot.PivotTableLayoutType} layout Indicates the pivot table layout type.
-                 * @param {GC.Spread.Pivot.PivotTableTheme} style Indicates the pivot table theme style.
+                 * @param {string | GC.Spread.Pivot.PivotTableTheme} style Indicates the pivot table theme style or style name.
                  */
-                constructor(name: string,  sheet?: GC.Spread.Sheets.Worksheet,  row?: number,  col?: number,  layout?: GC.Spread.Pivot.PivotTableLayoutType,  style?: GC.Spread.Pivot.PivotTableTheme,  options?: GC.Spread.Pivot.IPivotTableOption,  layoutModel?: any);
+                constructor(name: string,  sheet?: GC.Spread.Sheets.Worksheet,  row?: number,  col?: number,  layout?: GC.Spread.Pivot.PivotTableLayoutType,  style?: string | GC.Spread.Pivot.PivotTableTheme,  options?: GC.Spread.Pivot.IPivotTableOption,  layoutModel?: any);
                 /**
                  * Indicates the options of the PivotTable.
                  * @type {Object}
@@ -7427,6 +7622,11 @@ declare module GC{
                  * ```
                  */
                 getStyle(pivotArea: GC.Spread.Pivot.IPivotArea): GC.Spread.Sheets.Style;
+                /**
+                 * Gets or sets a style name for the pivot table.
+                 * @returns {string} returns the pivot table style name.
+                 */
+                getThemeName(): string | undefined;
                 /**
                  * @description Group the items of field
                  * @param {GC.Spread.Pivot.ITextGroupInfo | GC.Spread.Pivot.INumberGroupInfo | GC.Spread.Pivot.IDateGroupsInfo} groupInfo Indicates the grouped info.
@@ -8497,6 +8697,11 @@ declare module GC{
                  * ```
                  */
                 getConnectedPivotTableNameList(): string[];
+                /**
+                 * Gets or sets a style name for the pivot table item slicer.
+                 * @returns {string} returns the pivot table item slicer style name.
+                 */
+                getStyleName(): string | undefined;
                 /**
                  * Gets or sets the height of the slicer.
                  * @param {number} [value] The height of the slicer. The height property of a slicer specifies the vertical dimension or height of the slicer, determining its size along the y-axis.
@@ -8926,7 +9131,7 @@ declare module GC{
                 startRowOffset(value?: number): any;
                 /**
                  * Gets or sets the style of the slicer.
-                 * @param {GC.Spread.Sheets.Slicers.SlicerStyle} [value] The style of the slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer, defining its overall look and presentation.
+                 * @param {string | GC.Spread.Sheets.Slicers.SlicerStyle} [value] The style or style name of the slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer, defining its overall look and presentation.
                  * @returns {GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.IItemSlicer} If no style is set, returns the style of the slicer; otherwise, returns the slicer.
                  * @example
                  * ```
@@ -8953,7 +9158,7 @@ declare module GC{
                  * console.log(newValue);
                  * ```
                  */
-                style(value?: GC.Spread.Sheets.Slicers.SlicerStyle): any;
+                style(value?: string | GC.Spread.Sheets.Slicers.SlicerStyle): any;
                 /**
                  * Gets or sets the visuallyNoDataItems of the slicer.
                  * @param {boolean} [value] The visuallyNoDataItems of the slicer. The visuallyNoDataItems property of a slicer specifies the visual representation or handling of items with no associated data within the slicer control.
@@ -9290,6 +9495,23 @@ declare module GC{
                  * @returns {number | GC.Spread.Pivot.PivotTableTheme} If no value is set, returns the size of the first alternating row; otherwise, returns the pivot table theme.
                  */
                 firstRowStripSize(value?: number): any;
+                /**
+                 * Loads the object state from the specified JSON string.
+                 * @param {Object} data The pivot table theme data from deserialization.
+                 * @example
+                 * ```
+                 * //This example uses the fromJSON method.
+                 * const light1 = GC.Spread.Pivot.PivotTableThemes.light1;
+                 * //export
+                 * const jsonStr = JSON.stringify(light1.toJSON());
+                 * //import
+                 * const newTheme = new GC.Spread.Pivot.PivotTableTheme();
+                 * newTheme.fromJSON(JSON.parse(jsonStr));
+                 * newTheme.name('custom1');
+                 * alert(jsonStr);
+                 * ```
+                 */
+                fromJSON(data: Object): void;
                 /**
                  * @description get or set the grandTotalColumnStyle of pivot table theme
                  * @param {GC.Spread.Pivot.PivotTableStyle} [value] The default style of the grandTotal column area.
@@ -9404,6 +9626,23 @@ declare module GC{
                  * @returns {GC.Spread.Pivot.PivotTableStyle | GC.Spread.Pivot.PivotTableTheme} If no value is set, returns the default style of the data area; otherwise, returns the pivot table theme.
                  */
                 subtotalRow3Style(value?: GC.Spread.Pivot.PivotTableStyle): any;
+                /**
+                 * Saves the object state to a JSON string.
+                 * @returns {Object} The pivot table theme data.
+                 * @example
+                 * ```
+                 * //This example uses the toJSON method.
+                 * const light1 = GC.Spread.Pivot.PivotTableThemes.light1;
+                 * //export
+                 * const jsonStr = JSON.stringify(light1.toJSON());
+                 * //import
+                 * const newTheme = new GC.Spread.Pivot.PivotTableTheme();
+                 * newTheme.fromJSON(JSON.parse(jsonStr));
+                 * newTheme.name('custom1');
+                 * alert(jsonStr);
+                 * ```
+                 */
+                toJSON(): Object;
                 /**
                  * @description get or set the wholeTableStyle of pivot table theme
                  * @param {GC.Spread.Pivot.PivotTableStyle} [value] The default style of he data area.
@@ -10212,6 +10451,11 @@ declare module GC{
                  * ```
                  */
                 getConnectedPivotTableNameList(): string[];
+                /**
+                 * Gets or sets a style name for the pivot table timeline slicer.
+                 * @returns {string} returns the pivot table timeline slicer style name.
+                 */
+                getStyleName(): string | undefined;
                 /**
                  * Gets or sets the height of the slicer.
                  * @param {number} [value] The height of the slicer. The height property of a timeline slicer specifies the vertical dimension or height of the timeline, determining its size along the y-axis.
@@ -10641,7 +10885,7 @@ declare module GC{
                 startRowOffset(value?: number): any;
                 /**
                  * Gets or sets the style of the slicer.
-                 * @param {GC.Spread.Sheets.Slicers.TimelineStyle} [value] The style of the slicer. The style property of a timeline slicer specifies the visual appearance and formatting style applied to the timeline, defining its overall look and presentation.
+                 * @param {string | GC.Spread.Sheets.Slicers.TimelineStyle} [value] The style or style name of the slicer. The style property of a timeline slicer specifies the visual appearance and formatting style applied to the timeline, defining its overall look and presentation.
                  * @returns {GC.Spread.Sheets.Slicers.TimelineStyle | GC.Spread.Pivot.PivotTableTimelineSlicer} If no style is set, returns the style of the slicer; otherwise, returns the slicer.
                  * @example
                  * ```
@@ -10668,7 +10912,7 @@ declare module GC{
                  * console.log(newValue);
                  * ```
                  */
-                style(value?: GC.Spread.Sheets.Slicers.TimelineStyle): any;
+                style(value?: string | GC.Spread.Sheets.Slicers.TimelineStyle): GC.Spread.Sheets.Slicers.TimelineStyle | GC.Spread.Pivot.PivotTableTimelineSlicer;
                 /**
                  * Gets or sets the width of the slicer.
                  * @param {number} [value] The width of the slicer. The width property of a timeline slicer specifies the horizontal dimension or width of the timeline, determining its size along the x-axis.
@@ -10884,6 +11128,26 @@ declare module GC{
             }
 
 
+            export interface IEntityFieldInfo{
+                oldValue: GC.Spread.Report.DataType | GC.Spread.Report.DataType[];
+                state: GC.Spread.Report.FieldState;
+                row: number;
+                col: number;
+                depRowCols?: {
+                row: number;
+                col: number;
+                }[];
+            }
+
+
+            export interface IFailedRecord extends GC.Spread.Report.IRecord{
+                /**
+                 * the reason is the DataManager table submitChanges failed records reason.
+                 */
+                reason?: string;
+            }
+
+
             export interface IField{
                 dbColumnName: string;
                 formula: string;
@@ -10932,12 +11196,72 @@ declare module GC{
             }
 
 
+            export interface IRecord{
+                /**
+                 * record key-value object.
+                 */
+                entity: {
+                [key: string]: DataType;
+                };
+                /**
+                 * record property info.
+                 */
+                info: {
+                [key: string]: GC.Spread.Report.IEntityFieldInfo
+                };
+            }
+
+
             export interface IReportOptions{
                 dirtyStyle?: GC.Spread.Sheets.Style;
                 printAllPages?: boolean;
             }
 
 
+            export interface IReportSheetDataChangedEventArgs{
+                sheet: GC.Spread.Report.ReportSheet;
+                sheetName: string;
+                type: "update" | "insert" | "delete";
+                row: number;
+                col: number;
+            }
+
+
+            export interface IReportSheetDataChangingEventArgs{
+                sheet: GC.Spread.Report.ReportSheet;
+                sheetName: string;
+                type: "update" | "insert" | "delete";
+                row: number;
+                col: number;
+                cancel: boolean;
+                oldValue?: any;
+                newValue?: any;
+            }
+
+
+            export interface IReportSheetRecordsSubmittedEventArgs{
+                sheet: GC.Spread.Report.ReportSheet;
+                sheetName: string;
+                /**
+                 * include updated and inserted records.
+                 */
+                updateSuccessRecords: GC.Spread.Report.IRecord[];
+                updateFailedRecords: GC.Spread.Report.IFailedRecord[];
+                /**
+                 * include deleted records.
+                 */
+                deleteSuccessRecords: GC.Spread.Report.IRecord[];
+                deleteFailedRecords: GC.Spread.Report.IFailedRecord[];
+            }
+
+
+            export interface IReportSheetRecordsSubmittingEventArgs{
+                sheet: GC.Spread.Report.ReportSheet;
+                sheetName: string;
+                cancel: boolean;
+            }
+
+
             export interface IRowLayoutSetting{
                 type: 'RowLayout';
                 dataRange: string;
@@ -10958,6 +11282,7 @@ declare module GC{
                 canBreakWhenPaging?: boolean;
                 repeatContentWhenPaging?: boolean;
                 defaultValue?: GC.Spread.Report.Formula;
+                autoFit?: 'None' | 'Row' | 'Column';
             }
 
 
@@ -10992,6 +11317,29 @@ declare module GC{
                 string
             
 
+            /**
+             * @typedef GC.Spread.Report.Change
+             * @property {GC.Spread.Report.IRecord[]} records - The updated and inserted records.
+             * @property {GC.Spread.Report.IRecord[]} deleteRecords - The deleted records.
+             * @property {GC.Spread.Report.IWriteBackRule} rule - The report sheet dataEntry write back rule.
+             */
+            export type Change = 
+                {
+                    /**
+                     * The updated and inserted records.
+                     */
+                    records: GC.Spread.Report.IRecord[];
+                    /**
+                     * The deleted records.
+                     */
+                    deleteRecords: GC.Spread.Report.IRecord[];
+                    /**
+                     * The report sheet dataEntry write back rule.
+                     */
+                    rule: GC.Spread.Report.IWriteBackRule;
+                }
+            
+
             /**
              * @typedef GC.Spread.Report.ConditionRule
              * @type {{ column: string; operator: GC.Spread.Report.ConditionRuleOperator; } & (GC.Spread.Report.IConditionRuleValueType | GC.Spread.Report.IConditionRuleCellType | GC.Spread.Report.IConditionRuleDataColumnType | GC.Spread.Report.IConditionRuleParameterType | GC.Spread.Report.IConditionRuleFormulaType)}
@@ -11017,6 +11365,22 @@ declare module GC{
                 GC.Spread.Report.IWriteBackRule[]
             
 
+            /**
+             * @typedef GC.Spread.Report.DataType
+             * @type {number | string | Date | boolean}
+             */
+            export type DataType = 
+                number | string | Date | boolean
+            
+
+            /**
+             * @typedef GC.Spread.Report.FieldState
+             * @type {'normal' | 'new' | 'updated' | 'deleted'}
+             */
+            export type FieldState = 
+                'normal' | 'new' | 'updated' | 'deleted'
+            
+
             /**
              * @typedef GC.Spread.Report.FilterCondition
              * @type {GC.Spread.Report.ConditionRule | GC.Spread.Report.FilterConditionFormulaRule | GC.Spread.Report.IFilterConditionAndRelationType | GC.Spread.Report.IFilterConditionOrRelationType}
@@ -11231,6 +11595,48 @@ declare module GC{
                  * ```
                  */
                 addRecordAt(row: number,  col: number): void;
+                /**
+                 * Binds an event to the report sheet.
+                 * @param {string} type The event type.
+                 * @param {Object} data Optional. Specifies additional data to pass along to the function.
+                 * @param {Function} fn Specifies the function to run when the event occurs.
+                 * @example
+                 * ```
+                 * //This example bind the ReportSheetDataChanged event into report sheet.
+                 * const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
+                 * report.renderMode("Design");
+                 * const templateSheet = report.getTemplate();
+                 * templateSheet.setTemplateCell(0, 0, {
+                 *    binding: "Orders[orderId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setTemplateCell(0, 1, {
+                 *    binding: "Orders[customerId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setDataEntrySetting([ {
+                 *    name: "Write Back Rule 1",
+                 *    tableName: "Orders",
+                 *    fields: [
+                 *        { dbColumnName: "orderId", formula: "A1", isPrimary: true },
+                 *        { dbColumnName: "customerId", formula: "B1" },
+                 *    ],
+                 *    includeUnmodified: false,
+                 *    skipRecordWithEmptyValue: false
+                 * } ]);
+                 * report.renderMode("Preview");
+                 * report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanged, (event, args) => {
+                 *     let reportsheet = args.sheet, changes = reportsheet.getChanges();
+                 *     if (allowSubmit(changes)) { // users can submit or drop this changing.
+                 *          reportsheet.submit(); // submit changes.
+                 *     } else {
+                 *          reportsheet.refresh(); // drop changes.
+                 *     }
+                 * });
+                 * // after reportsheet edit / update / delete records in UI will trigger ReportSheetDataChanged event.
+                 * ```
+                 */
+                bind(type: string,  data?: any,  fn?: Function): void;
                 /**
                  * Get or set the current page index.
                  * @param {number} page The page index (0 base).
@@ -11329,6 +11735,43 @@ declare module GC{
                  * ```
                  */
                 getCells(templateRow: number,  templateCol: number,  currentRow?: number,  currentCol?: number): GC.Spread.Report.IDataCell[];
+                /**
+                 * Return the report sheet data entry mode update insert and delete data changes.
+                 * @returns {GC.Spread.Report.Change[]} Returns the reportsheet update insert and delete data changes.
+                 * @example
+                 * ```
+                 * const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
+                 * report.renderMode("Design");
+                 * const templateSheet = report.getTemplate();
+                 * templateSheet.setTemplateCell(0, 0, {
+                 *    binding: "Orders[customerId]",
+                 *    type: "Group",
+                 *    showCollapseButton: true
+                 * });
+                 * templateSheet.setTemplateCell(0, 1, {
+                 *    binding: "Orders[orderId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setDataEntrySetting([ {
+                 *    name: "Write Back Rule 1",
+                 *    tableName: "Orders",
+                 *    fields: [
+                 *        { dbColumnName: "orderId", formula: "A1", isPrimary: true },
+                 *        { dbColumnName: "customerId", formula: "B1" },
+                 *    ],
+                 *    includeUnmodified: false,
+                 *    skipRecordWithEmptyValue: false
+                 * } ]);
+                 * report.renderMode("Preview");
+                 * report.updateCellValue(0, 1, "test");
+                 * report.addRecordAt(1, 0);
+                 * report.updateCellValue(2, 0, 111);
+                 * report.updateCellValue(2, 1, "test2");
+                 * report.deleteRecordAt(3, 0);
+                 * report.getChanges(); // one delete record and two update records.
+                 * ```
+                 */
+                getChanges(): GC.Spread.Report.Change[];
                 /**
                  * Return the collapse state of the specified cell.
                  * @param {number} row The row index.
@@ -11818,6 +12261,44 @@ declare module GC{
                  * ```
                  */
                 toWorksheet(): GC.Spread.Sheets.Worksheet;
+                /**
+                 * Removes the binding of an event to the report sheet.
+                 * @param {string} type The event type.
+                 * @param {Function} fn Specifies the function for which to remove the binding.
+                 * @example
+                 * ```
+                 * //This example unbind the ReportSheetDataChanged event after first data changing.
+                 * const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
+                 * report.renderMode("Design");
+                 * const templateSheet = report.getTemplate();
+                 * templateSheet.setTemplateCell(0, 0, {
+                 *    binding: "Orders[orderId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setTemplateCell(0, 1, {
+                 *    binding: "Orders[customerId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setDataEntrySetting([ {
+                 *    name: "Write Back Rule 1",
+                 *    tableName: "Orders",
+                 *    fields: [
+                 *        { dbColumnName: "orderId", formula: "A1", isPrimary: true },
+                 *        { dbColumnName: "customerId", formula: "B1" },
+                 *    ],
+                 *    includeUnmodified: false,
+                 *    skipRecordWithEmptyValue: false
+                 * } ]);
+                 * report.renderMode("Preview");
+                 * report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanged, (event, args) => {
+                 *     let reportsheet = args.sheet, changes = reportsheet.getChanges();
+                 *     console.log(changes);
+                 *     reportsheet.unbind(GC.Spread.Sheets.Events.ReportSheetDataChanged);
+                 * });
+                 * // after reportsheet edit / update / delete records in UI will trigger ReportSheetDataChanged event.
+                 * ```
+                 */
+                unbind(type: string,  fn?: Function): void;
                 /**
                  * Update the specified cell's value.
                  * @param {number} row The row index.
@@ -12074,6 +12555,33 @@ declare module GC{
             }
 
 
+            export interface IAddColumnButtonOption{
+                visible?: boolean;
+                command?: string;
+                style?: GC.Spread.Sheets.Style;
+                width?: number;
+                tooltip?: string;
+            }
+
+
+            export interface IAddRowButtonOption{
+                visible?: boolean;
+                command?: string;
+                style?: GC.Spread.Sheets.Style;
+                height?: number;
+                tooltip?: string;
+            }
+
+
+            export interface IAppDocProps{
+                manager?: string;
+                company?: string;
+                hyperlinkBase?: string;
+                totalTime?: number;
+                template?: string;
+            }
+
+
             export interface IBaseSpreadOption{
                 width?: number;
                 height?: number;
@@ -12088,6 +12596,11 @@ declare module GC{
             }
 
 
+            export interface IBuiltInFileIcons{
+                [key: string]: string;
+            }
+
+
             export interface IButtonClickedEventArgs{
                 sheet: GC.Spread.Sheets.Worksheet;
                 sheetName: string;
@@ -12328,6 +12841,22 @@ declare module GC{
             }
 
 
+            export interface ICoreDocProps{
+                title?: string;
+                subject?: string;
+                creator?: string;
+                keywords?: string;
+                description?: string;
+                category?: string;
+                contentStatus?: string;
+                modified?: Date;
+                created?: Date;
+                lastModifiedBy?: string;
+                lastPrinted?: Date;
+                revision?: number;
+            }
+
+
             export interface ICornerFold{
                 size?: number;
                 position?: GC.Spread.Sheets.CornerPosition;
@@ -12335,6 +12864,22 @@ declare module GC{
             }
 
 
+            export interface ICustomDocPropsManager{
+                all: (props?: GC.Spread.Sheets.ICustomDocumentProperty[]) => GC.Spread.Sheets.ICustomDocumentProperty[];
+                get: (propName: string) => GC.Spread.Sheets.ICustomDocumentProperty;
+                add: (propName: string, value: GC.Spread.Sheets.CustomDocumentPropertyValueType, isLinkTarget?: boolean) => void;
+                remove: (propName: string) => void;
+                clear: () => void;
+            }
+
+
+            export interface ICustomDocumentProperty{
+                name: string;
+                value?: GC.Spread.Sheets.CustomDocumentPropertyValueType;
+                linkTarget?: string;
+            }
+
+
             export interface ICustomSortInfo{
                 compareFunction: (value1: any, value2: any) => number;
                 ascending: boolean;
@@ -12356,6 +12901,13 @@ declare module GC{
             }
 
 
+            export interface IDocProps{
+                coreDocProps?:  GC.Spread.Sheets.ICoreDocProps;
+                appDocProps?:  GC.Spread.Sheets.IAppDocProps;
+                customDocPropsManager:  GC.Spread.Sheets.ICustomDocPropsManager;
+            }
+
+
             export interface IDragDropBlockCompletedEventArgs{
                 sheet: GC.Spread.Sheets.Worksheet;
                 sheetName: string;
@@ -12861,7 +13413,7 @@ declare module GC{
 
             export interface IPivotTableChangedEventArgs{
                 pivotTableName: string;
-                type: "filter" | "sort" | "collapse" | "fieldChanged";
+                type: "filter" | "sort" | "collapse" | "fieldChanged" | "summarizedValueBy" | "showValueAs" | "dataPositionChanged" | "viewChanged" | "grandTotal" | "showNoData" | "group";
                 fieldName: string;
                 value?: boolean;
                 sortType?: number;
@@ -13343,6 +13895,7 @@ declare module GC{
 
 
             export interface IWorkBookDefaultOptions{
+                allowDragHeaderToMove?: GC.Spread.Sheets.AllowDragHeaderToMove;
                 allowUserDragDrop?: boolean;
                 allowUserDragFill?: boolean;
                 allowUserZoom?: boolean;
@@ -13390,6 +13943,7 @@ declare module GC{
                 iterativeCalculationMaximumChange?: number;
                 autoFitType?: GC.Spread.Sheets.AutoFitType;
                 calcOnDemand?: boolean;
+                incrementalCalculation?: boolean;
                 allowCopyPasteExcelStyle?: boolean;
                 allowExtendPasteRange?: boolean;
                 copyPasteHeaderOptions?: GC.Spread.Sheets.CopyPasteHeaderOptions;
@@ -13405,6 +13959,7 @@ declare module GC{
                 font?: string;
                 customList?: string[][];
                 defaultSheetTabStyles?: GC.Spread.Sheets.SheetTabStyles;
+                builtInFileIcons?: GC.Spread.Sheets.IBuiltInFileIcons;
             }
 
 
@@ -13428,6 +13983,10 @@ declare module GC{
                  * Whether to allow the user to drag and drop range data.
                  */
                 allowUserDragDrop: boolean;
+                /**
+                 * Specifies how to allow drag header to move.
+                 */
+                allowDragHeaderToMove: GC.Spread.Sheets.AllowDragHeaderToMove;
                 /**
                  * Whether to allow the user to drag fill a range.
                  */
@@ -13608,6 +14167,10 @@ declare module GC{
                  * Whether to calculate formulas only when they are demanded.
                  */
                 calcOnDemand: boolean;
+                /**
+                 * Whether to incremental calculate formulas without blocking UI.
+                 */
+                incrementalCalculation: boolean;
                 /**
                  * Whether to calculate functions with dynamic reference.
                  */
@@ -13684,6 +14247,10 @@ declare module GC{
                  * The default sheet tab styles.
                  */
                 defaultSheetTabStyles: GC.Spread.Sheets.SheetTabStyles;
+                /**
+                 * All built-in file icons.
+                 */
+                builtInFileIcons: GC.Spread.Sheets.IBuiltInFileIcons;
             }
 
 
@@ -13791,6 +14358,18 @@ declare module GC{
                  * Indicates whether the unknown formulas could be included in sheet json data.
                  */
                 keepUnknownFormulas: boolean;
+                /**
+                 * The add row button's options.
+                 */
+                addRowButtonOption?: GC.Spread.Sheets.IAddRowButtonOption;
+                /**
+                 * The add column button's options.
+                 */
+                addColumnButtonOption?: GC.Spread.Sheets.IAddColumnButtonOption;
+                /**
+                 * Indicates whether the sheet is rendered from right to left.
+                 */
+                rightToLeft: boolean;
             }
 
 
@@ -13823,6 +14402,15 @@ declare module GC{
                 }
             
 
+            /**
+             * @typedef GC.Spread.Sheets.CustomDocumentPropertyValueType
+             * @type {string|number|boolean|Date}
+             * @description Custom Document property type.
+             */
+            export type CustomDocumentPropertyValueType = 
+                string|number|boolean|Date
+            
+
             /**
              * @typedef GC.Spread.Sheets.ExportCsvOptions
              * @property {GC.Spread.Sheets.FileType} fileType - The file type.
@@ -13879,6 +14467,7 @@ declare module GC{
                     rowHeadersAsFrozenColumns?: boolean;
                     columnHeadersAsFrozenRows?: boolean;
                     includeAutoMergedCells?: boolean;
+                    saveR1C1Formula?: boolean;
                 }
             
 
@@ -13990,6 +14579,7 @@ declare module GC{
              * @property {boolean} [fullRecalc] - Whether to calculate after loading the json data, false by default.
              * @property {boolean} [dynamicReferences] - Whether to calculate functions with dynamic reference, default true.
              * @property {boolean} [calcOnDemand] - Whether to calculate formulas only when they are demanded, default false.
+             * @property {boolean} [incrementalCalculation] - Whether to incremental calculate formulas without blocking UI, default false.
              * @property {boolean} [includeUnusedStyles] - Whether to include the unused name style when converting excel xml to the json, default true.
              * @property {string} [password] - The password to open the workbook.
              * @property {GC.Spread.Sheets.OpenMode} [openMode] - The open mode of normal, lazy and incremental. By default is normal.
@@ -14004,6 +14594,7 @@ declare module GC{
                     fullRecalc?: boolean;
                     dynamicReferences?: boolean;
                     calcOnDemand?: boolean;
+                    incrementalCalculation?: boolean;
                     includeUnusedStyles?: boolean;
                     password?: string;
                     openMode?: GC.Spread.Sheets.OpenMode;
@@ -14018,6 +14609,7 @@ declare module GC{
              * @property {boolean} [fullRecalc] - Whether to calculate after loading the json data, false by default.
              * @property {boolean} [dynamicReferences] - Whether to calculate functions with dynamic reference, default true.
              * @property {boolean} [calcOnDemand] - Whether to calculate formulas only when they are demanded, default false.
+             * @property {boolean} [incrementalCalculation] - Whether to incremental calculate formulas without blocking UI, default false.
              * @property {boolean} [includeUnusedStyles] - Whether to include the unused name style when converting excel xml to the json, default true.
              * @property {GC.Spread.Sheets.OpenMode} [openMode] - The open mode of normal, lazy and incremental. By default is normal.
              * @property {GC.Spread.Sheets.ProgressFunctionType} [progress] - The progress callback function for each open mode.
@@ -14029,6 +14621,7 @@ declare module GC{
                     fullRecalc?: boolean;
                     dynamicReferences?: boolean;
                     calcOnDemand?: boolean;
+                    incrementalCalculation?: boolean;
                     includeUnusedStyles?: boolean;
                     openMode?: GC.Spread.Sheets.OpenMode;
                     progress?: GC.Spread.Sheets.ProgressFunctionType;
@@ -14090,6 +14683,7 @@ declare module GC{
              * @property {boolean} [includeCalcModelCache] - Whether to include the extra data of calculation. Can be faster when open the file with those data, default false.
              * @property {boolean} [includeUnusedNames] - Whether to include the unused custom name when do save, default true.
              * @property {boolean} [includeEmptyRegionCells] - Whether to include any empty cells(cells with no data or only style) outside the used data range, default true.
+             * @property {boolean} [saveR1C1Formula] - Whether to save the r1c1 formula in the file, only works in sjs file type, default false.
              */
             export type SaveOptions = 
                 {
@@ -14101,6 +14695,7 @@ declare module GC{
                     includeEmptyRegionCells?: boolean;
                     includeAutoMergedCells?: boolean;
                     includeCalcModelCache?: boolean;
+                    saveR1C1Formula?: boolean;
                 }
             
 
@@ -14113,6 +14708,29 @@ declare module GC{
                     [sheetTabState in GC.Spread.Sheets.SheetTabState]?: GC.Spread.Sheets.ISheetTabStyle;
                 }
             
+            /**
+             * Specifies how to allow drag header to move.
+             * @enum {number}
+             */
+            export enum AllowDragHeaderToMove{
+                /**
+                 * Specifies that no drag header to move allowed.
+                 */
+                none= 0,
+                /**
+                 * Specifies that only the column header allow to move.
+                 */
+                column= 1,
+                /**
+                 * Specifies that only the row header allow to move.
+                 */
+                row= 2,
+                /**
+                 * Specifies that both column and row header allow to move.
+                 */
+                both= 3
+            }
+
             /**
              * Sheet tab all sheets list button visible option.
              * @enum {number}
@@ -15206,7 +15824,11 @@ declare module GC{
                 /**
                  * Specifies a data object cell type can't insert a data to its adjacent cells on the right.
                  */
-                dataObjectCellTypeInsertData= 16
+                dataObjectCellTypeInsertData= 16,
+                /**
+                 * The specific event type that is triggered when the size of a file uploaded via the file picker exceeds the limit.
+                 */
+                sizeLimitExceeded= 18
             }
 
             /**
@@ -15401,6 +16023,49 @@ declare module GC{
                 slantedDashDot= 13
             }
 
+            /**
+             * Represent the list style type of rich text list item
+             * @enum {number}
+             */
+            export enum ListType{
+                /**
+                 * Indicates the unordered list item, list style type is disc.
+                 */
+                disc= 0,
+                /**
+                 * Indicates the unordered list item, list style type is circle.
+                 */
+                circle= 1,
+                /**
+                 * Indicates the unordered list item, list style type is square.
+                 */
+                square= 2,
+                /**
+                 * Indicates the ordered list item, list style type is decimal.
+                 */
+                decimal= 3,
+                /**
+                 * Indicates the ordered list item, list style type is lowerAlpha.
+                 */
+                lowerAlpha= 4,
+                /**
+                 * Indicates the ordered list item, list style type is upperAlpha.
+                 */
+                upperAlpha= 5,
+                /**
+                 * Indicates the ordered list item, list style type is lowerRoman.
+                 */
+                lowerRoman= 6,
+                /**
+                 * Indicates the ordered list item, list style type is upperRoman.
+                 */
+                upperRoman= 7,
+                /**
+                 * Indicates the ordered list item, list style type is lowerGreek.
+                 */
+                lowerGreek= 8
+            }
+
             /**
              * Change display mode when date/number data width longer than column width.
              * @enum {number}
@@ -16106,6 +16771,31 @@ declare module GC{
                 none= 0
             }
 
+            /**
+             * Defines the type of the text direction.
+             * @enum {number}
+             * @example
+             * ```
+             * //This example uses the TextDirectionType enumeration.
+             * activeSheet.getCell(0, 0).textDirection(GC.Spread.Sheets.TextDirectionType.rightToLeft);
+             * activeSheet.getRange(1, -1, 1, -1).textDirection(GC.Spread.Sheets.TextDirectionType.rightToLeft);
+             * var style = new GC.Spread.Sheets.Style();
+             * style.textDirection = GC.Spread.Sheets.TextDirectionType.rightToLeft;
+             * activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
+             * ```
+             */
+            export enum TextDirectionType{
+                /** Specifies the text direction is context dependent, which is determined by scanning the text for the first non-whitespace character: if it is a strong right-to-left character, the text direction is right-to-left; otherwise, the text direction is left-to-right.
+                 */
+                context= 0,
+                /** Specifies the text direction is left-to-right in the cell, as in English.
+                 */
+                leftToRight= 1,
+                /** Specifies the text direction is right-to-left in the cell, as in Arabic or Hebrew.
+                 */
+                rightToLeft= 2
+            }
+
             /**
              * Worksheet used range
              * @enum {number}
@@ -16754,6 +17444,16 @@ declare module GC{
                  * ```
                  */
                 height(value?: number): any;
+                /**
+                 * Gets or sets whether the cell formula is visible.
+                 * @param {boolean} [value] Set to `true` to hidden the cell formula.
+                 * @returns {boolean|GC.Spread.Sheets.CellRange} If no value is set, returns whether the cell formula is hidden; otherwise, returns the cell.
+                 * @example
+                 * ```
+                 * activeSheet.getRange(-1, 3, -1, 1, GC.Spread.Sheets.SheetArea.viewport).hidden(true);
+                 * ```
+                 */
+                hidden(value?: boolean): any;
                 /**
                  * Gets or sets the imeMode of the cell.
                  * @param {GC.Spread.Sheets.ImeMode} [value] The cell imeMode.
@@ -17012,6 +17712,16 @@ declare module GC{
                  * ```
                  */
                 textDecoration(value?: GC.Spread.Sheets.TextDecorationType): any;
+                /**
+                 * Gets or sets the type of the direction added to the cell's text.
+                 * @param {GC.Spread.Sheets.TextDirectionType} [value] The type of the direction.
+                 * @returns {GC.Spread.Sheets.TextDirectionType|GC.Spread.Sheets.CellRange} If no value is set, returns the type of the direction; otherwise, returns the cell.
+                 * @example
+                 * ```
+                 * activeSheet.getRange(1, -1, 1, -1).textDirection(GC.Spread.Sheets.TextDirectionType.rightToLeft);
+                 * ```
+                 */
+                textDirection(value?: GC.Spread.Sheets.TextDirectionType): any;
                 /**
                  * Gets or sets the text indent of the cell.
                  * @param {number} [value] The cell text indent.
@@ -17412,6 +18122,75 @@ declare module GC{
                 textColor2(value?: string): any;
             }
 
+            export class CustomDocPropsManager{
+                /**
+                 * Represents a custom document property manager. It can manage custom properties on all documents.
+                 * @class
+                 * @param {GC.Spread.Sheets.Workbook} workbook The workbook.
+                 */
+                constructor(workbook: GC.Spread.Sheets.Workbook);
+                /**
+                 * Set custom document property.
+                 * @param {string} propName Property name.
+                 * @param {GC.Spread.Sheets.CustomDocumentPropertyValueType} value Property value.
+                 * @param {boolean} isLinkTarget Is it a content link.
+                 * @example
+                 * ```
+                 * spread.docProps.customDocPropsManager.add('prop1', '1');
+                 * spread.docProps.customDocPropsManager.add('prop2', 'CellAlias', true);
+                 * ```
+                 */
+                add(propName: string,  value: GC.Spread.Sheets.CustomDocumentPropertyValueType,  isLinkTarget?: boolean): void;
+                /**
+                 * Get or set custom document properties.
+                 * @param {GC.Spread.Sheets.ICustomDocumentProperty[]} props Custom document properties.
+                 * @returns {GC.Spread.Sheets.ICustomDocumentProperty[] | undefined} Custom document properties.
+                 * @example
+                 * ```
+                 * spread.docProps.customDocPropsManager.all([{ name: 'prop1', value: '1' }]);
+                 * spread.docProps.customDocPropsManager.all();
+                 * ```
+                 */
+                all(props?: GC.Spread.Sheets.ICustomDocumentProperty[]): GC.Spread.Sheets.ICustomDocumentProperty[] | undefined;
+                /**
+                 * Clear custom document properties.
+                 * @example
+                 * ```
+                 * spread.docProps.customDocPropsManager.clear();
+                 * ```
+                 */
+                clear(): void;
+                /**
+                 * Get custom document property by property name.
+                 * @param {string} propName Property name.
+                 * @returns {GC.Spread.Sheets.ICustomDocumentProperty} Custom document property.
+                 * @example
+                 * ```
+                 * spread.docProps.customDocPropsManager.all([{ name: 'prop1', value: '1' }]);
+                 * spread.docProps.customDocPropsManager.get('prop1');
+                 * ```
+                 */
+                get(propName: string): GC.Spread.Sheets.ICustomDocumentProperty | undefined;
+                /**
+                 * Remove custom document property by property name.
+                 * @param {string} propName Property name.
+                 * @example
+                 * ```
+                 * spread.docProps.customDocPropsManager.remove('prop1');
+                 * ```
+                 */
+                remove(propName: string): void;
+            }
+
+            export class CustomThemeManagerBase{
+                /**
+                 * Represents a custom theme manager that can manage all custom themes.
+                 * @class
+                 * @param {GC.Spread.Sheets.Workbook} workbook The workbook.
+                 */
+                constructor(workbook: GC.Spread.Sheets.Workbook);
+            }
+
             export class Events{
                 /**
                  * Defines the events supported in SpreadJS.
@@ -17496,6 +18275,31 @@ declare module GC{
                  * ```
                  */
                 static ButtonClicked: string;
+                /**
+                 * Occurs when the calculate with incrementalCalculation.
+                 * @name GC.Spread.Sheets.Workbook#CalculationProgress
+                 * @event
+                 * @param eventParam *number* `totalCells` The count of total calculate cells.
+                 * @param eventParam *number* `pendingCells` The count of cells needed to be calculated.
+                 * @param eventParam *number* `iterate` The count of iterative calculation has done, only available when the iterative calculation.
+                 * @example
+                 * ```
+                 * //This example uses the CalculationProgress event, to log the calculation progress.
+                 * spread.options.incrementalCalculation = true;
+                 * spread.bind(GC.Spread.Sheets.Events.CalculationProgress, function (e, info) {
+                 *      var msg = "Calculate ";
+                 *      if (info.pendingCells === 0) {
+                 *          msg += "finished";
+                 *      } else if (info.iterate >= 0) {
+                 *          msg += info.pendingCells + " cells in iterative calculation round " + info.iterate;
+                 *      } else {
+                 *          msg += (info.totalCells - info.pendingCells) + "/" + info.totalCells + "cells";
+                 *      }
+                 *      console.log(msg)
+                 * });
+                 * ```
+                 */
+                static CalculationProgress: string;
                 /**
                  * Occurs when a change is made to a cell in this sheet that may require the cell to be repainted.
                  * @name GC.Spread.Sheets.Worksheet#CellChanged
@@ -18384,11 +19188,11 @@ declare module GC{
                  */
                 static PictureSelectionChanged: string;
                 /**
-                 * After PivotTable filter/sort/collapse/fieldChanged.
+                 * After PivotTable filter/sort/collapse/fieldChanged/grandTotal/showNoData/group.
                  * @name GC.Spread.Sheets.Worksheet#PivotTableChanged
                  * @event
                  * @param eventParam *string* `pivotTableName` The PivotTable's name.
-                 * @param eventParam *string* `type` The specific operation name("filter" | "sort" | "collapse" | "fieldChanged" | "summarizedValueBy" | "showValueAs" | "dataPositionChanged" | "viewChanged").
+                 * @param eventParam *string* `type` The specific operation name("filter" | "sort" | "collapse" | "fieldChanged" | "summarizedValueBy" | "showValueAs" | "dataPositionChanged" | "viewChanged" | "grandTotal" | "showNoData" | "group").
                  * @param eventParam *string* `[fieldName]` Changed fieldName.
                  * @param eventParam *string* `[sourceName]` Changed field sourceName.
                  * @param eventParam *boolean* `[oldValue]` PivotTable changes the value of the previous attribute(collapse, summarizedValueBy, showValueAs).
@@ -18659,6 +19463,198 @@ declare module GC{
                  * ```
                  */
                 static RangeSorting: string;
+                /**
+                 * Occurs when the report sheet data has changed by update, insert or delete. Allows submitting data changes to the server.
+                 * @name GC.Spread.Report.ReportSheet#ReportSheetDataChanged
+                 * @event
+                 * @param eventParam *{@link GC.Spread.Report.ReportSheet}* `sheet` The report sheet that triggered the event.
+                 * @param eventParam *string* `sheetName` The report sheet's name.
+                 * @param eventParam *string* `type` The report sheet change type. insert, update or delete.
+                 * @param eventParam *number* `row` The changed row index.
+                 * @param eventParam *number* `col` The changed column index.
+                 * @example
+                 * ```
+                 * //This example uses the ReportSheetDataChanged event.
+                 * const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
+                 * report.renderMode("Design");
+                 * const templateSheet = report.getTemplate();
+                 * templateSheet.setTemplateCell(0, 0, {
+                 *    binding: "Orders[orderId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setTemplateCell(0, 1, {
+                 *    binding: "Orders[customerId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setDataEntrySetting([ {
+                 *    name: "Write Back Rule 1",
+                 *    tableName: "Orders",
+                 *    fields: [
+                 *        { dbColumnName: "orderId", formula: "A1", isPrimary: true },
+                 *        { dbColumnName: "customerId", formula: "B1" },
+                 *    ],
+                 *    includeUnmodified: false,
+                 *    skipRecordWithEmptyValue: false
+                 * } ]);
+                 * report.renderMode("Preview");
+                 * report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanged, (event, args) => {
+                 *     let reportsheet = args.sheet, changes = reportsheet.getChanges();
+                 *     if (allowSubmit(changes)) { // users can submit or drop this changing.
+                 *          reportsheet.submit(); // submit changes.
+                 *     } else {
+                 *          reportsheet.refresh(); // drop changes.
+                 *     }
+                 * });
+                 * // after reportsheet edit / update / delete records in UI will trigger ReportSheetDataChanged event.
+                 * // users can submit into server or drop this changing in this moment.
+                 * ```
+                 */
+                static ReportSheetDataChanged: string;
+                /**
+                 * Occurs when the report sheet is changing by update, insert or delete. Allows validating or cancellation of the data operation.
+                 * @name GC.Spread.Report.ReportSheet#ReportSheetDataChanging
+                 * @event
+                 * @param eventParam *{@link GC.Spread.Report.ReportSheet}* `sheet` The report sheet that triggered the event.
+                 * @param eventParam *string* `sheetName` The report sheet's name.
+                 * @param eventParam *string* `type` The report sheet change type. insert, update or delete.
+                 * @param eventParam *number* `row` The changing row index.
+                 * @param eventParam *number* `col` The changing column index.
+                 * @param eventParam *any* `oldValue` The update changing old value.
+                 * @param eventParam *any* `newValue` The update changing new value.
+                 * @param eventParam *boolean* `cancel` Whether the report sheet changing operation should be canceled.
+                 * @example
+                 * ```
+                 * //This example uses the ReportSheetDataChanging event.
+                 * const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
+                 * report.renderMode("Design");
+                 * const templateSheet = report.getTemplate();
+                 * templateSheet.setTemplateCell(0, 0, {
+                 *    binding: "Orders[orderId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setTemplateCell(0, 1, {
+                 *    binding: "Orders[customerId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setDataEntrySetting([ {
+                 *    name: "Write Back Rule 1",
+                 *    tableName: "Orders",
+                 *    fields: [
+                 *        { dbColumnName: "orderId", formula: "A1", isPrimary: true },
+                 *        { dbColumnName: "customerId", formula: "B1" },
+                 *    ],
+                 *    includeUnmodified: false,
+                 *    skipRecordWithEmptyValue: false
+                 * } ]);
+                 * report.renderMode("Preview");
+                 * report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanging, (event, args) => {
+                 *     let { type, row, col, oldValue, newValue } = args;
+                 *     if (allowChange(type, row, col, oldValue, newValue)) { // user validate this changing operation here.
+                 *         console.log(`${type} row: ${row}, col: ${col} from ${oldValue} to ${newValue}`);
+                 *     } else {
+                 *         args.cancel = true;
+                 *     }
+                 * });
+                 * // reportsheet edit / update / delete records in UI will trigger ReportSheetDataChanging event.
+                 * // users can also cancel the operation here if the changing is invalid.
+                 * ```
+                 */
+                static ReportSheetDataChanging: string;
+                /**
+                 * Occurs after the report sheet submitted the changes to server.  Allow user to provide UI feedback of the submit results from the server.
+                 * @name GC.Spread.Report.ReportSheet#ReportSheetRecordsSubmitted
+                 * @event
+                 * @param eventParam *{@link GC.Spread.Report.ReportSheet}* `sheet` The report sheet that triggered the event.
+                 * @param eventParam *string* `sheetName` The report sheet's name.
+                 * @param eventParam *{@link GC.Spread.Report.IRecord[]}* `updateSuccessRecords` Successful update or insert records.
+                 * @param eventParam *{@link GC.Spread.Report.IFailedRecord[]}* `updateFailedRecords` Failing update or insert records.
+                 * @param eventParam *{@link GC.Spread.Report.IRecord[]}* `deleteSuccessRecords` Successful delete records.
+                 * @param eventParam *{@link GC.Spread.Report.IFailedRecord[]}* `deleteFailedRecords` Failing delete records.
+                 * @example
+                 * ```
+                 * //This example uses the ReportSheetDataChanged event.
+                 * const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
+                 * report.renderMode("Design");
+                 * const templateSheet = report.getTemplate();
+                 * templateSheet.setTemplateCell(0, 0, {
+                 *    binding: "Orders[orderId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setTemplateCell(0, 1, {
+                 *    binding: "Orders[customerId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setDataEntrySetting([ {
+                 *    name: "Write Back Rule 1",
+                 *    tableName: "Orders",
+                 *    fields: [
+                 *        { dbColumnName: "orderId", formula: "A1", isPrimary: true },
+                 *        { dbColumnName: "customerId", formula: "B1" },
+                 *    ],
+                 *    includeUnmodified: false,
+                 *    skipRecordWithEmptyValue: false
+                 * } ]);
+                 * report.renderMode("Preview");
+                 * report.bind(GC.Spread.Sheets.Events.ReportSheetRecordsSubmitted, (event, args) => {
+                 *     let { updateSuccessRecords, deleteSuccessRecords, updateFailedRecords, deleteFailedRecords } = args;
+                 *     for (let record of updateFailedRecords) {
+                 *         for (let fieldKey in record.info) {
+                 *             if (record.info.hasOwnproperty(fieldKey)) {
+                 *                 let recordDetail = record.info[fieldKey];
+                 *                 if (recordDetail.state === "updated") {
+                 *                     // user console the failed detail info.
+                 *                     console.log(`Updated failed in row: ${recordDetail.row} col: ${recordDetail.col}, oldValue: ${recordDetail.oldValue}, reason is ${record.reason}`);
+                 *                 }
+                 *             }
+                 *         }
+                 *     }
+                 * });
+                 * // after submitting into the server, users can get the all success and failed records result.
+                 * ```
+                 */
+                static ReportSheetRecordsSubmitted: string;
+                /**
+                 * Occurs before the report sheet submitting changes to server. Allows final validation of all data changes or cancellign the operation.
+                 * @name GC.Spread.Report.ReportSheet#ReportSheetRecordsSubmitting
+                 * @event
+                 * @param eventParam *{@link GC.Spread.Report.ReportSheet}* `sheet` The report sheet that triggered the event.
+                 * @param eventParam *string* `sheetName` The report sheet's name.
+                 * @param eventParam *boolean* `cancel` Whether the report sheet submit operation should be canceled.
+                 * @example
+                 * ```
+                 * //This example uses the ReportSheetDataChanged event.
+                 * const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
+                 * report.renderMode("Design");
+                 * const templateSheet = report.getTemplate();
+                 * templateSheet.setTemplateCell(0, 0, {
+                 *    binding: "Orders[orderId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setTemplateCell(0, 1, {
+                 *    binding: "Orders[customerId]",
+                 *    type: "Group",
+                 * });
+                 * templateSheet.setDataEntrySetting([ {
+                 *    name: "Write Back Rule 1",
+                 *    tableName: "Orders",
+                 *    fields: [
+                 *        { dbColumnName: "orderId", formula: "A1", isPrimary: true },
+                 *        { dbColumnName: "customerId", formula: "B1" },
+                 *    ],
+                 *    includeUnmodified: false,
+                 *    skipRecordWithEmptyValue: false
+                 * } ]);
+                 * report.renderMode("Preview");
+                 * report.bind(GC.Spread.Sheets.Events.ReportSheetRecordsSubmitting, (event, args) => {
+                 *     let reportsheet = args.sheet, changes = reportsheet.getChanges();
+                 *     if (isInvalidate(changes)) {
+                 *         args.cancel = true;
+                 *     }
+                 * });
+                 * // after submitting the report chages, users can validate the changes and cancel this submit.
+                 * ```
+                 */
+                static ReportSheetRecordsSubmitting: string;
                 /**
                  * Occurs when a change is made to a row or range of rows in this sheet that may require the row or range of rows to be repainted.
                  * @name GC.Spread.Sheets.Worksheet#RowChanged
@@ -19518,6 +20514,15 @@ declare module GC{
                  * @returns {boolean} The readonly status.
                  */
                 isReadOnly(value?: boolean): boolean;
+                /**
+                 * Rename the name, the formula, and the comment of the custom name.
+                 * @param {string} [name] The new name of the custom name, all referenced formulas will be updated.
+                 * @param {string} [formula] The new formula of the custom name, all referenced cells will be recalculated.
+                 * @param {number} [baseRow] The row index of the new formula.
+                 * @param {number} [baseCol] The column index of the new formula.
+                 * @param {string} [comment] The new custom comment.
+                 */
+                set(name?: string,  formula?: string,  baseRow?: number,  baseCol?: number,  comment?: string): void;
             }
 
             export class PivotTableManager{
@@ -19534,7 +20539,7 @@ declare module GC{
                  * @param {number} row Indicates the pivot table start row position.
                  * @param {number} col Indicates the pivot table start col position.
                  * @param {GC.Spread.Pivot.PivotTableLayoutType} layout Indicates the pivot table layout.
-                 * @param {GC.Spread.Pivot.PivotTableTheme} theme Indicates the pivot table theme style.
+                 * @param {string | GC.Spread.Pivot.PivotTableTheme} theme Indicates the pivot table theme style name.
                  * @param {Object} options Indicates the options of pivot table.
                  * @param {boolean} [options.allowMultipleFiltersPerField] Indicates whether use multiple filter in one field.
                  * @param {boolean} [options.insertBlankLineAfterEachItem] Indicates whether insert a blank row at end of each item.
@@ -19575,7 +20580,7 @@ declare module GC{
                  * sheet.pivotTables.add("pivotTable_1", 'sourceData', 1, 1, layout, theme);
                  * ```
                  */
-                add(name: string,  sourceData: string | any[][],  row: number,  col: number,  layout?: GC.Spread.Pivot.PivotTableLayoutType,  theme?: GC.Spread.Pivot.PivotTableTheme,  options?: GC.Spread.Pivot.IPivotTableOption): GC.Spread.Pivot.PivotTable;
+                add(name: string,  sourceData: string | any[][],  row: number,  col: number,  layout?: GC.Spread.Pivot.PivotTableLayoutType,  theme?: string | GC.Spread.Pivot.PivotTableTheme,  options?: GC.Spread.Pivot.IPivotTableOption): GC.Spread.Pivot.PivotTable;
                 /**
                  * @description Get all pivot table in current worksheet.
                  * @return {GC.Spread.Pivot.PivotTable[]} return all pivot table in current worksheet.
@@ -19932,8 +20937,8 @@ declare module GC{
                 constructor(workbook: GC.Spread.Sheets.Workbook);
                 /**
                  * Add the status style of some or all sheet tabs in the spreadsheet.
-                 * @param {SheetTabState} state Sheet tab state.
-                 * @param {ISheetTabStyle} style Sheet tab style.
+                 * @param {GC.Spread.Sheets.SheetTabState} state Sheet tab state.
+                 * @param {GC.Spread.Sheets.ISheetTabStyle} style Sheet tab style.
                  * @param {string[]} sheetNames The array of sheet tab names to style.
                  * @example
                  * ```
@@ -19945,7 +20950,7 @@ declare module GC{
                 /**
                  * Get the status style of some or all sheet tabs in the spreadsheet.
                  * @param {string[]} sheetNames Array of names of sheet tabs to be queried.
-                 * @returns {ISheetNameTabStyleMap} The status style of some or all sheet tabs.
+                 * @returns {GC.Spread.Sheets.ISheetNameTabStyleMap} The status style of some or all sheet tabs.
                  * @example
                  * ```
                  * spread.sheetTabStyles.all(["Sheet1", "Sheet2"]);
@@ -19965,7 +20970,7 @@ declare module GC{
                 clear(sheetNames?: string[]): void;
                 /**
                  * Remove the status style of some or all sheet tabs in the spreadsheet.
-                 * @param {SheetTabState} state Sheet tab state.
+                 * @param {GC.Spread.Sheets.SheetTabState} state Sheet tab state.
                  * @param {string[]} sheetNames The worksheet tab name array corresponding to the state style needs to be deleted.
                  * @example
                  * ```
@@ -20015,12 +21020,7 @@ declare module GC{
                  * @param {string} [fontWeight] Specifies the font weight.
                  * @param {string} [fontSize] Specifies the font size.
                  * @param {string} [fontFamily] Specifies the font family.
-                 * @param {boolean} [applyFont] Only work for namedStyle, the boolean value indicates whether the font formatting applied.
-                 * @param {boolean} [applyFill] Only work for namedStyle, the boolean value indicates whether the fill formatting applied.
-                 * @param {boolean} [applyAlignment] Only work for namedStyle, the boolean value indicates whether the alignment formatting applied.
-                 * @param {boolean} [applyBorder] Only work for namedStyle, the boolean value indicates whether the border formatting applied.
-                 * @param {boolean} [applyProtection] Only work for namedStyle, the boolean value indicates whether the protection formatting applied.
-                 * @param {boolean} [applyNumberFormat] Only work for namedStyle, the boolean value indicates whether the number formatting applied.
+                 * @param {GC.Spread.Sheets.TextDirectionType} [textDirection] Specifies the direction of the text.
                  * @example
                  * ```
                  * //This example uses a style with rules.
@@ -20069,7 +21069,7 @@ declare module GC{
                  * sheet.conditionalFormats.addAverageRule(GC.Spread.Sheets.ConditionalFormatting.AverageConditionType.above, style, [new GC.Spread.Sheets.Range(0, 0, 10, 3)]);
                  * ```
                  */
-                constructor(backColor?: string | GC.Spread.Sheets.IPatternFill | GC.Spread.Sheets.IGradientFill | GC.Spread.Sheets.IGradientPathFill,  foreColor?: string,  hAlign?: GC.Spread.Sheets.HorizontalAlign,  vAlign?: GC.Spread.Sheets.VerticalAlign,  font?: string,  themeFont?: string,  formatter?: string | GC.Spread.Formatter.GeneralFormatter,  borderLeft?: GC.Spread.Sheets.LineBorder,  borderTop?: GC.Spread.Sheets.LineBorder,  borderRight?: GC.Spread.Sheets.LineBorder,  borderBottom?: GC.Spread.Sheets.LineBorder,  locked?: boolean,  textIndent?: number,  wordWrap?: boolean,  showEllipsis?: boolean,  _showTip?: boolean,  shrinkToFit?: boolean,  backgroundImage?: string,  cellType?: GC.Spread.Sheets.CellTypes.Base,  backgroundImageLayout?: GC.Spread.Sheets.ImageLayout,  tabStop?: boolean,  textDecoration?: GC.Spread.Sheets.TextDecorationType,  imeMode?: GC.Spread.Sheets.ImeMode,  name?: string,  parentName?: string,  watermark?: string,  cellPadding?: string,  labelOptions?: GC.Spread.Sheets.ILabelOptions,  quotePrefix?: boolean,  diagonalDown?: GC.Spread.Sheets.LineBorder,  diagonalUp?: GC.Spread.Sheets.LineBorder,  isVerticalText?: boolean,  cellButtons?: GC.Spread.Sheets.ICellButton[],  dropdown?: GC.Spread.Sheets.IDropdown[],  textOrientation?: number,  decoration?: GC.Spread.Sheets.TextDecorationType,  mask?: GC.Spread.Sheets.IMaskType,  fontStyle?: string,  fontWeight?: string,  fontSize?: string,  fontFamily?: string,  applyFont?: boolean,  applyFill?: boolean,  applyAlignment?: boolean,  applyBorder?: boolean,  applyProtection?: boolean,  applyNumberFormat?: boolean);
+                constructor(backColor?: string | GC.Spread.Sheets.IPatternFill | GC.Spread.Sheets.IGradientFill | GC.Spread.Sheets.IGradientPathFill,  foreColor?: string,  hAlign?: GC.Spread.Sheets.HorizontalAlign,  vAlign?: GC.Spread.Sheets.VerticalAlign,  font?: string,  themeFont?: string,  formatter?: string | GC.Spread.Formatter.GeneralFormatter,  borderLeft?: GC.Spread.Sheets.LineBorder,  borderTop?: GC.Spread.Sheets.LineBorder,  borderRight?: GC.Spread.Sheets.LineBorder,  borderBottom?: GC.Spread.Sheets.LineBorder,  locked?: boolean,  textIndent?: number,  wordWrap?: boolean,  showEllipsis?: boolean,  shrinkToFit?: boolean,  backgroundImage?: string,  cellType?: GC.Spread.Sheets.CellTypes.Base,  backgroundImageLayout?: GC.Spread.Sheets.ImageLayout,  tabStop?: boolean,  textDecoration?: GC.Spread.Sheets.TextDecorationType,  imeMode?: GC.Spread.Sheets.ImeMode,  name?: string,  parentName?: string,  watermark?: string,  cellPadding?: string,  labelOptions?: GC.Spread.Sheets.ILabelOptions,  quotePrefix?: boolean,  diagonalDown?: GC.Spread.Sheets.LineBorder,  diagonalUp?: GC.Spread.Sheets.LineBorder,  isVerticalText?: boolean,  cellButtons?: GC.Spread.Sheets.ICellButton[],  dropdown?: GC.Spread.Sheets.IDropdown[],  textOrientation?: number,  decoration?: GC.Spread.Sheets.TextDecorationType,  mask?: GC.Spread.Sheets.IMaskType,  fontStyle?: string,  fontWeight?: string,  fontSize?: string,  fontFamily?: string,  hidden?: boolean,  textDirection?: GC.Spread.Sheets.TextDirectionType);
                 /**
                  * Only work for namedStyle, the boolean value indicates whether the alignment formatting applied.
                  * @type {boolean}
@@ -20566,6 +21566,25 @@ declare module GC{
                  * ```
                  */
                 hAlign: GC.Spread.Sheets.HorizontalAlign | undefined;
+                /**
+                 * Indicates whether a cell formula is visible or not when sheet is protected.
+                 * @type {boolean}
+                 * @example
+                 * ```
+                 * //This example hidden a single cell.
+                 * activeSheet.options.isProtected = true;
+                 * activeSheet.setValue(1, 1, "=SUM(1,2)");
+                 * var style = new GC.Spread.Sheets.Style();
+                 * style.backColor = "red";
+                 * style.borderLeft =new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
+                 * style.borderTop = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
+                 * style.borderRight = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
+                 * style.borderBottom = new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.medium);
+                 * style.hidden = true;
+                 * activeSheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
+                 * ```
+                 */
+                hidden: boolean | undefined;
                 /**
                  * Indicates the Input Method Editor (IME) mode.
                  * @type {GC.Spread.Sheets.ImeMode}
@@ -20750,6 +21769,17 @@ declare module GC{
                  * ```
                  */
                 textDecoration: GC.Spread.Sheets.TextDecorationType | undefined;
+                /**
+                 * Define a text direction for cell to better represent cell.
+                 * @type {GC.Spread.Sheets.TextDirectionType}
+                 * @example
+                 * ```
+                 * //This example sets the text direction property for Style.
+                 * var style = new GC.Spread.Sheets.Style();
+                 * style.textDirection = GC.Spread.Sheets.TextDirectionType.rightToLeft;
+                 * ```
+                 */
+                textDirection: GC.Spread.Sheets.TextDirectionType | undefined;
                 /**
                  * Indicates the number of units of indentation for text in a cell, an integer value, where an increment of 1 represents 8 pixels.
                  * @type {number}
@@ -21290,6 +22320,7 @@ declare module GC{
                  * @param {number} [options.sheetCount] - The number of sheets.
                  * @param {string} [options.font] - The tab strip font.
                  * @param {boolean} [options.allowUserDragMerge] - Whether to allow the user to drag merge cells.
+                 * @param {GC.Spread.Sheets.AllowDragHeaderToMove} [options.allowDragHeaderToMove] - Specifies how to allow drag header to move.
                  * @param {boolean} [options.allowUserDragDrop] - Whether to allow the user to drag and drop range data.
                  * @param {boolean} [options.allowUserDragFill] - Whether to allow the user to drag fill a range.
                  * @param {boolean} [options.allowUserZoom] - Whether to zoom the display by scrolling the mouse wheel while pressing the Ctrl key.
@@ -21330,6 +22361,7 @@ declare module GC{
                  * @param {GC.Spread.Sheets.AutoFitType} [options.autoFitType] - Whether content will be formatted to fit in cells or in cells and headers.
                  * @param {GC.Spread.Sheets.ReferenceStyle} [options.referenceStyle] - the style for cell and range references in cell formulas on this sheet.
                  * @param {boolean} [options.calcOnDemand] - Whether to calculate formulas only when they are demanded.
+                 * @param {boolean} [options.incrementalCalculation] - Whether to incremental calculate formulas without blocking UI.
                  * @param {boolean} [options.allowCopyPasteExcelStyle] - Whether the user can copy style from Spread Sheets then paste to Excel, or copy style from Excel then paste to Spread Sheets.
                  * @param {boolean} [options.allowExtendPasteRange] - Whether extend paste range if the paste range is not enough for pasting.
                  * @param {GC.Spread.Sheets.CopyPasteHeaderOptions} [options.copyPasteHeaderOptions] - Which headers are included when data is copied to or pasted.
@@ -21348,6 +22380,7 @@ declare module GC{
                  * @param {boolean} [options.formulaFormatHint] - Whether automatically generate the format when formula inputs. Default is true.
                  * @param {GC.Spread.Pivot.PivotAreaReference} [options.pivotAreaReference ] - Whether automatically generate the getPivotData formula or cell reference when choose pivot table data area. Default is getPivotData.
                  * @param {GC.Spread.Sheets.SheetTabStyles} [options.defaultSheetTabStyles] - All default state styles for sheet tabs.
+                 * @param {GC.Spread.Sheets.IBuiltInFileIcons} [options.builtInFileIcons] - All built-in file icons.
                  * @example
                  * ```
                  * var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:3, font:"12pt Arial"});
@@ -21369,6 +22402,31 @@ declare module GC{
                  * ```
                  */
                 contextMenu: GC.Spread.Sheets.ContextMenu.ContextMenu;
+                /**
+                 * Represents the custom pivot table theme manager.
+                 * @type {GC.Spread.Pivot.CustomPivotTableThemeManager}
+                 */
+                customPivotTableThemes: GC.Spread.Pivot.CustomPivotTableThemeManager;
+                /**
+                 * Represents the custom item slicer theme manager.
+                 * @type {GC.Spread.Sheets.Slicers.CustomSlicerThemeManager}
+                 */
+                customSlicerThemes: GC.Spread.Sheets.Slicers.CustomSlicerThemeManager;
+                /**
+                 * Represents the custom table theme manager.
+                 * @type {GC.Spread.Sheets.Tables.CustomTableThemeManager}
+                 */
+                customTableThemes: GC.Spread.Sheets.Tables.CustomTableThemeManager;
+                /**
+                 * Represents the custom timeline slicer theme manager.
+                 * @type {GC.Spread.Sheets.Slicers.CustomTimelineThemeManager}
+                 */
+                customTimelineThemes: GC.Spread.Sheets.Slicers.CustomTimelineThemeManager;
+                /**
+                 * Document properties.
+                 * @type {GC.Spread.Sheets.IDocProps}
+                 */
+                docProps: GC.Spread.Sheets.IDocProps;
                 /**
                  * Represents the name of the Spread control.
                  * @type {string}
@@ -21382,6 +22440,7 @@ declare module GC{
                  * Represents the options of the Spread control.
                  * @type {Object}
                  * @property {boolean} allowUserDragMerge - Whether to allow the user to drag merge cells.
+                 * @property {GC.Spread.Sheets.AllowDragHeaderToMove} [options.allowDragHeaderToMove] - Specifies how to allow drag header to move.
                  * @property {boolean} allowUserDragDrop - Whether to allow the user to drag and drop range data.
                  * @property {boolean} allowUserDragFill - Whether to allow the user to drag fill a range.
                  * @property {boolean} allowUserZoom - Whether to zoom the display by scrolling the mouse wheel while pressing the Ctrl key.
@@ -21428,6 +22487,7 @@ declare module GC{
                  * @property {number} iterativeCalculationMaximumIterations - The Maximum Iterations when iterative calculation.
                  * @property {number} iterativeCalculationMaximumChange - The Maximum Change when iterative calculation.
                  * @property {boolean} calcOnDemand - Whether to calculate formulas only when they are demanded.
+                 * @property {boolean} incrementalCalculation - Whether to incremental calculate formulas without blocking UI.
                  * @property {boolean} dynamicReferences - Whether to calculate functions with dynamic reference.
                  * @property {boolean} allowCopyPasteExcelStyle - Whether the user can copy style from Spread Sheets then paste to Excel, or copy style from Excel then paste to Spread Sheets.
                  * @property {boolean} allowExtendPasteRange - Whether extend paste range if the paste range is not enough for pasting.
@@ -21447,6 +22507,7 @@ declare module GC{
                  * @property {boolean} formulaFormatHint - Whether automatically generate the format when formula inputs. Default is true.
                  * @property {GC.Spread.Pivot.PivotAreaReference} pivotAreaReference  - Whether automatically generate the getPivotData formula or cell reference when choose pivot table data area. Default is getPivotData.
                  * @property {GC.Spread.Sheets.SheetTabStyles} defaultSheetTabStyles - All default state styles for sheet tabs.
+                 * @property {GC.Spread.Sheets.IBuiltInFileIcons} [options.builtInFileIcons] - All built-in file icons.
                  * @example
                  * ```
                  * // var workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:5,showHorizontalScrollbar:false});
@@ -21665,6 +22726,70 @@ declare module GC{
                  * @returns {GC.Data.DataManager} Returns the data manager.
                  */
                 dataManager(): GC.Data.DataManager;
+                /**
+                 * set or get the default pivot table theme.
+                 * @param {string} name the default name of the pivot table theme
+                 * @returns {GC.Spread.Pivot.PivotTableTheme | undefined}
+                 * @example
+                 * ```
+                 * // set Default pivot table theme name as "custom0"
+                 * spread.defaultPivotTableTheme("custom0");
+                 * let newPivotTable = activeSheet.pivotTables.add("pivotTable1", 1, 1, 10, 5);
+                 * // The pivot table above will use "custom0" as the theme since no specific theme has been specified.
+                 *
+                 * // get default pivot table theme
+                 * spread.defaultPivotTableTheme();
+                 * ```
+                 */
+                defaultPivotTableTheme(themeName?: string): GC.Spread.Pivot.PivotTableTheme | undefined;
+                /**
+                 * set or get the default slicer theme.
+                 * @param {string} name the default name of the slicer theme
+                 * @returns {GC.Spread.Sheets.Slicers.SlicerStyle | undefined}
+                 * @example
+                 * ```
+                 * // set default slicer theme name as "custom0"
+                 * spread.defaultSlicerTheme("custom0");
+                 * let newSlicer = activeSheet.slicers.add("slicer1", 1, 1, 10, 5);
+                 * // The slicer above will use "custom0" as the theme since no specific theme has been specified.
+                 *
+                 * // get default slicer theme
+                 * spread.defaultSlicerTheme();
+                 * ```
+                 */
+                defaultSlicerTheme(themeName?: string): GC.Spread.Sheets.Slicers.SlicerStyle | undefined;
+                /**
+                 * set or get the default table theme.
+                 * @param {string} name the default name of the table theme
+                 * @returns {GC.Spread.Sheets.Tables.TableTheme | undefined}
+                 * @example
+                 * ```
+                 * // set default table theme name as "custom0"
+                 * spread.defaultTableTheme("custom0");
+                 * let newable = activeSheet.tables.add("table1", 1, 1, 10, 5);
+                 * // The table above will use "custom0" as the theme since no specific theme has been specified.
+                 *
+                 * // get the default table theme
+                 * spread.defaultTableTheme();
+                 * ```
+                 */
+                defaultTableTheme(themeName?: string): GC.Spread.Sheets.Tables.TableTheme | undefined;
+                /**
+                 * set or get the default timeLine theme.
+                 * @param {string} name the default name of the timeLine theme
+                 * @returns {GC.Spread.Sheets.Slicers.TimelineStyle | undefined}
+                 * @example
+                 * ```
+                 * // set default timeLine theme name as "custom0"
+                 * spread.defaultTimelineTheme("custom0");
+                 * let newTimeline = activeSheet.timeLines.add("timeLine1", 1, 1, 10, 5);
+                 * // The timeLine above will use "custom0" as the theme since no specific theme has been specified.
+                 *
+                 * // get default timeLine theme
+                 * spread.defaultTimelineTheme();
+                 * ```
+                 */
+                defaultTimelineTheme(themeName?: string): GC.Spread.Sheets.Slicers.TimelineStyle | undefined;
                 /**
                  * Destroys the workbook and all sheets it contains.
                  * @example
@@ -22310,6 +23435,7 @@ declare module GC{
                  * @param {boolean} [serializationOption.rowHeadersAsFrozenColumns] - Whether to treat the row headers as frozen columns when converting the workbook to json.
                  * @param {boolean} [serializationOption.columnHeadersAsFrozenRows] - Whether to treat the column headers as frozen rows when converting the workbook to json.
                  * @param {boolean} [serializationOption.includeAutoMergedCells] - Whether to include the automatically merged cells when converting the workbook to json. * @returns {Object} The spreadsheet data.
+                 * @param {boolean} [serializationOption.saveR1C1Formula] - Whether to save the r1c1 formula in the file.
                  * @example
                  * ```
                  * activeSheet.getCell(0,0).value(123);
@@ -22372,6 +23498,7 @@ declare module GC{
                  * @param {string | GC.Spread.Sheets.ExternalPartialValues} linkInfo - The string type is the file name of the external source, mostly ends with ".xlsx". Another type should be an array of external partial values get from the callback of GC.Spread.Sheets.IO.getPartialValues.
                  * @param {object} [data] - The json data of the external source. Can be spread.toJSON() or the value can be fetched by data[sheetName][rowIndex][colIndex]. Only required when linkInfo is string type.
                  * @param {string} [filePath] - The file path or the link of the file, can be empty if don't have duplicated linkNames.
+                 * @param {boolean} isMergeUpdate - Indicates whether to update by merging. If it's not true, the whole external sheet data will be overwritten.
                  * @example
                  * ```
                  * // This example sets the external source with workbook JSON.
@@ -22382,6 +23509,7 @@ declare module GC{
                  * spread.getActiveSheet().setFormula(0, 0, "=SUM([calc.xlsx]Sheet1!A1:B2"); \xa0// spread cell A1 value is #REF!
                  * spread.updateExternalReference("calc.xlsx", {"Sheet1":[[1, 2],[1, 3]]}); \xa0// spread cell A1 value is 7
                  * spread.updateExternalReference("calc.xlsx", {"Sheet1":{0:{0:10, 1:10}, 1:{0:10, 1:10}}}); \xa0// spread cell A1 value is 40
+                 * spread.updateExternalReference("calc.xlsx", {"Sheet1":{1:{0:2, 1:2}}}, null, true); \xa0// spread cell A1 value is 24 after the merge update.
                  * // This example sets the external values with the successCallback result of GC.Spread.Sheets.IO.getPartialValues
                  * let refList = spread.getExternalReferences(true);
                  * GC.Spread.Sheets.IO.getPartialValues(refList, getFile, (externalValues) => {
@@ -22393,7 +23521,7 @@ declare module GC{
                  * });
                  * ```
                  */
-                updateExternalReference(linkInfo: string | GC.Spread.Sheets.ExternalPartialValues,  data?: object,  filePath?: string): void;
+                updateExternalReference(linkInfo: string | GC.Spread.Sheets.ExternalPartialValues,  data?: object,  filePath?: string,  isMergeUpdate?: boolean): void;
             }
 
             export class Worksheet{
@@ -22538,6 +23666,9 @@ declare module GC{
                  * @property {number} [sheetAreaOffset.left] - The offset left of sheet from host.
                  * @property {number} [sheetAreaOffset.top] - The offset top of sheet from host.
                  * @property {boolean} keepUnknownFormulas - Indicates whether the unknown formulas could be included in sheet json data.
+                 * @property {GC.Spread.Sheets.IAddRowButtonOption} [addRowButtonOption] - The add row button's options.
+                 * @property {GC.Spread.Sheets.IAddColumnButtonOption} [addColumnButtonOption] - The add column button's options.
+                 * @property {boolean} rightToLeft - Indicates whether the sheet is rendered from right to left.
                  * @example
                  * ```
                  * sheet.setRowCount(2,GC.Spread.Sheets.SheetArea.colHeader);
@@ -25817,6 +26948,20 @@ declare module GC{
                 }
 
 
+                export interface IFileInfo{
+                    name: string;
+                    blob?: Blob;
+                    dataUrl?: string;
+                }
+
+
+                export interface IFilePreviewInfo extends GC.Spread.Sheets.CellTypes.IFileInfo{
+                    sheetName: string;
+                    row: number;
+                    col: number;
+                }
+
+
                 export interface IItemSpacing{
                     horizontal?: number;
                     vertical?: number;
@@ -26984,6 +28129,179 @@ declare module GC{
                     constructor();
                 }
 
+                export class FileUpload extends Base{
+                    /**
+                     * Represents a file upload cell type.
+                     * @extends GC.Spread.Sheets.CellTypes.Base
+                     * @class
+                     * @example
+                     * ```
+                     * // set a FileUpload celltype
+                     * const cellType1 = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * sheet.setCellType(1, 1, cellType1);
+                     * // FileUpload support the valuePath property, will parse the cell value with valuePath to GC.Spread.Sheets.CellTypes.IFileInfo
+                     * sheet.getCellType(1, 1).valuePath("blob");
+                     * sheet.setValue(1, 1, blob); // value path is "blob"
+                     * sheet.getCellType(2, 2).valuePath("dataUrl");
+                     * sheet.setValue(2, 2, dataUrl); // value path is "dataUrl"
+                     * sheet.getCellType(3, 3).valuePath(undefined);
+                     * sheet.setValue(3, 3, { name: 'test1.png', blob: blob }); // value path is undefined
+                     * sheet.setValue(3, 3, { name: 'test2.txt', dataUrl: dataUrl }); // value path is undefined
+                     * ```
+                     */
+                    constructor();
+                    /**
+                     * Customize personalized preview logic and UI display by setting event callbacks or SJS commands after clicking the preview button.
+                     * @type {string | ((file: GC.Spread.Sheets.CellTypes.IFilePreviewInfo) => void)}
+                     * @returns {void}
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * // Customize your preview function.
+                     * fileUpload.previewCommand = function (fileInfo) {
+                     *    // Custom preview logic
+                     * }
+                     *
+                     * // Customize your preview command.
+                     * fileUpload.previewCommand = 'openPreviewDialog';
+                     *
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    previewCommand?: string | ((file: GC.Spread.Sheets.CellTypes.IFilePreviewInfo) => void);
+                    /**
+                     * Gets or sets the file types that can be uploaded.
+                     * @param {string} value The file types that can be uploaded.
+                     * @returns {string} Returns the file types that can be uploaded.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.accept('image/*');
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    accept(value?: string): string;
+                    /**
+                     * Gets or sets whether to display the file clear button.
+                     * @param {string} value Whether to display the file clear button.
+                     * @returns {string} Returns the currently displayed file clear button.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.isClearEnabled(false);
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    isClearEnabled(value?: boolean): boolean;
+                    /**
+                     * Gets or sets whether to display the file download button.
+                     * @param {string} value Whether to display the file download button.
+                     * @returns {string} Returns the currently displayed file download button.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.isDownloadEnabled(false);
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    isDownloadEnabled(value?: boolean): boolean;
+                    /**
+                     * Gets or sets whether to display the file preview button.
+                     * @param {string} value Whether to display the file preview button.
+                     * @returns {string} Returns the currently displayed file preview button.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.isPreviewEnabled(false);
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    isPreviewEnabled(value?: boolean): boolean;
+                    /**
+                     * Gets or sets the margin bottom value.
+                     * @param {number} value The margin bottom value.
+                     * @returns {number} If no value is set, return current margin bottom.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.marginBottom(10);
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    marginBottom(value?: number): number;
+                    /**
+                     * Gets or sets the margin left value.
+                     * @param {number} value The margin left value.
+                     * @returns {number} If no value is set, return current margin left.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.marginLeft(10);
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    marginLeft(value?: number): number;
+                    /**
+                     * Gets or sets the margin right value.
+                     * @param {number} value The margin right value.
+                     * @returns {number} If no value is set, return current margin right.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.marginRight(10);
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    marginRight(value?: number): number;
+                    /**
+                     * Gets or sets the margin top value.
+                     * @param {number} value The margin top value.
+                     * @returns {number} If no value is set, return current margin top.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.marginTop(10);
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    marginTop(value?: number): number;
+                    /**
+                     * Gets or sets the maximum file size that can be uploaded.
+                     * @param {number} value The maximum file size that can be uploaded.
+                     * @returns {number} Returns the maximum file size that can be uploaded.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.maxSize(10000);
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * ```
+                     */
+                    maxSize(value?: number): number;
+                    /**
+                     * Gets or sets the value path for fileUpload cellType, the cell will get vale by the valuePath from the cell fileInfo.
+                     * @param {string} value The value path value.
+                     * @returns {string} If no value is set, return current value path, the default value path is dataUrl.
+                     * @example
+                     * ```
+                     * // This example creates a file upload cell and setValue with dataUrl.
+                     * const fileUpload = new GC.Spread.Sheets.CellTypes.FileUpload();
+                     * fileUpload.valuePath("dataUrl"); // set valuePath dataUrl, default is dataUrl
+                     * activeSheet.getCell(1, 1).cellType(fileUpload);
+                     * activeSheet.setValue(1, 1, 'data:text/plain;base64,MQ==')
+                     * ```
+                     */
+                    valuePath(value?: string): string;
+                }
+
                 export class HyperLink extends Base{
                     /**
                      * Represents the hyperlink cell.
@@ -27324,6 +28642,18 @@ declare module GC{
             }
 
             module Charts{
+                /**
+                 * Get the specified color by colorScheme, index
+                 * @param {GC.Spread.Sheets.Charts.ColorScheme} colorScheme The color scheme.
+                 * @param {number} index The specified index.
+                 * @param {number} [count] The total collection count.
+                 * @return {string} returns the specified color.
+                 * @example
+                 * ```
+                 * GC.Spread.Sheets.Charts.getColor([GC.Spread.Sheets.Charts.ColorRule.acrossLinear, ['Accent 1', 'Accent 4']], 6, 10); // return 'Accent 1 23'
+                 * ```
+                 */
+                function getColor(colorScheme: GC.Spread.Sheets.Charts.ColorScheme,  index: number,  count?: number): string;
 
                 export interface ErrorBarItem{
                     /**
@@ -27430,6 +28760,10 @@ declare module GC{
                      * The axis tick label position.
                      */
                     tickLabelPosition?: GC.Spread.Sheets.Charts.TickLabelPosition;
+                    /**
+                     * The axis tick label spacing.
+                     */
+                    tickLabelSpacing?: number;
                     /**
                      * The line style of the axis.
                      */
@@ -27688,6 +29022,14 @@ declare module GC{
                      * Whether to show the percent value in data labels.
                      */
                     showPercentage?: boolean;
+                    /**
+                     * Whether to show the reference cells text in data labels.
+                     */
+                    showDataLabelsRange?: boolean;
+                    /**
+                     * The data labels range formula;
+                     */
+                    dataLabelsRange?: string;
                     /**
                      * The position of the chart data labels.
                      */
@@ -27953,6 +29295,9 @@ declare module GC{
                      * The trendlines of the series.
                      */
                     trendlines?: GC.Spread.Sheets.Charts.TrendlineItem[];
+                    /**
+                     * Whether to show data in hidden rows and columns.
+                     */
                     plotVisibleOnly?: boolean;
                     /**
                      * The hole size of the doughnut chart. This is used for doughnut chart, The maximum value is 0.9, the minimum value is 0.
@@ -28089,6 +29434,15 @@ declare module GC{
                     fontColor?: string;
                 }
 
+
+                /**
+                 * @typedef {Array} GC.Spread.Sheets.Charts.ColorScheme
+                 * @property {GC.Spread.Sheets.Charts.ColorRule} 0 - The color rule
+                 * @property {string[]} 1 - The colors list
+                 */
+                export type ColorScheme = 
+                    (GC.Spread.Sheets.Charts.ColorRule | string[])[]
+                
                 /**
                  * Specifies  the point on the specified axis where the other axis crosses.
                  * @enum {string}
@@ -28936,10 +30290,11 @@ declare module GC{
                      * @param {number} y The <i>y</i> location of the chart.
                      * @param {number} width The width of the chart.
                      * @param {number} height The height of the chart.
-                     * @param {string?} dataRange The formula string of data range for the chart.
-                     * @param {GC.Spread.Sheets.Charts.RowCol?} dataOrientation The orientation of data for series.
+                     * @param {string} [dataRange] The formula string of data range for the chart.
+                     * @param {GC.Spread.Sheets.Charts.RowCol} [dataOrientation] The orientation of data for series.
+                     * @param {GC.Spread.Sheets.Charts.ColorScheme} [colorScheme] The color scheme of the chart.
                      */
-                    constructor(sheet: GC.Spread.Sheets.Worksheet,  name: string,  chartType: GC.Spread.Sheets.Charts.ChartType,  x: number,  y: number,  width: number,  height: number,  dataRange?: string,  dataOrientation?: GC.Spread.Sheets.Charts.RowCol);
+                    constructor(sheet: GC.Spread.Sheets.Worksheet,  name: string,  chartType: GC.Spread.Sheets.Charts.ChartType,  x: number,  y: number,  width: number,  height: number,  dataRange?: string,  dataOrientation?: GC.Spread.Sheets.Charts.RowCol,  colorScheme?: GC.Spread.Sheets.Charts.ColorScheme);
                     /** Represents the type name string used for supporting serialization.
                      * @type {string}
                      */
@@ -28992,6 +30347,12 @@ declare module GC{
                      * @deprecated since version 17.0.0, This method is not available in the charts plugin, to use this method, please use the legacy-charts plugin.
                      */
                     cloneContent(): HTMLElement;
+                    /**
+                     * Gets or sets the chart colors.
+                     * @param {GC.Spread.Sheets.Charts.ColorScheme} value that represent the chart color style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme | GC.Spread.Sheets.Charts.Chart} If no value is set, returns the current chart color style, otherwise, returns the chart.
+                     */
+                    colorScheme(value?: GC.Spread.Sheets.Charts.ColorScheme): GC.Spread.Sheets.Charts.ColorScheme | GC.Spread.Sheets.Charts.Chart;
                     /**
                      * Gets or sets the content of the custom chart.
                      * @param {HTMLElement} value The content of the custom chart.
@@ -29182,6 +30543,15 @@ declare module GC{
                      * @returns {GC.Spread.Sheets.Charts.IChartTitle | GC.Spread.Sheets.Charts.Chart} If no value is set, returns the title of the chart; otherwise, returns the chart.
                      */
                     title(value?: GC.Spread.Sheets.Charts.IChartTitle): any;
+                    /**
+                     * Get the chart Image src of type Base64 string.
+                     * @returns {String} return the chart Image Base64 src string.
+                     * @example
+                     * ```
+                     * let chartImageSrc = sheet.charts.all()[0].toImageSrc();
+                     * ```
+                     */
+                    toImageSrc(): string;
                     /**
                      * Gets or sets whether apply animation to the chart.
                      * @param {boolean} [value] whether apply animation to the chart.
@@ -29225,6 +30595,7 @@ declare module GC{
                      * @param {number} height The height of the chart.
                      * @param {string} dataRange The formula string of data range for the chart.
                      * @param {GC.Spread.Sheets.Charts.RowCol} dataOrientation The orientation of data for series.
+                     * @param {GC.Spread.Sheets.Charts.ColorScheme} [colorScheme] The color style of the chart.
                      * @return {GC.Spread.Sheets.Charts.Chart} The chart that has been added to the sheet.
                      * @example
                      * ```
@@ -29233,7 +30604,7 @@ declare module GC{
                      * var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, dataRange);
                      * ```
                      */
-                    add(name: string,  chartType: GC.Spread.Sheets.Charts.ChartType,  x: number,  y: number,  width: number,  height: number,  dataRange?: string,  dataOrientation?: GC.Spread.Sheets.Charts.RowCol): GC.Spread.Sheets.Charts.Chart;
+                    add(name: string,  chartType: GC.Spread.Sheets.Charts.ChartType,  x: number,  y: number,  width: number,  height: number,  dataRange?: string,  dataOrientation?: GC.Spread.Sheets.Charts.RowCol,  colorScheme?: GC.Spread.Sheets.Charts.ColorScheme): GC.Spread.Sheets.Charts.Chart;
                     /**
                      * Gets all of the charts in the sheet.
                      * @return {GC.Spread.Sheets.Charts.Chart[]} The collection of all the charts in the sheet.
@@ -29319,6 +30690,167 @@ declare module GC{
                     zIndex(name: string,  zIndex?: number): any;
                 }
 
+                export class ColorSchemes{
+                    /**
+                     * Represents a built-in chart color scheme collection.
+                     * @class
+                     */
+                    constructor();
+                    /**
+                     * Gets the colorfulPalette1 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette1);
+                     * ```
+                     */
+                    static colorfulPalette1: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the colorfulPalette2 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette2);
+                     * ```
+                     */
+                    static colorfulPalette2: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the colorfulPalette3 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette3);
+                     * ```
+                     */
+                    static colorfulPalette3: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the colorfulPalette4 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.colorfulPalette4);
+                     * ```
+                     */
+                    static colorfulPalette4: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette1 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette1);
+                     * ```
+                     */
+                    static monochromaticPalette1: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette10 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette10);
+                     * ```
+                     */
+                    static monochromaticPalette10: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette11 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette11);
+                     * ```
+                     */
+                    static monochromaticPalette11: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette12 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette12);
+                     * ```
+                     */
+                    static monochromaticPalette12: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette13 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette13);
+                     * ```
+                     */
+                    static monochromaticPalette13: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette2 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette2);
+                     * ```
+                     */
+                    static monochromaticPalette2: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette3 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette3);
+                     * ```
+                     */
+                    static monochromaticPalette3: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette4 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette4);
+                     * ```
+                     */
+                    static monochromaticPalette4: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette5 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette5);
+                     * ```
+                     */
+                    static monochromaticPalette5: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette6 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette6);
+                     * ```
+                     */
+                    static monochromaticPalette6: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette7 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette7);
+                     * ```
+                     */
+                    static monochromaticPalette7: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette8 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette8);
+                     * ```
+                     */
+                    static monochromaticPalette8: GC.Spread.Sheets.Charts.ColorScheme;
+                    /**
+                     * Gets the monochromaticPalette9 style.
+                     * @returns {GC.Spread.Sheets.Charts.ColorScheme}
+                     * @example
+                     * ```
+                     * var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 250, 20, 600, 400, "A1:D4", GC.Spread.Sheets.Charts.RowCol.rows, GC.Spread.Sheets.Charts.ColorSchemes.monochromaticPalette9);
+                     * ```
+                     */
+                    static monochromaticPalette9: GC.Spread.Sheets.Charts.ColorScheme;
+                }
+
                 export class Points{
                     /**
                      * Represents the dataPoint collection that managers all dataPoints in a chart series.
@@ -29671,6 +31203,25 @@ declare module GC{
                  * ```
                  */
                 var cut: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string}): any};
+                /**
+                 * Represents the command used to define the column.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {number} [options.col] The specified col for inserting, optional.
+                 * @param {GC.Data.IColumn} options.column The defined column.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * //This example uses the define column action.
+                 * // define the column properties
+                 * spread.commandManager().execute({cmd: "DefineColumn", sheetName: "Sheet1", { col: 1, column: { value: 'column1' }}});
+                 * ```
+                 */
+                var DefineColumn: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, col?: number, column: GC.Data.IColumn}): any};
                 /**
                  * Represents the command for deleting the floating objects.
                  * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
@@ -29852,6 +31403,25 @@ declare module GC{
                  * ```
                  */
                 var fill: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, startRange: GC.Spread.Sheets.Range, fillRange: GC.Spread.Sheets.Range, autoFillType: GC.Spread.Sheets.Fill.AutoFillType, fillDirection: GC.Spread.Sheets.Fill.FillDirection}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to modify the column.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {number} options.col The specified col.
+                 * @param {GC.Data.IColumn} options.column The modified column.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * //This example uses the modify column action.
+                 * // modify the column properties
+                 * spread.commandManager().execute({cmd: "ModifyColumn", sheetName: "Sheet1", { col: 1, column: { value: 'column1' }}});
+                 * ```
+                 */
+                var ModifyColumn: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, col: number, column: GC.Data.IColumn}): any};
                 /**
                  * Represents the command for moving floating objects.
                  * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
@@ -30513,6 +32083,24 @@ declare module GC{
                  * ```
                  */
                 var redo: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string}): any};
+                /**
+                 * Represents the command used to remove the column.
+                 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
+                 * @property {function} execute - performs an execute or undo operation.
+                 * The arguments of the execute method are as follows.
+                 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
+                 * @param {Object} options The options of the operation.
+                 * @param {string} options.sheetName The sheet name.
+                 * @param {number} options.col The specified col.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * //This example uses the remove column action.
+                 * // remove the column properties
+                 * spread.commandManager().execute({cmd: "RemoveColumn", sheetName: "Sheet1", { col: 1 }});
+                 * ```
+                 */
+                var RemoveColumn: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, col: number}): any};
                 /**
                  * Represents the command for ungrouping a column outline (range group) on a sheet.
                  * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
@@ -44628,6 +46216,15 @@ declare module GC{
                      * ```
                      */
                     startRowOffset(value?: number): any;
+                    /**
+                     * Get the shape Image src of type Base64 string.
+                     * @returns {String} return the shape Image Base64 src string.
+                     * @example
+                     * ```
+                     * let shapeImageSrc = sheet.shapes.all()[0].toImageSrc();
+                     * ```
+                     */
+                    toImageSrc(): string;
                     /**
                      * Gets or sets the width of the shape.
                      * @param {number | string} value The width of the shape specified by a number or formula (starts with =) can get a number value.
@@ -45035,7 +46632,8 @@ declare module GC{
             module Slicers{
 
                 export interface ISlicer{
-                    style: (style?: SlicerStyle, shouldCallback?: boolean) => SlicerStyle | ISlicer;
+                    style: (style?: string | SlicerStyle, shouldCallback?: boolean) => SlicerStyle | ISlicer;
+                    getStyleName: () => string | undefined;
                     name: (name?: string, shouldCallback?: boolean) => string | ISlicer;
                     captionName: (name?: string, shouldCallback?: boolean) => string | ISlicer;
                     columnCount: (value?: number, shouldCallback?: boolean) => number | ISlicer;
@@ -45071,6 +46669,7 @@ declare module GC{
                     endColumnOffset: (value?: number, shouldCallback?: boolean) => number | ISlicer;
                     allowResize: (value?: boolean, shouldCallback?: boolean) => boolean | ISlicer;
                     allowMove: (value?: boolean, shouldCallback?: boolean) => boolean | ISlicer;
+                    toImageSrc: () => string | ISlicer;
                 }
 
 
@@ -45125,6 +46724,144 @@ declare module GC{
                 }
 
 
+                export class CustomSlicerThemeManager extends GC.Spread.Sheets.CustomThemeManagerBase{
+                    /**
+                     * Represents a custom slicer theme manager that can manage all custom slicer themes.
+                     * @class
+                     * @param {GC.Spread.Sheets.Workbook} workbook The workbook.
+                     * @extends GC.Spread.Sheets.CustomThemeManagerBase
+                     */
+                    constructor(workbook: GC.Spread.Sheets.Workbook);
+                    /**
+                     * add a new slicer theme.
+                     * @param {string | GC.Spread.Sheets.Slicers.SlicerStyle} theme the new slicer theme or just a new slicer theme name you want to add
+                     * @returns {GC.Spread.Sheets.Slicers.SlicerStyle | undefined} return the newly added slicer theme, if the named slicer theme is existed, failed to add slicer theme and return undefined
+                     * @example
+                     * ```
+                     * // add a new slicer theme named "custom0"
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
+                     * let slicerStyle = spread.customSlicerThemes.add("custom0");
+                     * let wholeSlicerStyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * wholeSlicerStyle.backColor = "#0C66E4";
+                     * slicerStyle.wholeSlicerStyle(wholeSlicerStyle);
+                     * ```
+                     */
+                    add(theme: string | GC.Spread.Sheets.Slicers.SlicerStyle): GC.Spread.Sheets.Slicers.SlicerStyle | undefined;
+                    /**
+                     * get the slicer themes collection.
+                     * @returns Array<GC.Spread.Sheets.Slicers.SlicerStyle>
+                     * @example
+                     * ```
+                     * // get all slicer slicer themes
+                     * let slicerStylesCollection = spread.customSlicerThemes.all();
+                     * ```
+                     */
+                    all(): Array<GC.Spread.Sheets.Slicers.SlicerStyle>;
+                    /**
+                     * get the slicer theme by name.
+                     * @param {string} name the specific name of the slicer theme to get
+                     * @returns {GC.Spread.Sheets.Slicers.SlicerStyle | undefined} If the corresponding slicer theme with the spefic name is found, return the theme; otherwise, return undefined.
+                     * @example
+                     * ```
+                     * // get slicer theme
+                     * slicerStyle = spread.customSlicerThemes.get("custom0");
+                     * ```
+                     */
+                    get(name: string): GC.Spread.Sheets.Slicers.SlicerStyle | undefined;
+                    /**
+                     * remove the slicer theme by name.
+                     * @param {string} name the specific name of the slicer theme to remove
+                     * @returns {void}
+                     * @example
+                     * ```
+                     * // delete slicer theme
+                     * spread.customSlicerThemes.remove("custom0");
+                     * ```
+                     */
+                    remove(name: string): void;
+                    /**
+                     * update the slicer theme.
+                     * @param {string} oldThemeName the specific name of the slicer theme to update
+                     * @param {GC.Spread.Sheets.Slicers.SlicerStyle} newTheme the specific name of the slicer theme to update
+                     * @returns {void}
+                     * @example
+                     * ```
+                     * // update slicer theme
+                     * slicerStyle = spread.customSlicerThemes.update("custom0", new GC.Spread.Sheets.Slicers.SlicerStyle());
+                     * ```
+                     */
+                    update(oldThemeName: string,  newTheme: GC.Spread.Sheets.Slicers.SlicerStyle): void;
+                }
+
+                export class CustomTimelineThemeManager extends GC.Spread.Sheets.CustomThemeManagerBase{
+                    /**
+                     * Represents a custom timeline slicer theme manager that can manage all custom timeline slicer themes.
+                     * @class
+                     * @param {GC.Spread.Sheets.Workbook} workbook The workbook.
+                     * @extends GC.Spread.Sheets.CustomThemeManagerBase
+                     */
+                    constructor(workbook: GC.Spread.Sheets.Workbook);
+                    /**
+                     * add a new timeLine theme.
+                     * @param {string | GC.Spread.Sheets.Slicers.TimelineStyle} theme the new timeLine theme or just a new timeLine theme name you want to add.
+                     * @returns {GC.Spread.Sheets.Slicers.TimelineStyle | undefined} return the newly added timeLine theme, if the named timeLine theme is existed, failed to add timeLine theme and return undefined
+                     * @example
+                     * ```
+                     * // add a new timeLine theme named "custom0"
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
+                     * let timeLineStyle = spread.customTimelineThemes.add("custom0");
+                     * let wholeTimelineStyle = new GC.Spread.Sheets.Slicers.TimelineStyleInfo();
+                     * wholeTimelineStyle.backColor = "#0C66E4";
+                     * timeLineStyle.wholeTimelineStyle(wholeTimelineStyle);
+                     * ```
+                     */
+                    add(theme: string | GC.Spread.Sheets.Slicers.TimelineStyle): GC.Spread.Sheets.Slicers.TimelineStyle | undefined;
+                    /**
+                     * get the timeLine themes collection.
+                     * @returns Array<GC.Spread.Sheets.Slicers.TimelineStyle>
+                     * @example
+                     * ```
+                     * // get all timeLine timeLine themes
+                     * let timeLineStylesCollection = spread.customTimelineThemes.all();
+                     * ```
+                     */
+                    all(): Array<GC.Spread.Sheets.Slicers.TimelineStyle>;
+                    /**
+                     * get the timeLine theme by name.
+                     * @param {string} name the specific name of the timeLine theme to get
+                     * @returns {GC.Spread.Sheets.Slicers.TimelineStyle | undefined} If the corresponding timeLine theme with the spefic name is found, return the theme; otherwise, return undefined.
+                     * @example
+                     * ```
+                     * // get timeLine theme
+                     * timeLineStyle = spread.customTimelineThemes.get("custom0");
+                     * ```
+                     */
+                    get(name: string): GC.Spread.Sheets.Slicers.TimelineStyle | undefined;
+                    /**
+                     * remove the timeLine theme by name.
+                     * @param {string} name the specific name of the timeLine theme to remove
+                     * @returns {void}
+                     * @example
+                     * ```
+                     * // delete timeLine theme
+                     * spread.customTimelineThemes.remove("custom0");
+                     * ```
+                     */
+                    remove(name: string): void;
+                    /**
+                     * update the timeline slicer theme.
+                     * @param {string} oldThemeName the specific name of the timeline slicer theme to update
+                     * @param {GC.Spread.Sheets.Slicers.TimelineStyle} newTheme the specific name of the timeline slicer theme to update
+                     * @returns {void}
+                     * @example
+                     * ```
+                     * // update timeline slicer theme
+                     * timelineStyle = spread.customTimelineThemes.update("custom0", new GC.Spread.Sheets.Slicers.TimelineStyle());
+                     * ```
+                     */
+                    update(oldThemeName: string,  newTheme: GC.Spread.Sheets.Slicers.TimelineStyle): void;
+                }
+
                 export class DOMTableSlicer extends GC.Spread.Sheets.FloatingObjects.FloatingObject{
                     /**
                      * Represents a slicer.
@@ -45400,7 +47137,7 @@ declare module GC{
                     sortState(value?: GC.Spread.Sheets.SortState): any;
                     /**
                      * Gets or sets the style of the slicer.
-                     * @param {GC.Spread.Sheets.Slicers.SlicerStyle} value The style of the slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer, defining its overall look and presentation.
+                     * @param {string | GC.Spread.Sheets.Slicers.SlicerStyle} value The style or style name of the slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer, defining its overall look and presentation.
                      * @returns {GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.ISlicer} If no value is set, returns The style of the slicer; otherwise, returns the slicer.
                      * @example
                      * ```
@@ -45430,7 +47167,16 @@ declare module GC{
                      * slicer.style(style1);
                      * ```
                      */
-                    style(value?: GC.Spread.Sheets.Slicers.SlicerStyle): any;
+                    style(value?: string | GC.Spread.Sheets.Slicers.SlicerStyle): any;
+                    /**
+                     * Get the slicer Image src of type Base64 string.
+                     * @returns {String} return the slicer Image Base64 src string.
+                     * @example
+                     * ```
+                     * let slicerImageSrc = sheet.slicers.all()[0].toImageSrc();
+                     * ```
+                     */
+                    toImageSrc(): string;
                     /**
                      * Gets or sets whether to visually distinguish the items with no data.
                      * @param {boolean} [value] The setting for items with no data. The visuallyNoDataItems property of a slicer specifies the visual representation or handling of items with no associated data within the slicer.
@@ -45560,6 +47306,11 @@ declare module GC{
                      * ```
                      */
                     getDOMElement(): HTMLElement;
+                    /**
+                     * Gets or sets a style name for the table item slicer.
+                     * @returns {string} returns the table item slicer style name.
+                     */
+                    getStyleName(): string | undefined;
                     /**
                      * Gets or sets the height of the item slicer.
                      * @param {number} [value] The height of the item slicer. The height property of a slicer specifies the vertical dimension or height of the slicer, determining its size along the y-axis.
@@ -45737,8 +47488,8 @@ declare module GC{
                     sortState(value?: GC.Spread.Sheets.SortState): any;
                     /**
                      * Gets or sets the style of the item slicer.
-                     * @param {Object} value The style of the item slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer control, defining its overall look and presentation.
-                     * @returns {Object | GC.Spread.Sheets.Slicers.ItemSlicer} If no value is set, returns The style of the item slicer; otherwise, returns the item slicer.
+                     * @param {string | GC.Spread.Sheets.Slicers.SlicerStyle} value The style or style name of the item slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer control, defining its overall look and presentation.
+                     * @returns {GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.ItemSlicer} If no value is set, returns The style of the item slicer; otherwise, returns the item slicer.
                      * @example
                      * ```
                      * The style is json data, its json schema is as follows:
@@ -45847,7 +47598,7 @@ declare module GC{
                      * console.log(newValue);
                      * ```
                      */
-                    style(value?: any): any;
+                    style(value?: string | GC.Spread.Sheets.Slicers.SlicerStyle): GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.ItemSlicer;
                     /**
                      * Gets or sets whether to visually distinguish the items with no data.
                      * @param {boolean} [value] The setting for items with no data. The visuallyNoDataItems property of a slicer specifies the visual representation or handling of items with no associated data within the slicer control.
@@ -46553,7 +48304,7 @@ declare module GC{
                     startRowOffset(value?: number): any;
                     /**
                      * Gets or sets the style of the slicer.
-                     * @param {GC.Spread.Sheets.Slicers.SlicerStyle} [value] The style of the slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer control, defining its overall look and presentation.
+                     * @param {string | GC.Spread.Sheets.Slicers.SlicerStyle} [value] The style of the slicer. The style property of a slicer specifies the visual appearance and formatting style applied to the slicer control, defining its overall look and presentation.
                      * @returns {GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.IItemSlicer} If no style is set, returns the style of the slicer; otherwise, returns the slicer.
                      * @example
                      * ```
@@ -46579,7 +48330,16 @@ declare module GC{
                      * console.log(newValue);
                      * ```
                      */
-                    style(value?: GC.Spread.Sheets.Slicers.SlicerStyle): any;
+                    style(value?: string | GC.Spread.Sheets.Slicers.SlicerStyle): any;
+                    /**
+                     * Get the slicer Image src of type Base64 string.
+                     * @returns {String} return the slicer Image Base64 src string.
+                     * @example
+                     * ```
+                     * let slicerImageSrc = sheet.slicers.all()[0].toImageSrc();
+                     * ```
+                     */
+                    toImageSrc(): string;
                     /**
                      * Gets or sets the visuallyNoDataItems of the slicer.
                      * @param {boolean} [value] The visuallyNoDataItems of the slicer. The visuallyNoDataItems property of a slicer specifies the visual representation or handling of items with no associated data within the slicer control.
@@ -46678,7 +48438,7 @@ declare module GC{
                     /**
                      * Represents the slicer border.
                      * @param {number} borderWidth The border width.
-                     * @param {string} borderStyle The border style.
+                     * @param {GC.Spread.Sheets.Slicers.SlicerBorderStyle} borderStyle The border style.
                      * @param {string} borderColor The border color.
                      * @class
                      * @example
@@ -46714,7 +48474,7 @@ declare module GC{
                      * slicer.style(style1);
                      * ```
                      */
-                    constructor(borderWidth: number,  borderStyle: string,  borderColor: string);
+                    constructor(borderWidth: number,  borderStyle: GC.Spread.Sheets.Slicers.SlicerBorderStyle,  borderColor: string);
                     /**
                      * Gets or sets the border color.
                      * @param {string} [value] The border color.
@@ -46757,9 +48517,8 @@ declare module GC{
                     borderColor(value?: string): any;
                     /**
                      * Gets or sets the border style.
-                     * @param {string} [value] The border style. <br/>
-                     * the valid border styles are: "empty", "thin", "medium", "dashed", "dotted", "thick", "double", "hair", "mediumDashed", "dashDot", "mediumDashDot", "dashDotDot", "mediumDashDotDot", "slantedDashDot"
-                     * @returns {string | GC.Spread.Sheets.Slicers.SlicerBorder}  If no value is set, returns the border style; otherwise, returns the slicer border.
+                     * @param {GC.Spread.Sheets.Slicers.SlicerBorderStyle} [value] The border style. <br/>
+                     * @returns {GC.Spread.Sheets.Slicers.SlicerBorderStyle | GC.Spread.Sheets.Slicers.SlicerBorder}  If no value is set, returns the border style; otherwise, returns the slicer border.
                      * @example
                      * ```
                      * //create a table
@@ -46795,7 +48554,7 @@ declare module GC{
                      * slicer.style(style1);
                      * ```
                      */
-                    borderStyle(value?: string): any;
+                    borderStyle(value?: GC.Spread.Sheets.Slicers.SlicerBorderStyle): any;
                     /**
                      * Gets or sets the border width.
                      * @param {number} [value] The border width.
@@ -46850,7 +48609,7 @@ declare module GC{
                      * @param {string} slicerName The name of the slicer.
                      * @param {string} targetName The name of the table or pivot table that relates to the slicer.
                      * @param {string} itemName The name of the table column or pivot table field that relates to the slicer.
-                     * @param {GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.TimelineStyle} style The style of the slicer.
+                     * @param {string | GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.TimelineStyle} style The style of the slicer.
                      * @param {GC.Spread.Sheets.Slicers.SlicerType} [type] slicer type, table slicer / pivot item slicer / pivot timeline slicer have their own type.
                      * @return {GC.Spread.Sheets.Slicers.ISlicer} The slicer that has been added to the sheet.
                      * @example
@@ -46877,7 +48636,7 @@ declare module GC{
                      * slicer.position(new GC.Spread.Sheets.Point(100, 200));
                      * ```
                      */
-                    add(slicerName: string,  targetName: string,  itemName: string,  style: GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.TimelineStyle,  type?: GC.Spread.Sheets.Slicers.SlicerType): GC.Spread.Sheets.Slicers.ISlicer;
+                    add(slicerName: string,  targetName: string,  itemName: string,  style?: string | GC.Spread.Sheets.Slicers.SlicerStyle | GC.Spread.Sheets.Slicers.TimelineStyle,  type?: GC.Spread.Sheets.Slicers.SlicerType): GC.Spread.Sheets.Slicers.ISlicer;
                     /**
                      * Gets all of the slicers in the sheet with the indicated table name and column name.
                      * @param {string} [targetName] The name of the target (table or pivot table).
@@ -46990,8 +48749,52 @@ declare module GC{
                     /**
                      * Represents the slicer style settings.
                      * @class
+                     * @example
+                     * ```
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
+                     * var activeSheet = spread.getActiveSheet();
+                     * var datas = [
+                     *     ["1", "NewYork", "1968/6/8"],
+                     *     ["4", "NewYork", "1972/7/3"],
+                     *     ["4", "NewYork", "1964/3/2"]];
+                     * var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
+                     * var dataColumns = ["Name", "City", "Birthday"];
+                     * table.setColumnName(0, dataColumns[0]);
+                     * table.setColumnName(1, dataColumns[1]);
+                     * table.setColumnName(2, dataColumns[2]);
+                     * var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
+                     
+                     * //set customized style
+                     * var style = new GC.Spread.Sheets.Slicers.SlicerStyle();
+                     * var styleInfo1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * styleInfo1.backColor("orange");
+                     * styleInfo1.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(2,"solid","green"));
+                     * style.wholeSlicerStyle(styleInfo1);
+                     * var styleInfo2 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * styleInfo2.backColor("red");
+                     * styleInfo2.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(4,"solid","gray"));
+                     * style.hoveredSelectedItemWithDataStyle(styleInfo2);
+                     * slicer.style(style);
+                     * ```
                      */
                     constructor();
+                    /**
+                     * Loads the object state from the specified JSON string.
+                     * @param {Object} data The item slicer theme data from deserialization.
+                     * @example
+                     * ```
+                     * //This example uses the fromJSON method.
+                     * const light1 = GC.Spread.Sheets.Slicers.SlicerStyles.light1();
+                     * //export
+                     * const jsonStr = JSON.stringify(light1.toJSON());
+                     * //import
+                     * const newTheme = new GC.Spread.Sheets.Slicers.SlicerStyle();
+                     * newTheme.fromJSON(JSON.parse(jsonStr));
+                     * newTheme.name('custom1');
+                     * alert(jsonStr);
+                     * ```
+                     */
+                    fromJSON(data: Object): void;
                     /**
                      * Gets or sets the style of the slicer header.
                      * @param {GC.Spread.Sheets.Slicers.SlicerStyleInfo} [value] The style of the slicer header.
@@ -47440,6 +49243,23 @@ declare module GC{
                      * ```
                      */
                     selectedItemWithNoDataStyle(value?: GC.Spread.Sheets.Slicers.SlicerStyleInfo): any;
+                    /**
+                     * Saves the object state to a JSON string.
+                     * @returns {Object} The item slicer theme data.
+                     * @example
+                     * ```
+                     * //This example uses the toJSON method.
+                     * const light1 = GC.Spread.Sheets.Slicers.SlicerStyles.light1();
+                     * //export
+                     * const jsonStr = JSON.stringify(light1.toJSON());
+                     * //import
+                     * const newTheme = new GC.Spread.Sheets.Slicers.SlicerStyle();
+                     * newTheme.fromJSON(JSON.parse(jsonStr));
+                     * newTheme.name('custom1');
+                     * alert(jsonStr);
+                     * ```
+                     */
+                    toJSON(): Object;
                     /**
                      * Gets or sets the style of the unselected item with data.
                      * @param {GC.Spread.Sheets.Slicers.SlicerStyleInfo} [value] The style of the unselected item with data.
@@ -47658,8 +49478,12 @@ declare module GC{
                      * @param {GC.Spread.Sheets.Slicers.SlicerBorder} [borderRight] The right border of the style information.
                      * @param {GC.Spread.Sheets.Slicers.SlicerBorder} [borderBottom] The bottom border of the style information.
                      * @param {GC.Spread.Sheets.TextDecorationType} [textDecoration] The text decoration of the style information.
+                     * @param {string} [fontStyle] The font style of the style information.
+                     * @param {string} [fontWeight] The font weight of the style information.
+                     * @param {string} [fontSize] The font size of the style information.
+                     * @param {string} [fontFamily] The font family of the style information.
                      */
-                    constructor(backColor?: string,  foreColor?: string,  font?: string,  borderLeft?: GC.Spread.Sheets.Slicers.SlicerBorder,  borderTop?: GC.Spread.Sheets.Slicers.SlicerBorder,  borderRight?: GC.Spread.Sheets.Slicers.SlicerBorder,  borderBottom?: GC.Spread.Sheets.Slicers.SlicerBorder,  textDecoration?: GC.Spread.Sheets.TextDecorationType);
+                    constructor(backColor?: string,  foreColor?: string,  font?: string,  borderLeft?: GC.Spread.Sheets.Slicers.SlicerBorder,  borderTop?: GC.Spread.Sheets.Slicers.SlicerBorder,  borderRight?: GC.Spread.Sheets.Slicers.SlicerBorder,  borderBottom?: GC.Spread.Sheets.Slicers.SlicerBorder,  textDecoration?: GC.Spread.Sheets.TextDecorationType,  fontStyle?: string,  fontWeight?: string,  fontSize?: string,  fontFamily?: string);
                     /**
                      * Gets or sets the background color of the style information.
                      * @param {string} [value] The background color of the style information.
@@ -47724,24 +49548,108 @@ declare module GC{
                      * //style
                      * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
                      * hstyle.backColor("red");
-                     * hstyle.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
+                     * hstyle.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
+                     * var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
+                     * style1.hoveredSelectedItemWithDataStyle(hstyle);
+                     * //add a slicer to the sheet and return the slicer instance.
+                     * var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
+                     * //change the slicer properties.
+                     * slicer.position(new GC.Spread.Sheets.Point(100, 200));
+                     * slicer.style(style1);
+                     * ```
+                     */
+                    borderBottom(value?: GC.Spread.Sheets.Slicers.SlicerBorder): any;
+                    /**
+                     * Gets or sets the left border of the style information.
+                     * @param {GC.Spread.Sheets.Slicers.SlicerBorder} [value] The left border of the style information.
+                     * @returns {GC.Spread.Sheets.Slicers.SlicerBorder | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the left border of the style information; otherwise, returns the slicer style information.
+                     * @example
+                     * ```
+                     * //This example sets the left border.
+                     * //create a table
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
+                     * var activeSheet = spread.getActiveSheet();
+                     * var datas = [
+                     *     ["1", "NewYork", "1968/6/8", "80", "180"],
+                     *     ["4", "NewYork", "1972/7/3", "72", "168"],
+                     *     ["4", "NewYork", "1964/3/2", "71", "179"],
+                     *     ["5", "Washington", "1972/8/8","80", "171"],
+                     *     ["6", "Washington", "1986/2/2", "89", "161"],
+                     *     ["7", "Washington", "2012/2/15", "71", "240"]];
+                     * var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
+                     * var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
+                     * table.setColumnName(0, dataColumns[0]);
+                     * table.setColumnName(1, dataColumns[1]);
+                     * table.setColumnName(2, dataColumns[2]);
+                     * table.setColumnName(3, dataColumns[3]);
+                     * table.setColumnName(4, dataColumns[4]);
+                     * //style
+                     * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * hstyle.backColor("red");
+                     * hstyle.borderLeft(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
+                     * hstyle.borderRight(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
+                     * var hstyle1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * hstyle1.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "dashed", "blue"));
+                     * var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
+                     * style1.hoveredSelectedItemWithDataStyle(hstyle);
+                     * style1.unSelectedItemWithDataStyle(hstyle1);
+                     * //add a slicer to the sheet and return the slicer instance.
+                     * var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
+                     *  //change the slicer properties.
+                     * slicer.position(new GC.Spread.Sheets.Point(100, 200));
+                     * slicer.style(style1);
+                     * ```
+                     */
+                    borderLeft(value?: GC.Spread.Sheets.Slicers.SlicerBorder): any;
+                    /**
+                     * Gets or sets the right border of the style information.
+                     * @param {GC.Spread.Sheets.Slicers.SlicerBorder} [value] The right border of the style information.
+                     * @returns {GC.Spread.Sheets.Slicers.SlicerBorder | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the right border of the style information; otherwise, returns the slicer style information.
+                     * @example
+                     * ```
+                     * //This example sets the border.
+                     * //create a table
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
+                     * var activeSheet = spread.getActiveSheet();
+                     * var datas = [
+                     *     ["1", "NewYork", "1968/6/8", "80", "180"],
+                     *     ["4", "NewYork", "1972/7/3", "72", "168"],
+                     *     ["4", "NewYork", "1964/3/2", "71", "179"],
+                     *     ["5", "Washington", "1972/8/8","80", "171"],
+                     *     ["6", "Washington", "1986/2/2", "89", "161"],
+                     *     ["7", "Washington", "2012/2/15", "71", "240"]];
+                     * var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
+                     * var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
+                     * table.setColumnName(0, dataColumns[0]);
+                     * table.setColumnName(1, dataColumns[1]);
+                     * table.setColumnName(2, dataColumns[2]);
+                     * table.setColumnName(3, dataColumns[3]);
+                     * table.setColumnName(4, dataColumns[4]);
+                     * //style
+                     * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * hstyle.backColor("red");
+                     * hstyle.borderLeft(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
+                     * hstyle.borderRight(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
+                     * var hstyle1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * hstyle1.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "dashed", "blue"));
                      * var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
                      * style1.hoveredSelectedItemWithDataStyle(hstyle);
+                     * style1.unSelectedItemWithDataStyle(hstyle1);
                      * //add a slicer to the sheet and return the slicer instance.
                      * var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
-                     * //change the slicer properties.
+                     *  //change the slicer properties.
                      * slicer.position(new GC.Spread.Sheets.Point(100, 200));
                      * slicer.style(style1);
                      * ```
                      */
-                    borderBottom(value?: GC.Spread.Sheets.Slicers.SlicerBorder): any;
+                    borderRight(value?: GC.Spread.Sheets.Slicers.SlicerBorder): any;
                     /**
-                     * Gets or sets the left border of the style information.
-                     * @param {GC.Spread.Sheets.Slicers.SlicerBorder} [value] The left border of the style information.
-                     * @returns {GC.Spread.Sheets.Slicers.SlicerBorder | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the left border of the style information; otherwise, returns the slicer style information.
+                     * Gets or sets the top border of the style information.
+                     * @param {GC.Spread.Sheets.Slicers.SlicerBorder} [value] The top border of the style information.
+                     * @returns {GC.Spread.Sheets.Slicers.SlicerBorder | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the top border of the style information; otherwise, returns the slicer style information.
                      * @example
                      * ```
-                     * //This example sets the left border.
+                     * //This example sets the border.
                      * //create a table
                      * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
                      * var activeSheet = spread.getActiveSheet();
@@ -47776,14 +49684,14 @@ declare module GC{
                      * slicer.style(style1);
                      * ```
                      */
-                    borderLeft(value?: GC.Spread.Sheets.Slicers.SlicerBorder): any;
+                    borderTop(value?: GC.Spread.Sheets.Slicers.SlicerBorder): any;
                     /**
-                     * Gets or sets the right border of the style information.
-                     * @param {GC.Spread.Sheets.Slicers.SlicerBorder} [value] The right border of the style information.
-                     * @returns {GC.Spread.Sheets.Slicers.SlicerBorder | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the right border of the style information; otherwise, returns the slicer style information.
+                     * Gets or sets the font of the style information.
+                     * @param {string} [value] The font of the style information.
+                     * @returns {string | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the font of the style information; otherwise, returns the slicer style information.
                      * @example
                      * ```
-                     * //This example sets the border.
+                     * //This example sets the font.
                      * //create a table
                      * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
                      * var activeSheet = spread.getActiveSheet();
@@ -47804,8 +49712,9 @@ declare module GC{
                      * //style
                      * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
                      * hstyle.backColor("red");
-                     * hstyle.borderLeft(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
-                     * hstyle.borderRight(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
+                     * hstyle.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
+                     * hstyle.font("8pt Arial");
+                     * hstyle.textDecoration(GC.Spread.Sheets.TextDecorationType.underline);
                      * var hstyle1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
                      * hstyle1.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "dashed", "blue"));
                      * var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
@@ -47818,14 +49727,14 @@ declare module GC{
                      * slicer.style(style1);
                      * ```
                      */
-                    borderRight(value?: GC.Spread.Sheets.Slicers.SlicerBorder): any;
+                    font(value?: string): any;
                     /**
-                     * Gets or sets the top border of the style information.
-                     * @param {GC.Spread.Sheets.Slicers.SlicerBorder} [value] The top border of the style information.
-                     * @returns {GC.Spread.Sheets.Slicers.SlicerBorder | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the top border of the style information; otherwise, returns the slicer style information.
+                     * Gets or sets the font size.
+                     * @param {string} [value] The font size of the style information.
+                     * @returns {string | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the font size of the style information; otherwise, returns the slicer style information.
                      * @example
                      * ```
-                     * //This example sets the border.
+                     * //This example sets a font size.
                      * //create a table
                      * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
                      * var activeSheet = spread.getActiveSheet();
@@ -47845,14 +49754,45 @@ declare module GC{
                      * table.setColumnName(4, dataColumns[4]);
                      * //style
                      * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
-                     * hstyle.backColor("red");
-                     * hstyle.borderLeft(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
-                     * hstyle.borderRight(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
-                     * var hstyle1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
-                     * hstyle1.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "dashed", "blue"));
+                     * hstyle.fontSize("18pt");
+                     * var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
+                     * style1.hoveredSelectedItemWithDataStyle(hstyle);
+                     * //add a slicer to the sheet and return the slicer instance.
+                     * var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
+                     * //change the slicer properties.
+                     * slicer.position(new GC.Spread.Sheets.Point(100, 200));
+                     * slicer.style(style1);
+                     */ ///* function fontFamily(value?: string): any
+                     /**
+                     * Gets or sets the font family.
+                     * ```
+                     * @param {string} [value] The font family of the style information.
+                     * @returns {string | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the font family of the style information; otherwise, returns the slicer style information.
+                     * @example
+                     * ```
+                     * //This example sets a font family.
+                     * //create a table
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
+                     * var activeSheet = spread.getActiveSheet();
+                     * var datas = [
+                     *     ["1", "NewYork", "1968/6/8", "80", "180"],
+                     *     ["4", "NewYork", "1972/7/3", "72", "168"],
+                     *     ["4", "NewYork", "1964/3/2", "71", "179"],
+                     *     ["5", "Washington", "1972/8/8","80", "171"],
+                     *     ["6", "Washington", "1986/2/2", "89", "161"],
+                     *     ["7", "Washington", "2012/2/15", "71", "240"]];
+                     * var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
+                     * var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
+                     * table.setColumnName(0, dataColumns[0]);
+                     * table.setColumnName(1, dataColumns[1]);
+                     * table.setColumnName(2, dataColumns[2]);
+                     * table.setColumnName(3, dataColumns[3]);
+                     * table.setColumnName(4, dataColumns[4]);
+                     * //style
+                     * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * hstyle.fontFamily("Arial Black");
                      * var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
                      * style1.hoveredSelectedItemWithDataStyle(hstyle);
-                     * style1.unSelectedItemWithDataStyle(hstyle1);
                      * //add a slicer to the sheet and return the slicer instance.
                      * var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
                      *  //change the slicer properties.
@@ -47860,14 +49800,14 @@ declare module GC{
                      * slicer.style(style1);
                      * ```
                      */
-                    borderTop(value?: GC.Spread.Sheets.Slicers.SlicerBorder): any;
+                    fontSize(value?: string): any;
                     /**
-                     * Gets or sets the font of the style information.
-                     * @param {string} [value] The font of the style information.
-                     * @returns {string | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the font of the style information; otherwise, returns the slicer style information.
+                     * Gets or sets the font style.
+                     * @param {string} [value] The font style of the style information.
+                     * @returns {string | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the font style of the style information; otherwise, returns the slicer style information.
                      * @example
                      * ```
-                     * //This example sets the font.
+                     * //This example sets a font style.
                      * //create a table
                      * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
                      * var activeSheet = spread.getActiveSheet();
@@ -47887,23 +49827,54 @@ declare module GC{
                      * table.setColumnName(4, dataColumns[4]);
                      * //style
                      * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
-                     * hstyle.backColor("red");
-                     * hstyle.borderBottom(new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green"));
-                     * hstyle.font("8pt Arial");
-                     * hstyle.textDecoration(GC.Spread.Sheets.TextDecorationType.underline);
-                     * var hstyle1 = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
-                     * hstyle1.borderTop(new GC.Spread.Sheets.Slicers.SlicerBorder(2, "dashed", "blue"));
+                     * hstyle.fontStyle("italic");
                      * var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
                      * style1.hoveredSelectedItemWithDataStyle(hstyle);
-                     * style1.unSelectedItemWithDataStyle(hstyle1);
                      * //add a slicer to the sheet and return the slicer instance.
                      * var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
-                     *  //change the slicer properties.
+                     * //change the slicer properties.
                      * slicer.position(new GC.Spread.Sheets.Point(100, 200));
                      * slicer.style(style1);
                      * ```
                      */
-                    font(value?: string): any;
+                    fontStyle(value?: string): any;
+                    /**
+                     * Gets or sets the font weight.
+                     * @param {string} [value] The font weight of the style information.
+                     * @returns {string | GC.Spread.Sheets.Slicers.SlicerStyleInfo}  If no value is set, returns the font weight of the style information; otherwise, returns the slicer style information.
+                     * @example
+                     * ```
+                     * //This example sets a font weight.
+                     * //create a table
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
+                     * var activeSheet = spread.getActiveSheet();
+                     * var datas = [
+                     *     ["1", "NewYork", "1968/6/8", "80", "180"],
+                     *     ["4", "NewYork", "1972/7/3", "72", "168"],
+                     *     ["4", "NewYork", "1964/3/2", "71", "179"],
+                     *     ["5", "Washington", "1972/8/8","80", "171"],
+                     *     ["6", "Washington", "1986/2/2", "89", "161"],
+                     *     ["7", "Washington", "2012/2/15", "71", "240"]];
+                     * var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
+                     * var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
+                     * table.setColumnName(0, dataColumns[0]);
+                     * table.setColumnName(1, dataColumns[1]);
+                     * table.setColumnName(2, dataColumns[2]);
+                     * table.setColumnName(3, dataColumns[3]);
+                     * table.setColumnName(4, dataColumns[4]);
+                     * //style
+                     * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
+                     * hstyle.fontWeight("bold");
+                     * var style1 = new GC.Spread.Sheets.Slicers.SlicerStyle();
+                     * style1.hoveredSelectedItemWithDataStyle(hstyle);
+                     * //add a slicer to the sheet and return the slicer instance.
+                     * var slicer = activeSheet.slicers.add("slicer1",table.name(),"Name");
+                     * //change the slicer properties.
+                     * slicer.position(new GC.Spread.Sheets.Point(100, 200));
+                     * slicer.style(style1);
+                     * ```
+                     */
+                    fontWeight(value?: string): any;
                     /**
                      * Gets or sets the foreground color of the style information.
                      * @param {string} [value] The foreground color of the style information.
@@ -48571,8 +50542,49 @@ declare module GC{
                     /**
                      * Represents the timeline style settings.
                      * @class
+                     * @example
+                     * ```
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
+                     * var activeSheet = spread.getActiveSheet();
+                     * var datas = [
+                     *     ["1", "NewYork", new Date("1968/6/8")],
+                     *     ["4", "NewYork", new Date("1972/7/3")],
+                     *     ["4", "NewYork", new Date("1964/3/2")]];
+                     * var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
+                     * var dataColumns = ["Name", "City", "Birthday"];
+                     * table.setColumnName(0, dataColumns[0]);
+                     * table.setColumnName(1, dataColumns[1]);
+                     * table.setColumnName(2, dataColumns[2]);
+                     *
+                     * var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
+                     * var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
+                     *
+                     * var style = new GC.Spread.Sheets.Slicers.TimelineStyle()
+                     * style.wholeSlicerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'blue', '12pt Calibri'));
+                     * style.headerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'green', '14pt Calibri'));
+                     * style.timeLevelStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('yellow'));
+                     *
+                     * timeline.style(style);
+                     * ```
                      */
                     constructor();
+                    /**
+                     * Loads the object state from the specified JSON string.
+                     * @param {Object} data The timeline slicer theme data from deserialization.
+                     * @example
+                     * ```
+                     * //This example uses the fromJSON method.
+                     * const light1 = GC.Spread.Sheets.Slicers.TimelineStyles.light1();
+                     * //export
+                     * const jsonStr = JSON.stringify(light1.toJSON());
+                     * //import
+                     * const newTheme = new GC.Spread.Sheets.Slicers.TimelineStyle();
+                     * newTheme.fromJSON(JSON.parse(jsonStr));
+                     * newTheme.name('custom1');
+                     * alert(jsonStr);
+                     * ```
+                     */
+                    fromJSON(data: Object): void;
                     /**
                      * Gets or sets the style of the slicer header.
                      * @param {GC.Spread.Sheets.Slicers.SlicerStyleInfo} [value] The style of the slicer header.
@@ -48812,6 +50824,23 @@ declare module GC{
                      * ```
                      */
                     timeLevelStyle(value?: GC.Spread.Sheets.Slicers.SlicerStyleInfo): any;
+                    /**
+                     * Saves the object state to a JSON string.
+                     * @returns {Object} The timeline slicer theme data.
+                     * @example
+                     * ```
+                     * //This example uses the toJSON method.
+                     * const light1 = GC.Spread.Sheets.Slicers.TimelineStyles.light1();
+                     * //export
+                     * const jsonStr = JSON.stringify(light1.toJSON());
+                     * //import
+                     * const newTheme = new GC.Spread.Sheets.Slicers.TimelineStyle();
+                     * newTheme.fromJSON(JSON.parse(jsonStr));
+                     * newTheme.name('custom1');
+                     * alert(jsonStr);
+                     * ```
+                     */
+                    toJSON(): Object;
                     /**
                      * Gets or sets the style of the unselected time block.
                      * @param {GC.Spread.Sheets.Slicers.SlicerStyleInfo} [value] The style of the unselected time block.
@@ -50585,6 +52614,75 @@ declare module GC{
                 }
 
 
+                export class CustomTableThemeManager extends GC.Spread.Sheets.CustomThemeManagerBase{
+                    /**
+                     * Represents a custom table theme manager that can manage all custom table themes.
+                     * @class
+                     * @param {GC.Spread.Sheets.Workbook} workbook The workbook.
+                     * @extends GC.Spread.Sheets.CustomThemeManagerBase
+                     */
+                    constructor(workbook: GC.Spread.Sheets.Workbook);
+                    /**
+                     * add a new table theme.
+                     * @param {string | GC.Spread.Sheets.Tables.TableTheme} theme the new table theme or just a new table theme name you want to add
+                     * @returns {GC.Spread.Sheets.Tables.TableTheme | undefined} return the newly added table theme, if the named table theme is existed, failed to add table theme and return undefined
+                     * @example
+                     * ```
+                     * // add a new table theme named "custom0"
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
+                     * let tableStyle = spread.customTableThemes.add("custom0");
+                     * let firstColumnStripStyle = new GC.Spread.Sheets.Tables.TableStyle();
+                     * firstColumnStripStyle.backColor = "#0C66E4";
+                     * tableStyle.firstColumnStripStyle(firstColumnStripStyle);
+                     * ```
+                     */
+                    add(theme: string | GC.Spread.Sheets.Tables.TableTheme): GC.Spread.Sheets.Tables.TableTheme | undefined;
+                    /**
+                     * get the table themes collection.
+                     * @returns Array<GC.Spread.Sheets.Tables.TableTheme>
+                     * @example
+                     * ```
+                     * // get all table table themes
+                     * let tableStylesCollection = spread.customTableThemes.all();
+                     * ```
+                     */
+                    all(): Array<GC.Spread.Sheets.Tables.TableTheme>;
+                    /**
+                     * get the table theme by name.
+                     * @param {string} name the specific name of the table theme to get
+                     * @returns {GC.Spread.Sheets.Tables.TableTheme | undefined} If the corresponding table theme with the spefic name is found, return the theme; otherwise, return undefined.
+                     * @example
+                     * ```
+                     * // get table theme
+                     * tableStyle = spread.customTableThemes.get("custom0");
+                     * ```
+                     */
+                    get(name: string): GC.Spread.Sheets.Tables.TableTheme | undefined;
+                    /**
+                     * remove the table theme by name.
+                     * @param {string} name the specific name of the table theme to remove
+                     * @returns {void}
+                     * @example
+                     * ```
+                     * // delete table theme
+                     * spread.customTableThemes.remove("custom0");
+                     * ```
+                     */
+                    remove(name: string): void;
+                    /**
+                     * update the table theme.
+                     * @param {string} oldThemeName the specific name of the table theme to update
+                     * @param {GC.Spread.Sheets.Tables.TableTheme} newTheme the specific name of the table theme to update
+                     * @returns {void}
+                     * @example
+                     * ```
+                     * // update table theme
+                     * tableStyle = spread.customTableThemes.update("custom0", new GC.Spread.Sheets.Tables.TableTheme());
+                     * ```
+                     */
+                    update(oldThemeName: string,  newTheme: GC.Spread.Sheets.Tables.TableTheme): void;
+                }
+
                 export class Table{
                     /**
                      * Represents a table that can be added in a sheet.
@@ -50594,14 +52692,14 @@ declare module GC{
                      * @param {number} col The table column index.
                      * @param {number} rowCount The table row count.
                      * @param {number} colCount The table column count.
-                     * @param {GC.Spread.Sheets.Tables.TableTheme} style The table style.
+                     * @param {string | GC.Spread.Sheets.Tables.TableTheme} style The table style or style name.
                      * @param {Object} options The initialization options of the table.
                      * @param {boolean} [options.showHeader] - Whether to display the table header.
                      * @param {boolean} [options.showFooter] - Whether to display a footer.
                      * @param {boolean} [options.useFooterDropDownList] - whether to use the footer dropdown list for a total row.
                      * @param {boolean} [options.showResizeHandle] - Whether to display the resize handle for table.
                      */
-                    constructor(name?: string,  row?: number,  col?: number,  rowCount?: number,  colCount?: number,  style?: GC.Spread.Sheets.Tables.TableTheme);
+                    constructor(name?: string,  row?: number,  col?: number,  rowCount?: number,  colCount?: number,  style?: string | GC.Spread.Sheets.Tables.TableTheme);
                     /**
                      * Gets or sets the allowAutoExpandState of the table.
                      * @param {boolean} [allowAutoExpandState] The allowAutoExpandState of the table.
@@ -50941,6 +53039,11 @@ declare module GC{
                      * ```
                      */
                     getSlicerData(): GC.Spread.Sheets.Slicers.TableSlicerData;
+                    /**
+                     * Gets or sets a style name for the table.
+                     * @returns {string} returns the table style name.
+                     */
+                    getStyleName(): string | undefined;
                     /**
                      * Gets the header index in the sheet.
                      * @returns {number} The header index.
@@ -51167,10 +53270,10 @@ declare module GC{
                     showResizeHandle(value?: boolean): any;
                     /**
                      * Gets or sets a style for the table.
-                     * @param {GC.Spread.Sheets.Tables.TableTheme} value The style for the table.
+                     * @param {string | GC.Spread.Sheets.Tables.TableTheme} value The style or style name for the table.
                      * @returns {GC.Spread.Sheets.Tables.TableTheme | GC.Spread.Sheets.Tables.Table} If no value is set, returns the table style; otherwise, returns the table.
                      */
-                    style(value?: GC.Spread.Sheets.Tables.TableTheme): any;
+                    style(value?: string | GC.Spread.Sheets.Tables.TableTheme): any;
                     /**
                      * Gets or sets a value that indicates whether to use the footer dropdown list for a total row.
                      * @param {boolean} [value] Whether to use the footer dropdown list.
@@ -51380,13 +53483,13 @@ declare module GC{
                      * @param {number} column The column index.
                      * @param {number} rowCount The row count of the table.
                      * @param {number} columnCount The column count of the table.
-                     * @param {GC.Spread.Sheets.Tables.TableTheme} style The style of the table.
+                     * @param {string | GC.Spread.Sheets.Tables.TableTheme} style The style of the table.
                      * @param {GC.Spread.Sheets.Tables.ITableOptions} options The initialization options of the table.
                      * @returns {GC.Spread.Sheets.Tables.Table} The new table instance.
                      * @example
                      * ```
                      * //This example adds a table.
-                     * activeSheet.tables.add("Table1", 0, 0, 3, 3, GC.Spread.Sheets.Tables.TableThemes.dark1);
+                     * activeSheet.tables.add("Table1", 0, 0, 3, 3, 'dark1');
                      * activeSheet.getCell(0,0).text("Name");
                      * activeSheet.getCell(0,1).text("Value");
                      * activeSheet.getCell(0,2).text("T/F");
@@ -51395,7 +53498,7 @@ declare module GC{
                      * activeSheet.getCell(1,2).text("T");
                      * ```
                      */
-                    add(name?: string,  row?: number,  column?: number,  rowCount?: number,  columnCount?: number,  style?: GC.Spread.Sheets.Tables.TableTheme): GC.Spread.Sheets.Tables.Table;
+                    add(name?: string,  row?: number,  column?: number,  rowCount?: number,  columnCount?: number,  style?: string | GC.Spread.Sheets.Tables.TableTheme): GC.Spread.Sheets.Tables.Table;
                     /**
                      * Adds a range table with a specified data source to the sheet.
                      * @param {string} name The table name.
@@ -52038,6 +54141,23 @@ declare module GC{
                      * ```
                      */
                     footerRowStyle(value?: GC.Spread.Sheets.Tables.TableStyle): any;
+                    /**
+                     * Loads the object state from the specified JSON string.
+                     * @param {Object} data The table theme data from deserialization.
+                     * @example
+                     * ```
+                     * //This example uses the fromJSON method.
+                     * const light1 = GC.Spread.Sheets.Tables.TableTheme.light1;
+                     * //export
+                     * const jsonStr = JSON.stringify(light1.toJSON());
+                     * //import
+                     * const newTheme = new GC.Spread.Sheets.Tables.TableTheme();
+                     * newTheme.fromJSON(JSON.parse(jsonStr));
+                     * newTheme.name('custom1');
+                     * alert(jsonStr);
+                     * ```
+                     */
+                    fromJSON(data: Object): void;
                     /**
                      * Gets or sets the style of the header row area.
                      * @param {GC.Spread.Sheets.Tables.TableStyle} [value] The style for the header row area.
@@ -52274,6 +54394,23 @@ declare module GC{
                      * ```
                      */
                     secondRowStripStyle(value?: GC.Spread.Sheets.Tables.TableStyle): any;
+                    /**
+                     * Saves the object state to a JSON string.
+                     * @returns {Object} The table theme data.
+                     * @example
+                     * ```
+                     * //This example uses the toJSON method.
+                     * const light1 = GC.Spread.Sheets.Tables.TableTheme.light1;
+                     * //export
+                     * const jsonStr = JSON.stringify(light1.toJSON());
+                     * //import
+                     * const newTheme = new GC.Spread.Sheets.Tables.TableTheme();
+                     * newTheme.fromJSON(JSON.parse(jsonStr));
+                     * newTheme.name('custom1');
+                     * alert(jsonStr);
+                     * ```
+                     */
+                    toJSON(): Object;
                     /**
                      * Gets or sets the style of the whole table area.
                      * @param {GC.Spread.Sheets.Tables.TableStyle} [value] The style for the whole table area.
@@ -52972,9 +55109,25 @@ declare module GC{
                 }
 
 
+                export interface IColumnTypeItem{
+                    /**
+                     * identifier the column type, any of "Number", "Text", "Formula", "Checkbox", "Date", "Currency", "Percent", "Phone", "Email", "URL", "Lookup", "CreatedTime", "ModifiedTime", "Attachment", "Select", "Barcode"
+                     */
+                    name: string;
+                    /**
+                     * the display name of the column type by the culture resources
+                     */
+                    text?: string;
+                    /**
+                     * the icon before the display name of the column type
+                     */
+                    iconClass?: string;
+                }
+
+
                 export interface IDataViewChanges{
                     /**
-                     * The change type, could be one of "insert", "update" or "delete".
+                     * The change type, could be one of "insert", "update", "delete", "addColumn", "updateColumn", "removeColumn".
                      */
                     type: string;
                     /**
@@ -52985,6 +55138,18 @@ declare module GC{
                      * The original row data, only used for "update".
                      */
                     oldDataItem?: any;
+                    /**
+                     * the current column.
+                     */
+                    column?: GC.Data.IColumn;
+                    /**
+                     * the default value of the current added column.
+                     */
+                    data?: any[];
+                    /**
+                     * The original column, only used for "update column".
+                     */
+                    originalColumn?: GC.Data.IColumn;
                     /**
                      * The view index of table sheet.
                      */
@@ -52994,6 +55159,7 @@ declare module GC{
 
                 export interface IGroupByOptions extends GC.Spread.Sheets.TableSheet.IGroupColumnOptions{
                     field: string;
+                    spacing?: GC.Spread.Sheets.TableSheet.IGroupSpacingOptions;
                     summaryFields?: GC.Spread.Sheets.TableSheet.IGroupSummaryFieldOptions[];
                 }
 
@@ -53015,8 +55181,30 @@ declare module GC{
                 }
 
 
+                export interface IGroupLayoutOptions{
+                    /**
+                     * identifier the mode of the group layout
+                     */
+                    mode: GC.Spread.Sheets.TableSheet.GroupLayoutMode;
+                    /**
+                     * Specify the default position of the summary results, such as "header", "footer".
+                     */
+                    position?: "header" | "footer";
+                }
+
+
+                export interface IGroupSpacingOptions{
+                    /**
+                     * Specify the value of spacing between groups.
+                     */
+                    row?: number;
+                }
+
+
                 export interface IGroupSummaryFieldOptions extends GC.Spread.Sheets.TableSheet.IGroupColumnOptions{
                     formula: string;
+                    relateTo?: string;
+                    position?: "header" | "footer";
                     slice?: string | IGroupSummarySliceFieldOptions;
                 }
 
@@ -53130,6 +55318,30 @@ declare module GC{
                      * A color string used to represent the sheet tab color, such as "red", "#FFFF00", "rgb(255,0,0)", "Accent 5", and so on.
                      */
                     sheetTabColor?: string;
+                    /**
+                     * Whether to show the row number header.
+                     */
+                    showRowNumber?: boolean;
+                    /**
+                     * Whether to enable defining column.
+                     */
+                    enableDefineColumn?: boolean;
+                    /**
+                     * Specify the command for defining column options.
+                     */
+                    defineColumnCommand?: string;
+                    /**
+                     * Specify the command for submitting defined column options.
+                     */
+                    submitDefineColumnCommand?: string;
+                    /**
+                     * Specify the column types.
+                     */
+                    columnTypeItems?: GC.Spread.Sheets.TableSheet.IColumnTypeItem[];
+                    /**
+                     * Specify the options for group layout.
+                     */
+                    groupLayout?: GC.Spread.Sheets.TableSheet.IGroupLayoutOptions;
                 }
 
                 /**
@@ -53155,6 +55367,30 @@ declare module GC{
                     addNewEmptyRow= 3
                 }
 
+                /**
+                 * Defines how the group layout is displayed.
+                 * @enum {number}
+                 * @example
+                 * ```
+                 * // This sample shows how to change the group layout mode to outline.
+                 * tableSheet.options.groupLayout={ mode: GC.Spread.Sheets.TableSheet.GroupLayoutMode.outline };
+                 * ```
+                 */
+                export enum GroupLayoutMode{
+                    /** Specifies that the group layout is tabular mode.
+                     * @type {number}
+                     */
+                    tabular= 0,
+                    /** Specifies that the group layout is outline mode.
+                     * @type {number}
+                     */
+                    outline= 1,
+                    /** Specifies that the group layout is condensed mode.
+                     * @type {number}
+                     */
+                    condensed= 2
+                }
+
                 /**
                  * Represents where to show the group outline.
                  * @enum {number}
@@ -53266,21 +55502,29 @@ declare module GC{
                      * @param {GC.Data.View} [dataView] - The table sheet data view.
                      * @param {Object} [options] - The initialization options.
                      * @param {boolean} [options.allowAddNew] - Whether to allow to add new empty row.
+                     * @param {boolean} [options.showRowNumber] - Whether to show the row number header.
+                     * @param {boolean} [options.enableDefineColumn] - Whether to enable defining column.
+                     * @param {string} [options.defineColumnCommand] - Specify the command for defining column options.
+                     * @param {string} [options.submitDefineColumnCommand] - Specify the command for submitting defined column options.
+                     * @param {GC.Spread.Sheets.TableSheet.IColumnTypeItem[]} [options.columnTypeItems] - Specify the column types.
+                     * @param {GC.Spread.Sheets.TableSheet.IGroupLayoutOptions} [options.groupLayout] - Specify the options for group layout.
+                     * @param {GC.Spread.Sheets.TableSheet.GroupLayoutMode} [options.groupLayout.mode] - Specify the mode for group layout.
+                     * @param {"header" | "footer"} [options.groupLayout.position] - Specify the default position of the summary results.
                      * @param {string} [options.sheetTabColor] - A color string used to represent the sheet tab color, such as "red", "#FFFF00", "rgb(255,0,0)", "Accent 5", and so on.
                      * @param {GC.Spread.Sheets.TableSheet.IAlternatingRowOptions} [options.alternatingRowOptions] - Defines the alternating row style option.
                      * @param {number} [options.defaultStackRowHeight] - Tablesheet default stack row height, will calculate the average height by default.
-                     * @param {number} [options.menuItemVisibility] - The visibility of the menu item in the tablesheet.
-                     * @param {number} [options.menuItemVisibility.promoteMenuItemVisible] - Whether promoting menu item to show.
-                     * @param {number} [options.menuItemVisibility.demoteMenuItemVisible] - Whether demoting menu item to show.
-                     * @param {number} [options.menuItemVisibility.moveUpMenuItemVisible] - Whether moving up menu item to show.
-                     * @param {number} [options.menuItemVisibility.moveDownMenuItemVisible] - Whether moving down menu item to show.
-                     * @param {number} [options.menuItemVisibility.addBeforeMenuItemVisible] - Whether adding before menu item to show.
-                     * @param {number} [options.menuItemVisibility.addAfterMenuItemVisible] - Whether adding after menu item to show.
-                     * @param {number} [options.menuItemVisibility.addAboveMenuItemVisible] - Whether adding above menu item to show.
-                     * @param {number} [options.menuItemVisibility.addBelowMenuItemVisible] - Whether adding below menu item to show.
-                     * @param {number} [options.menuItemVisibility.expandAllLevelMenuItemVisible] - Whether expanding all level menu item to show.
-                     * @param {number} [options.menuItemVisibility.collapseAllLevelMenuItemVisible] - Whether collapsing all level menu item to show.
-                     * @param {number} [options.menuItemVisibility.expandToLevelMenuItemVisible] - Whether expanding to level menu item to show.
+                     * @param {GC.Spread.Sheets.TableSheet.IMenuItemVisibility} [options.menuItemVisibility] - The visibility of the menu item in the tablesheet.
+                     * @param {boolean} [options.menuItemVisibility.promoteMenuItemVisible] - Whether promoting menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.demoteMenuItemVisible] - Whether demoting menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.moveUpMenuItemVisible] - Whether moving up menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.moveDownMenuItemVisible] - Whether moving down menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.addBeforeMenuItemVisible] - Whether adding before menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.addAfterMenuItemVisible] - Whether adding after menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.addAboveMenuItemVisible] - Whether adding above menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.addBelowMenuItemVisible] - Whether adding below menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.expandAllLevelMenuItemVisible] - Whether expanding all level menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.collapseAllLevelMenuItemVisible] - Whether collapsing all level menu item to show.
+                     * @param {boolean} [options.menuItemVisibility.expandToLevelMenuItemVisible] - Whether expanding to level menu item to show.
                      * @example
                      * ```
                      * //This example creates a empty TableSheet.
@@ -53319,6 +55563,12 @@ declare module GC{
                      * @property {GC.Spread.Sheets.TableSheet.IAlternatingRowOptions} [alternatingRowOptions] - Defines the alternating row style options.
                      * @property {number} [defaultStackRowHeight] - Tablesheet default stack row height, will calculate the average height by default.
                      * @property {GC.Spread.Sheets.TableSheet.IMenuItemVisibility} [menuItemVisibility] - Tablesheet default stack row height, will calculate the average height by default.
+                     * @property {boolean} [showRowNumber] - Whether to show the row number header.
+                     * @property {boolean} [enableDefineColumn] - Whether to enable defining column.
+                     * @property {string} [defineColumnCommand] - Specify the command for defining column options.
+                     * @property {string} [submitDefineColumnCommand] - Specify the command for submitting defined column options.
+                     * @property {GC.Spread.Sheets.TableSheet.IColumnTypeItem[]} [columnTypeItems] - Specify the column types.
+                     * @property {GC.Spread.Sheets.TableSheet.IGroupLayoutOptions} [groupLayout] - Specify the options for group layout.
                      * @example
                      * ```
                      * //This example changes a TableSheet's options.
@@ -53484,14 +55734,17 @@ declare module GC{
                     expandHierarchyLevel(level: number): void;
                     /**
                      * Gets the changes of data manager in autoSync or batch mode.
-                     * @returns {GC.Spread.Sheets.TableSheet.IDataViewChanges[]} Returns a object array, each object could contain "type", "dataItem", "oldDataItem", and "index".
-                     * The "type" is the change type, could be one of "insert", "update" or "delete".
+                     * @returns {GC.Spread.Sheets.TableSheet.IDataViewChanges[]} Returns a object array, each object could contain "type", "dataItem", "oldDataItem", "column", "originalColumn", and "index".
+                     * The "type" is the change type, could be one of "insert", "update", "delete", "addColumn", "updateColumn", "removeColumn".
                      * the "dataItem" is the current row data.
                      * The "oldDataItem" is the original row data, only used for "update".
+                     * The "column" is the current column.
+                     * The "data" is the default value of the current added column.
+                     * The "originalColumn" is the original column, only used for "update column".
                      * The "index" is the view index of table sheet.
                      * @example
                      * ```
-                     * //This example get changes manually in autoSync or batch mode, including updated rows, inserted rows and deleted rows.
+                     * //This example get changes manually in autoSync or batch mode, including updated rows, inserted rows, deleted rows, add column, update column, remove column.
                      * tableSheet.getChanges();
                      * ```
                      */