Overview

The options in the data source schema are as follows:

interface GC.Data.IDataSourceOption {
    //others options...
    schema?: {
        hierarchy: { // define whether the data source is hierarchical
          type: 'Parent' | 'ChildrenPath' | 'Level' | 'Custom', // the hierarchy type
          column: string // the hierarachy key that will help to build the hierarchical data
          levelOffset?: number; // level offset that can increase/decrease the level, in the usually, the hierarchical level starts with 0
          outlineColumn?: string | GC.Data.IHierarchyOutlineColumnOptions; // the options for self-defined outline
          parse: (options: GC.Data.IHierarchyCustomParseOptions) => any; // parse the primary key of the custom hierarchy type to the parent key
          unparse?: (options: GC.Data.IHierarchyCustomUnparseOptions) => any; // build the primary key of the custom hierarchy type
        }
        //others options...
    }
}

interface GC.Data.IHierarchyCustomParseOptions {
  data: any, 
  index: number, 
}
interface GC.Data.IHierarchyCustomUnparseOptions {
  data: any, 
  index: number, 
  parentData: any
}
interface GC.Data.IOutlineColumnOptions {
    showCheckBox?: boolean;
    showImage?: boolean;
    images?: string[];
    showIndicator?: boolean;
    expandIndicator?: string;
    collapseIndicator?: string;
}
interface GC.Data.IHierarchyOutlineColumnOptions {
    value: string;
    showCheckBox?: boolean;
    showImage?: boolean;
    images?: string[];
    showIndicator?: boolean;
    expandIndicator?: string;
    collapseIndicator?: string;
}
interface GC.Data.IColumn {
  //other options...
  dataType?: "string" | "number" | "boolean" | "object" | "array" | "date" | "rowOrder" | "formula"; // the rowOrder in the dataType is used for the ordering the records, the value of the column should be a number
  outlineColumn?: boolean | GC.Data.IOutlineColumnOptions // indicates the column be an outline column or the outline column options, and there should be only one outline column in the columns
}

There are 4 types of data in the hierarchy: Parent, Level, ChildrenPath, Custom. Each of them can be configured when adding a Table to data manager:

Configure the parent hierarchy type:

var taskTable = dataManager.addTable("Tasks", {
    remote: { ... },
    schema: {
        hierarchy: {
          type: 'Parent',
          column: 'TaskParentId',
        },
        columns: {
          TaskName: { dataName: 'name' },
          TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id
          TaskParentId: { dataName: 'parentId' },
          TaskRowOrder: { dataName: 'rowOrder', dataType: "rowOrder" }, // the property for adding and moving up/down, it's better to be specified
        }
    }
});
var taskView = taskTable.addView('TaskView',[
  {
    value: 'TaskName',
    // this option indicates the column showing as outline column
    // and the outline column could be customized
    outlineColumn: {
      showImage: true,
      images: [ '$DEMOROOT$/spread/source/images/task-1.png', '$DEMOROOT$/spread/source/images/task-2.png', '$DEMOROOT$/spread/source/images/task-3.png' ],
      expandIndicator: '$DEMOROOT$/spread/source/images/increaseIndicator.png',
      collapseIndicator: '$DEMOROOT$/spread/source/images/decreaseIndicator.png',
    }
  }
]);

Configure the level hierarchy type:

var taskTable = dataManager.addTable("Tasks", {
    remote: { ... },
    schema: {
        hierarchy: {
          type: 'Level',
          column: 'TaskLevel',
          outlineColumn: {
            value: 'TaskName',
            showImage: true,
            images: [ '$DEMOROOT$/spread/source/images/task-1.png', '$DEMOROOT$/spread/source/images/task-2.png', '$DEMOROOT$/spread/source/images/task-3.png' ],
            expandIndicator: '$DEMOROOT$/spread/source/images/increaseIndicator.png',
            collapseIndicator: '$DEMOROOT$/spread/source/images/decreaseIndicator.png',
          }
        },
        columns: {
          TaskName: {dataName: 'name' },
          TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id if exists
          TaskLevel: { dataName: 'level' },
        }
    }
});

Configure the children path hierarchy type:

var taskTable = dataManager.addTable("Tasks", {
    remote: { ... },
    schema: {
        hierarchy: {
          type: 'ChildrenPath',
          column: 'TaskChildren',
          outlineColumn: 'TaskName'
        },
        columns: {
          TaskName: {dataName: 'name' },
          TaskChildren: { dataName: 'children' },
          // other columns in the child
        }
    }
});

Configure the custom hierarchy type:

