@mescius/spread-sheets 17.1.10 → 18.0.1

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

@@ -8104,6 +8104,36 @@ declare module GC{
                  * ```
                  */
                 subtotalType(fieldName: string,  type?:GC.Pivot.SubtotalType): GC.Pivot.SubtotalType | void;
+                /**
+                 * @description set or get whether the field displays subtotal information.
+                 * @param {string} fieldName Indicates the field name.
+                 * @param {boolean} position Indicates whether to display subtotal information for the field.
+                 * @returns {boolean}
+                 * @example
+                 * ```
+                 * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
+                 * var sourceSheet = spread.getSheet(0)
+                 * var sheet = spread.getSheet(1);
+                 * var sourceData = [["Date","Buyer","Type","Amount"],
+                 *                  ["01-Jan","Mom","Fuel",74],
+                 *                  ["15-Jan","Mom","Food",235],
+                 *                  ["17-Jan","Dad","Sports",20],
+                 *                  ["21-Jan","Kelly","Books",125]];
+                 * sourceSheet.setArray(0, 0, sourceData);
+                 * sourceSheet.tables.add('sourceData', 0, 0, 5, 4);
+                 * var layout = GC.Spread.Pivot.PivotTableLayoutType.compact;
+                 * var theme = GC.Spread.Pivot.PivotTableThemes.medium2;
+                 * var options = {showRowHeader: true, showColumnHeader: true};
+                 * sheet.pivotTables.add("pivotTable_1", 'sourceData', 1, 1, layout, theme, options);
+                 * var pivotTable = sheet.pivotTables.get("pivotTable_1");
+                 * pivotTable.add("Date","Date",GC.Spread.Pivot.PivotTableFieldType.rowField);
+                 * pivotTable.add("Buyer","Buyer",GC.Spread.Pivot.PivotTableFieldType.rowField);
+                 * pivotTable.add("Type","Type",GC.Spread.Pivot.PivotTableFieldType.columnField);
+                 * pivotTable.add("Amount","Sum of Amount",GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
+                 * pivotTable.subtotalVisible("Buyer", false);
+                 * ```
+                 */
+                subtotalVisible(fieldName: string,  isVisible: boolean): boolean;
                 /**
                  * @description Stop update field util resumeFieldsLayout, it must be used in pairs with resumeFieldsLayout.
                  */
@@ -8284,9 +8314,17 @@ declare module GC{
                  * pivotTable.add("Amount","Sum of Amount",GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
                  * sourceSheet.setValue(1,3,1000);
                  * pivotTable.updateSource();
+                 * var newSourceData = [["Salesman","ProductType","Product","Sales"],
+                 *                  ["SunLin","Drinks","Apple Juice",74],
+                 *                  ["JinShiPeng","Drinks","Milk",235],
+                 *                  ["ZhangShang","Dessert","Chocolate",20],
+                 *                  ["SunYang","Dessert","Beef Jerky",125]];
+                 * sourceSheet.setArray(10, 0, newSourceData);
+                 * sourceSheet.tables.add('newSourceData', 10, 0, 5, 4);
+                 * pivotTable.updateSource('newSourceData');
                  * ```
                  */
-                updateSource(): void;
+                updateSource(source?: string): void;
                 /**
                  * Get or set value filter info for a field.
                  * @param {string} fieldName Indicates the target field name of pivot table.
@@ -11134,6 +11172,7 @@ declare module GC{
                 filter?: GC.Spread.Report.IFilter;
                 sortOptions?: GC.Spread.Report.SortOption[];
                 showCollapseButton?: boolean;
+                initialExpansionState?: 'Expanded' | 'Collapsed';
                 alias?: string;
                 autoExpand?: 'Both' | 'Horizontal' | 'Vertical' | 'None';
             }
@@ -11357,6 +11396,14 @@ declare module GC{
                 }
             
 
+            /**
+             * @typedef GC.Spread.Report.ChartCell
+             * @type {{type: 'Chart'; dataChartName: string;chartPreviewVisible: boolean;}}
+             */
+            export type ChartCell = 
+                {type: 'Chart'; dataChartName: string; chartPreviewVisible?: boolean;}
+            
+
             /**
              * @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)}
@@ -11505,10 +11552,10 @@ declare module GC{
 
             /**
              * @typedef GC.Spread.Report.StaticCell
-             * @type {{type: 'Static'; pin?: 'None' | 'Row' | 'Column' | 'Both'; autoExpand?: 'Both' | 'Horizontal' | 'Vertical' | 'None'; showCollapseButton?: boolean;}}
+             * @type {{type: 'Static'; pin?: 'None' | 'Row' | 'Column' | 'Both'; autoExpand?: 'Both' | 'Horizontal' | 'Vertical' | 'None'; showCollapseButton?: boolean; initialExpansionState?: 'Expanded' | 'Collapsed';}}
              */
             export type StaticCell = 
-                {type: 'Static'; pin?: 'None' | 'Row' | 'Column' | 'Both'; autoExpand?: 'Both' | 'Horizontal' | 'Vertical' | 'None'; showCollapseButton?: boolean;}
+                {type: 'Static'; pin?: 'None' | 'Row' | 'Column' | 'Both'; autoExpand?: 'Both' | 'Horizontal' | 'Vertical' | 'None'; showCollapseButton?: boolean; initialExpansionState?: 'Expanded' | 'Collapsed';}
             
 
             /**
@@ -11529,10 +11576,10 @@ declare module GC{
 
             /**
              * @typedef GC.Spread.Report.ReportTemplateCell
-             * @type {(GC.Spread.Report.ListCell | GC.Spread.Report.GroupCell | GC.Spread.Report.SummaryCell | GC.Spread.Report.StaticCell) & GC.Spread.Report.ITemplateCellCommonSetting}
+             * @type {(GC.Spread.Report.ListCell | GC.Spread.Report.GroupCell | GC.Spread.Report.SummaryCell | GC.Spread.Report.StaticCell | GC.Spread.Report.ChartCell) & GC.Spread.Report.ITemplateCellCommonSetting}
              */
             export type TemplateCell = 
-                (GC.Spread.Report.ListCell | GC.Spread.Report.GroupCell | GC.Spread.Report.SummaryCell | GC.Spread.Report.StaticCell) & GC.Spread.Report.ITemplateCellCommonSetting
+                (GC.Spread.Report.ListCell | GC.Spread.Report.GroupCell | GC.Spread.Report.SummaryCell | GC.Spread.Report.StaticCell | GC.Spread.Report.ChartCell) & GC.Spread.Report.ITemplateCellCommonSetting
             
 
             export class ReportSheet{
@@ -12241,6 +12288,8 @@ declare module GC{
                  * Toggle the collapse state of the specified cell.
                  * @param {number} row The row index.
                  * @param {number} col The column index.
+                 * @param {'Collapsed' | 'Expanded'} targetState The target state, collapse or expand the specific cell.
+                 * @param {boolean} recursive True will update the state of the current cell and all the descendant cells, false will only update the current cell.
                  * @example
                  * ```
                  * const report = spread.addSheetTab(0, "Report", GC.Spread.Sheets.SheetType.reportSheet);
@@ -12260,7 +12309,7 @@ declare module GC{
                  * report.toggleCollapseState(0, 0);
                  * ```
                  */
-                toggleCollapseState(row: number,  col: number): void;
+                toggleCollapseState(row: number,  col: number,  targetState?: 'Collapsed' | 'Expanded',  recursive?: boolean): void;
                 /**
                  * Generated a static worksheet(no formula, no cell binding) base on the current report sheet.
                  * @returns {GC.Spread.Sheets.Worksheet} Return the generated worksheet.
@@ -12334,7 +12383,6 @@ declare module GC{
                 /**
                  * Represents a TemplateSheet.
                  * @class
-                 * @noInheritDoc
                  * @param {string} name The name of the TemplateSheet.
                  * @example
                  * ```
@@ -12627,12 +12675,21 @@ declare module GC{
             }
 
 
+            export interface ICalendarDateRange{
+                start: Date;
+                end: Date;
+            }
+
+
             export interface ICalendarOption{
                 startDay?: GC.Spread.Sheets.CalendarStartDay;
                 calendarPage?: GC.Spread.Sheets.CalendarPage;
                 showTime?: boolean;
                 showDateRange?: boolean;
                 showBuiltInDateRange?: boolean;
+                defaultDateTime?: Date | GC.Spread.Sheets.ICalendarDateRange;
+                maxDate?: Date;
+                minDate?: Date;
             }
 
 
@@ -14690,6 +14747,7 @@ declare module GC{
              * @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 {boolean} [convertSheetTableToDataTable] - Whether to convert the sheet tables to data manager tables, default false.
              * @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.
              * @property {GC.Spread.Sheets.ProgressFunctionType} [progress] - The progress callback function for each open mode.
@@ -14705,6 +14763,7 @@ declare module GC{
                     calcOnDemand?: boolean;
                     incrementalCalculation?: boolean;
                     includeUnusedStyles?: boolean;
+                    convertSheetTableToDataTable?: boolean;
                     password?: string;
                     openMode?: GC.Spread.Sheets.OpenMode;
                     progress?: GC.Spread.Sheets.ProgressFunctionType;
@@ -16913,7 +16972,7 @@ declare module GC{
                 /**
                  * Sheet all used range type
                  */
-                all= 262143,
+                all= 4294967295,
                 /**
                  * Sheet header used range
                  */
@@ -16985,7 +17044,15 @@ declare module GC{
                 /**
                  * Sheet picture used range
                  */
-                picture= 131072
+                picture= 131072,
+                /**
+                 * Sheet tag used range
+                 */
+                tag= 262144,
+                /**
+                 * Sheet data range used range
+                 */
+                dataRange= 524288
             }
 
             /**
@@ -17157,6 +17224,20 @@ declare module GC{
                  * @type {GC.Spread.Sheets.SheetArea}
                  */
                 sheetArea: GC.Spread.Sheets.SheetArea;
+                /**
+                 * Gets or sets whether the cell can enter edit mode for editing.
+                 * @param {boolean} [value] Set to `false` to disallow the cell enter edit mode for editing.
+                 * @returns {boolean|GC.Spread.Sheets.CellRange} If no value is set, returns whether the cell can enter edit mode for editing; otherwise, returns the cell.
+                 * @example
+                 * ```
+                 * activeSheet.getRange(0, 0, 2, 3, GC.Spread.Sheets.SheetArea.viewport).allowEditInCell(false);
+                 * ```
+                 * @example
+                 * ```
+                 * activeSheet.getCell(1,1).allowEditInCell(false);
+                 * ```
+                 */
+                allowEditInCell(value?: boolean): any;
                 /**
                  * Gets or sets the alternative text of the cell for screen readers.
                  * @param {string} value The alternative text of the cell.
@@ -20373,12 +20454,18 @@ declare module GC{
                  * @param eventParam *{@link GC.Spread.Sheets.Tables.Table}* `table` The table which is resizing.
                  * @param eventParam *{@link GC.Spread.Sheets.Range}* `oldRange` The table range before resize.
                  * @param eventParam *{@link GC.Spread.Sheets.Range}* `newRange` The table range after resize.
+                 * @param eventParam *boolean* `cancel` Whether to cancel the current resize behavior. The default value is false.
                  * @example
                  * ```
                  * //This example uses the TableResizing and TableResized event.
                  * window.onload = function(){
                  *      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
                  *      var activeSheet = spread.getActiveSheet();
+                 *      spread.bind(GC.Spread.Sheets.Events.TableResizing, function (e, data) {
+                 *          if (data.newRange.rowCount > 10) {
+                 *              args.cancel = true;
+                 *          }
+                 *      });
                  *      spread.bind(GC.Spread.Sheets.Events.TableResizing, function (e, data) {});
                  *      spread.bind(GC.Spread.Sheets.Events.TableResized, function (e, data) {});
                  * }
@@ -20715,7 +20802,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?: string | GC.Spread.Pivot.PivotTableTheme,  options?: GC.Spread.Pivot.IPivotTableOption): GC.Spread.Pivot.PivotTable;
+                add(name: string,  sourceData: string,  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.
@@ -21205,6 +21292,17 @@ declare module GC{
                  * ```
                  */
                 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);
+                /**
+                 * Indicates whether the cell can enter edit mode for editing.
+                 * @type {boolean}
+                 * @example
+                 * ```
+                 * //This example sets the allowEditInCell property.
+                 * var style = activeSheet.getStyle(1,1,GC.Spread.Sheets.SheetArea.viewport);
+                 * style.allowEditInCell = false;
+                 * ```
+                 */
+                allowEditInCell: boolean | undefined;
                 /**
                  * Only work for namedStyle, the boolean value indicates whether the alignment formatting applied.
                  * @type {boolean}
@@ -22731,6 +22829,11 @@ declare module GC{
                  * spread.addSparklineEx(new MySparklineEx('green'));
                  */
                 addSparklineEx(sparklineEx: GC.Spread.Sheets.Sparklines.SparklineEx): void;
+                /**
+                 * Only used in collaboration case, to apply doc's op.
+                 * @param {object} changeSet - change set
+                 */
+                applyOp(changeSet: Object): void;
                 /**
                  * Binds an event to the Workbook.
                  * @param {string} type The event type.
@@ -22985,6 +23088,11 @@ declare module GC{
                  * ```
                  */
                 fromJSON(workbookData: Object,  deserializationOptions?: GC.Spread.Sheets.IDeserializationOptions): Promise<any>;
+                /**
+                 * Only used in collaboration case, to restore the snapshot to workbook state.
+                 * @param {object} snapshot - snapshot object
+                 */
+                fromSnapshot(snapshot: Object): void;
                 /**
                  * Gets the active sheet.
                  * @returns {GC.Spread.Sheets.Worksheet} The active sheet instance.
@@ -23257,6 +23365,11 @@ declare module GC{
                  * @returns {HTMLElement|GC.Spread.Sheets.Workbook} If no value is set, returns the next control; otherwise, returns the spreadsheet.
                  */
                 nextControl(value?: HTMLElement): any;
+                /**
+                 * Only used in collaboration case, to watch op
+                 * @param {function} opHandler - callback watch op
+                 */
+                onOp(onOpHandler: Function): void;
                 /**
                  * Loads the object state from the sjs zipped file.
                  * @param {Blob} file - The zipped spreadsheet data file.
@@ -23568,6 +23681,11 @@ declare module GC{
                  * ```
                  */
                 toJSON(serializationOption?: GC.Spread.Sheets.ISerializationOption): Object;
+                /**
+                 * Only used in collaboration case, to save workbook state to snapshot.
+                 * @return {object} snapshot - snapshot object
+                 */
+                toSnapshot(): Object;
                 /**
                  * Removes the binding of an event to Workbook.
                  * @param {string} type The event type.
@@ -23715,6 +23833,21 @@ declare module GC{
                  * ```
                  */
                 conditionalFormats: ConditionalFormatting.ConditionalFormats;
+                /** The datachart manager.
+                 * @type {GC.Spread.Sheets.DataCharts.DataChartManager}
+                 * @example
+                 * ```
+                 * //This example creates a datachart.
+                 * var datacharts = sheet.dataCharts;
+                 * var datachart = datacharts.add('datachart1', 250, 20, 600, 400, GC.Spread.Sheets.DataCharts.DataChartType.column);
+                 * ```
+                 */
+                dataCharts: GC.Spread.Sheets.DataCharts.DataChartManager;
+                /**
+                 * Data range manager for the sheet.
+                 * @type {GC.Spread.Sheets.DataRange.DataRangeManager}
+                 */
+                dataRanges: GC.Spread.Sheets.DataRange.DataRangeManager;
                 /**
                  * Indicates the default row height and column width of the sheet.
                  * @type {Object}
@@ -26039,21 +26172,21 @@ declare module GC{
                  * ```
                  * //This example uses the setHyperlink method.
                  * sheet.setHyperlink(0, 2, {
-                 *    url: 'https://www.spreadjs.com',
-                 *    tooltip: 'baidu',
-                 *    linkColor: 'blue',
-                 *    visitedLinkColor: 'red',
-                 *    target: GC.Spread.Sheets.Hyperlink.HyperlinkTargetType.blank,
-                 *    command: 'navigationLeft'
-                 * }, GC.Spread.Sheets.SheetArea.viewport);
+                 *     url: 'https://www.spreadjs.com',
+                 *     tooltip: 'spreadjs',
+                 *     linkColor: 'blue',
+                 *     visitedLinkColor: 'red',
+                 *     target: GC.Spread.Sheets.Hyperlink.HyperlinkTargetType.blank,
+                 *     command: 'navigationLeft'
+                 * });
+                 * sheet.setValue(0,2, 'spreadjs');
                  * sheet.setHyperlink(1, 1, {
-                 *    url: 'https://www.spreadjs.com',
-                 *    tooltip: 'baidu',
-                 *    setUnderlineToStyle: true;
-                 *    setForeColorToStyle: true;
-                 *    target: GC.Spread.Sheets.Hyperlink.HyperlinkTargetType.top,
-                 *    command: function() { console.log('Only show this message when click the hyperlink.')}
-                 * }, GC.Spread.Sheets.SheetArea.viewport);
+                 *     url: 'https://www.spreadjs.com',
+                 *     tooltip: 'spreadjs',
+                 *     target: GC.Spread.Sheets.Hyperlink.HyperlinkTargetType.top,
+                 *     command: function () { console.log('Only show this message when click the hyperlink.') }
+                 * });
+                 * sheet.setValue(1,1, 'spreadjs');
                  * ```
                  */
                 setHyperlink(row: number,  col: number,  value: GC.Spread.Sheets.IHyperlink,  sheetArea?: GC.Spread.Sheets.SheetArea): void;
@@ -27068,6 +27201,22 @@ declare module GC{
                 }
 
 
+                export interface IDataBinding{
+                    /**
+                     * Represents the data binding source. it can be a table name, or a formula.
+                     */
+                    dataSource: string;
+                    /**
+                     * Represents the column name or column index of the data source that will binding to the text of the item of the ComboBox.
+                     */
+                    text?: string | number;
+                    /**
+                     * Represents the column name or column index of the data source that will binding to the value of the item of the ComboBox.
+                     */
+                    value?: string | number;
+                }
+
+
                 export interface IFileInfo{
                     name: string;
                     blob?: Blob;
@@ -27146,6 +27295,29 @@ declare module GC{
                     vertical= 1
                 }
 
+                /**
+                 *  Specifies what is the diverge direction of the diagonal cell type
+                 * @readonly
+                 * @enum {number}
+                 * @example
+                 * ```
+                 * //This example uses the EditorValueType enumeration.
+                 * var diagonalCellType = new GC.Spread.Sheets.CellTypes.Diagonal();
+                 * diagonalCellType.divergeDirection(GC.Spread.Sheets.CellTypes.DivergeDirection.topLeftToBottomRight)
+                 * activeSheet.getCell(2, 2).cellType(diagonalCellType);
+                 * ```
+                 */
+                export enum DivergeDirection{
+                    /**
+                     * Represents diverge from the TopLeft to the BottomRight.
+                     */
+                    topLeftToBottomRight= 0,
+                    /**
+                     * Represents diverge from the BottomLeft to the TopRight.
+                     */
+                    bottomLeftToTopRight= 1
+                }
+
                 /**
                  * Represents the editor type of text cell type.
                  * @enum {number}
@@ -28150,6 +28322,28 @@ declare module GC{
                      * ```
                      */
                     allowFloat(value?: boolean): any;
+                    /**
+                     * Gets or sets the data binding of the ComboBox cell type.
+                     * @param {GC.Spread.Sheets.CellTypes.IDataBinding} [value] the data binding of the ComboBox.
+                     * @returns {GC.Spread.Sheets.CellTypes.IDataBinding | GC.Spread.Sheets.CellTypes.ComboBox} If no value is set, returns the combo box's data binding; otherwise, returns the combo box cellType.
+                     * @example
+                     * ```
+                     * //This example shows binding a table name to the ComboBox cell type.
+                     * var tableName = { dataSource: "productName", text: "productName", value: "productId" };
+                     * var cellType = new GC.Spread.Sheets.CellTypes.ComboBox();
+                     * cellType.dataBinding(tableName);
+                     * activeSheet.getCell(1, 3).cellType(cellType);
+                     * ```
+                     * @example
+                     * ```
+                     * //This example shows binding a formula to the ComboBox cell type.
+                     * var formula = { dataSource: '=SORT(UNIQUE(QUERY("Products", {"productName","productId"})))', text: 0, value: 1 };
+                     * var cellType2 = new GC.Spread.Sheets.CellTypes.ComboBox();
+                     * cellType2.dataBinding(formula);
+                     * activeSheet.getCell(10, 3).cellType(cellType2);
+                     * ```
+                     */
+                    dataBinding(value?: GC.Spread.Sheets.CellTypes.IDataBinding): GC.Spread.Sheets.CellTypes.IDataBinding | GC.Spread.Sheets.CellTypes.ComboBox;
                     /**
                      * Gets or sets whether the combo box is editable.
                      * @param {boolean} value Whether the combo box is editable.
@@ -28249,6 +28443,47 @@ declare module GC{
                     constructor();
                 }
 
+                export class Diagonal extends Text{
+                    /**
+                     * Represents a diagonal lines cell.
+                     * @extends GC.Spread.Sheets.CellTypes.Text
+                     * @class
+                     * @example
+                     * ```
+                     * //This example creates a diagonal cell.
+                     * var diagonalCellType = new GC.Spread.Sheets.CellTypes.Diagonal();
+                     * activeSheet.getCell(2, 2).cellType(diagonalCellType).value('Year,Product,Region');
+                     * ```
+                     */
+                    constructor();
+                    /**
+                     * Gets or sets the diverge direction of the diagonal cell type.
+                     * @param {GC.Spread.Sheets.CellTypes.DivergeDirection} value The type of diverge direction.
+                     * @returns {GC.Spread.Sheets.CellTypes.DivergeDirection | GC.Spread.Sheets.CellTypes.Diagonal} If no value is set, returns the type of diverge direction; otherwise, returns the diagonal cellType.
+                     * @example
+                     * ```
+                     * //This example gets the diverge direction type.
+                     * var cellType = new GC.Spread.Sheets.CellTypes.Diagonal();
+                     * activeSheet.getCell(2, 2).cellType(cellType);
+                     * alert(cellType.divergeDirection());
+                     * ```
+                     */
+                    divergeDirection(value?: GC.Spread.Sheets.CellTypes.DivergeDirection): GC.Spread.Sheets.CellTypes.DivergeDirection | GC.Spread.Sheets.CellTypes.Diagonal;
+                    /**
+                     * Gets or sets the line border of the diagonal cell type.
+                     * @param {GC.Spread.Sheets.LineBorder} value The type of line border.
+                     * @returns {GC.Spread.Sheets.LineBorder | GC.Spread.Sheets.CellTypes.Diagonal} If no value is set, returns the type of line border; otherwise, returns the diagonal cellType.
+                     * @example
+                     * ```
+                     * //This example gets the diverge direction type.
+                     * var cellType = new GC.Spread.Sheets.CellTypes.Diagonal();
+                     * activeSheet.getCell(2, 2).cellType(cellType);
+                     * alert(cellType.lineBorder());
+                     * ```
+                     */
+                    lineBorder(value?: GC.Spread.Sheets.LineBorder): GC.Spread.Sheets.LineBorder | GC.Spread.Sheets.CellTypes.Diagonal;
+                }
+
                 export class FileUpload extends Base{
                     /**
                      * Represents a file upload cell type.
@@ -30672,6 +30907,15 @@ declare module GC{
                      * ```
                      */
                     toImageSrc(): string;
+                    /**
+                     * Get the chart Image src of type Base64 string.
+                     * @returns {Promise<string>} return the chart Image Base64 src string.
+                     * @example
+                     * ```
+                     * let chartImageSrc = await sheet.charts.all()[0].toImageSrcAsync();
+                     * ```
+                     */
+                    toImageSrcAsync(): Promise<string>;
                     /**
                      * Gets or sets whether apply animation to the chart.
                      * @param {boolean} [value] whether apply animation to the chart.
@@ -31111,6 +31355,22 @@ declare module GC{
                  * ```
                  */
                 var cancelInput: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string}): any};
+                /**
+                 * Represents the command used to switch the editor status between enter and edit mode when a cell is editing.
+                 * @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 {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // start editing a cell with invoking command
+                 * spread.commandManager().execute({cmd: "changeEditorStatus", sheetName: "Sheet1"});
+                 * ```
+                 */
+                var changeEditorStatus: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string}): any};
                 /**
                  * Represents the command used to switch the formula reference between relative, absolute, and mixed when editing formulas.
                  * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
@@ -32601,6 +32861,22 @@ declare module GC{
                  * ```
                  */
                 var splitResizeRow: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: { sheetName: string, rows: Object[], size: number, columnHeader: boolean }, isUndo: boolean): any};