var taskTable = dataManager.addTable("Tasks", {
    remote: { ... },
    schema: {
        hierarchy: {
          type: 'Custom',
          column: 'TaskId',
          outlineColumn: 'TaskName',
          parse: function(options){
            // parse the primary key "1.1.1" to "1.1"
            // the returned value will be treated as parentId
            let seg = options.data.TaskId.split('.');
            return seg.slice(0,seg.length-1).join('.');
          },
          unparse: function(options){
            let parentIds, currentIndex=options.index, parentData = options.parentData, parentKey = parentData && parentData.TaskId;
            if (parentKey) {
              let sp = parentKey.split('.');
              parentIds = sp;
            } else {
              parentIds = [];
            }
            parentIds.push(currentIndex + 1);
            return parentIds.join('.');
          }
        },
        columns: {
          TaskName: {dataName: 'name' },
          TaskId: { dataName: 'id', isPrimaryKey: true }, // using primary key to indicate the hierarchy id if exists
        }
    }
});

There are some operations to update the hierarchy records in the TableSheet:

1. Promote a record:

/**
 * Promote the hierarchy data level of the specified row.
 * @param {number} row - The row index.
 * @returns {void}
 */
function promoteHierarchyLevel(row: number): void

2. Demote a record:

/**
 * Demote the hierarchy data level of the specified row.
 * @param {number} row - The row index.
 * @param {boolean} withChildren - Optional, the children will be demoted with the record by default.
 * @returns {void}
 */
function  demoteHierarchyLevel(row: number, withChildren?: boolean): void

3. Move up:

/**
  * Move the hierarchy data by the specified row up.
  * @param {number} row - The row index.
  * @returns {void}
 */
function moveUp(row: number): void

4. Move down:

/**
  * Move the hierarchy data by the specified row down.
  * @param {number} row - The row index.
  * @returns {void}
 */
function moveDown(row: number): void

5. Add a new row data before the specified row:

/**
  * Add a new row data before the specified row.
  * @param {number} row - The row index.
  * @param {Object} rowData - The row data.
  * @returns {void}
 */
function addHierarchyItemBefore(row: number, rowData: any): void

6. Add a new row data after the specified row:

/**
  * Add a new row data after the specified row.
  * @param {number} row - The row index.
  * @param {Object} rowData - The row data.
  * @returns {void}
 */
function addHierarchyItemAfter(row: number, rowData: any): void

7. Add a new row data as the parent of the specified row:

/**
  * Add a new row data as the parent of the specified row.
  * @param {number} row - The row index.
  * @param {Object} rowData - The row data.
  * @returns {void}
 */
function addHierarchyItemAbove(row: number, rowData: any): void

8. Add a new row data as the child of the specified row:

/**
  * Add a new row data as the child of the specified row.
  * @param {number} row - The row index.
  * @param {Object} rowData - The row data.
  * @returns {void}
 */
function addHierarchyItemBelow(row: number, rowData: any): void

9. Expand the all hierarchy levels:

/**
  * Expand the all hierarchy levels.
  * @returns {void}
 */
function expandAllHierarchyLevels(): void

10. Collapse the all hierarchy levels:

/**
  * Collapse the all hierarchy levels.
  * @returns {void}
 */
function collapseAllHierarchyLevels(): void

11. Expand the hierarchy data by specified level:

/**
  * Expand the hierarchy data by specified level.
  * @param {number} level - The level to expand.
  * @returns {void}
 */
function expandHierarchyLevel(level: number): void

There are some options to toggle the visibility of the menu items for the hierarchical records in the TableSheet options:

interface GC.Spread.Sheets.TableSheet.ITableSheetOptions {
  // other properties...
  menuItemVisibility?: {
        promoteMenuItemVisible?: boolean;
        demoteMenuItemVisible?: boolean;
        moveUpMenuItemVisible?: boolean;
        moveDownMenuItemVisible?: boolean;
        addBeforeMenuItemVisible?: boolean;
        addAfterMenuItemVisible?: boolean;
        addAboveMenuItemVisible?: boolean;
        addBelowMenuItemVisible?: boolean;
        expandAllLevelMenuItemVisible?: boolean;
        collapseAllLevelMenuItemVisible?: boolean;
        expandToLevelMenuItemVisible?: boolean;
    };
}

To show the hierarchy menu items in the TableSheet:

    tableSheet.options.menuItemVisibility = {
        // the options below be on the row header
        promoteMenuItemVisible: true,
        demoteMenuItemVisible: true,
        // the options below be on the column header
        expandAllLevelMenuItemVisible: true,
        collapseAllLevelMenuItemVisible: true,
        expandToLevelMenuItemVisible: true,
        // the options below be on the row header
        // and the menu items be enable for the dataType of the column be rowOrder
        moveUpMenuItemVisible: true,
        moveDownMenuItemVisible: true,
        addBeforeMenuItemVisible: true,
        addAfterMenuItemVisible: true,
        addAboveMenuItemVisible: true,
        addBelowMenuItemVisible: true,
    }