+                /**
+                 * Represents the command used to start editing the active cell with the edit mode.
+                 * @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 {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // start editing a cell with invoking command
+                 * spread.commandManager().execute({cmd: "startEdit", sheetName: "Sheet1"});
+                 * ```
+                 */
+                var startEdit: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string}): any};
                 /**
                  * Represents the command used to delete columns for table.
                  * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
@@ -32695,6 +32971,23 @@ declare module GC{
                  * ```
                  */
                 var tableResize: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, tableName: string, resizeToRange: GC.Spread.Sheets.Range}, isUndo: boolean): boolean};
+                /**
+                 * Represents the command used to submit changes of the tables which bind data manager tables.
+                 * @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, from active sheet by default.
+                 * @param {string[]} [options.tableNames] The table names, from active table by default.
+                 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
+                 * @example
+                 * ```
+                 * // submit changes of the tables which bind the data manager tables with invoking command
+                 * spread.commandManager().execute({cmd: "tableSubmitChanges", sheetName: "Sheet1", tableNames: ["table1"]});
+                 * ```
+                 */
+                var tableSubmitChanges: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName?: string, tableNames?: string[] }, isUndo: boolean): boolean};
                 /**
                  * Represents the command used to perform an undo of the most recent edit or action.
                  * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
@@ -37232,6 +37525,1610 @@ declare module GC{
                 }
             }
 
+            module DataCharts{
+
+                export interface IAnimationOption{
+                    duration?: number;
+                    easing?: GC.Spread.Sheets.DataCharts.AnimationEasing;
+                    scale?: number;
+                    startDelay?: number;
+                }
+
+
+                export interface IAxisOption{
+                    type?: GC.Spread.Sheets.DataCharts.AxisType;
+                    labels?: boolean;
+                    axisLine?: boolean;
+                    reversed?: boolean;
+                    title?: string;
+                    max?: GC.Spread.Sheets.DataCharts.IValueOption;
+                    min?: GC.Spread.Sheets.DataCharts.IValueOption;
+                    position?: GC.Spread.Sheets.DataCharts.AxisPosition;
+                    origin?: number;
+                    format?: GC.Spread.Sheets.DataCharts.IFormatOption;
+                    majorUnit?: GC.Spread.Sheets.DataCharts.IAxisUnitOption;
+                    overlappingLabels?: GC.Spread.Sheets.DataCharts.OverlappingLabels;
+                    dateMode?: GC.Spread.Sheets.DataCharts.DateMode;
+                    hoverStyle?: GC.Spread.Sheets.DataCharts.ITextStyleOption;
+                    labelAngle?: number[];
+                    labelStyle?: GC.Spread.Sheets.DataCharts.ILabelStyleOption;
+                    logBase?: number;
+                    majorGrid?: boolean;
+                    majorTickSize?: number;
+                    majorTicks?: GC.Spread.Sheets.DataCharts.TickMark;
+                    minorGrid?: boolean;
+                    minorTickSize?: number;
+                    minorTicks?: GC.Spread.Sheets.DataCharts.TickMark;
+                    minorUnit?: GC.Spread.Sheets.DataCharts.IAxisUnitOption;
+                    scale?: GC.Spread.Sheets.DataCharts.IValueScaleOption;
+                    style?: GC.Spread.Sheets.DataCharts.IStyleOption;
+                    titleStyle?: GC.Spread.Sheets.DataCharts.ITitleStyleOption;
+                    lineStyle?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                    majorGridStyle?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                    majorTickStyle?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                    minorGridStyle?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                    minorTickStyle?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                }
+
+
+                export interface IAxisUnitOption{
+                    dateMode?: GC.Spread.Sheets.DataCharts.DateMode;
+                    value?: number;
+                }
+
+
+                export interface IBarStyleOption{
+                    overlap?: number;
+                    width?: number;
+                    borderRadius?: GC.Spread.Sheets.DataCharts.IBorderRadius;
+                }
+
+
+                export interface IBorderRadius{
+                    bottomLeft?: number;
+                    bottomRight?: number;
+                    topLeft?: number;
+                    topRight?: number;
+                }
+
+
+                export interface ICategoryEncodingOption extends GC.Spread.Sheets.DataCharts.IFieldBasicOption{
+                    sort?: GC.Spread.Sheets.DataCharts.ISortEncodingOption;
+                }
+
+
+                export interface IConfigLegendOption{
+                    wrapping?: boolean;
+                }
+
+
+                export interface IConfigOption{
+                    dvStyle?: GC.Spread.Sheets.DataCharts.IStyleOption;
+                    palette?: GC.Spread.Sheets.DataCharts.IPaletteItemOption[];
+                    plotAreaLayout?: GC.Spread.Sheets.DataCharts.IPlotAreaLayoutOption;
+                    plotAreas?: GC.Spread.Sheets.DataCharts.IPlotAreaOption[];
+                    style?: GC.Spread.Sheets.DataCharts.IStyleOption;
+                    textStyle?: GC.Spread.Sheets.DataCharts.ITextStyleOption;
+                    header?: GC.Spread.Sheets.DataCharts.IHeaderOption;
+                }
+
+
+                export interface IConnectingLineStyle{
+                    stroke?: string;
+                    strokeWidth?: number;
+                    strokeDasharray?: string;
+                    firstLineLength?: number;
+                    secondLineLength?: number;
+                }
+
+
+                export interface IContentEncodingOption extends GC.Spread.Sheets.DataCharts.IFieldBasicOption{
+                    aggregate?: GC.Spread.Sheets.DataCharts.Aggregate;
+                }
+
+
+                export interface ICssColorOptions{
+                    type: "CssColor";
+                    color?: GC.Spread.Sheets.DataCharts.ColorString;
+                }
+
+
+                export interface IDataChartConfig{
+                    plots: GC.Spread.Sheets.DataCharts.IPlotOption[];
+                    config?: GC.Spread.Sheets.DataCharts.IConfigOption;
+                    tableName?: string;
+                }
+
+
+                export interface IDataPointStyleOption extends GC.Spread.Sheets.DataCharts.IStyleOption{
+                    symbol?: GC.Spread.Sheets.DataCharts.ISymbolStyleOption;
+                    bar?: GC.Spread.Sheets.DataCharts.IBarStyleOption;
+                }
+
+
+                export interface IFieldBasicOption{
+                    field: string;
+                    displayName?: string;
+                }
+
+
+                export interface IFormatOption{
+                    type?: GC.Spread.Sheets.DataCharts.FormatType;
+                    value: string;
+                }
+
+
+                export interface IHeaderOption{
+                    title?: string;
+                    textStyle?: GC.Spread.Sheets.DataCharts.ITextStyleOption;
+                    padding?: GC.Spread.Sheets.DataCharts.IPaddingOption;
+                    style?: GC.Spread.Sheets.DataCharts.IStyleOption;
+                }
+
+
+                export interface ILabelStyleOption{
+                    color?: string;
+                    fontFamily?: string;
+                    fontSize?: number;
+                    fontStyle?: GC.Spread.Sheets.DataCharts.FontStyle;
+                    fontWeight?: string;
+                    opacity?: number;
+                    overflow?: GC.Spread.Sheets.DataCharts.TextOverflow;
+                    padding?: GC.Spread.Sheets.DataCharts.IPaddingOption;
+                }
+
+
+                export interface ILegendOptions{
+                    title?: string;
+                    type?: GC.Spread.Sheets.DataCharts.LegendType;
+                    height?: number;
+                    width?: number;
+                    position?: GC.Spread.Sheets.DataCharts.LegendPosition;
+                    textStyle?: GC.Spread.Sheets.DataCharts.ITextStyleOption;
+                    hAlign?: GC.Spread.Sheets.DataCharts.HAlign;
+                    vAlign?: GC.Spread.Sheets.DataCharts.VAlign;
+                    padding?: GC.Spread.Sheets.DataCharts.IPaddingOption;
+                }
+
+
+                export interface ILineStyle{
+                    stroke?: GC.Spread.Sheets.DataCharts.ColorOptions;
+                    strokeWidth?: number;
+                    strokeDasharray?: string;
+                    strokeOpacity?: number;
+                }
+
+
+                export interface IPaddingOption{
+                    top?: number;
+                    bottom?: number;
+                    left?: number;
+                    right?: number;
+                }
+
+
+                export interface IPaletteItemOption{
+                    color: GC.Spread.Sheets.DataCharts.ColorOptions;
+                }
+
+
+                export interface IPlotAreaLayoutOption{
+                    columnWidths?: GC.Spread.Sheets.DataCharts.IValueOption[];
+                    rowHeights?: GC.Spread.Sheets.DataCharts.IValueOption[];
+                }
+
+
+                export interface IPlotAreaOption{
+                    axes?: GC.Spread.Sheets.DataCharts.IAxisOption[];
+                    column?: number;
+                    padding?: GC.Spread.Sheets.DataCharts.IPaddingOption;
+                    row?: number;
+                    textStyle?: GC.Spread.Sheets.DataCharts.ITextStyleOption;
+                    legends?: GC.Spread.Sheets.DataCharts.ILegendOptions[];
+                    legend?: GC.Spread.Sheets.DataCharts.IConfigLegendOption;
+                }
+
+
+                export interface IPlotConfigOption{
+                    hoverStyle?: GC.Spread.Sheets.DataCharts.IDataPointStyleOption;
+                    innerRadius?: number;
+                    outerRadius?: number;
+                    lineAspect?: GC.Spread.Sheets.DataCharts.LineAspect;
+                    palette?: string[];
+                    startAngle?: number;
+                    style?: GC.Spread.Sheets.DataCharts.IDataPointStyleOption;
+                    swapAxes?: boolean;
+                    sweep?: number;
+                    symbols?: boolean;
+                    text?: GC.Spread.Sheets.DataCharts.IPlotConfigTextOption[];
+                    tooltip?: GC.Spread.Sheets.DataCharts.IPlotConfigTooltipOption[];
+                    hoverAnimation?: GC.Spread.Sheets.DataCharts.IAnimationOption;
+                    updateAnimation?: GC.Spread.Sheets.DataCharts.IAnimationOption;
+                }
+
+
+                export interface IPlotConfigTextOption{
+                    template?: string;
+                    format?: GC.Spread.Sheets.DataCharts.IFormatOption;
+                    style?: GC.Spread.Sheets.DataCharts.IStyleOption;
+                    textStyle?: GC.Spread.Sheets.DataCharts.ITextStyleOption;
+                    connectingLineStyle?: GC.Spread.Sheets.DataCharts.IConnectingLineStyle;
+                    maxWidth?: number;
+                    offset?: number;
+                    overlappingLabels?: GC.Spread.Sheets.DataCharts.OverlappingLabels;
+                    position?: GC.Spread.Sheets.DataCharts.TextPosition;
+                }
+
+
+                export interface IPlotConfigTooltipOption{
+                    style?: GC.Spread.Sheets.DataCharts.IToolTipStyleOption;
+                    textStyle?: GC.Spread.Sheets.DataCharts.IToolTipTextStyleOption;
+                }
+
+
+                export interface IPlotEncodingsOption{
+                    values?: GC.Spread.Sheets.DataCharts.IValueEncodingOption[];
+                    category?: GC.Spread.Sheets.DataCharts.ICategoryEncodingOption;
+                    details?: GC.Spread.Sheets.DataCharts.IFieldBasicOption[];
+                    color?: GC.Spread.Sheets.DataCharts.IFieldBasicOption;
+                    size?: GC.Spread.Sheets.DataCharts.IFieldBasicOption;
+                    tooltip?: GC.Spread.Sheets.DataCharts.IContentEncodingOption[];
+                    filter?: GC.Spread.Sheets.DataCharts.IFilterOption;
+                }
+
+
+                export interface IPlotOption{
+                    type: GC.Spread.Sheets.DataCharts.DataChartType;
+                    encodings?: GC.Spread.Sheets.DataCharts.IPlotEncodingsOption;
+                    config?: GC.Spread.Sheets.DataCharts.IPlotConfigOption;
+                }
+
+
+                export interface IQuadrangleStyleOption{
+                    leftBorder?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                    rightBorder?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                    topBorder?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                    bottomBorder?: GC.Spread.Sheets.DataCharts.ILineStyle;
+                }
+
+
+                export interface ISortEncodingOption{
+                    field: string;
+                    aggregate?: GC.Spread.Sheets.DataCharts.Aggregate;
+                    order?: GC.Spread.Sheets.DataCharts.OrderType;
+                }
+
+
+                export interface IStyleOption{
+                    fill?: GC.Spread.Sheets.DataCharts.ColorOptions;
+                    fillOpacity?: number;
+                    stroke?: GC.Spread.Sheets.DataCharts.ColorOptions;
+                    strokeDasharray?: string;
+                    strokeOpacity?: number;
+                    strokeWidth?: number;
+                }
+
+
+                export interface ISymbolStyleOption{
+                    symbolShape?: GC.Spread.Sheets.DataCharts.SymbolShape;
+                    symbolSize?: number;
+                }
+
+
+                export interface ITextDecorationOption{
+                    lineThrough?: boolean;
+                    overline?: boolean;
+                    underline?: boolean;
+                }
+
+
+                export interface ITextStyleOption{
+                    alignment?: GC.Spread.Sheets.DataCharts.HAlign;
+                    color?: string;
+                    fontFamily?: string;
+                    fontSize?: number;
+                    fontStyle?: GC.Spread.Sheets.DataCharts.FontStyle;
+                    fontWeight?: string;
+                    opacity?: number;
+                    overflow?: GC.Spread.Sheets.DataCharts.TextOverflow;
+                }
+
+
+                export interface ITitleStyleOption{
+                    color?: string;
+                    fontFamily?: string;
+                    fontSize?: number;
+                    fontStyle?: GC.Spread.Sheets.DataCharts.FontStyle;
+                    fontWeight?: string;
+                    opacity?: number;
+                    padding?: GC.Spread.Sheets.DataCharts.IPaddingOption;
+                }
+
+
+                export interface IToolTipStyleOption{
+                    fill?: GC.Spread.Sheets.DataCharts.ColorOptions;
+                    stroke?: GC.Spread.Sheets.DataCharts.ColorOptions;
+                    strokeWidth?: number;
+                    fillOpacity?: number;
+                    strokeOpacity?: number;
+                }
+
+
+                export interface IToolTipTextStyleOption{
+                    color?: string;
+                    fontFamily?: string;
+                    fontSize?: number;
+                    fontStyle?: GC.Spread.Sheets.DataCharts.FontStyle;
+                    fontWeight?: string;
+                    opacity?: number;
+                    textDecoration?: GC.Spread.Sheets.DataCharts.ITextDecorationOption;
+                }
+
+
+                export interface IValueEncodingOption extends GC.Spread.Sheets.DataCharts.IFieldBasicOption{
+                    aggregate?: GC.Spread.Sheets.DataCharts.Aggregate;
+                }
+
+
+                export interface IValueFilter{
+                    field: string;
+                    operate: GC.Spread.Sheets.DataCharts.ComparisonOperator | GC.Spread.Sheets.DataCharts.StringOperator;
+                    value: GC.Spread.Sheets.DataCharts.DataValueType | GC.Spread.Sheets.DataCharts.DataValueType[];
+                    excludeMatched?: boolean;
+                    ignoreCase?: boolean;
+                }
+
+
+                export interface IValueFilterGroup{
+                    conditions: GC.Spread.Sheets.DataCharts.IFilterOption[];
+                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation;
+                }
+
+
+                export interface IValueOption{
+                    type?: GC.Spread.Sheets.DataCharts.ValueOptionType;
+                    value?: number;
+                }
+
+
+                export interface IValueScaleOption{
+                    type?: GC.Spread.Sheets.DataCharts.ValueScaleType;
+                }
+
+
+                /**
+                 * @typedef GC.Spread.Sheets.DataCharts.ColorOptions
+                 * @type {GC.Spread.Sheets.DataCharts.ICssColorOptions}
+                 */
+                export type ColorOptions = 
+                    GC.Spread.Sheets.DataCharts.ICssColorOptions
+                
+
+                /**
+                 * @typedef GC.Spread.Sheets.DataCharts.ColorString
+                 * @type {string}
+                 */
+                export type ColorString = 
+                    string
+                
+
+                /**
+                 * @typedef GC.Spread.Sheets.DataCharts.DataValueType
+                 * @type {number | boolean | Date | string | null}
+                 */
+                export type DataValueType = 
+                    number | boolean | Date | string | null
+                
+
+                /**
+                 * @typedef GC.Spread.Sheets.DataCharts.IFilterOption
+                 * @type {GC.Spread.Sheets.DataCharts.IValueFilter | GC.Spread.Sheets.DataCharts.IValueFilterGroup}
+                 */
+                export type IFilterOption = 
+                    GC.Spread.Sheets.DataCharts.IValueFilter | GC.Spread.Sheets.DataCharts.IValueFilterGroup
+                
+                /**
+                 * Specifies the datachart plot value Aggregate.
+                 * @enum {number}
+                 */
+                export enum Aggregate{
+                    /**
+                     * firstValue
+                     */
+                    firstValue= 0,
+                    /**
+                     * sum
+                     */
+                    sum= 1,
+                    /**
+                     * count
+                     */
+                    count= 2,
+                    /**
+                     * average
+                     */
+                    average= 3,
+                    /**
+                     * max
+                     */
+                    max= 4,
+                    /**
+                     * min
+                     */
+                    min= 5,
+                    /**
+                     * countDistinct
+                     */
+                    countDistinct= 12
+                }
+
+                /**
+                 * Specifies the datachart plot AnimationEasing.
+                 * @enum {number}
+                 */
+                export enum AnimationEasing{
+                    /**
+                     * linear
+                     */
+                    linear= 0,
+                    /**
+                     * swing
+                     */
+                    swing= 1,
+                    /**
+                     * easeInQuad
+                     */
+                    easeInQuad= 2,
+                    /**
+                     * easeOutQuad
+                     */
+                    easeOutQuad= 3,
+                    /**
+                     * easeInOutQuad
+                     */
+                    easeInOutQuad= 4,
+                    /**
+                     * easeInCubic
+                     */
+                    easeInCubic= 5,
+                    /**
+                     * easeOutCubic
+                     */
+                    easeOutCubic= 6,
+                    /**
+                     * easeInOutCubic
+                     */
+                    easeInOutCubic= 7,
+                    /**
+                     * easeInQuart
+                     */
+                    easeInQuart= 8,
+                    /**
+                     * easeOutQuart
+                     */
+                    easeOutQuart= 9,
+                    /**
+                     * easeInOutQuart
+                     */
+                    easeInOutQuart= 10,
+                    /**
+                     * easeInQuint
+                     */
+                    easeInQuint= 11,
+                    /**
+                     * easeOutQuint
+                     */
+                    easeOutQuint= 12,
+                    /**
+                     * easeInOutQuint
+                     */
+                    easeInOutQuint= 13,
+                    /**
+                     * easeInSine
+                     */
+                    easeInSine= 14,
+                    /**
+                     * easeOutSine
+                     */
+                    easeOutSine= 15,
+                    /**
+                     * easeInOutSine
+                     */
+                    easeInOutSine= 16,
+                    /**
+                     * easeInExpo
+                     */
+                    easeInExpo= 17,
+                    /**
+                     * easeOutExpo
+                     */
+                    easeOutExpo= 18,
+                    /**
+                     * easeInOutExpo
+                     */
+                    easeInOutExpo= 19,
+                    /**
+                     * easeInCirc
+                     */
+                    easeInCirc= 20,
+                    /**
+                     * easeOutCirc
+                     */
+                    easeOutCirc= 21,
+                    /**
+                     * easeInOutCirc
+                     */
+                    easeInOutCirc= 22,
+                    /**
+                     * easeInBack
+                     */
+                    easeInBack= 23,
+                    /**
+                     * easeOutBack
+                     */
+                    easeOutBack= 24,
+                    /**
+                     * easeInOutBack
+                     */
+                    easeInOutBack= 25,
+                    /**
+                     * easeInBounce
+                     */
+                    easeInBounce= 26,
+                    /**
+                     * easeOutBounce
+                     */
+                    easeOutBounce= 27,
+                    /**
+                     * easeInOutBounce
+                     */
+                    easeInOutBounce= 28,
+                    /**
+                     * easeInElastic
+                     */
+                    easeInElastic= 29,
+                    /**
+                     * easeOutElastic
+                     */
+                    easeOutElastic= 30,
+                    /**
+                     * easeInOutElastic
+                     */
+                    easeInOutElastic= 31
+                }
+
+                /**
+                 * Specifies the datachart plot AxisPosition.
+                 * @enum {number}
+                 */
+                export enum AxisPosition{
+                    /**
+                     none
+                     */
+                    none= 0,
+                    /**
+                     near
+                     */
+                    near= 1,
+                    /**
+                     far
+                     */
+                    far= 2
+                }
+
+                /**
+                 * Specifies the datachart plot AxisType.
+                 * @enum {string}
+                 */
+                export enum AxisType{
+                    /**
+                     x
+                     */
+                    x= 0,
+                    /**
+                     y
+                     */
+                    y= 1
+                }
+
+                /**
+                 * Specifies the datachart filter operator.
+                 * @enum {string}
+                 */
+                export enum ComparisonOperator{
+                    /**
+                     in
+                     */
+                    in= "In",
+                    /**
+                     equalsTo
+                     */
+                    equalsTo= "EqualsTo",
+                    /**
+                     greaterThan
+                     */
+                    greaterThan= "GreaterThan",
+                    /**
+                     greaterThanOrEqualsTo
+                     */
+                    greaterThanOrEqualsTo= "GreaterThanOrEqualsTo",
+                    /**
+                     lessThan
+                     */
+                    lessThan= "LessThan",
+                    /**
+                     lessThanOrEqualsTo
+                     */
+                    lessThanOrEqualsTo= "LessThanOrEqualsTo",
+                    /**
+                     notEqualsTo
+                     */
+                    notEqualsTo= "NotEqualsTo"
+                }
+
+                /**
+                 * Specifies the datachart type.
+                 * @enum {string}
+                 */
+                export enum DataChartType{
+                    /**
+                     * Identifies the current DataChart type as column
+                     */
+                    column= "Column",
+                    /**
+                     * Identifies the current DataChart type as rangeColumn
+                     */
+                    rangeColumn= "RangeColumn",
+                    /**
+                     * Identifies the current DataChart type as stackedColumn
+                     */
+                    stackedColumn= "StackedColumn",
+                    /**
+                     * Identifies the current DataChart type as percentStackedColumn
+                     */
+                    percentStackedColumn= "PercentStackedColumn",
+                    /**
+                     * Identifies the current DataChart type as bar
+                     */
+                    bar= "Bar",
+                    /**
+                     * Identifies the current DataChart type as rangeBar
+                     */
+                    rangeBar= "RangeBar",
+                    /**
+                     * Identifies the current DataChart type as stackedBar
+                     */
+                    stackedBar= "StackedBar",
+                    /**
+                     * Identifies the current DataChart type as percentStackedBar
+                     */
+                    percentStackedBar= "PercentStackedBar",
+                    /**
+                     * Identifies the current DataChart type as area
+                     */
+                    area= "Area",
+                    /**
+                     * Identifies the current DataChart type as rangeArea
+                     */
+                    rangeArea= "RangeArea",
+                    /**
+                     * Identifies the current DataChart type as stackedArea
+                     */
+                    stackedArea= "StackedArea",
+                    /**
+                     * Identifies the current DataChart type as percentStackedArea
+                     */
+                    percentStackedArea= "PercentStackedArea",
+                    /**
+                     * Identifies the current DataChart type as line
+                     */
+                    line= "Line",
+                    /**
+                     * Identifies the current DataChart type as pie
+                     */
+                    pie= "Pie",
+                    /**
+                     * Identifies the current DataChart type as donut
+                     */
+                    donut= "Donut",
+                    /**
+                     * Identifies the current DataChart type as rose
+                     */
+                    rose= "Rose",
+                    /**
+                     * Identifies the current DataChart type as radialStackedBar
+                     */
+                    radialStackedBar= "RadialStackedBar",
+                    /**
+                     * Identifies the current DataChart type as sunburst
+                     */
+                    sunburst= "Sunburst",
+                    /**
+                     * Identifies the current DataChart type as polarCoordinatesBar
+                     */
+                    polarCoordinatesBar= "PolarCoordinatesBar",
+                    /**
+                     * Identifies the current DataChart type as polarCoordinatesStackedBar
+                     */
+                    polarCoordinatesStackedBar= "PolarCoordinatesStackedBar",
+                    /**
+                     * Identifies the current DataChart type as radar
+                     */
+                    radar= "Radar",
+                    /**
+                     * Identifies the current DataChart type as filledRadar
+                     */
+                    filledRadar= "FilledRadar",
+                    /**
+                     * Identifies the current DataChart type as scatter
+                     */
+                    scatter= "Scatter",
+                    /**
+                     * Identifies the current DataChart type as bubble
+                     */
+                    bubble= "Bubble"
+                }
+
+                /**
+                 * Specifies the datachart plot DateMode.
+                 * @enum {string}
+                 */
+                export enum DateMode{
+                    /**
+                     milliSecond
+                     */
+                    milliSecond= 0,
+                    /**
+                     second
+                     */
+                    second= 1,
+                    /**
+                     minute
+                     */
+                    minute= 2,
+                    /**
+                     hour
+                     */
+                    hour= 3,
+                    /**
+                     day
+                     */
+                    day= 4,
+                    /**
+                     week
+                     */
+                    week= 5,
+                    /**
+                     month
+                     */
+                    month= 6,
+                    /**
+                     year
+                     */
+                    year= 7
+                }
+
+                /**
+                 * Specifies the datachart plot FontStyle.
+                 * @enum {string}
+                 */
+                export enum FontStyle{
+                    /**
+                     normal
+                     */
+                    normal= "Normal",
+                    /**
+                     italic
+                     */
+                    italic= "Italic"
+                }
+
+                /**
+                 * Specifies the datachart data level.
+                 * @enum {string}
+                 */
+                export enum FormatType{
+                    /**
+                     hundreds
+                     */
+                    hundreds= "Hundreds",
+                    /**
+                     thousands
+                     */
+                    thousands= "Thousands",
+                    /**
+                     tenThousand
+                     */
+                    tenThousand= "10000",
+                    /**
+                     hundredThousand
+                     */
+                    hundredThousand= "100000",
+                    /**
+                     millions
+                     */
+                    millions= "Millions",
+                    /**
+                     tenMillion
+                     */
+                    tenMillion= "10000000",
+                    /**
+                     hundredMillion
+                     */
+                    hundredMillion= "100000000",
+                    /**
+                     billions
+                     */
+                    billions= "Billions",
+                    /**
+                     trillions
+                     */
+                    trillions= "Trillions"
+                }
+
+                /**
+                 * Specifies the datachart plot HAlign.
+                 * @enum {string}
+                 */
+                export enum HAlign{
+                    /**
+                     center
+                     */
+                    center= "Center",
+                    /**
+                     left
+                     */
+                    left= "Left",
+                    /**
+                     right
+                     */
+                    right= "Right"
+                }
+
+                /**
+                 * Specifies the datachart plot LegendPosition.
+                 * @enum {string}
+                 */
+                export enum LegendPosition{
+                    /**
+                     none
+                     */
+                    none= "None",
+                    /**
+                     bottom
+                     */
+                    bottom= "Bottom",
+                    /**
+                     left
+                     */
+                    left= "Left",
+                    /**
+                     right
+                     */
+                    right= "Right",
+                    /**
+                     top
+                     */
+                    top= "Top"
+                }
+
+                /**
+                 * Specifies the datachart plot LegendType.
+                 * @enum {string}
+                 */
+                export enum LegendType{
+                    /**
+                     color
+                     */
+                    color= "Color",
+                    /**
+                     size
+                     */
+                    size= "Size"
+                }
+
+                /**
+                 * Describes the type of lines in the Area chart.
+                 * @enum {string}
+                 */
+                export enum LineAspect{
+                    /**
+                     * default
+                     */
+                    default= "Default",
+                    /**
+                     * spline
+                     */
+                    spline= "Spline",
+                    /**
+                     * stepCenter
+                     */
+                    stepCenter= "StepCenter"
+                }
+
+                /**
+                 * Specifies the datachart string filter logical operator.
+                 * @enum {string}
+                 */
+                export enum LogicalOperation{
+                    /**
+                     and
+                     */
+                    and= "AND",
+                    /**
+                     or
+                     */
+                    or= "OR"
+                }
+
+                /**
+                 * Specifies the datachart order type.
+                 * @enum {string}
+                 */
+                export enum OrderType{
+                    /**
+                     * ascending
+                     */
+                    ascending= "Ascending",
+                    /**
+                     * descending
+                     */
+                    descending= "Descending",
+                    /**
+                     * none
+                     */
+                    none= "None"
+                }
+
+                /**
+                 * Specifies the datachart plot OverlappingLabels.
+                 * @enum {string}
+                 */
+                export enum OverlappingLabels{
+                    /**
+                     * show
+                     */
+                    show= "Show",
+                    /**
+                     * hide
+                     */
+                    hide= "Hide"
+                }
+
+                /**
+                 * Specifies the datachart string filter operator.
+                 * @enum {string}
+                 */
+                export enum StringOperator{
+                    /**
+                     in
+                     */
+                    in= "In",
+                    /**
+                     equalsTo
+                     */
+                    equalsTo= "EqualsTo",
+                    /**
+                     contains
+                     */
+                    contains= "Contains",
+                    /**
+                     startsWith
+                     */
+                    startsWith= "StartsWith",
+                    /**
+                     endsWith
+                     */
+                    endsWith= "EndsWith"
+                }
+
+                /**
+                 * Specifies the datachart SymbolShape.
+                 * @enum {number}
+                 */
+                export enum SymbolShape{
+                    /**
+                     * dot
+                     */
+                    dot= "Dot",
+                    /**
+                     * box
+                     */
+                    box= "Box",
+                    /**
+                     * diamond
+                     */
+                    diamond= "Diamond",
+                    /**
+                     * triangle
+                     */
+                    triangle= "Triangle",
+                    /**
+                     * x
+                     */
+                    x= "X",
+                    /**
+                     * plus
+                     */
+                    plus= "Plus"
+                }
+
+                /**
+                 * Specifies the datachart plot TextOverflow.
+                 * @enum {string}
+                 */
+                export enum TextOverflow{
+                    /**
+                     * clip
+                     */
+                    clip= "Clip",
+                    /**
+                     * ellipsis
+                     */
+                    ellipsis= "Ellipsis",
+                    /**
+                     * wrap
+                     */
+                    wrap= "Wrap"
+                }
+
+                /**
+                 * Specifies the datachart plot TextPosition.
+                 * @enum {string}
+                 */
+                export enum TextPosition{
+                    /**
+                     * center
+                     */
+                    center= "Center",
+                    /**
+                     * inside
+                     */
+                    inside= "Inside",
+                    /**
+                     * outside
+                     */
+                    outside= "Outside"
+                }
+
+                /**
+                 * Specifies the datachart plot TickMark.
+                 * @enum {string}
+                 */
+                export enum TickMark{
+                    /**
+                     cross
+                     */
+                    cross= "Cross",
+                    /**
+                     inside
+                     */
+                    inside= "Inside",
+                    /**
+                     none
+                     */
+                    none= "None",
+                    /**
+                     outside
+                     */
+                    outside= "Outside"
+                }
+
+                /**
+                 * Specifies the datachart plot VAlign.
+                 * @enum {string}
+                 */
+                export enum VAlign{
+                    /**
+                     top
+                     */
+                    top= "Top",
+                    /**
+                     bottom
+                     */
+                    bottom= "Bottom",
+                    /**
+                     middle
+                     */
+                    middle= "Middle"
+                }
+
+                /**
+                 * Specifies the datachart plot Orientation.
+                 * @enum {string}
+                 */
+                export enum ValueOptionType{
+                    /**
+                     number
+                     */
+                    number= 0,
+                    /**
+                     date
+                     */
+                    date= 1
+                }
+
+                /**
+                 * Specifies the datachart plot ValueScaleType.
+                 * @enum {string}
+                 */
+                export enum ValueScaleType{
+                    /**
+                     date
+                     */
+                    date= "Date",
+                    /**
+                     linear
+                     */
+                    linear= "Linear"
+                }
+
+
+                export class DataChart{
+                    /**
+                     * Represents a datachart.
+                     * @class
+                     * @param {GC.Spread.Sheets.Worksheet} sheet The host sheet of the datachart.
+                     * @param {string} name The name of the datachart.
+                     * @param {number} x The <i>x</i> location of the datachart.
+                     * @param {number} y The <i>y</i> location of the datachart.
+                     * @param {number} width The width of the datachart.
+                     * @param {number} height The height of the datachart.
+                     * @param {GC.Spread.Sheets.DataCharts.DataChartType} type The type of the datachart.
+                     */
+                    constructor(sheet: GC.Spread.Sheets.Worksheet,  name: string,  x: number,  y: number,  width: number,  height: number,  type: GC.Spread.Sheets.DataCharts.DataChartType);
+                    /**
+                     * Gets or sets whether to disable moving the data chart.
+                     * @param {boolean} value The setting for whether to disable moving the data chart.
+                     * @returns {boolean | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the setting for whether to disable moving the data chart; otherwise, returns the data chart.
+                     */
+                    allowMove(value?: boolean): any;
+                    /**
+                     * Gets or sets whether to disable resizing the data chart.
+                     * @param {boolean} value The setting for whether to disable resizing the data chart.
+                     * @returns {boolean | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the setting for whether to disable resizing the data chart; otherwise, returns the data chart.
+                     */
+                    allowResize(value?: boolean): any;
+                    /**
+                     * Gets or sets the alternative text of the data chart for screen readers.
+                     * @param {string} value The alternative text of the data chart.
+                     * @returns {string} The alternative text of the data chart.
+                     */
+                    alt(value?: string): any;
+                    /**
+                     * Gets or sets whether this data chart is printable.
+                     * @param {boolean} value The value that indicates whether this data chart is printable.
+                     * @returns {boolean | void} If no value is set, returns whether this data chart is printable.
+                     */
+                    canPrint(value?: boolean): any;
+                    /**
+                     * Gets or sets whether the object moves when hiding or showing, resizing, or moving rows or columns.
+                     * @param {boolean} value The value indicates whether the object moves when hiding or showing, resizing, or moving rows or columns.
+                     * @returns {boolean | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns whether this data chart dynamically moves; otherwise, returns the data chart.
+                     */
+                    dynamicMove(value?: boolean): any;
+                    /**
+                     * Gets or sets whether the position of the data chart is fixed. When fixedPosition is true, dynamicMove and dynamicSize are disabled.
+                     * @param {boolean} value The value indicates whether the position of the data chart is fixed.
+                     * @returns {boolean | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns whether the position of the data chart is fixed; otherwise, returns the data chart.
+                     */
+                    dynamicSize(value?: boolean): any;
+                    /**
+                     * Gets or sets the end column index of the data chart position.
+                     * @param {number} value The end column index of the data chart position.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the end column index of the data chart position; otherwise, returns the data chart.
+                     */
+                    endColumn(value?: number): any;
+                    /**
+                     * Gets or sets the offset relative to the end column of the data chart.
+                     * @param {number} value The offset relative to the end column of the data chart.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the offset relative to the end column of the data chart; otherwise, returns the data chart.
+                     */
+                    endColumnOffset(value?: number): any;
+                    /**
+                     * Gets or sets the end row index of the data chart position.
+                     * @param {number} value The end row index of the data chart position.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the end row index of the data chart position; otherwise, returns the data chart.
+                     */
+                    endRow(value?: number): any;
+                    /**
+                     * Gets or sets the offset relative to the end row of the data chart.
+                     * @param {number} value The offset relative to the end row of the data chart.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the offset relative to the end row of the data chart; otherwise, returns the data chart.
+                     */
+                    endRowOffset(value?: number): any;
+                    /**
+                     * get datachart config.
+                     * @return {object} The config of the datachart.
+                     * @example
+                     * ```
+                     * var datachart = activeSheet.datacharts.add('datachart1', 250, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
+                     * console.log(datachart.getChartConfig());
+                     * ```
+                     */
+                    getChartConfig(): GC.Spread.Sheets.DataCharts.IDataChartConfig;
+                    /**
+                     * Gets or sets the height of a data chart.
+                     * @param {number} value The height of a data chart.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the height of a data chart; otherwise, returns the data chart.
+                     */
+                    height(value?: number): any;
+                    /**
+                     * Gets or sets whether this data chart is locked.
+                     * @param {boolean} value The value that indicates whether this data chart is locked.
+                     * @returns {boolean | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns whether this data chart is locked; otherwise, returns the data chart.
+                     */
+                    isLocked(value?: boolean): any;
+                    /**
+                     * Gets or sets whether this data chart is selected.
+                     * @param {boolean} value The value that indicates whether this data chart is selected.
+                     * @returns {boolean | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns whether this data chart is selected; otherwise, returns the data chart.
+                     */
+                    isSelected(value?: boolean): any;
+                    /**
+                     * Gets or sets whether this data chart is visible.
+                     * @param {boolean} value The value that indicates whether this data chart is visible.
+                     * @returns {boolean | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns whether this data chart is visible; otherwise, returns the data chart.
+                     */
+                    isVisible(value?: boolean): any;
+                    /**
+                     * Gets the name of the data chart.
+                     * @param {string} value The name of the data chart.
+                     * @returns {string | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the name of the data chart; otherwise, returns the data chart.
+                     */
+                    name(value?: string): any;
+                    /**
+                     * set datachart config.
+                     * @param {object} config The config of the datachart.
+                     * @example
+                     * ```
+                     * var datachart = activeSheet.datacharts.add('datachart1', 250, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
+                     * var config = datachart.getChartConfig();
+                     * config.plots[0].type = GC.Spread.Sheets.DataCharts.DataChartType.line;
+                     * datachart.setChartConfig(config);
+                     * ```
+                     */
+                    setChartConfig(config: GC.Spread.Sheets.DataCharts.IDataChartConfig): void;
+                    /**
+                     * Gets or sets the starting column index of the data chart position.
+                     * @param {number} value The starting column index of the data chart position.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the starting column index of the data chart position; otherwise, returns the data chart.
+                     */
+                    startColumn(value?: number): any;
+                    /**
+                     * Gets or sets the offset relative to the start column of the data chart.
+                     * @param {number} value The offset relative to the start column of the data chart.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the offset relative to the start column of the data chart; otherwise, returns the data chart.
+                     */
+                    startColumnOffset(value?: number): any;
+                    /**
+                     * Gets or sets the starting row index of the data chart position.
+                     * @param {number} value The starting row index of the data chart position.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the starting row index of the data chart position; otherwise, returns the data chart.
+                     */
+                    startRow(value?: number): any;
+                    /**
+                     * Gets or sets the offset relative to the start row of the data chart.
+                     * @param {number} value The offset relative to the start row of the data chart.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the offset relative to the start row of the data chart; otherwise, returns the data chart.
+                     */
+                    startRowOffset(value?: number): any;
+                    /**
+                     * Gets or sets the width of a data chart.
+                     * @param {number} value The width of a data chart.
+                     * @returns {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the width of a data chart; otherwise, returns the data chart.
+                     */
+                    width(value?: number): any;
+                    /**
+                     * Gets or sets the horizontal location of the data chart.
+                     * @param {number} value The horizontal location of the data chart.
+                     * @return {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the horizontal location of the data chart; otherwise, returns the data chart.
+                     */
+                    x(value?: number): any;
+                    /**
+                     * Gets or sets the vertical location of the data chart.
+                     * @param {number} value The vertical location of the data chart.
+                     * @return {number | GC.Spread.Sheets.DataCharts.DataChart} If no value is set, returns the vertical location of the data chart; otherwise, returns the data chart.
+                     */
+                    y(value?: number): any;
+                }
+
+                export class DataChartConfigPanel{
+                    /**
+                     * Represents a data chart config panel.
+                     * @class
+                     * @param {HTMLElement | string} host The host element or the host element id or the host element selector.
+                     * @param {object} spread The spread that the panel attach to.
+                     */
+                    constructor(host: HTMLElement | string,  spread: GC.Spread.Sheets.Workbook);
+                    /**
+                     * attach the spread to the config panel.
+                     * @example
+                     * ```
+                     * configPanel.attach(spread);
+                     * ```
+                     */
+                    attach(spread: GC.Spread.Sheets.Workbook): void;
+                    /**
+                     * destroy the config panel.
+                     * @example
+                     * ```
+                     * configPanel.destroy();
+                     * ```
+                     */
+                    destroy(): void;
+                    /**
+                     * detach the spread from the config panel.
+                     * @example
+                     * ```
+                     * configPanel.detach();
+                     * ```
+                     */
+                    detach(): void;
+                    /**
+                     * Gets the DataChartConfigPanel instance by the host element.
+                     * @param {HTMLElement|string} host The host element or the host element id or the host element selector.
+                     * @returns {GC.Spread.Sheets.DataCharts.DataChartConfigPanel} The DataChartConfigPanel instance.
+                     * @example
+                     * ```
+                     * const configPanel = GC.Spread.Sheets.DataCharts.DataChartConfigPanel.findControl('host');
+                     * ```
+                     */
+                    static findControl(host: HTMLElement|string): GC.Spread.Sheets.DataCharts.DataChartConfigPanel;
+                }
+
+                export class DataChartManager{
+                    /**
+                     * Represents a datachart manager that managers all datacharts in a sheet.
+                     * @class
+                     * @param {GC.Spread.Sheets.Worksheet} sheet The worksheet.
+                     */
+                    constructor();
+                    /**
+                     * Adds a datachart to the sheet.
+                     * @param {string} name The name of the datachart that will be added to the sheet.
+                     * @param {number} x The x location of the datachart.
+                     * @param {number} y The y location of the datachart.
+                     * @param {number} width The width of the datachart.
+                     * @param {number} height The height of the datachart.
+                     * @param {GC.Spread.Sheets.DataCharts.DataChartType} type The type of the datachart.
+                     * @return {GC.Spread.Sheets.DataCharts.DataChart} The datachart that has been added to the sheet.
+                     * @example
+                     * ```
+                     * //This example shows how to add a datachart.
+                     * var datachart = activeSheet.datacharts.add('datachart1', 250, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
+                     * ```
+                     */
+                    add(name: string,  x: number,  y: number,  width: number,  height: number,  type: GC.Spread.Sheets.DataCharts.DataChartType): GC.Spread.Sheets.DataCharts.DataChart;
+                    /**
+                     * get all data charts.
+                     * @return {GC.Spread.Sheets.DataCharts.DataChart[]} get all data charts.
+                     * @example
+                     * ```
+                     * activeSheet.datacharts.add('DataChart1', 0, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
+                     * activeSheet.datacharts.add('DataChart2', 500, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.pie);
+                     * var dataCharts = activeSheet.datacharts.all();
+                     * for (var i = 0; i &lt; dataCharts.length; i++) {
+                     *     alert("Name of dataChart " + i + " is:  " + dataCharts[i].name())
+                     * }
+                     * ```
+                     */
+                    all(): GC.Spread.Sheets.DataCharts.DataChart[];
+                    /**
+                     * remove all data charts.
+                     */
+                    clear(): void;
+                    /**
+                     * get a data charts by name.
+                     * @param {string} name data chart name.
+                     * @return {GC.Spread.Sheets.DataCharts.DataChart} get a data charts by name.
+                     * @example
+                     * ```
+                     * activeSheet.datacharts.add('DataChart1', 0, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
+                     * //button
+                     * $("#button1").click(function () {
+                     *  var dataChart = activeSheet.datacharts.get("DataChart1");
+                     * });
+                     * ```
+                     */
+                    get(name: string): GC.Spread.Sheets.DataCharts.DataChart;
+                    /**
+                     * remove a data charts by name.
+                     * @param {string} name data chart name.
+                     * @example
+                     * ```
+                     * activeSheet.datacharts.add('DataChart1', 0, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
+                     * //button
+                     * $("#button1").click(function () {
+                     *      activeSheet.resumePaint();
+                     *      activeSheet.datacharts.remove("DataChart1");
+                     *      activeSheet.repaint();
+                     * });
+                     * ```
+                     */
+                    remove(name: string): void;
+                    /**
+                     * Gets or sets the z-index of chart.
+                     * @param {string} name The name of the chart.
+                     * @param {number} zIndex The z-index of the chart.
+                     * @return {number | *} If the parameter 'zIndex' is null or undefined,it will return the z-index of the chart with the indicate name.
+                     * @example
+                     * ```
+                     * activeSheet.datacharts.add('DataChart1', 200, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);
+                     * activeSheet.datacharts.add('DataChart2', 0, 20, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.pie);
+                     * activeSheet.datacharts.zIndex('DataChart1', 897);
+                     * activeSheet.datacharts.zIndex('DataChart2', 890);
+                     * ```
+                     */
+                    zIndex(name: string,  zIndex?: number): any;
+                }
+            }
+
+            module DataRange{
+
+                export interface IDataProvider{
+                    /**
+                     * The data provider host.
+                     */
+                    host: GC.Spread.Sheets.DataRange.DataRange;
+                    /**
+                     * Implement this hook to provide values to data range cells. The `row` and `col` parameters are based on the data range axis. If returns `undefined`, it means fail to get value from data provider, so it will continue to get the value from sheet model.
+                     */
+                    getValue?: (row: number, col: number) => unknown;
+                    /**
+                     * Implement this hook to receive the changed values from data range. The `row` and `col` parameters are based on the data range axis. Post your change into `changes` parameter if you want undo/redo. If returns `true`, it means set value successfully to data provider, so it will prevent to set the value to sheet model.
+                     */
+                    setValue?: (row: number, col: number, value: unknown, changes: any[]) => boolean;
+                    /**
+                     * Implement this hook to provide styles to data range cells. The `row` and `col` parameters are based on the data range axis. It should return the style as `GC.Spread.Sheets.Style`, otherwise, means fail to get style from data provider, so it will continue to get the style from sheet model.
+                     */
+                    getStyle?: (row: number, col: number) => GC.Spread.Sheets.Style;
+                    /**
+                     * Implement this hook to provide spans to data range cells. The `row`, `col`, `rowCount` and `colCount` parameters are based on the data range axis.
+                     */
+                    getSpans?: (row: number, col: number, rowCount: number, colCount: number) => GC.Spread.Sheets.Range[];
+                    /**
+                     * Implement this hook to receive changed rows information. The `row` and `rowCount` parameters are based on the data range axis. Post your change into `changes` parameter if you want undo/redo.
+                     */
+                    onRowChange?: (row: number, rowCount: number, changeType: "add" | "delete", changes: any[]) => void;
+                    /**
+                     * Implement this hook to receive changed columns information. The `col` and `colCount` parameters are based on the data range axis. Post your change into `changes` parameter if you want undo/redo.
+                     */
+                    onColumnChange?: (col: number, colCount: number, changeType: "add" | "delete", changes: any[]) => void;
+                    /**
+                     * Implement this hook to handle the copy action. Input parameter `name` is copied data range name, need to return a different new data range `name` and a data provider instance. Return `false` means prevent to copy data range. Default is `false`.
+                     */
+                    onCopy?: (name: string) => {name: string, dataProvider: GC.Spread.Sheets.DataRange.IDataProvider} | boolean;
+                    /**
+                     * Implement this hook to handle the clear contents action. Return `false` means prevent to clear data range contents. Default is `false`.
+                     */
+                    onClear?: (row: number, col: number, rowCount: number, colCount: number, changes: any[]) => boolean;
+                    /**
+                     * Implement this hook to handle the destroy action.
+                     */
+                    onDestroy?: () => void;
+                    /**
+                     * Implement this hook to handle the mouse down action. The `row` and `col` parameters are based on the data range axis. Return `true` means prevent the next sheet actions. Default is false.
+                     */
+                    onMouseDown?: (row: number, col: number, e: MouseEvent) => boolean;
+                    /**
+                     * Implement this hook to handle the mouse move action. The `row` and `col` parameters are based on the data range axis. Return `true` means prevent the next sheet actions. Default is false.
+                     */
+                    onMouseMove?: (row: number, col: number, e: MouseEvent) => boolean;
+                    /**
+                     * Implement this hook to handle the mouse up action. The `row` and `col` parameters are based on the data range axis. Return `true` means prevent the next sheet actions. Default is false.
+                     */
+                    onMouseUp?: (row: number, col: number, e: MouseEvent) => boolean;
+                    /**
+                     * Implement this hook to handle the mouse context menu action. The `row` and `col` parameters are based on the data range axis. Return `true` means prevent the next sheet actions. Default is false.
+                     */
+                    onContextMenu?: (row: number, col: number, e: MouseEvent) => boolean;
+                    /**
+                     * Implement this hook to handle the mouse double click action. The `row` and `col` parameters are based on the data range axis. Return `true` means prevent the next sheet actions. Default is false.
+                     */
+                    onDoubleClick?: (row: number, col: number, e: MouseEvent) => boolean;
+                    /**
+                     * Implement this hook to handle the mouse wheel action. Return `true` means prevent the next sheet actions. Default is false.
+                     */
+                    onMouseWheel?: (deltaX: number, deltaY: number, e: MouseEvent) => boolean;
+                    /**
+                     * Implement this hook to handle the key down action. The `row` and `col` parameters are based on the data range axis. Return `true` means prevent the next sheet actions. Default is false.
+                     */
+                    onKeyDown?: (row: number, col: number, e: KeyboardEvent) => boolean;
+                    /**
+                     * Implement this hook to handle the key down action. The `row` and `col` parameters are based on the data range axis. Return `true` means prevent the next sheet actions. Default is false.
+                     */
+                    onKeyUp?: (row: number, col: number, e: KeyboardEvent) => boolean;
+                    /**
+                     * Implement this hook to handle the undo action. Input parameter `change` is the user created in the corresponding hooks.
+                     */
+                    undo?: (change: any) => void;
+                    /**
+                     * Implement this hook to handle the serialization.
+                     */
+                    toJSON?: () => { typeName: string, [prop: string]: any };
+                    /**
+                     * Implement this hook to handle the deserialization.
+                     */
+                    fromJSON?: (options: { typeName: string, [prop: string]: any }) => void;
+                }
+
+
+                export interface IDataRangeOptions{
+                    /**
+                     * Indicates the top rows count to be sticked.
+                     */
+                    sticky: { top: number };
+                }
+
+
+                export class DataRange{
+                    /**
+                     * Represents a data range.
+                     * @class
+                     * @param {string} name The name of the data range.
+                     * @param {GC.Spread.Sheets.DataRange.IDataProvider} dataProvider The data provider of the data range.
+                     * @param {GC.Spread.Sheets.Range} range The range of the data range.
+                     * @param {GC.Spread.Sheets.DataRange.IDataRangeOptions} [options] The options of the data range.
+                     */
+                    constructor(name: string,  dataProvider: GC.Spread.Sheets.DataRange.IDataProvider,  range: GC.Spread.Sheets.Range,  options?: GC.Spread.Sheets.DataRange.IDataRangeOptions);
+                    /**
+                     * @description Get or set the name of the data range.
+                     * @param {string} [name] this name of the data range
+                     * @returns {string} If no value is set, returns the name of the data range.
+                     */
+                    name(name?: string): string;
+                    /**
+                     * @description Get or set the range of the data range.
+                     * @param {GC.Spread.Sheets.Range} [range] this range of the data range
+                     * @returns {GC.Spread.Sheets.Range} If no value is set, returns the range of the data range.
+                     */
+                    range(range?: GC.Spread.Sheets.Range): GC.Spread.Sheets.Range;
+                    /**
+                     * @description repaint the data range
+                     */
+                    repaint(): void;
+                }
+
+                export class DataRangeManager{
+                    /**
+                     * @description Represents a data range manager.
+                     * @class
+                     * @param {GC.Spread.Sheets.Worksheet} sheet The worksheet.
+                     */
+                    constructor(sheet: GC.Spread.Sheets.Worksheet);
+                    /**
+                     * @description Adds a data range.
+                     * @param {string} name The data range name.
+                     * @param {GC.Spread.Sheets.DataRange.IDataProvider | string} dataProvider The data provider. String type means the tableSheet name, it will create a TableSheetDataProvider.
+                     * @param {GC.Spread.Sheets.Range} range The range of data range.
+                     * @param {GC.Spread.Sheets.DataRange.IDataRangeOptions} [options] The data range options.
+                     * @returns {GC.Spread.Sheets.DataRange.DataRange} The added data range.
+                     */
+                    add(name: string,  dataProvider: GC.Spread.Sheets.DataRange.IDataProvider | string,  range: GC.Spread.Sheets.Range,  options?: GC.Spread.Sheets.DataRange.IDataRangeOptions): GC.Spread.Sheets.DataRange.DataRange;
+                    /**
+                     * @description Get all data ranges.
+                     * @returns {GC.Spread.Sheets.DataRange.DataRange[]} The array of data range instances. Default is empty array.
+                     */
+                    all(): GC.Spread.Sheets.DataRange.DataRange[];
+                    /**
+                     * @description Remove all data ranges.
+                     */
+                    clear(): void;
+                    /**
+                     * @description Gets a data range.
+                     * @param {string} name The data range name.
+                     * @returns {GC.Spread.Sheets.DataRange.DataRange} The target data range.
+                     */
+                    get(name: string): GC.Spread.Sheets.DataRange.DataRange;
+                    /**
+                     * @description Remove a data range.
+                     * @param {string} name The data range name.
+                     */
+                    remove(name: string): void;
+                }
+            }
+
             module DataValidation{
                 /**
                  * Creates a validator based on the data.
@@ -37477,6 +39374,19 @@ declare module GC{
                 /**
                  * Indicates the data validation highlightposition.
                  * @enum {number}
+                 * @example
+                 * ```
+                 * //This example uses the highlightStyle method.
+                 * sheet.setValue(1, 1, "sss");
+                 * var dv = GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
+                 * dv.highlightStyle({
+                 *    type:GC.Spread.Sheets.DataValidation.HighlightType.dogEar,
+                 *    color:'blue',
+                 *    position:GC.Spread.Sheets.DataValidation.HighlightPosition.topLeft
+                 * });
+                 * sheet.setDataValidator(1,1, dv);
+                 * spread.options.highlightInvalidData = true;
+                 * ```
                  */
                 export enum HighlightPosition{
                     /**
@@ -37508,6 +39418,19 @@ declare module GC{
                 /**
                  * Indicates the data validation highlightType.
                  * @enum {number}
+                 * @example
+                 * ```
+                 * //This example uses the highlightStyle method.
+                 * sheet.setValue(1, 1, "sss");
+                 * var dv = GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
+                 * dv.highlightStyle({
+                 *    type:GC.Spread.Sheets.DataValidation.HighlightType.dogEar,
+                 *    color:'blue',
+                 *    position:GC.Spread.Sheets.DataValidation.HighlightPosition.topLeft
+                 * });
+                 * sheet.setDataValidator(1,1, dv);
+                 * spread.options.highlightInvalidData = true;
+                 * ```
                  */
                 export enum HighlightType{
                     /**
@@ -37550,18 +39473,52 @@ declare module GC{
                      * Gets or sets the condition to validate.
                      * @param {GC.Spread.Sheets.ConditionalFormatting.Condition} [value] The condition to validate.
                      * @returns {GC.Spread.Sheets.ConditionalFormatting.Condition | GC.Spread.Sheets.DataValidation.DefaultDataValidator} If no value is set, returns the condition to validate; otherwise, returns the data validator.
+                     * @example
+                     * ```
+                     * var nCondition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.averageCondition, {compareType: GC.Spread.Sheets.ConditionalFormatting.AverageConditionType.above});
+                     * nCondition.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 3)]);
+                     * var validator = new GC.Spread.Sheets.DataValidation.DefaultDataValidator();
+                     * validator.type(GC.Spread.Sheets.DataValidation.CriteriaType.custom);
+                     * validator.condition(nCondition);
+                     * activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).validator(validator);
+                     * spread.options.highlightInvalidData = true;
+                     * activeSheet.setValue(0, 0, 5);
+                     * activeSheet.setValue(1, 0, 15);
+                     * ```
                      */
                     condition(value?: GC.Spread.Sheets.ConditionalFormatting.Condition): any;
                     /**
                      * Gets or sets the error message.
                      * @param {string} [value] The error message.
                      * @returns {string | GC.Spread.Sheets.DataValidation.DefaultDataValidator} If no value is set, returns the error message; otherwise, returns the data validator.
+                     * @example
+                     * ```
+                     * var nCondition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.cellValueCondition);
+                     * nCondition.compareType(GC.Spread.Sheets.ConditionalFormatting.GeneralComparisonOperators.equalsTo);
+                     * nCondition.expected(0);
+                     * var validator = new GC.Spread.Sheets.DataValidation.DefaultDataValidator(nCondition);
+                     * validator.type(GC.Spread.Sheets.DataValidation.CriteriaType.custom);
+                     * validator.errorMessage('Incorrect input, please input a positive number');
+                     * activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).validator(validator);
+                     * ```
                      */
                     errorMessage(value?: string): any;
                     /**
                      * Gets or sets the error style to display.
                      * @param {GC.Spread.Sheets.DataValidation.ErrorStyle} [value] The error style to display.
                      * @returns {GC.Spread.Sheets.DataValidation.ErrorStyle | GC.Spread.Sheets.DataValidation.DefaultDataValidator} If no value is set, returns the error style to display; otherwise, returns the data validator.
+                     * @example
+                     * ```
+                     * var nCondition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.averageCondition, {compareType: GC.Spread.Sheets.ConditionalFormatting.AverageConditionType.above});
+                     * nCondition.ranges([new GC.Spread.Sheets.Range(0, 0, 10, 3)]);
+                     * var validator = new GC.Spread.Sheets.DataValidation.DefaultDataValidator(nCondition);
+                     * validator.type(GC.Spread.Sheets.DataValidation.CriteriaType.custom);
+                     * validator.errorStyle(GC.Spread.Sheets.DataValidation.ErrorStyle.warning);
+                     * activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).validator(validator);
+                     * spread.options.highlightInvalidData = true;
+                     * activeSheet.setValue(0, 0, 5);
+                     * activeSheet.setValue(1, 0, 15);
+                     * ```
                      */
                     errorStyle(value?: GC.Spread.Sheets.DataValidation.ErrorStyle): any;
                     /**
@@ -37576,6 +39533,16 @@ declare module GC{
                      * @param {number} baseRow The base row.
                      * @param {number} baseColumn The base column.
                      * @returns {Object[]} The valid data lists or null.
+                     * @example
+                     * ```
+                     * spread.options.highlightInvalidData = true;
+                     * var dv = GC.Spread.Sheets.DataValidation.createListValidator("1,2,3");
+                     * dv.showInputMessage(true);
+                     * dv.inputMessage("Value must be 1,2 or 3");
+                     * dv.inputTitle("tip");
+                     * activeSheet.setDataValidator(1,1,1,1,dv, GC.Spread.Sheets.SheetArea.viewport);
+                     * alert(activeSheet.getDataValidator(1,1).getValidList(activeSheet,1,1));
+                     * ```
                      */
                     getValidList(evaluator: Object,  baseRow: number,  baseColumn: number): any[];
                     /**
@@ -37787,6 +39754,21 @@ declare module GC{
                      * Gets or sets the criteria type of this data validator.
                      * @param {GC.Spread.Sheets.DataValidation.CriteriaType} [value] The criteria type of this data validator.
                      * @returns {GC.Spread.Sheets.DataValidation.CriteriaType | GC.Spread.Sheets.DataValidation.DefaultDataValidator} If no value is set, returns the criteria type of this data validator; otherwise, returns the data validator.
+                     * @example
+                     * ```
+                     * //This example uses the preciseCompareDate method.
+                     * var dateCondition = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.dateCondition);
+                     * dateCondition.compareType(GC.Spread.Sheets.ConditionalFormatting.DateCompareType.after);
+                     * dateCondition.expected(new Date(2020, 4, 22, 6));
+                     * //When the option is false, the validator compares the whole day, and they are the same, so validation fails and the red alert is displayed.
+                     * //When the option is true, the date time 7 o'clock is greater than 6 o'clock, so the result is successful.
+                     * var validator = new GC.Spread.Sheets.DataValidation.DefaultDataValidator(dateCondition);
+                     * validator.type(GC.Spread.Sheets.DataValidation.CriteriaType.date);
+                     * validator.preciseCompareDate(true);
+                     * activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).validator(validator);
+                     * spread.options.highlightInvalidData = true;
+                     * activeSheet.setValue(0, 0, new Date(2020, 4, 22, 7));
+                     * ```
                      */
                     type(value?: GC.Spread.Sheets.DataValidation.CriteriaType): any;
                     /**
@@ -39520,13 +41502,28 @@ declare module GC{
                     constructor(host: HTMLElement,  options?: GC.Spread.Sheets.FormulaTextBox.IFormulaTextBoxOptions);
                     /**
                      * Adds a custom function description.
-                     * @param {GC.Spread.CalcEngine.Functions.IFunctionDescription} functionDescription The function description to add. This can be an array. See the Remarks for more information.
+                     * @param {GC.Spread.CalcEngine.Functions.IFunctionDescription | GC.Spread.CalcEngine.Functions.IFunctionDescription[]} functionDescription The function description to add. This can be an array. See the Remarks for more information.
                      */
-                    add(functionDescription: GC.Spread.CalcEngine.Functions.IFunctionDescription): void;
+                    add(functionDescription: GC.Spread.CalcEngine.Functions.IFunctionDescription | GC.Spread.CalcEngine.Functions.IFunctionDescription[]): void;
                     /**
                      * Gets or sets whether the text box uses automatic complete.
-                     * @param {boolean} value Whether to use automatic complete when editing.
+                     * @param {boolean} [value] Whether to use automatic complete when editing.
                      * @returns {boolean} If no value is set, returns whether the text box uses auto complete; otherwise, there is no return value.
+                     * @example
+                     * ```
+                     * var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
+                     * var div = document.createElement('div');
+                     * div.id = 'fbx';
+                     * div.style.width = '300px';
+                     * div.style.height = '50px';
+                     * div.setAttribute('contentEditable', 'true');
+                     * document.getElementById('panel').appendChild(div);
+                     * var formulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(div);
+                     * formulaTextBox.workbook(spread);
+                     * formulaTextBox.autoComplete(false);
+                     *
+                     * // input "=SUM" formula prefix in the formula text box input element, the func hint box will not show
+                     * ```
                      */
                     autoComplete(value?: boolean): boolean;
                     /**
@@ -39545,14 +41542,44 @@ declare module GC{
                     remove(name: string): void;
                     /**
                      * Gets or sets whether to display the function's help tip.
-                     * @param {boolean} value Whether to display the function's help tip when editing.
+                     * @param {boolean} [value] Whether to display the function's help tip when editing.
                      * @returns {boolean} If no value is set, returns whether the text box displays the function's help tip when editing; otherwise, there is no return value.
+                     * @example
+                     * ```
+                     * var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
+                     * var div = document.createElement('div');
+                     * div.id = 'fbx';
+                     * div.style.width = '300px';
+                     * div.style.height = '50px';
+                     * div.setAttribute('contentEditable', 'true');
+                     * document.getElementById('panel').appendChild(div);
+                     * var formulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(div);
+                     * formulaTextBox.workbook(spread);
+                     * formulaTextBox.showHelp(false);
+                     *
+                     * // input "=SUM" formula prefix in the formula text box input element, the func hint (auto complete) box iwll show, but the help func will not show
+                     * ```
                      */
                     showHelp(value?: boolean): any;
                     /**
                      * Gets or sets the text.
-                     * @param {string} value The text.
+                     * @param {string} [value] The text.
                      * @returns {string} If no value is set, returns the text; otherwise, there is no return value.
+                     * @example
+                     * ```
+                     * var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 2 });
+                     * var div = document.createElement('div');
+                     * div.id = 'fbx';
+                     * div.style.width = '300px';
+                     * div.style.height = '50px';
+                     * div.setAttribute('contentEditable', 'true');
+                     * document.getElementById('panel').appendChild(div);
+                     * var formulaTextBox = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(div);
+                     * formulaTextBox.workbook(spread);
+                     * formulaTextBox.text('this is text');
+                     * // worksheet will be in edit status with the text value and formula text box input box will also show the text value.
+                     * console.log(formulaTextBox.text()); // 'this is text'
+                     * ```
                      */
                     text(value?: string): string;
                     /**
@@ -41309,6 +43336,22 @@ declare module GC{
                      * @property {boolean} [enableNavigateToRange] Indicates whether enable navigate to the named range or drawing item when input its name or click on custom list item.
                      * @property {boolean} [showCustomNameList] Indicates whether show the custom name list dropdown indicator.
                      * @property {number} [dropDownMaxHeight] Indicates the drop down list element max height.
+                     * @example
+                     * ```
+                     * var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
+                     * var div = document.createElement('div');
+                     * div.id = 'nameBox';
+                     * div.style.width = '300px';
+                     * div.style.height = '50px';
+                     * document.getElementById('panel').appendChild(div);
+                     *
+                     * var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('nameBox'), spread);
+                     * nameBox.options.enableAddCustomName = false; // cannot add custom name with inputting in name box input box now.
+                     * nameBox.options.enableNavigateToRange = false; // cannot swap the selected range to the value of the name box input box now.
+                     * nameBox.options.showCustomNameList = false; // cannot open the custom name list by down arrow button right side and the button will be hidden now.
+                     * nameBox.options.dropDownMaxHeight = 100; // the custom name list host DOM element height will no larger than 100px now.
+                     *
+                     * ```
                      */
                     options: GC.Spread.Sheets.NameBox.INameBoxOptions;
                     /**
@@ -41396,26 +43439,110 @@ declare module GC{
                      * Gets the check status of the row or all rows.
                      * @param {number} [row] The index of the row.
                      * @returns {boolean|boolean[]} If row is undefined, returns all row's check status; otherwise, returns the check status of the row.
+                     * @example
+                     * ```
+                     * spread.suspendPaint();
+                     * activeSheet.setValue(0, 0, "Name", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setValue(0, 1, "Chapter", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setValue(0, 2, "Page", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setColumnWidth(0, 200);
+                     * activeSheet.setRowCount(13);
+                     * var commands = [
+                     *     {name: 'Preface', chapter: '1', page: 1, indent: 0},
+                     *     {name: 'Java SE5 and SE6', chapter: '1.1', page: 2, indent: 1},
+                     *     {name: 'Java SE6', chapter: '1.1.1', page: 2, indent: 2},
+                     *     {name: 'The 4th edition', chapter: '1.2', page: 2, indent: 1},
+                     *     {name: 'Changes', chapter: '1.2.1', page: 3, indent: 2},
+                     *     {name: 'Note on the cover design', chapter: '1.3', page: 4, indent: 1},
+                     *     {name: 'Acknowledgements', chapter: '1.4', page: 4, indent: 1},
+                     *     {name: 'Introduction', chapter: '2', page: 9, indent: 0},
+                     *     {name: 'Prerequisites', chapter: '2.1', page: 9, indent: 1},
+                     *     {name: 'Learning Java', chapter: '2.2', page: 10, indent: 1},
+                     *     {name: 'Goals', chapter: '2.3', page: 10, indent: 1},
+                     *     {name: 'Teaching from this book', chapter: '2.4', page: 11, indent: 1},
+                     *     {name: 'JDK HTML documentation', chapter: '2.5', page: 11, indent: 1},
+                     * ];
+                     * for (var r = 0; r < commands.length; r++) {
+                     *     activeSheet.setValue(r, 0, commands[r]['name']);
+                     *     activeSheet.setValue(r, 1, commands[r]['chapter']);
+                     *     activeSheet.setValue(r, 2, commands[r]['page']);
+                     *     activeSheet.getRange(r, 0, 1, 1).textIndent(commands[r].indent);
+                     * }
+                     * activeSheet.outlineColumn.options({
+                     *      columnIndex: 0,
+                     *      showImage: true,
+                     *      showCheckBox: true,
+                     *      images: ['star2.png', 'box4.png', 'rating4.png'],
+                     *      maxLevel: 2
+                     * });
+                     * activeSheet.showRowOutline(true);
+                     * spread.invalidateLayout();
+                     * spread.resumePaint();
+                     *
+                     * console.log(activeSheet.outlineColumn.getCheckStatus(1)); // false
+                     * activeSheet.outlineColumn.setCheckStatus(1, true);
+                     * console.log(activeSheet.outlineColumn.getCheckStatus(1)); // true
+                     * console.log(activeSheet.outlineColumn.getCheckStatus(2)); // true -> sub node of row 1
+                     * console.log(activeSheet.outlineColumn.getCheckStatus()); // [false, true, true, false, false, false, false, false, false, false, false, false, false]
+                     * ```
                      */
                     getCheckStatus(row?: number): any;
                     /**
                      * Gets the collapsed setting of the row or all rows.
                      * @param {number} [row] The index of the collapsed row.
                      * @returns {boolean|boolean[]} If row is undefined, returns all row's collapsed status; otherwise, returns the collapsed setting of the row.
+                     * @example
+                     * ```
+                     * spread.suspendPaint();
+                     * activeSheet.setValue(0, 0, "Name", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setValue(0, 1, "Chapter", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setValue(0, 2, "Page", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setColumnWidth(0, 200);
+                     * activeSheet.setRowCount(13);
+                     * var commands = [
+                     *     {name: 'Preface', chapter: '1', page: 1, indent: 0},
+                     *     {name: 'Java SE5 and SE6', chapter: '1.1', page: 2, indent: 1},
+                     *     {name: 'Java SE6', chapter: '1.1.1', page: 2, indent: 2},
+                     *     {name: 'The 4th edition', chapter: '1.2', page: 2, indent: 1},
+                     *     {name: 'Changes', chapter: '1.2.1', page: 3, indent: 2},
+                     *     {name: 'Note on the cover design', chapter: '1.3', page: 4, indent: 1},
+                     *     {name: 'Acknowledgements', chapter: '1.4', page: 4, indent: 1},
+                     *     {name: 'Introduction', chapter: '2', page: 9, indent: 0},
+                     *     {name: 'Prerequisites', chapter: '2.1', page: 9, indent: 1},
+                     *     {name: 'Learning Java', chapter: '2.2', page: 10, indent: 1},
+                     *     {name: 'Goals', chapter: '2.3', page: 10, indent: 1},
+                     *     {name: 'Teaching from this book', chapter: '2.4', page: 11, indent: 1},
+                     *     {name: 'JDK HTML documentation', chapter: '2.5', page: 11, indent: 1},
+                     * ];
+                     * for (var r = 0; r < commands.length; r++) {
+                     *     activeSheet.setValue(r, 0, commands[r]['name']);
+                     *     activeSheet.setValue(r, 1, commands[r]['chapter']);
+                     *     activeSheet.setValue(r, 2, commands[r]['page']);
+                     *     activeSheet.getRange(r, 0, 1, 1).textIndent(commands[r].indent);
+                     * }
+                     * activeSheet.outlineColumn.options({
+                     *      columnIndex: 0,
+                     *      showImage: true,
+                     *      showCheckBox: true,
+                     *      images: ['star2.png', 'box4.png', 'rating4.png'],
+                     *      maxLevel: 2
+                     * });
+                     * activeSheet.showRowOutline(true);
+                     * spread.invalidateLayout();
+                     * spread.resumePaint();
+                     *
+                     * console.log(activeSheet.outlineColumn.getCollapsed(1)); // false
+                     * activeSheet.outlineColumn.setCollapsed(1, true);
+                     * console.log(activeSheet.outlineColumn.getCollapsed(1)); // true
+                     * console.log(activeSheet.outlineColumn.getCollapsed(2)); // false -> sub node of row 1
+                     * console.log(activeSheet.outlineColumn.getCollapsed()); // [false, true, false, false, false, false, false, false, false, false, false, false, false]
+                     * ```
                      */
                     getCollapsed(row?: number): any;
                     /**
                      * Gets or sets the outlineColumn options.
-                     * @param {Object} outlineColumnOptions The outlineColumn options.
-                     * @param {number} outlineColumnOptions.columnIndex - The index of the indented column.
-                     * @param {boolean} [outlineColumnOptions.showImage] - Whether to display images.
-                     * @param {string[]} [outlineColumnOptions.images] - The images by level (url or base64Image).
-                     * @param {boolean} [outlineColumnOptions.showCheckBox] - Whether to display a check box.
-                     * @param {boolean} [outlineColumnOptions.showIndicator] - Whether to display the indicator.
-                     * @param {string} [outlineColumnOptions.expandIndicator] - The expand indicator (url or base64Image).
-                     * @param {string} [outlineColumnOptions.collapseIndicator] - The collapse indicator (url or base64Image).
-                     * @param {number} [outlineColumnOptions.maxLevel] - When the current row level is greater than maxLevel, the IncreaseCellIndent action does not take effect.
-                     * @returns {Object | GC.Spread.Sheets.OutlineColumn.OutlineColumn} outlineColumnOptions|outlineColumn
+                     * @param {GC.Spread.Sheets.OutlineColumn.IOutlineColumnOptions} outlineColumnOptions The outlineColumn options.
+                     * @returns {GC.Spread.Sheets.OutlineColumn.IOutlineColumnOptions | GC.Spread.Sheets.OutlineColumn.OutlineColumn} outlineColumnOptions|outlineColumn
                      * If no outlineColumnOptions item is set, returns outlineColumnOptions; otherwise, returns the outlineColumn instance.
                      * @example
                      * ```
@@ -41497,12 +43624,102 @@ declare module GC{
                      * Sets the check status of the row.
                      * @param {number} row The index of the row.
                      * @param {boolean} checkStatus The check status of the row.
+                     * @example
+                     * ```
+                     * spread.suspendPaint();
+                     * activeSheet.setValue(0, 0, "Name", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setValue(0, 1, "Chapter", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setValue(0, 2, "Page", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setColumnWidth(0, 200);
+                     * activeSheet.setRowCount(13);
+                     * var commands = [
+                     *     {name: 'Preface', chapter: '1', page: 1, indent: 0},
+                     *     {name: 'Java SE5 and SE6', chapter: '1.1', page: 2, indent: 1},
+                     *     {name: 'Java SE6', chapter: '1.1.1', page: 2, indent: 2},
+                     *     {name: 'The 4th edition', chapter: '1.2', page: 2, indent: 1},
+                     *     {name: 'Changes', chapter: '1.2.1', page: 3, indent: 2},
+                     *     {name: 'Note on the cover design', chapter: '1.3', page: 4, indent: 1},
+                     *     {name: 'Acknowledgements', chapter: '1.4', page: 4, indent: 1},
+                     *     {name: 'Introduction', chapter: '2', page: 9, indent: 0},
+                     *     {name: 'Prerequisites', chapter: '2.1', page: 9, indent: 1},
+                     *     {name: 'Learning Java', chapter: '2.2', page: 10, indent: 1},
+                     *     {name: 'Goals', chapter: '2.3', page: 10, indent: 1},
+                     *     {name: 'Teaching from this book', chapter: '2.4', page: 11, indent: 1},
+                     *     {name: 'JDK HTML documentation', chapter: '2.5', page: 11, indent: 1},
+                     * ];
+                     * for (var r = 0; r < commands.length; r++) {
+                     *     activeSheet.setValue(r, 0, commands[r]['name']);
+                     *     activeSheet.setValue(r, 1, commands[r]['chapter']);
+                     *     activeSheet.setValue(r, 2, commands[r]['page']);
+                     *     activeSheet.getRange(r, 0, 1, 1).textIndent(commands[r].indent);
+                     * }
+                     * activeSheet.outlineColumn.options({
+                     *      columnIndex: 0,
+                     *      showImage: true,
+                     *      showCheckBox: true,
+                     *      images: ['star2.png', 'box4.png', 'rating4.png'],
+                     *      maxLevel: 2
+                     * });
+                     * activeSheet.showRowOutline(true);
+                     * spread.invalidateLayout();
+                     * spread.resumePaint();
+                     *
+                     * console.log(activeSheet.outlineColumn.getCheckStatus(1)); // false
+                     * activeSheet.outlineColumn.setCheckStatus(1, true);
+                     * console.log(activeSheet.outlineColumn.getCheckStatus(1)); // true
+                     * console.log(activeSheet.outlineColumn.getCheckStatus(2)); // true -> sub node of row 1
+                     * ```
                      */
                     setCheckStatus(row: number,  checkStatus: boolean): void;
                     /**
                      * Sets whether the row is collapsed.
                      * @param {number} row The index of the row.
                      * @param {boolean} collapsed The collapsed setting for the row.
+                     * @example
+                     * ```
+                     * spread.suspendPaint();
+                     * activeSheet.setValue(0, 0, "Name", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setValue(0, 1, "Chapter", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setValue(0, 2, "Page", GC.Spread.Sheets.SheetArea.colHeader);
+                     * activeSheet.setColumnWidth(0, 200);
+                     * activeSheet.setRowCount(13);
+                     * var commands = [
+                     *     {name: 'Preface', chapter: '1', page: 1, indent: 0},
+                     *     {name: 'Java SE5 and SE6', chapter: '1.1', page: 2, indent: 1},
+                     *     {name: 'Java SE6', chapter: '1.1.1', page: 2, indent: 2},
+                     *     {name: 'The 4th edition', chapter: '1.2', page: 2, indent: 1},
+                     *     {name: 'Changes', chapter: '1.2.1', page: 3, indent: 2},
+                     *     {name: 'Note on the cover design', chapter: '1.3', page: 4, indent: 1},
+                     *     {name: 'Acknowledgements', chapter: '1.4', page: 4, indent: 1},
+                     *     {name: 'Introduction', chapter: '2', page: 9, indent: 0},
+                     *     {name: 'Prerequisites', chapter: '2.1', page: 9, indent: 1},
+                     *     {name: 'Learning Java', chapter: '2.2', page: 10, indent: 1},
+                     *     {name: 'Goals', chapter: '2.3', page: 10, indent: 1},
+                     *     {name: 'Teaching from this book', chapter: '2.4', page: 11, indent: 1},
+                     *     {name: 'JDK HTML documentation', chapter: '2.5', page: 11, indent: 1},
+                     * ];
+                     * for (var r = 0; r < commands.length; r++) {
+                     *     activeSheet.setValue(r, 0, commands[r]['name']);
+                     *     activeSheet.setValue(r, 1, commands[r]['chapter']);
+                     *     activeSheet.setValue(r, 2, commands[r]['page']);
+                     *     activeSheet.getRange(r, 0, 1, 1).textIndent(commands[r].indent);
+                     * }
+                     * activeSheet.outlineColumn.options({
+                     *      columnIndex: 0,
+                     *      showImage: true,
+                     *      showCheckBox: true,
+                     *      images: ['star2.png', 'box4.png', 'rating4.png'],
+                     *      maxLevel: 2
+                     * });
+                     * activeSheet.showRowOutline(true);
+                     * spread.invalidateLayout();
+                     * spread.resumePaint();
+                     *
+                     * console.log(activeSheet.outlineColumn.getCollapsed(1)); // false
+                     * activeSheet.outlineColumn.setCollapsed(1, true);
+                     * console.log(activeSheet.outlineColumn.getCollapsed(1)); // true
+                     * console.log(activeSheet.outlineColumn.getCollapsed(2)); // false -> sub node of row 1
+                     * ```
                      */
                     setCollapsed(row: number,  collapsed: boolean): void;
                 }
@@ -41597,6 +43814,15 @@ declare module GC{
                      * Expands or collapses the specified outline (range group) of rows or columns.
                      * @param {GC.Spread.Sheets.Outlines.OutlineInfo} groupInfo The group information of the range group.
                      * @param {boolean} expand Whether to expand the groups.
+                     * @example
+                     * ```
+                     * activeSheet.suspendPaint();
+                     * activeSheet.rowOutlines.group(2, 5);
+                     * var groupInfo = activeSheet.rowOutlines.find(2, 0);
+                     * activeSheet.rowOutlines.expandGroup(groupInfo, false);
+                     * activeSheet.resumePaint(); // the group is created and collapsed now.
+                     * activeSheet.rowOutlines.expandGroup(groupInfo, true); // the group and expand now.
+                     * ```
                      */
                     expandGroup(groupInfo: GC.Spread.Sheets.Outlines.OutlineInfo,  expand: boolean): void;
                     /**
@@ -41673,7 +43899,7 @@ declare module GC{
                      * activeSheet.suspendPaint();
                      * activeSheet.rowOutlines.group(0,5);
                      * var rgi = activeSheet.rowOutlines.find(1, 0);
-                     * rgi.state(GC.Spread.Sheets.Outlines.OutlineInfo.collapsed);
+                     * rgi.state(GC.Spread.Sheets.Outlines.OutlineState.collapsed);
                      * alert(activeSheet.rowOutlines.getState(rgi));
                      * activeSheet.resumePaint();
                      * ```
@@ -41712,7 +43938,19 @@ declare module GC{
                      * Determines whether the specified index is the end of the group.
                      * @param {number} index The index.
                      * @param {number} processLevel The process level.
-                     * @returns {boolean} `true` if the specfied index is the end of the group; otherwise, `false`.
+                     * @returns {boolean} `true` if the specified index is the end of the group; otherwise, `false`.
+                     * @example
+                     * ```
+                     * activeSheet.suspendPaint();
+                     * activeSheet.rowOutlines.group(2, 5);
+                     * activeSheet.rowOutlines.group(3, 2);
+                     * activeSheet.resumePaint();
+                     *
+                     * console.log(activeSheet.rowOutlines.isGroupEnd(2, 0)); // false
+                     * console.log(activeSheet.rowOutlines.isGroupEnd(4, 0)); // false
+                     * console.log(activeSheet.rowOutlines.isGroupEnd(4, 1)); // true
+                     * console.log(activeSheet.rowOutlines.isGroupEnd(6, 0)); // true
+                     * ```
                      */
                     isGroupEnd(index: number,  processLevel: number): boolean;
                     /**
@@ -41720,7 +43958,25 @@ declare module GC{
                      */
                     refresh(): void;
                     /**
-                     * Resumes the adding.
+                     * Resumes the adding group when the row/column is inserting the group range.
+                     * @example
+                     * ```
+                     * activeSheet.suspendPaint();
+                     * activeSheet.rowOutlines.group(2, 5);
+                     * activeSheet.resumePaint();
+                     *
+                     * console.log(activeSheet.rowOutlines.find(3, 0).end); // 6
+                     * console.log(activeSheet.rowOutlines.find(5, 0).end); // 6
+                     * activeSheet.addRows(4, 1);
+                     * console.log(activeSheet.rowOutlines.find(3, 0).end); // 7
+                     * console.log(activeSheet.rowOutlines.find(5, 0).end); // 7
+                     *
+                     * activeSheet.rowOutlines.suspendAdding();
+                     * activeSheet.addRows(4, 1);
+                     * console.log(activeSheet.rowOutlines.find(3, 0).end); // 3 // cause adding suspended, the group spilt into two parts.
+                     * console.log(activeSheet.rowOutlines.find(5, 0).end); // 8
+                     * activeSheet.rowOutlines.resumeAdding();
+                     * ```
                      */
                     resumeAdding(): void;
                     /**
@@ -41738,7 +43994,25 @@ declare module GC{
                      */
                     setCollapsed(index: number,  collapsed: boolean): void;
                     /**
-                     * Suspends the adding.
+                     * Suspends the adding group when the row/column is inserting the group range.
+                     * @example
+                     * ```
+                     * activeSheet.suspendPaint();
+                     * activeSheet.rowOutlines.group(2, 5);
+                     * activeSheet.resumePaint();
+                     *
+                     * console.log(activeSheet.rowOutlines.find(3, 0).end); // 6
+                     * console.log(activeSheet.rowOutlines.find(5, 0).end); // 6
+                     * activeSheet.addRows(4, 1);
+                     * console.log(activeSheet.rowOutlines.find(3, 0).end); // 7
+                     * console.log(activeSheet.rowOutlines.find(5, 0).end); // 7
+                     *
+                     * activeSheet.rowOutlines.suspendAdding();
+                     * activeSheet.addRows(4, 1);
+                     * console.log(activeSheet.rowOutlines.find(3, 0).end); // 3 // cause adding suspended, the group spilt into two parts.
+                     * console.log(activeSheet.rowOutlines.find(5, 0).end); // 8
+                     * activeSheet.rowOutlines.resumeAdding();
+                     * ```
                      */
                     suspendAdding(): void;
                     /**
@@ -43319,7 +45593,12 @@ declare module GC{
                      * Indicates that the string is found in the cell formula.
                      * @type {number}
                      */
-                    cellFormula= 8
+                    cellFormula= 8,
+                    /**
+                     * Indicates that the string is found in the cell comment.
+                     * @type {number}
+                     */
+                    cellComment= 16
                 }
 
                 /**
@@ -46445,6 +48724,15 @@ declare module GC{
                      * ```
                      */
                     toImageSrc(): string;
+                    /**
+                     * Get the shape Image src of type Base64 string.
+                     * @returns {Promise<string>} return the shape Image Base64 src string.
+                     * @example
+                     * ```
+                     * let shapeImageSrc = await sheet.shapes.all()[0].toImageSrcAsync();
+                     * ```
+                     */
+                    toImageSrcAsync(): Promise<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.
@@ -46890,6 +49178,7 @@ declare module GC{
                     allowResize: (value?: boolean, shouldCallback?: boolean) => boolean | ISlicer;
                     allowMove: (value?: boolean, shouldCallback?: boolean) => boolean | ISlicer;
                     toImageSrc: () => string | ISlicer;
+                    toImageSrcAsync: () => Promise<string> | ISlicer;
                 }
 
 
@@ -47397,6 +49686,15 @@ declare module GC{
                      * ```
                      */
                     toImageSrc(): string;
+                    /**
+                     * Get the slicer Image src of type Base64 string.
+                     * @returns {Promise<string>} return the slicer Image Base64 src string.
+                     * @example
+                     * ```
+                     * let slicerImageSrc = await sheet.slicers.all()[0].toImageSrcAsync();
+                     * ```
+                     */
+                    toImageSrcAsync(): Promise<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.
@@ -48560,6 +50858,15 @@ declare module GC{
                      * ```
                      */
                     toImageSrc(): string;
+                    /**
+                     * Get the slicer Image src of type Base64 string.
+                     * @returns {Promise<string>} return the slicer Image Base64 src string.
+                     * @example
+                     * ```
+                     * let slicerImageSrc = await sheet.slicers.all()[0].toImageSrcAsync();
+                     * ```
+                     */
+                    toImageSrcAsync(): Promise<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.
@@ -49949,12 +52256,12 @@ declare module GC{
                      */
                     font(value?: string): any;
                     /**
-                     * 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.
+                     * 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 size.
+                     * //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();
@@ -49974,23 +52281,24 @@ declare module GC{
                      * table.setColumnName(4, dataColumns[4]);
                      * //style
                      * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
-                     * hstyle.fontSize("18pt");
+                     * hstyle.fontFamily("Arial Black");
                      * 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.
+                     *  //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.
+                     */
+                    fontFamily(value?: string): any;
+                    /**
+                     * 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 a font family.
+                     * //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();
@@ -50010,12 +52318,12 @@ declare module GC{
                      * table.setColumnName(4, dataColumns[4]);
                      * //style
                      * var hstyle = new GC.Spread.Sheets.Slicers.SlicerStyleInfo();
-                     * hstyle.fontFamily("Arial Black");
+                     * 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.
+                     * //change the slicer properties.
                      * slicer.position(new GC.Spread.Sheets.Point(100, 200));
                      * slicer.style(style1);
                      * ```
@@ -52987,7 +55295,7 @@ declare module GC{
                      * Gets or sets the dataSource and binding columns and path for the table.
                      * @param {GC.Spread.Sheets.Tables.TableColumn[]} columns The array of table column information with data fields and names. Each item is GC.Spread.Sheets.Tables.TableColumn.
                      * @param {string} [path] The binding path for binding in the table.
-                     * @param {object} [dataSource] The data source for the table.
+                     * @param {object | string | GC.Data.Table} [dataSource] The data source for the table.
                      * @returns {GC.Spread.Sheets.Tables.Table} returns the table.
                      * @example
                      * ```
@@ -53013,7 +55321,7 @@ declare module GC{
                      * table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);
                      * ```
                      */
-                    bind(columns: TableColumn[],  path?: string,  dataSource?: object): GC.Spread.Sheets.Tables.Table;
+                    bind(columns: TableColumn[],  path?: string,  dataSource?: object | string | GC.Data.Table): GC.Spread.Sheets.Tables.Table;
                     /**
                      * Binds the columns using the specified data fields.
                      * @param {GC.Spread.Sheets.Tables.TableColumn[]} columns The array of table column information with data fields and names. Each item is GC.Spread.Sheets.Tables.TableColumn.
@@ -53724,7 +56032,7 @@ declare module GC{
                      * @param {string} name The table name.
                      * @param {number} row The row index.
                      * @param {number} column The column index.
-                     * @param {object} dataSource The data source for the table.
+                     * @param {object | string | GC.Data.Table} dataSource The data source for the table.
                      * @param {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.
@@ -53739,7 +56047,7 @@ declare module GC{
                      *  activeSheet.tables.addFromDataSource("Table1", 5, 2, source, GC.Spread.Sheets.Tables.TableThemes.dark1);
                      * ```
                      */
-                    addFromDataSource(name: string,  row: number,  column: number,  dataSource: Object,  style: GC.Spread.Sheets.Tables.TableTheme,  options?: GC.Spread.Sheets.Tables.ITableOptions): GC.Spread.Sheets.Tables.Table;
+                    addFromDataSource(name: string,  row: number,  column: number,  dataSource: Object | string | GC.Data.Table,  style: GC.Spread.Sheets.Tables.TableTheme,  options?: GC.Spread.Sheets.Tables.ITableOptions): GC.Spread.Sheets.Tables.Table;
                     /**
                      * Gets all tables of the sheet.
                      * @returns {GC.Spread.Sheets.Tables.Table[]} The GC.Spread.Sheets.Tables.Table array of table instances. The array is never null.