@wcardinal/wcardinal-ui 0.411.0 → 0.413.0

package/dist/wcardinal-ui.cjs.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.411.0
+ Winter Cardinal UI v0.413.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -15181,10 +15181,10 @@ var DBase = /** @class */ (function (_super) {
         this.emit("down", e, this);
     };
     DBase.prototype.onDownThis = function (e) {
+        var _a;
         var oe = e.data.originalEvent;
         if ("touches" in oe) {
-            var lastDownPoint = this._lastDownPoint || new pixi_js.Point();
-            this._lastDownPoint = lastDownPoint;
+            var lastDownPoint = ((_a = this._lastDownPoint) !== null && _a !== void 0 ? _a : (this._lastDownPoint = new pixi_js.Point()));
             lastDownPoint.copyFrom(e.data.global);
         }
         else {
@@ -54085,7 +54085,15 @@ var DTableState = {
     /**
      * Selectable row
      */
-    SELECTABLE: "SELECTABLE"
+    SELECTABLE: "SELECTABLE",
+    /**
+     * Header or category cells hovered on their edges.
+     */
+    HOVERED_ON_EDGE: "HOVERED_ON_EDGE",
+    /**
+     * Header or category of being resized.
+     */
+    RESIZING: "RESIZING"
 };
 
 /*
@@ -58262,6 +58270,12 @@ var DThemeWhiteTableHeader = /** @class */ (function (_super) {
     DThemeWhiteTableHeader.prototype.getHeight = function () {
         return 30;
     };
+    DThemeWhiteTableHeader.prototype.getCursor = function (state) {
+        if (state.is(DTableState.RESIZING)) {
+            return "col-resize";
+        }
+        return _super.prototype.getCursor.call(this, state);
+    };
     return DThemeWhiteTableHeader;
 }(DThemeWhiteTableRow));
 
@@ -58304,7 +58318,7 @@ var DThemeWhiteTableHeaderCell = /** @class */ (function (_super) {
         return _this;
     }
     DThemeWhiteTableHeaderCell.prototype.getBackgroundColor = function (state) {
-        if (state.inDisabled) {
+        if (state.inDisabled || state.on(DTableState.RESIZING)) {
             return state.is(DTableState.FROZEN) ? this.BACKGROUND_COLOR_FROZEN : null;
         }
         else if (state.isPressed) {
@@ -58405,11 +58419,17 @@ var DThemeWhiteTableHeaderCell = /** @class */ (function (_super) {
         if (!state.isActionable) {
             return "";
         }
+        if (state.is(DTableState.HOVERED_ON_EDGE) || state.on(DTableState.RESIZING)) {
+            return "col-resize";
+        }
         if (state.is(DTableState.CHECKABLE) || state.is(DTableState.SORTABLE)) {
             return "pointer";
         }
         return "";
     };
+    DThemeWhiteTableHeaderCell.prototype.getEdgeWidth = function () {
+        return 10;
+    };
     return DThemeWhiteTableHeaderCell;
 }(DThemeWhiteImage));
 
@@ -68777,6 +68797,12 @@ var DThemeDarkTableHeader = /** @class */ (function (_super) {
     DThemeDarkTableHeader.prototype.getHeight = function () {
         return 30;
     };
+    DThemeDarkTableHeader.prototype.getCursor = function (state) {
+        if (state.is(DTableState.RESIZING)) {
+            return "col-resize";
+        }
+        return _super.prototype.getCursor.call(this, state);
+    };
     return DThemeDarkTableHeader;
 }(DThemeDarkTableRow));
 
@@ -68819,7 +68845,7 @@ var DThemeDarkTableHeaderCell = /** @class */ (function (_super) {
         return _this;
     }
     DThemeDarkTableHeaderCell.prototype.getBackgroundColor = function (state) {
-        if (state.inDisabled) {
+        if (state.inDisabled || state.on(DTableState.RESIZING)) {
             return state.is(DTableState.FROZEN) ? this.BACKGROUND_COLOR_FROZEN : null;
         }
         else if (state.isPressed) {
@@ -68920,11 +68946,17 @@ var DThemeDarkTableHeaderCell = /** @class */ (function (_super) {
         if (!state.isActionable) {
             return "";
         }
+        if (state.is(DTableState.HOVERED_ON_EDGE) || state.on(DTableState.RESIZING)) {
+            return "col-resize";
+        }
         if (state.is(DTableState.CHECKABLE) || state.is(DTableState.SORTABLE)) {
             return "pointer";
         }
         return "";
     };
+    DThemeDarkTableHeaderCell.prototype.getEdgeWidth = function () {
+        return 10;
+    };
     return DThemeDarkTableHeaderCell;
 }(DThemeDarkImage));
 
@@ -88113,15 +88145,17 @@ var DExpandable = /** @class */ (function (_super) {
     return DExpandable;
 }(DLayoutVertical));
 
-var STATE_INITIAL = 0;
-var STATE_STARTED = 1;
-var STATE_RESOLVED = 2;
-var STATE_REJECTED = 3;
+var DIndicatorProcessingState = {
+    INITIAL: 0,
+    STARTED: 1,
+    RESOLVED: 2,
+    REJECTED: 3
+};
 var DIndicatorProcessing = /** @class */ (function () {
     function DIndicatorProcessing(parent, options) {
         var _a, _b, _c, _d, _e, _f, _g;
         this._parent = parent;
-        this._state = STATE_INITIAL;
+        this._state = DIndicatorProcessingState.INITIAL;
         this._startTime = 0;
         // Delay
         var theme = this.theme;
@@ -88144,12 +88178,13 @@ var DIndicatorProcessing = /** @class */ (function () {
     }
     DIndicatorProcessing.prototype.start = function () {
         var state = this._state;
-        if (state === STATE_INITIAL) {
-            this._state = STATE_STARTED;
+        if (state === DIndicatorProcessingState.INITIAL) {
+            this._state = DIndicatorProcessingState.STARTED;
             this.onBegin();
         }
-        else if (state === STATE_RESOLVED || state === STATE_REJECTED) {
-            this._state = STATE_STARTED;
+        else if (state === DIndicatorProcessingState.RESOLVED ||
+            state === DIndicatorProcessingState.REJECTED) {
+            this._state = DIndicatorProcessingState.STARTED;
             this.onEnd();
             this.onBegin();
         }
@@ -88200,8 +88235,10 @@ var DIndicatorProcessing = /** @class */ (function () {
     };
     DIndicatorProcessing.prototype.end = function () {
         var state = this._state;
-        if (state === STATE_STARTED || state === STATE_RESOLVED || state === STATE_REJECTED) {
-            this._state = STATE_INITIAL;
+        if (state === DIndicatorProcessingState.STARTED ||
+            state === DIndicatorProcessingState.RESOLVED ||
+            state === DIndicatorProcessingState.REJECTED) {
+            this._state = DIndicatorProcessingState.INITIAL;
             this.onEnd();
         }
         return this;
@@ -88237,8 +88274,8 @@ var DIndicatorProcessing = /** @class */ (function () {
     };
     DIndicatorProcessing.prototype.resolve = function (message) {
         var _this = this;
-        if (this._state === STATE_STARTED) {
-            this._state = STATE_RESOLVED;
+        if (this._state === DIndicatorProcessingState.STARTED) {
+            this._state = DIndicatorProcessingState.RESOLVED;
             var elapsedTime = Date.now() - this._startTime;
             var delay = this._delayDone - elapsedTime;
             if (0 < delay) {
@@ -88270,8 +88307,8 @@ var DIndicatorProcessing = /** @class */ (function () {
     };
     DIndicatorProcessing.prototype.reject = function (message) {
         var _this = this;
-        if (this._state === STATE_STARTED) {
-            this._state = STATE_REJECTED;
+        if (this._state === DIndicatorProcessingState.STARTED) {
+            this._state = DIndicatorProcessingState.REJECTED;
             var elapsedTime = Date.now() - this._startTime;
             var delay = this._delayDone - elapsedTime;
             if (0 < delay) {
@@ -89889,7 +89926,7 @@ var DPagination = /** @class */ (function (_super) {
     };
     /**
      * Goes to the last page.
-     * Unlike {@link #value}, this method emits the change event if silently is not true.
+     * Unlike {@link value}, this method emits the change event if silently is not true.
      *
      * @param silently true to suppress the change event
      * @returns true if succeeded.
@@ -89899,7 +89936,7 @@ var DPagination = /** @class */ (function (_super) {
     };
     /**
      * Goes to the given page.
-     * Unlike {@link #value}, this method emits the change event if silently is not true.
+     * Unlike {@link value}, this method emits the change event if silently is not true.
      *
      * @param index a page index
      * @param silently true to suppress the change event
@@ -89948,7 +89985,7 @@ var DPagination = /** @class */ (function (_super) {
     };
     /**
      * Goes to the next page.
-     * Unlike {@link #value}, this method emits the change event if silently is not true.
+     * Unlike {@link value}, this method emits the change event if silently is not true.
      *
      * @param silently true to suppress the change event
      * @returns true if succeeded.
@@ -89986,7 +90023,7 @@ var DPagination = /** @class */ (function (_super) {
     };
     /**
      * Goes to the previous page.
-     * Unlike {@link #value}, this method emits the change event if silently is not true.
+     * Unlike {@link value}, this method emits the change event if silently is not true.
      *
      * @param silently true to suppress the change event
      * @returns true if succeeded.
@@ -90024,7 +90061,7 @@ var DPagination = /** @class */ (function (_super) {
     };
     /**
      * Goes to the top page.
-     * Unlike {@link #value}, this method emits the change event if silently is not true.
+     * Unlike {@link value}, this method emits the change event if silently is not true.
      *
      * @param silently true to suppress the change event
      * @returns true if succeeded.
@@ -93193,15 +93230,17 @@ var DTableDataSelectionType = {
  */
 var DTableRow = /** @class */ (function (_super) {
     __extends(DTableRow, _super);
-    function DTableRow(options) {
-        var _a, _b;
+    function DTableRow(columns, frozen, options) {
         var _this = _super.call(this, options) || this;
         _this._reverse = true;
-        _this._frozen = (_a = options.frozen) !== null && _a !== void 0 ? _a : 0;
-        _this._columns = (_b = options.columns) !== null && _b !== void 0 ? _b : [];
+        _this._frozen = frozen;
+        _this._columns = columns;
         return _this;
     }
-    DTableRow.prototype.initCells = function (options, columns, frozen) {
+    DTableRow.prototype.initCells = function () {
+        var columns = this._columns;
+        var frozen = this._frozen;
+        var options = this._options;
         var iend = this.toIndexEnd(columns);
         for (var i = columns.length - 1; 0 <= i; --i) {
             var cell = this.newCell(i, columns[i], columns, options);
@@ -93293,8 +93332,8 @@ var DTableRow = /** @class */ (function (_super) {
  */
 var DTableBodyRow = /** @class */ (function (_super) {
     __extends(DTableBodyRow, _super);
-    function DTableBodyRow(onChange, isEven, columnIndexToCellOptions, options) {
-        var _this = _super.call(this, options) || this;
+    function DTableBodyRow(onChange, isEven, columnIndexToCellOptions, columns, frozen, options) {
+        var _this = _super.call(this, columns, frozen, options) || this;
         _this._index = -1;
         _this._onChange = onChange;
         _this._onCellChangeBound = function (newValue, oldValue, row, rowIndex, columnIndex, column) {
@@ -93302,7 +93341,7 @@ var DTableBodyRow = /** @class */ (function (_super) {
         };
         _this._columnIndexToCellOptions = columnIndexToCellOptions;
         _this.state.isAlternated = !isEven;
-        _this.initCells(options, _this._columns, _this._frozen);
+        _this.initCells();
         return _this;
     }
     DTableBodyRow.prototype.onCellChange = function (newValue, oldValue, row, rowIndex, columnIndex, column) {
@@ -93446,7 +93485,7 @@ var DTableBodyRow = /** @class */ (function (_super) {
     DTableBodyRow.prototype.toCellOptions = function (columnIndex, column, options) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         var _p;
-        var result = toMerged(column.body, options.cell);
+        var result = toMerged(column.body, options === null || options === void 0 ? void 0 : options.cell);
         // Weight
         result.weight = column.weight;
         // Width
@@ -94515,18 +94554,11 @@ var DTableDataList = /** @class */ (function (_super) {
  * SPDX-License-Identifier: Apache-2.0
  */
 var toRowOptions = function (theme, options, selectionType) {
-    var columns = options.columns || [];
     var result = options.row;
     if (result != null) {
         if (result.height == null) {
             result.height = theme.getRowHeight();
         }
-        if (result.columns === undefined) {
-            result.columns = columns;
-        }
-        if (result.frozen == null) {
-            result.frozen = options.frozen;
-        }
         if (result.selection === undefined) {
             result.selection = {
                 type: selectionType
@@ -94538,9 +94570,7 @@ var toRowOptions = function (theme, options, selectionType) {
     }
     else {
         result = {
-            columns: columns,
             height: theme.getRowHeight(),
-            frozen: options.frozen,
             selection: {
                 type: selectionType
             }
@@ -94550,18 +94580,18 @@ var toRowOptions = function (theme, options, selectionType) {
 };
 var DTableBody = /** @class */ (function (_super) {
     __extends(DTableBody, _super);
-    function DTableBody(options) {
-        var _a;
+    function DTableBody(columns, frozen, offset, options) {
         var _this = _super.call(this, options) || this;
-        _this.transform.position.y = (_a = options.offset) !== null && _a !== void 0 ? _a : 0;
+        _this.transform.position.y = offset;
         var data = _this.toData(options.data);
         _this._data = data;
         data.bind(_this);
         var theme = _this.theme;
+        _this._columns = columns;
+        _this._frozen = frozen;
         var rowOptions = toRowOptions(theme, options, data.selection.type);
         _this._rowOptions = rowOptions;
         _this._rowHeight = rowOptions.height != null ? rowOptions.height : theme.getRowHeight();
-        _this._columns = rowOptions.columns || [];
         _this._rowIndexMappedStart = 0;
         _this._rowIndexMappedEnd = 0;
         _this._updateRowsCount = 0;
@@ -94772,14 +94802,14 @@ var DTableBody = /** @class */ (function (_super) {
         return row;
     };
     DTableBody.prototype.newRow = function (isEven) {
-        return new DTableBodyRow(this._onRowChangeBound, isEven, this._columnIndexToCellOptions, this._rowOptions);
+        return new DTableBodyRow(this._onRowChangeBound, isEven, this._columnIndexToCellOptions, this._columns, this._frozen, this._rowOptions);
     };
     DTableBody.prototype.onParentMove = function (newX, newY, oldX, oldY) {
         _super.prototype.onParentMove.call(this, newX, newY, oldX, oldY);
         this.updateFrozenCellPosition(newX);
     };
     DTableBody.prototype.updateFrozenCellPosition = function (x) {
-        var frozen = this._rowOptions.frozen;
+        var frozen = this._frozen;
         if (frozen != null && 0 < frozen) {
             var rows = this.children;
             for (var i = 0, imax = rows.length; i < imax; ++i) {
@@ -94994,32 +95024,526 @@ var DTableBody = /** @class */ (function (_super) {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
+var DTableCategoryCellEdge = {
+    NONE: 0,
+    LEFT: 1,
+    RIGHT: 2,
+    BOTH: 3
+};
 var DTableCategoryCell = /** @class */ (function (_super) {
     __extends(DTableCategoryCell, _super);
-    function DTableCategoryCell() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function DTableCategoryCell(category, columnIndex, column, options) {
+        var _this = _super.call(this, options) || this;
+        _this._category = category;
+        _this._columnIndex = columnIndex;
+        _this._column = column;
+        _this._edgeSize = _this.theme.getEdgeWidth();
+        _this._wasResizing = false;
+        return _this;
     }
+    Object.defineProperty(DTableCategoryCell.prototype, "column", {
+        get: function () {
+            return this._column;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTableCategoryCell.prototype, "columnIndex", {
+        get: function () {
+            return this._columnIndex;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTableCategoryCell.prototype, "category", {
+        get: function () {
+            return this._category;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTableCategoryCell.prototype.onDown = function (e) {
+        var edges = this.state.valueOf(DTableState.HOVERED_ON_EDGE);
+        if (edges != null) {
+            this._wasResizing = true;
+            var layer = DApplications.getLayer(this);
+            if (layer != null) {
+                var interactionManager = layer.renderer.plugins.interaction;
+                var columnIndex = this._columnIndex;
+                if (edges === DTableCategoryCellEdge.LEFT) {
+                    this.onDownEdge(e.data.global.x, columnIndex - 1, interactionManager);
+                }
+                else {
+                    this.onDownEdge(e.data.global.x, columnIndex, interactionManager);
+                }
+            }
+        }
+        else {
+            this._wasResizing = false;
+            _super.prototype.onDown.call(this, e);
+        }
+    };
+    DTableCategoryCell.prototype.findLeftResizableCell = function (columnIndex) {
+        var children = this._category.children;
+        var childrenLength = children.length;
+        for (var i = columnIndex; 0 <= i; --i) {
+            var child = children[childrenLength - i - 1];
+            if (child.column.resizable) {
+                return child;
+            }
+        }
+        return null;
+    };
+    DTableCategoryCell.prototype.findRightResizableCellOfWeight = function (columnIndex) {
+        var children = this._category.children;
+        var childrenLength = children.length;
+        for (var i = columnIndex + 1; i < childrenLength; ++i) {
+            var child = children[childrenLength - i - 1];
+            var childColumn = child.column;
+            if (childColumn.resizable) {
+                var childColumnWeight = childColumn.weight;
+                if (childColumnWeight != null) {
+                    return child;
+                }
+            }
+        }
+        return null;
+    };
+    DTableCategoryCell.prototype.checkIfEdgeResizable = function (columnIndex) {
+        var target = this.findLeftResizableCell(columnIndex);
+        if (target != null) {
+            if (target.column.weight != null) {
+                return this.findRightResizableCellOfWeight(target.columnIndex) != null;
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    };
+    DTableCategoryCell.prototype.getResizableEdges = function () {
+        var result = this._resizableEdges;
+        if (result == null) {
+            var columnIndex = this._columnIndex;
+            if (this.checkIfEdgeResizable(columnIndex - 1)) {
+                if (this.checkIfEdgeResizable(columnIndex)) {
+                    result = DTableCategoryCellEdge.BOTH;
+                }
+                else {
+                    result = DTableCategoryCellEdge.LEFT;
+                }
+            }
+            else {
+                if (this.checkIfEdgeResizable(columnIndex)) {
+                    result = DTableCategoryCellEdge.RIGHT;
+                }
+                else {
+                    result = DTableCategoryCellEdge.NONE;
+                }
+            }
+            this._resizableEdges = result;
+        }
+        return result;
+    };
+    DTableCategoryCell.prototype.onOver = function (e) {
+        var _this = this;
+        var _a;
+        _super.prototype.onOver.call(this, e);
+        if (this.getResizableEdges() !== DTableCategoryCellEdge.NONE) {
+            var onHoveredBound = ((_a = this._onHoveredBound) !== null && _a !== void 0 ? _a : (this._onHoveredBound = function (event) {
+                _this.onHovered(event);
+            }));
+            this.on(UtilPointerEvent.move, onHoveredBound);
+            // Since the cursor is set by InteractionManager before this method is called,
+            // the cursor need to be overriden.
+            this.onHovered(e);
+            var layer = DApplications.getLayer(this);
+            if (layer != null) {
+                layer.renderer.plugins.interaction.cursor = this.cursor;
+            }
+        }
+    };
+    DTableCategoryCell.prototype.onOut = function (e) {
+        _super.prototype.onOut.call(this, e);
+        var onHoveredBound = this._onHoveredBound;
+        if (onHoveredBound != null) {
+            this.state.remove(DTableState.HOVERED_ON_EDGE);
+            this.off(UtilPointerEvent.move, onHoveredBound);
+        }
+    };
+    DTableCategoryCell.prototype.onHovered = function (e) {
+        var width = this.width;
+        var x = this.toClickPosition(e);
+        var edgeSize = this._edgeSize;
+        if (0 <= x && x <= edgeSize) {
+            if (this.getResizableEdges() & DTableCategoryCellEdge.LEFT) {
+                this.state.add(DTableState.HOVERED_ON_EDGE, DTableCategoryCellEdge.LEFT);
+            }
+            else {
+                this.state.remove(DTableState.HOVERED_ON_EDGE);
+            }
+        }
+        else if (width - edgeSize <= x && x <= width) {
+            if (this.getResizableEdges() & DTableCategoryCellEdge.RIGHT) {
+                this.state.add(DTableState.HOVERED_ON_EDGE, DTableCategoryCellEdge.RIGHT);
+            }
+            else {
+                this.state.remove(DTableState.HOVERED_ON_EDGE);
+            }
+        }
+        else {
+            this.state.remove(DTableState.HOVERED_ON_EDGE);
+        }
+    };
+    DTableCategoryCell.prototype.toClickPosition = function (e) {
+        var _a;
+        var checkWork = ((_a = this._checkWork) !== null && _a !== void 0 ? _a : (this._checkWork = new pixi_js.Point()));
+        return e.data.getLocalPosition(this, checkWork).x;
+    };
+    DTableCategoryCell.prototype.onDownEdge = function (onDownPoint, columnIndex, interactionManager) {
+        // Find the resizable cell
+        var left = this.findLeftResizableCell(columnIndex);
+        if (left == null) {
+            // No resizable cell
+            return;
+        }
+        var category = this._category;
+        var leftColumn = left.column;
+        var leftOldWidth = left.width;
+        var leftOldWeight = left.weight;
+        if (leftColumn.weight == null) {
+            category.state.add(DTableState.RESIZING);
+            var leftMinWidth_1 = leftColumn.minWidth;
+            var onMove_1 = function (e) {
+                leftColumn.width = Math.max(leftMinWidth_1, leftOldWidth + e.data.global.x - onDownPoint);
+            };
+            var onUp_1 = function (e) {
+                category.state.remove(DTableState.RESIZING);
+                interactionManager.off(UtilPointerEvent.move, onMove_1);
+                interactionManager.off(UtilPointerEvent.up, onUp_1);
+                interactionManager.off(UtilPointerEvent.upoutside, onUp_1);
+                interactionManager.off(UtilPointerEvent.cancel, onUp_1);
+            };
+            interactionManager.on(UtilPointerEvent.move, onMove_1);
+            interactionManager.on(UtilPointerEvent.up, onUp_1);
+            interactionManager.on(UtilPointerEvent.upoutside, onUp_1);
+            interactionManager.on(UtilPointerEvent.cancel, onUp_1);
+        }
+        else {
+            var right = this.findRightResizableCellOfWeight(left.columnIndex);
+            if (right == null) {
+                // No right resizable cell found
+                return;
+            }
+            var rightColumn_1 = right.column;
+            var rightOldWeight = right.weight;
+            var rightOldWidth = right.width;
+            var totalWidth_1 = leftOldWidth + rightOldWidth;
+            var totalWeight_1 = leftOldWeight + rightOldWeight;
+            var leftMinWeight_1 = leftColumn.minWeight;
+            var rightMinWeight = rightColumn_1.minWeight;
+            var leftMaxWeight_1 = totalWeight_1 - rightMinWeight;
+            if (totalWidth_1 <= 0 || leftMaxWeight_1 <= leftMinWeight_1) {
+                // The left and right resizable cells doesn't non-zero width
+                return;
+            }
+            category.state.add(DTableState.RESIZING);
+            var onMove_2 = function (e) {
+                var leftNewWidth = Math.max(0, Math.min(totalWidth_1, leftOldWidth + e.data.global.x - onDownPoint));
+                var leftNewWeight = Math.max(leftMinWeight_1, Math.min(leftMaxWeight_1, totalWeight_1 * (leftNewWidth / totalWidth_1)));
+                leftColumn.weight = leftNewWeight;
+                rightColumn_1.weight = totalWeight_1 - leftNewWeight;
+            };
+            var onUp_2 = function (e) {
+                category.state.remove(DTableState.RESIZING);
+                interactionManager.off(UtilPointerEvent.move, onMove_2);
+                interactionManager.off(UtilPointerEvent.up, onUp_2);
+                interactionManager.off(UtilPointerEvent.upoutside, onUp_2);
+                interactionManager.off(UtilPointerEvent.cancel, onUp_2);
+            };
+            interactionManager.on(UtilPointerEvent.move, onMove_2);
+            interactionManager.on(UtilPointerEvent.up, onUp_2);
+            interactionManager.on(UtilPointerEvent.upoutside, onUp_2);
+            interactionManager.on(UtilPointerEvent.cancel, onUp_2);
+        }
+    };
     DTableCategoryCell.prototype.getType = function () {
         return "DTableCategoryCell";
     };
     return DTableCategoryCell;
 }(DImage));
 
+/*
+ * Copyright (C) 2019 Toshiba Corporation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var DTableCategoryColumnImpl = /** @class */ (function (_super) {
+    __extends(DTableCategoryColumnImpl, _super);
+    function DTableCategoryColumnImpl(index, column) {
+        var _this = _super.call(this) || this;
+        // Label
+        var category = column.category;
+        if (category) {
+            if (isString(category)) {
+                if (index === 0) {
+                    _this.label = category;
+                }
+            }
+            else {
+                if (index < category.length) {
+                    _this.label = category[index];
+                }
+            }
+        }
+        _this._weight = column.weight;
+        _this._width = column.width;
+        _this._isLocked = false;
+        _this.offset = 0.0;
+        _this._columns = [column];
+        _this._nresizable = column.resizable ? 1 : 0;
+        var onResizeBound = function () {
+            _this.onResize();
+        };
+        _this._onResizeBound = onResizeBound;
+        column.on("resize", onResizeBound);
+        return _this;
+    }
+    DTableCategoryColumnImpl.prototype.onResize = function () {
+        if (this._isLocked) {
+            return;
+        }
+        var columns = this._columns;
+        if (this._weight != null) {
+            var newWeight = 0;
+            for (var i = 0, imax = columns.length; i < imax; ++i) {
+                var weight = columns[i].weight;
+                if (weight != null) {
+                    newWeight += weight;
+                }
+            }
+            if (this._weight !== newWeight) {
+                this._weight = newWeight;
+                this.emit("resize", this);
+            }
+        }
+        else {
+            var newWidth = 0;
+            for (var i = 0, imax = columns.length; i < imax; ++i) {
+                var width = columns[i].width;
+                if (width != null) {
+                    newWidth += width;
+                }
+            }
+            if (this._width !== newWidth) {
+                this._width = newWidth;
+                this.emit("resize", this);
+            }
+        }
+    };
+    Object.defineProperty(DTableCategoryColumnImpl.prototype, "resizable", {
+        get: function () {
+            return 0 < this._nresizable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTableCategoryColumnImpl.prototype, "weight", {
+        get: function () {
+            return this._weight;
+        },
+        set: function (weight) {
+            var oldWeight = this._weight;
+            var nresizable = this._nresizable;
+            if (0 < nresizable && oldWeight != null && oldWeight !== weight) {
+                var columns = this._columns;
+                var columnsLength = columns.length;
+                var minWeight = this.minWeight;
+                var newWeight = Math.max(minWeight, weight);
+                if (this._weight !== newWeight) {
+                    this._isLocked = true;
+                    if (minWeight < oldWeight) {
+                        var columnWeightRatio = (newWeight - minWeight) / (oldWeight - minWeight);
+                        for (var i = 0; i < columnsLength; ++i) {
+                            var column = columns[i];
+                            var columnWeight = column.weight;
+                            if (column.resizable && columnWeight != null) {
+                                column.weight = columnWeight * columnWeightRatio;
+                            }
+                        }
+                    }
+                    else {
+                        var newColumnWeight = (newWeight - minWeight) / this._nresizable;
+                        for (var i = 0; i < columnsLength; ++i) {
+                            var column = columns[i];
+                            var columnWeight = column.weight;
+                            if (column.resizable && columnWeight != null) {
+                                column.weight = newColumnWeight;
+                            }
+                        }
+                    }
+                    this._isLocked = false;
+                    this.onResize();
+                }
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTableCategoryColumnImpl.prototype, "minWeight", {
+        get: function () {
+            var result = 0;
+            var columns = this._columns;
+            var columnsLength = columns.length;
+            for (var i = 0; i < columnsLength; ++i) {
+                var column = columns[i];
+                var columnWeight = column.weight;
+                if (!column.resizable && columnWeight != null) {
+                    result += columnWeight;
+                }
+            }
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTableCategoryColumnImpl.prototype, "width", {
+        get: function () {
+            return this._width;
+        },
+        set: function (width) {
+            var oldWidth = this._width;
+            var nresizable = this._nresizable;
+            if (0 < nresizable && oldWidth != null && oldWidth !== width) {
+                var columns = this._columns;
+                var columnsLength = columns.length;
+                var minWidth = this.minWidth;
+                var newWidth = Math.max(minWidth, width);
+                if (oldWidth !== newWidth) {
+                    this._isLocked = true;
+                    if (minWidth < oldWidth) {
+                        var columnWidthRatio = (newWidth - minWidth) / (oldWidth - minWidth);
+                        for (var i = 0; i < columnsLength; ++i) {
+                            var column = columns[i];
+                            var columnWidth = column.width;
+                            if (column.resizable && columnWidth != null) {
+                                column.width = columnWidth * columnWidthRatio;
+                            }
+                        }
+                    }
+                    else {
+                        var newColumnWidth = (newWidth - minWidth) / this._nresizable;
+                        for (var i = 0; i < columnsLength; ++i) {
+                            var column = columns[i];
+                            var columnWidth = column.width;
+                            if (column.resizable && columnWidth != null) {
+                                column.width = newColumnWidth;
+                            }
+                        }
+                    }
+                    this._isLocked = false;
+                    this.onResize();
+                }
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTableCategoryColumnImpl.prototype, "minWidth", {
+        get: function () {
+            var result = 0;
+            var columns = this._columns;
+            var columnsLength = columns.length;
+            for (var i = 0; i < columnsLength; ++i) {
+                var column = columns[i];
+                var columnWidth = column.width;
+                if (!column.resizable && columnWidth != null) {
+                    result += columnWidth;
+                }
+            }
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTableCategoryColumnImpl.prototype.add = function (column) {
+        this._columns.push(column);
+        if (this._weight != null) {
+            var weight = column.weight;
+            if (weight != null) {
+                this._weight += weight;
+                if (column.resizable) {
+                    this._nresizable += 1;
+                }
+                column.on("resize", this._onResizeBound);
+            }
+        }
+        else if (this._width != null) {
+            var width = column.width;
+            if (width != null) {
+                this._width += width;
+                if (column.resizable) {
+                    this._nresizable += 1;
+                }
+                column.on("resize", this._onResizeBound);
+            }
+        }
+    };
+    return DTableCategoryColumnImpl;
+}(pixi_js.utils.EventEmitter));
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
 var DTableCategory = /** @class */ (function (_super) {
     __extends(DTableCategory, _super);
-    function DTableCategory(options) {
-        var _a;
-        var _this = _super.call(this, options) || this;
-        var offset = (_a = options.offset) !== null && _a !== void 0 ? _a : 0;
+    function DTableCategory(columns, frozen, offset, options) {
+        var _this = _super.call(this, columns, frozen, options) || this;
+        _this._columns = columns;
+        _this._frozen = frozen;
         _this._offset = offset;
         _this.transform.position.y = offset;
-        _this.initCells(options, _this._columns, _this._frozen);
+        _this.initCells();
+        for (var i = 0, imax = columns.length; i < imax; ++i) {
+            var column = columns[i];
+            column.on("resize", _this.newOnColumnResize(i, column));
+        }
         return _this;
     }
+    DTableCategory.prototype.newOnColumnResize = function (index, column) {
+        var _this = this;
+        return function () {
+            _this.onColumnResize(index, column);
+        };
+    };
+    DTableCategory.prototype.onColumnResize = function (index, column) {
+        var columnWeight = column.weight;
+        if (columnWeight != null) {
+            this.onColumnResizeWeight(this, index, columnWeight);
+        }
+        else {
+            var columnWidth = column.width;
+            if (columnWidth != null) {
+                this.onColumnResizeWidth(this, index, columnWidth);
+            }
+        }
+    };
+    DTableCategory.prototype.onColumnResizeWeight = function (row, index, columnWeight) {
+        var cells = row.children;
+        var cellsLength = cells.length;
+        var cellsIndex = cellsLength - index - 1;
+        if (0 <= cellsIndex && cellsIndex < cellsLength) {
+            cells[cellsIndex].weight = columnWeight;
+        }
+    };
+    DTableCategory.prototype.onColumnResizeWidth = function (row, index, columnWidth) {
+        var cells = row.children;
+        var cellsLength = cells.length;
+        var cellsIndex = cellsLength - index - 1;
+        if (0 <= cellsIndex && cellsIndex < cellsLength) {
+            cells[cellsIndex].width = columnWidth;
+        }
+    };
     DTableCategory.prototype.onParentMove = function (newX, newY, oldX, oldY) {
         _super.prototype.onParentMove.call(this, newX, newY, oldX, oldY);
         this.transform.position.y = -newY + this._offset;
@@ -95033,16 +95557,20 @@ var DTableCategory = /** @class */ (function (_super) {
         return 0;
     };
     DTableCategory.prototype.newCell = function (columnIndex, column, columns, options) {
-        return new DTableCategoryCell(this.toCellOptions(columnIndex, column, options));
+        return new DTableCategoryCell(this, columnIndex, column, this.toCellOptions(columnIndex, column, options));
     };
     DTableCategory.prototype.toCellOptions = function (columnIndex, column, options) {
-        var result = options.cell;
+        var result = options === null || options === void 0 ? void 0 : options.cell;
         if (result) {
+            // Weight
             result.weight = column.weight;
+            // Width
             result.width = column.width;
+            // Label
             var text = result.text || {};
             result.text = text;
             text.value = text.value || column.label;
+            // Done
             return result;
         }
         else {
@@ -95061,6 +95589,637 @@ var DTableCategory = /** @class */ (function (_super) {
     return DTableCategory;
 }(DTableRow));
 
+var DTableCategoryContainerImpl = /** @class */ (function () {
+    function DTableCategoryContainerImpl(columns, frozen, options) {
+        var count = this.toCount(columns);
+        var items = [];
+        var offset = 0;
+        for (var i = count - 1; 0 <= i; --i) {
+            var item = new DTableCategory(this.toColumns(i, columns, frozen), frozen, offset, options);
+            items.push(item);
+            offset += item.height;
+        }
+        this.items = items;
+    }
+    DTableCategoryContainerImpl.prototype.toCount = function (columns) {
+        var result = 0;
+        for (var i = 0, imax = columns.length; i < imax; ++i) {
+            var category = columns[i].category;
+            if (category != null) {
+                var count = isString(category) ? 1 : category.length;
+                result = Math.max(result, count);
+            }
+        }
+        return result;
+    };
+    DTableCategoryContainerImpl.prototype.isCategory = function (index, a, b) {
+        if (a != null) {
+            if (b != null) {
+                if (isString(a)) {
+                    if (isString(b)) {
+                        if (0 < index) {
+                            return true;
+                        }
+                        else {
+                            return a === b;
+                        }
+                    }
+                    else {
+                        if (0 < index) {
+                            return b.length <= index;
+                        }
+                        else {
+                            return b.length === 1 && a === b[0];
+                        }
+                    }
+                }
+                else {
+                    if (isString(b)) {
+                        if (0 < index) {
+                            return a.length <= index;
+                        }
+                        else {
+                            return a.length === 1 && a[0] === b;
+                        }
+                    }
+                    else {
+                        if (a.length <= index && b.length <= index) {
+                            return true;
+                        }
+                        else if (b.length === a.length) {
+                            for (var i = index, imax = a.length; i < imax; ++i) {
+                                if (a[i] !== b[i]) {
+                                    return false;
+                                }
+                            }
+                            return true;
+                        }
+                        return false;
+                    }
+                }
+            }
+            else {
+                if (isString(a)) {
+                    if (0 < index) {
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                }
+                else {
+                    if (a.length <= index) {
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                }
+            }
+        }
+        else {
+            if (b != null) {
+                if (isString(b)) {
+                    if (0 < index) {
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                }
+                else {
+                    if (b.length <= index) {
+                        return true;
+                    }
+                    else {
+                        return false;
+                    }
+                }
+            }
+            else {
+                return true;
+            }
+        }
+    };
+    DTableCategoryContainerImpl.prototype.toColumns = function (index, columns, frozen) {
+        var result = [];
+        var tcolumn = null;
+        var ccolumn = null;
+        for (var i = 0, imax = columns.length; i < imax; ++i) {
+            var column = columns[i];
+            if (i !== frozen &&
+                ccolumn &&
+                tcolumn &&
+                this.isCategory(index, tcolumn.category, column.category)) {
+                if (ccolumn.weight != null && column.weight != null) {
+                    ccolumn.add(column);
+                }
+                else if (ccolumn.width != null && column.width != null) {
+                    ccolumn.add(column);
+                }
+                else {
+                    tcolumn = column;
+                    ccolumn = new DTableCategoryColumnImpl(index, column);
+                    result.push(ccolumn);
+                }
+            }
+            else {
+                tcolumn = column;
+                ccolumn = new DTableCategoryColumnImpl(index, column);
+                result.push(ccolumn);
+            }
+        }
+        return result;
+    };
+    return DTableCategoryContainerImpl;
+}());
+
+var defaultGetter = function (row, columnIndex) {
+    return row[columnIndex];
+};
+var defaultSetter = function (row, columnIndex, cell) {
+    row[columnIndex] = cell;
+};
+var defaultGetterEmpty = function () { return ""; };
+var defaultSetterEmpty = function () {
+    // DO NOTHING
+};
+var toPathGetter = function (path, def) {
+    if (path.length <= 1) {
+        var key_1 = path[0];
+        if (def === undefined) {
+            return function (row) {
+                return row[key_1];
+            };
+        }
+        else {
+            return function (row) {
+                return Object.prototype.hasOwnProperty.call(row, key_1) ? row[key_1] : def;
+            };
+        }
+    }
+    else {
+        if (def === undefined) {
+            return function (row) {
+                for (var i = 0, imax = path.length - 1; i < imax; ++i) {
+                    row = row[path[i]];
+                }
+                return row[path[path.length - 1]];
+            };
+        }
+        else {
+            return function (row) {
+                for (var i = 0, imax = path.length - 1; i < imax; ++i) {
+                    row = row[path[i]];
+                }
+                var key = path[path.length - 1];
+                return Object.prototype.hasOwnProperty.call(row, key) ? row[key] : def;
+            };
+        }
+    }
+};
+var toPathSetter = function (path) {
+    if (path.length <= 1) {
+        var key_2 = path[0];
+        return function (row, columnIndex, cell) {
+            row[key_2] = cell;
+        };
+    }
+    else {
+        return function (row, columnIndex, cell) {
+            for (var i = 0, imax = path.length - 1; i < imax; ++i) {
+                row = row[path[i]] || {};
+            }
+            row[path[path.length - 1]] = cell;
+        };
+    }
+};
+var toAlign = function (options, type) {
+    var align = options.align;
+    if (align != null) {
+        if (isString(align)) {
+            return DAlignHorizontal[align];
+        }
+        else {
+            return align;
+        }
+    }
+    switch (type) {
+        case DTableColumnType.TEXT:
+        case DTableColumnType.TEXT_AREA:
+            return DAlignHorizontal.LEFT;
+        case DTableColumnType.REAL:
+        case DTableColumnType.INTEGER:
+            return DAlignHorizontal.RIGHT;
+        case DTableColumnType.BUTTON:
+        case DTableColumnType.INDEX:
+        case DTableColumnType.SELECT:
+        case DTableColumnType.ACTION:
+        case DTableColumnType.LINK:
+        case DTableColumnType.CHECK:
+        case DTableColumnType.CHECK_SINGLE:
+        case DTableColumnType.COLOR:
+            return DAlignHorizontal.CENTER;
+        default:
+            return DAlignHorizontal.LEFT;
+    }
+};
+var toDataChecker = function (path) {
+    if (path != null) {
+        var pathLength_1 = path.length;
+        if (pathLength_1 <= 1) {
+            var key_3 = path[0];
+            return function (row) {
+                return Object.prototype.hasOwnProperty.call(row, key_3);
+            };
+        }
+        else {
+            return function (row) {
+                for (var i = 0; i < pathLength_1; ++i) {
+                    var part = path[i];
+                    if (part in row) {
+                        row = row[part];
+                    }
+                    else {
+                        return false;
+                    }
+                }
+                return true;
+            };
+        }
+    }
+    return function (row, columnIndex) {
+        return columnIndex < row.length;
+    };
+};
+var toEditingEnable = function (enable, path) {
+    if (isString(enable)) {
+        return toDataChecker(path);
+    }
+    else if (enable != null) {
+        return enable;
+    }
+    else {
+        return false;
+    }
+};
+var toEditing = function (options, path) {
+    var _a;
+    var editing = options.editing;
+    var editable = options.editable;
+    if (editing) {
+        return {
+            enable: toEditingEnable((_a = editing.enable) !== null && _a !== void 0 ? _a : editable, path),
+            formatter: editing.formatter,
+            unformatter: editing.unformatter,
+            validator: editing.validator
+        };
+    }
+    return {
+        enable: toEditingEnable(editable, path)
+    };
+};
+var toComparator = function (getter, index) {
+    return function (rowA, rowB) {
+        var valueA = getter(rowA, index);
+        var valueB = getter(rowB, index);
+        return valueA < valueB ? -1 : valueB < valueA ? +1 : 0;
+    };
+};
+var toSorting = function (getter, index, options) {
+    var sorting = options.sorting;
+    var sortable = options.sortable;
+    if (sorting) {
+        if (sorting.enable || sortable) {
+            return {
+                enable: true,
+                comparator: sorting.comparator || toComparator(getter, index)
+            };
+        }
+        return {
+            enable: false
+        };
+    }
+    if (sortable) {
+        return {
+            enable: true,
+            comparator: toComparator(getter, index)
+        };
+    }
+    return {
+        enable: false
+    };
+};
+var toMenu = function (options) {
+    if (options == null) {
+        return undefined;
+    }
+    else if (options instanceof DMenu) {
+        return options;
+    }
+    else {
+        return new DMenu(options);
+    }
+};
+var toDialog = function (options) {
+    if (options == null) {
+        return undefined;
+    }
+    else if ("open" in options) {
+        return options;
+    }
+    else {
+        return new DDialogSelect(options);
+    }
+};
+var defaultSelectingGetter = function (dialog) {
+    return dialog.value;
+};
+var defaultSelectingSetter = function () {
+    // DO NOTHING
+};
+var toSelecting = function (options) {
+    if (options) {
+        return {
+            getter: options.getter || defaultSelectingGetter,
+            setter: options.setter || defaultSelectingSetter,
+            menu: toMenu(options.menu),
+            multiple: toMenu(options.multiple),
+            dialog: toDialog(options.dialog),
+            promise: options.promise
+        };
+    }
+    return {
+        getter: defaultSelectingGetter,
+        setter: defaultSelectingSetter
+    };
+};
+var toGetter = function (options, type, parts) {
+    var getter = options.getter;
+    if (getter) {
+        return getter;
+    }
+    switch (type) {
+        case DTableColumnType.ACTION:
+        case DTableColumnType.LINK:
+            return defaultGetterEmpty;
+        default:
+            if (parts == null) {
+                return defaultGetter;
+            }
+            else {
+                return toPathGetter(parts, options.default);
+            }
+    }
+};
+var toSetter = function (options, type, path) {
+    var setter = options.setter;
+    if (setter) {
+        return setter;
+    }
+    switch (type) {
+        case DTableColumnType.BUTTON:
+        case DTableColumnType.ACTION:
+        case DTableColumnType.LINK:
+            return defaultSetterEmpty;
+        default:
+            if (path == null) {
+                return defaultSetter;
+            }
+            else {
+                return toPathSetter(path);
+            }
+    }
+};
+var toState = function (options) {
+    var state = options.state;
+    if (state != null) {
+        if (isString(state) || isArray(state)) {
+            return {
+                initial: state,
+                modifier: undefined
+            };
+        }
+        else {
+            return {
+                initial: undefined,
+                modifier: state
+            };
+        }
+    }
+    return {
+        initial: undefined,
+        modifier: undefined
+    };
+};
+var toPath = function (options) {
+    return options.path != null ? options.path.split(".") : null;
+};
+var toRenderable = function (options, path) {
+    var renderable = options.renderable;
+    if (isString(renderable)) {
+        return toDataChecker(path);
+    }
+    else if (renderable != null) {
+        return renderable;
+    }
+    return true;
+};
+var DTableColumnImpl = /** @class */ (function (_super) {
+    __extends(DTableColumnImpl, _super);
+    function DTableColumnImpl(index, options) {
+        var _a, _b, _c;
+        var _this = _super.call(this) || this;
+        var weight = options.weight;
+        var width = options.width;
+        if (weight != null) {
+            if (width != null) {
+                width = undefined;
+            }
+        }
+        else if (width == null) {
+            weight = 1;
+        }
+        var type = toEnum((_a = options.type) !== null && _a !== void 0 ? _a : DTableColumnType.TEXT, DTableColumnType);
+        var align = toAlign(options, type);
+        var label = options.label || "";
+        var path = toPath(options);
+        var getter = toGetter(options, type, path);
+        var setter = toSetter(options, type, path);
+        _this._weight = weight;
+        _this._width = width;
+        _this.resizable = (_b = options.resizable) !== null && _b !== void 0 ? _b : false;
+        _this.type = type;
+        _this.label = label;
+        _this.getter = getter;
+        _this.setter = setter;
+        _this.formatter = options.formatter;
+        _this.renderable = toRenderable(options, path);
+        _this.align = align;
+        _this.state = toState(options);
+        _this.editing = toEditing(options, path);
+        _this.sorting = toSorting(getter, index, options);
+        _this.header = options.header;
+        _this.body = options.body;
+        _this.selecting = toSelecting(options.selecting);
+        _this.category = options.category;
+        _this.frozen = options.frozen;
+        _this.offset = 0.0;
+        _this.link = options.link;
+        _this.update = toEnum((_c = options.update) !== null && _c !== void 0 ? _c : DTableColumnUpdate.CELL, DTableColumnUpdate);
+        return _this;
+    }
+    Object.defineProperty(DTableColumnImpl.prototype, "weight", {
+        get: function () {
+            return this._weight;
+        },
+        set: function (weight) {
+            if (this._weight != null && this._weight !== weight) {
+                this._weight = weight;
+                this.emit("resize", this);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTableColumnImpl.prototype, "width", {
+        get: function () {
+            return this._width;
+        },
+        set: function (width) {
+            if (this._width != null && this._width !== width) {
+                this._width = width;
+                this.emit("resize", this);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return DTableColumnImpl;
+}(pixi_js.utils.EventEmitter));
+
+var DTableColumnContainerImpl = /** @class */ (function (_super) {
+    __extends(DTableColumnContainerImpl, _super);
+    function DTableColumnContainerImpl(parent, options) {
+        var _this = _super.call(this) || this;
+        _this.parent = parent;
+        var columns = [];
+        if (options != null) {
+            for (var i = 0, imax = options.length; i < imax; ++i) {
+                var column = new DTableColumnImpl(i, options[i]);
+                columns.push(column);
+                column.on("resize", _this.newOnColumnResize(i, column));
+            }
+        }
+        _this.items = columns;
+        var frozen = 0;
+        for (var i = columns.length - 1; 0 <= i; --i) {
+            if (columns[i].frozen === true) {
+                frozen = i + 1;
+                break;
+            }
+        }
+        _this.frozen = frozen;
+        return _this;
+    }
+    DTableColumnContainerImpl.prototype.newOnColumnResize = function (index, column) {
+        var _this = this;
+        return function () {
+            _this.onColumnResize(index, column);
+        };
+    };
+    DTableColumnContainerImpl.prototype.onColumnResize = function (index, column) {
+        this.onColumnResizeHeader(index, column);
+        this.onColumnResizeBody(index, column);
+        this.emit("resize", index, column, this);
+    };
+    DTableColumnContainerImpl.prototype.onColumnResizeHeader = function (index, column) {
+        var header = this.parent.header;
+        if (header != null) {
+            var columnWeight = column.weight;
+            if (columnWeight != null) {
+                this.onColumnResizeWeight(header, index, columnWeight);
+            }
+            else {
+                var columnWidth = column.width;
+                if (columnWidth != null) {
+                    this.onColumnResizeWidth(header, index, columnWidth);
+                }
+            }
+        }
+    };
+    DTableColumnContainerImpl.prototype.onColumnResizeBody = function (index, column) {
+        var rows = this.parent.body.children;
+        var columnWeight = column.weight;
+        if (columnWeight != null) {
+            for (var i = 0, imax = rows.length; i < imax; ++i) {
+                this.onColumnResizeWeight(rows[i], index, columnWeight);
+            }
+        }
+        else {
+            var columnWidth = column.width;
+            if (columnWidth != null) {
+                for (var i = 0, imax = rows.length; i < imax; ++i) {
+                    this.onColumnResizeWidth(rows[i], index, columnWidth);
+                }
+            }
+        }
+    };
+    DTableColumnContainerImpl.prototype.onColumnResizeWeight = function (row, index, columnWeight) {
+        var cells = row.children;
+        var cellsLength = cells.length;
+        var cellsIndex = cellsLength - index - 1;
+        if (0 <= cellsIndex && cellsIndex < cellsLength) {
+            cells[cellsIndex].weight = columnWeight;
+        }
+    };
+    DTableColumnContainerImpl.prototype.onColumnResizeWidth = function (row, index, columnWidth) {
+        var cells = row.children;
+        var cellsLength = cells.length;
+        var cellsIndex = cellsLength - index - 1;
+        if (0 <= cellsIndex && cellsIndex < cellsLength) {
+            cells[cellsIndex].width = columnWidth;
+        }
+    };
+    Object.defineProperty(DTableColumnContainerImpl.prototype, "width", {
+        get: function () {
+            var result = 0;
+            var items = this.items;
+            var length = items.length;
+            for (var i = 0; i < length; ++i) {
+                var item = items[i];
+                var itemWidth = item.width;
+                if (itemWidth != null) {
+                    result += itemWidth;
+                }
+            }
+            return result;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTableColumnContainerImpl.prototype.get = function (index) {
+        var columns = this.items;
+        if (0 <= index && index < columns.length) {
+            return columns[index];
+        }
+        return null;
+    };
+    DTableColumnContainerImpl.prototype.each = function (iteratee) {
+        var columns = this.items;
+        for (var i = 0, imax = columns.length; i < imax; ++i) {
+            if (iteratee(columns[i], i) === false) {
+                break;
+            }
+        }
+        return this;
+    };
+    DTableColumnContainerImpl.prototype.size = function () {
+        return this.items.length;
+    };
+    return DTableColumnContainerImpl;
+}(pixi_js.utils.EventEmitter));
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -96032,24 +97191,37 @@ var DTableHeaderCellCheck = /** @class */ (function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
+var DTableHeaderCellEdge = {
+    NONE: 0,
+    LEFT: 1,
+    RIGHT: 2,
+    BOTH: 3
+};
 var DTableHeaderCell = /** @class */ (function (_super) {
     __extends(DTableHeaderCell, _super);
-    function DTableHeaderCell() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DTableHeaderCell.prototype.init = function (options) {
-        if (options != null) {
-            this._header = options.header;
-            this._column = options.column;
-            this._columnIndex = options.columnIndex;
-            this._check = new DTableHeaderCellCheck(this, options.check);
-        }
-        else {
-            this._check = new DTableHeaderCellCheck(this);
+    function DTableHeaderCell(header, columnIndex, column, options) {
+        var _this = _super.call(this, options) || this;
+        _this._header = header;
+        _this._column = column;
+        _this._columnIndex = columnIndex;
+        var check = new DTableHeaderCellCheck(_this, options === null || options === void 0 ? void 0 : options.check);
+        _this._check = check;
+        _this._edgeSize = _this.theme.getEdgeWidth();
+        _this._wasResizing = false;
+        var sortable = column.sorting.enable;
+        var checkable = check.isEnabled;
+        if (checkable || sortable) {
+            _this.on(UtilPointerEvent.tap, function (e) {
+                _this.onClick(e);
+            });
+            var state = _this.state;
+            state.lock();
+            state.set(DTableState.SORTABLE, sortable);
+            state.set(DTableState.CHECKABLE, checkable);
+            state.unlock();
         }
-        _super.prototype.init.call(this, options);
-        this.initOnClick(options);
-    };
+        return _this;
+    }
     Object.defineProperty(DTableHeaderCell.prototype, "column", {
         get: function () {
             return this._column;
@@ -96078,23 +97250,201 @@ var DTableHeaderCell = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    DTableHeaderCell.prototype.initOnClick = function (options) {
+    DTableHeaderCell.prototype.onDown = function (e) {
+        var edges = this.state.valueOf(DTableState.HOVERED_ON_EDGE);
+        if (edges != null) {
+            this._wasResizing = true;
+            var layer = DApplications.getLayer(this);
+            if (layer != null) {
+                var interactionManager = layer.renderer.plugins.interaction;
+                var columnIndex = this._columnIndex;
+                if (edges === DTableHeaderCellEdge.LEFT) {
+                    this.onDownEdge(e.data.global.x, columnIndex - 1, interactionManager);
+                }
+                else {
+                    this.onDownEdge(e.data.global.x, columnIndex, interactionManager);
+                }
+            }
+        }
+        else {
+            this._wasResizing = false;
+            _super.prototype.onDown.call(this, e);
+        }
+    };
+    DTableHeaderCell.prototype.findLeftResizableCell = function (columnIndex) {
+        var children = this._header.children;
+        var childrenLength = children.length;
+        for (var i = columnIndex; 0 <= i; --i) {
+            var child = children[childrenLength - i - 1];
+            if (child.column.resizable) {
+                return child;
+            }
+        }
+        return null;
+    };
+    DTableHeaderCell.prototype.findRightResizableCellOfWeight = function (columnIndex) {
+        var children = this._header.children;
+        var childrenLength = children.length;
+        for (var i = columnIndex + 1; i < childrenLength; ++i) {
+            var child = children[childrenLength - i - 1];
+            var childColumn = child.column;
+            if (childColumn.resizable) {
+                var childColumnWeight = childColumn.weight;
+                if (childColumnWeight != null) {
+                    return child;
+                }
+            }
+        }
+        return null;
+    };
+    DTableHeaderCell.prototype.checkIfEdgeResizable = function (columnIndex) {
+        var target = this.findLeftResizableCell(columnIndex);
+        if (target != null) {
+            if (target.column.weight != null) {
+                return this.findRightResizableCellOfWeight(target.columnIndex) != null;
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    };
+    DTableHeaderCell.prototype.getResizableEdges = function () {
+        var result = this._resizableEdges;
+        if (result == null) {
+            var columnIndex = this._columnIndex;
+            if (this.checkIfEdgeResizable(columnIndex - 1)) {
+                if (this.checkIfEdgeResizable(columnIndex)) {
+                    result = DTableHeaderCellEdge.BOTH;
+                }
+                else {
+                    result = DTableHeaderCellEdge.LEFT;
+                }
+            }
+            else {
+                if (this.checkIfEdgeResizable(columnIndex)) {
+                    result = DTableHeaderCellEdge.RIGHT;
+                }
+                else {
+                    result = DTableHeaderCellEdge.NONE;
+                }
+            }
+            this._resizableEdges = result;
+        }
+        return result;
+    };
+    DTableHeaderCell.prototype.onOver = function (e) {
         var _this = this;
-        var column = this._column;
-        if (column) {
-            var sortable = column.sorting.enable;
-            var checkable = this._check.isEnabled;
-            if (checkable || sortable) {
-                this.on(UtilPointerEvent.tap, function (e) {
-                    _this.onClick(e);
-                });
-                var state = this.state;
-                state.lock();
-                state.set(DTableState.SORTABLE, sortable);
-                state.set(DTableState.CHECKABLE, checkable);
-                state.unlock();
+        var _a;
+        _super.prototype.onOver.call(this, e);
+        if (this.getResizableEdges() !== DTableHeaderCellEdge.NONE) {
+            var onHoveredBound = ((_a = this._onHoveredBound) !== null && _a !== void 0 ? _a : (this._onHoveredBound = function (event) {
+                _this.onHovered(event);
+            }));
+            this.on(UtilPointerEvent.move, onHoveredBound);
+            // Since the cursor is set by InteractionManager before this method is called,
+            // the cursor need to be overriden.
+            this.onHovered(e);
+            var layer = DApplications.getLayer(this);
+            if (layer != null) {
+                layer.renderer.plugins.interaction.cursor = this.cursor;
+            }
+        }
+    };
+    DTableHeaderCell.prototype.onOut = function (e) {
+        _super.prototype.onOut.call(this, e);
+        var onHoveredBound = this._onHoveredBound;
+        if (onHoveredBound != null) {
+            this.state.remove(DTableState.HOVERED_ON_EDGE);
+            this.off(UtilPointerEvent.move, onHoveredBound);
+        }
+    };
+    DTableHeaderCell.prototype.onHovered = function (e) {
+        var width = this.width;
+        var x = this.toClickPosition(e);
+        var edgeSize = this._edgeSize;
+        if (0 <= x && x <= edgeSize) {
+            if (this.getResizableEdges() & DTableHeaderCellEdge.LEFT) {
+                this.state.add(DTableState.HOVERED_ON_EDGE, DTableHeaderCellEdge.LEFT);
+            }
+            else {
+                this.state.remove(DTableState.HOVERED_ON_EDGE);
+            }
+        }
+        else if (width - edgeSize <= x && x <= width) {
+            if (this.getResizableEdges() & DTableHeaderCellEdge.RIGHT) {
+                this.state.add(DTableState.HOVERED_ON_EDGE, DTableHeaderCellEdge.RIGHT);
+            }
+            else {
+                this.state.remove(DTableState.HOVERED_ON_EDGE);
             }
         }
+        else {
+            this.state.remove(DTableState.HOVERED_ON_EDGE);
+        }
+    };
+    DTableHeaderCell.prototype.onDownEdge = function (onDownPoint, columnIndex, interactionManager) {
+        // Find the resizable cell
+        var left = this.findLeftResizableCell(columnIndex);
+        if (left == null) {
+            // No resizable cell
+            return;
+        }
+        var header = this._header;
+        var leftColumn = left.column;
+        var leftOldWidth = left.width;
+        var leftOldWeight = left.weight;
+        if (leftColumn.weight == null) {
+            header.state.add(DTableState.RESIZING);
+            var onMove_1 = function (e) {
+                leftColumn.width = Math.max(1, leftOldWidth + e.data.global.x - onDownPoint);
+            };
+            var onUp_1 = function (e) {
+                header.state.remove(DTableState.RESIZING);
+                interactionManager.off(UtilPointerEvent.move, onMove_1);
+                interactionManager.off(UtilPointerEvent.up, onUp_1);
+                interactionManager.off(UtilPointerEvent.upoutside, onUp_1);
+                interactionManager.off(UtilPointerEvent.cancel, onUp_1);
+            };
+            interactionManager.on(UtilPointerEvent.move, onMove_1);
+            interactionManager.on(UtilPointerEvent.up, onUp_1);
+            interactionManager.on(UtilPointerEvent.upoutside, onUp_1);
+            interactionManager.on(UtilPointerEvent.cancel, onUp_1);
+        }
+        else {
+            var right = this.findRightResizableCellOfWeight(left.columnIndex);
+            if (right == null) {
+                // No right resizable cell found
+                return;
+            }
+            var rightColumn_1 = right.column;
+            var rightOldWeight = right.weight;
+            var rightOldWidth = right.width;
+            var totalWidth_1 = leftOldWidth + rightOldWidth;
+            var totalWeight_1 = leftOldWeight + rightOldWeight;
+            if (totalWidth_1 <= 0) {
+                // The left and right resizable cells doesn't have non-zero width
+                return;
+            }
+            header.state.add(DTableState.RESIZING);
+            var onMove_2 = function (e) {
+                var leftNewWidth = Math.max(0, Math.min(totalWidth_1, leftOldWidth + e.data.global.x - onDownPoint));
+                var leftNewWeight = totalWeight_1 * (leftNewWidth / totalWidth_1);
+                leftColumn.weight = leftNewWeight;
+                rightColumn_1.weight = totalWeight_1 - leftNewWeight;
+            };
+            var onUp_2 = function (e) {
+                header.state.remove(DTableState.RESIZING);
+                interactionManager.off(UtilPointerEvent.move, onMove_2);
+                interactionManager.off(UtilPointerEvent.up, onUp_2);
+                interactionManager.off(UtilPointerEvent.upoutside, onUp_2);
+                interactionManager.off(UtilPointerEvent.cancel, onUp_2);
+            };
+            interactionManager.on(UtilPointerEvent.move, onMove_2);
+            interactionManager.on(UtilPointerEvent.up, onUp_2);
+            interactionManager.on(UtilPointerEvent.upoutside, onUp_2);
+            interactionManager.on(UtilPointerEvent.cancel, onUp_2);
+        }
     };
     Object.defineProperty(DTableHeaderCell.prototype, "sorter", {
         get: function () {
@@ -96129,11 +97479,7 @@ var DTableHeaderCell = /** @class */ (function (_super) {
     });
     Object.defineProperty(DTableHeaderCell.prototype, "comparator", {
         get: function () {
-            var column = this._column;
-            if (column) {
-                return column.sorting.comparator || null;
-            }
-            return null;
+            return this._column.sorting.comparator || null;
         },
         enumerable: false,
         configurable: true
@@ -96160,8 +97506,8 @@ var DTableHeaderCell = /** @class */ (function (_super) {
         }
     };
     DTableHeaderCell.prototype.toClickPosition = function (e) {
-        var checkWork = this._checkWork || new pixi_js.Point();
-        this._checkWork = checkWork;
+        var _a;
+        var checkWork = ((_a = this._checkWork) !== null && _a !== void 0 ? _a : (this._checkWork = new pixi_js.Point()));
         return e.data.getLocalPosition(this, checkWork).x;
     };
     DTableHeaderCell.prototype.isCheckClicked = function (e) {
@@ -96186,6 +97532,10 @@ var DTableHeaderCell = /** @class */ (function (_super) {
         }
         return false;
     };
+    DTableHeaderCell.prototype.isEdgeClicked = function (e) {
+        return (e instanceof pixi_js.InteractionEvent &&
+            (this.state.is(DTableState.HOVERED_ON_EDGE) || this._wasResizing));
+    };
     DTableHeaderCell.prototype.onClick = function (e) {
         if (this.state.isActionable) {
             this.activate(e);
@@ -96195,13 +97545,15 @@ var DTableHeaderCell = /** @class */ (function (_super) {
         this.onActivate(e);
     };
     DTableHeaderCell.prototype.onActivate = function (e) {
-        if (this.isCheckClicked(e)) {
-            this.onToggleStart();
-            this.onToggleEnd();
-        }
-        else {
-            this.doSort(e);
-            this.emit("active", this);
+        if (!this.isEdgeClicked(e)) {
+            if (this.isCheckClicked(e)) {
+                this.onToggleStart();
+                this.onToggleEnd();
+            }
+            else {
+                this.doSort(e);
+                this.emit("active", this);
+            }
         }
     };
     DTableHeaderCell.prototype.doSort = function (e) {
@@ -96231,11 +97583,14 @@ var DTableHeaderCell = /** @class */ (function (_super) {
     };
     Object.defineProperty(DTableHeaderCell.prototype, "isSortable", {
         get: function () {
-            var column = this._column;
-            if (column) {
-                return column.sorting.enable;
-            }
-            return false;
+            return this._column.sorting.enable;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTableHeaderCell.prototype, "isResizable", {
+        get: function () {
+            return this._column.resizable;
         },
         enumerable: false,
         configurable: true
@@ -96325,14 +97680,12 @@ var DTableHeaderCell = /** @class */ (function (_super) {
  */
 var DTableHeader = /** @class */ (function (_super) {
     __extends(DTableHeader, _super);
-    function DTableHeader(options) {
-        var _a, _b;
-        var _this = _super.call(this, options) || this;
-        _this._table = (_a = options.table) !== null && _a !== void 0 ? _a : null;
-        var offset = (_b = options.offset) !== null && _b !== void 0 ? _b : 0;
+    function DTableHeader(table, columns, frozen, offset, options) {
+        var _this = _super.call(this, columns, frozen, options) || this;
+        _this._table = table;
         _this._offset = offset;
         _this.transform.position.y = offset;
-        _this.initCells(options, _this._columns, _this._frozen);
+        _this.initCells();
         return _this;
     }
     Object.defineProperty(DTableHeader.prototype, "table", {
@@ -96355,10 +97708,10 @@ var DTableHeader = /** @class */ (function (_super) {
         return 0;
     };
     DTableHeader.prototype.newCell = function (columnIndex, column, columns, options) {
-        return new DTableHeaderCell(this.toCellOptions(columnIndex, column, options));
+        return new DTableHeaderCell(this, columnIndex, column, this.toCellOptions(column, options));
     };
-    DTableHeader.prototype.toCellOptions = function (columnIndex, column, options) {
-        var result = column.header || options.cell;
+    DTableHeader.prototype.toCellOptions = function (column, options) {
+        var result = column.header || (options === null || options === void 0 ? void 0 : options.cell);
         if (result != null) {
             if (result.weight === undefined) {
                 result.weight = column.weight;
@@ -96374,15 +97727,6 @@ var DTableHeader = /** @class */ (function (_super) {
             else if (result.text.value === undefined) {
                 result.text.value = column.label;
             }
-            if (result.header === undefined) {
-                result.header = this;
-            }
-            if (result.column === undefined) {
-                result.column = column;
-            }
-            if (result.columnIndex === undefined) {
-                result.columnIndex = columnIndex;
-            }
             return result;
         }
         else {
@@ -96391,10 +97735,7 @@ var DTableHeader = /** @class */ (function (_super) {
                 width: column.width,
                 text: {
                     value: column.label
-                },
-                header: this,
-                column: column,
-                columnIndex: columnIndex
+                }
             };
         }
     };
@@ -96419,359 +97760,11 @@ var DTableScrollBar = /** @class */ (function (_super) {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var defaultGetter = function (row, columnIndex) {
-    return row[columnIndex];
-};
-var defaultSetter = function (row, columnIndex, cell) {
-    row[columnIndex] = cell;
-};
-var defaultGetterEmpty = function () { return ""; };
-var defaultSetterEmpty = function () {
-    // DO NOTHING
-};
-var toPathGetter = function (path, def) {
-    if (path.length <= 1) {
-        var key_1 = path[0];
-        if (def === undefined) {
-            return function (row) {
-                return row[key_1];
-            };
-        }
-        else {
-            return function (row) {
-                return Object.prototype.hasOwnProperty.call(row, key_1) ? row[key_1] : def;
-            };
-        }
-    }
-    else {
-        if (def === undefined) {
-            return function (row) {
-                for (var i = 0, imax = path.length - 1; i < imax; ++i) {
-                    row = row[path[i]];
-                }
-                return row[path[path.length - 1]];
-            };
-        }
-        else {
-            return function (row) {
-                for (var i = 0, imax = path.length - 1; i < imax; ++i) {
-                    row = row[path[i]];
-                }
-                var key = path[path.length - 1];
-                return Object.prototype.hasOwnProperty.call(row, key) ? row[key] : def;
-            };
-        }
-    }
-};
-var toPathSetter = function (path) {
-    if (path.length <= 1) {
-        var key_2 = path[0];
-        return function (row, columnIndex, cell) {
-            row[key_2] = cell;
-        };
-    }
-    else {
-        return function (row, columnIndex, cell) {
-            for (var i = 0, imax = path.length - 1; i < imax; ++i) {
-                row = row[path[i]] || {};
-            }
-            row[path[path.length - 1]] = cell;
-        };
-    }
-};
-var toColumnAlign = function (options, type) {
-    var align = options.align;
-    if (align != null) {
-        if (isString(align)) {
-            return DAlignHorizontal[align];
-        }
-        else {
-            return align;
-        }
-    }
-    switch (type) {
-        case DTableColumnType.TEXT:
-        case DTableColumnType.TEXT_AREA:
-            return DAlignHorizontal.LEFT;
-        case DTableColumnType.REAL:
-        case DTableColumnType.INTEGER:
-            return DAlignHorizontal.RIGHT;
-        case DTableColumnType.BUTTON:
-        case DTableColumnType.INDEX:
-        case DTableColumnType.SELECT:
-        case DTableColumnType.ACTION:
-        case DTableColumnType.LINK:
-        case DTableColumnType.CHECK:
-        case DTableColumnType.CHECK_SINGLE:
-        case DTableColumnType.COLOR:
-            return DAlignHorizontal.CENTER;
-        default:
-            return DAlignHorizontal.LEFT;
-    }
-};
-var toColumnDataChecker = function (path) {
-    if (path != null) {
-        var pathLength_1 = path.length;
-        if (pathLength_1 <= 1) {
-            var key_3 = path[0];
-            return function (row) {
-                return Object.prototype.hasOwnProperty.call(row, key_3);
-            };
-        }
-        else {
-            return function (row) {
-                for (var i = 0; i < pathLength_1; ++i) {
-                    var part = path[i];
-                    if (part in row) {
-                        row = row[part];
-                    }
-                    else {
-                        return false;
-                    }
-                }
-                return true;
-            };
-        }
-    }
-    return function (row, columnIndex) {
-        return columnIndex < row.length;
-    };
-};
-var toColumnEditingEnable = function (enable, path) {
-    if (isString(enable)) {
-        return toColumnDataChecker(path);
-    }
-    else if (enable != null) {
-        return enable;
-    }
-    else {
-        return false;
-    }
-};
-var toColumnEditing = function (options, path) {
-    var _a;
-    var editing = options.editing;
-    var editable = options.editable;
-    if (editing) {
-        return {
-            enable: toColumnEditingEnable((_a = editing.enable) !== null && _a !== void 0 ? _a : editable, path),
-            formatter: editing.formatter,
-            unformatter: editing.unformatter,
-            validator: editing.validator
-        };
-    }
-    return {
-        enable: toColumnEditingEnable(editable, path)
-    };
-};
-var toComparator = function (getter, index) {
-    return function (rowA, rowB) {
-        var valueA = getter(rowA, index);
-        var valueB = getter(rowB, index);
-        return valueA < valueB ? -1 : valueB < valueA ? +1 : 0;
-    };
-};
-var toColumnSorting = function (getter, index, options) {
-    var sorting = options.sorting;
-    var sortable = options.sortable;
-    if (sorting) {
-        if (sorting.enable || sortable) {
-            return {
-                enable: true,
-                comparator: sorting.comparator || toComparator(getter, index)
-            };
-        }
-        return {
-            enable: false
-        };
-    }
-    if (sortable) {
-        return {
-            enable: true,
-            comparator: toComparator(getter, index)
-        };
-    }
-    return {
-        enable: false
-    };
-};
-var toColumnMenu = function (options) {
-    if (options == null) {
-        return undefined;
-    }
-    else if (options instanceof DMenu) {
-        return options;
-    }
-    else {
-        return new DMenu(options);
-    }
-};
-var toColumnDialog = function (options) {
-    if (options == null) {
-        return undefined;
-    }
-    else if ("open" in options) {
-        return options;
-    }
-    else {
-        return new DDialogSelect(options);
-    }
-};
-var defaultSelectingGetter = function (dialog) {
-    return dialog.value;
-};
-var defaultSelectingSetter = function () {
-    // DO NOTHING
-};
-var toColumnSelecting = function (options) {
-    if (options) {
-        return {
-            getter: options.getter || defaultSelectingGetter,
-            setter: options.setter || defaultSelectingSetter,
-            menu: toColumnMenu(options.menu),
-            multiple: toColumnMenu(options.multiple),
-            dialog: toColumnDialog(options.dialog),
-            promise: options.promise
-        };
-    }
-    return {
-        getter: defaultSelectingGetter,
-        setter: defaultSelectingSetter
-    };
-};
-var toColumnGetter = function (options, type, parts) {
-    var getter = options.getter;
-    if (getter) {
-        return getter;
-    }
-    switch (type) {
-        case DTableColumnType.ACTION:
-        case DTableColumnType.LINK:
-            return defaultGetterEmpty;
-        default:
-            if (parts == null) {
-                return defaultGetter;
-            }
-            else {
-                return toPathGetter(parts, options.default);
-            }
-    }
-};
-var toColumnSetter = function (options, type, path) {
-    var setter = options.setter;
-    if (setter) {
-        return setter;
-    }
-    switch (type) {
-        case DTableColumnType.BUTTON:
-        case DTableColumnType.ACTION:
-        case DTableColumnType.LINK:
-            return defaultSetterEmpty;
-        default:
-            if (path == null) {
-                return defaultSetter;
-            }
-            else {
-                return toPathSetter(path);
-            }
-    }
-};
-var toColumnState = function (options) {
-    var state = options.state;
-    if (state != null) {
-        if (isString(state) || isArray(state)) {
-            return {
-                initial: state,
-                modifier: undefined
-            };
-        }
-        else {
-            return {
-                initial: undefined,
-                modifier: state
-            };
-        }
-    }
-    return {
-        initial: undefined,
-        modifier: undefined
-    };
-};
-var toColumnPath = function (options) {
-    return options.path != null ? options.path.split(".") : null;
-};
-var toColumnRenderable = function (options, path) {
-    var renderable = options.renderable;
-    if (isString(renderable)) {
-        return toColumnDataChecker(path);
-    }
-    else if (renderable != null) {
-        return renderable;
-    }
-    return true;
-};
-var toColumn = function (index, options) {
-    var _a, _b;
-    var weight = options.weight;
-    var width = options.width;
-    if (weight != null) {
-        if (width != null) {
-            width = undefined;
-        }
-    }
-    else if (width == null) {
-        weight = 1;
-    }
-    var type = toEnum((_a = options.type) !== null && _a !== void 0 ? _a : DTableColumnType.TEXT, DTableColumnType);
-    var align = toColumnAlign(options, type);
-    var label = options.label || "";
-    var path = toColumnPath(options);
-    var getter = toColumnGetter(options, type, path);
-    var setter = toColumnSetter(options, type, path);
-    return {
-        weight: weight,
-        width: width,
-        type: type,
-        label: label,
-        getter: getter,
-        setter: setter,
-        formatter: options.formatter,
-        renderable: toColumnRenderable(options, path),
-        align: align,
-        state: toColumnState(options),
-        editing: toColumnEditing(options, path),
-        sorting: toColumnSorting(getter, index, options),
-        header: options.header,
-        body: options.body,
-        selecting: toColumnSelecting(options.selecting),
-        category: options.category,
-        frozen: options.frozen,
-        offset: 0.0,
-        link: options.link,
-        update: toEnum((_b = options.update) !== null && _b !== void 0 ? _b : DTableColumnUpdate.CELL, DTableColumnUpdate)
-    };
-};
-var toColumns = function (options) {
-    var result = [];
-    for (var i = 0, imax = options.length; i < imax; ++i) {
-        result.push(toColumn(i, options[i]));
-    }
-    return result;
-};
-var toFrozen = function (columns) {
-    for (var i = columns.length - 1; 0 <= i; --i) {
-        if (columns[i].frozen === true) {
-            return i + 1;
-        }
-    }
-    return 0;
-};
 var DTable = /** @class */ (function (_super) {
     __extends(DTable, _super);
     function DTable(options) {
         var _this = _super.call(this, options) || this;
         var content = _this.content;
-        content.setWidth(_this.toContentWidth(options));
         var body = _this.body;
         content.addChild(body);
         if (body.data.selection.type !== DTableDataSelectionType.NONE) {
@@ -96790,39 +97783,47 @@ var DTable = /** @class */ (function (_super) {
         body.update();
         return _this;
     }
+    Object.defineProperty(DTable.prototype, "column", {
+        get: function () {
+            var _a;
+            return ((_a = this._column) !== null && _a !== void 0 ? _a : (this._column = this.newColumn()));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    DTable.prototype.newColumn = function () {
+        var _a;
+        return new DTableColumnContainerImpl(this, (_a = this._options) === null || _a === void 0 ? void 0 : _a.columns);
+    };
     Object.defineProperty(DTable.prototype, "columns", {
         get: function () {
-            var result = this._columns;
-            if (result == null) {
-                var options = this._options;
-                result = options ? toColumns(options.columns) : [];
-                this._columns = result;
-            }
-            return result;
+            return this.column.items;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(DTable.prototype, "frozen", {
         get: function () {
-            var result = this._frozen;
-            if (result == null) {
-                result = toFrozen(this.columns);
-                this._frozen = result;
-            }
-            return result;
+            return this.column.frozen;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DTable.prototype, "category", {
+        get: function () {
+            return (this._category = this.newCategory());
         },
         enumerable: false,
         configurable: true
     });
+    DTable.prototype.newCategory = function () {
+        var _a;
+        var column = this.column;
+        return new DTableCategoryContainerImpl(column.items, column.frozen, (_a = this._options) === null || _a === void 0 ? void 0 : _a.category);
+    };
     Object.defineProperty(DTable.prototype, "categories", {
         get: function () {
-            var result = this._categories;
-            if (result == null) {
-                result = this.newCategories(this._options, this.columns, this.frozen);
-                this._categories = result;
-            }
-            return result;
+            return this.category.items;
         },
         enumerable: false,
         configurable: true
@@ -96845,191 +97846,6 @@ var DTable = /** @class */ (function (_super) {
         body.unlock(true);
         scrollbar.unlock(true);
     };
-    DTable.prototype.getCategoryCount = function (columns) {
-        var result = 0;
-        for (var i = 0, imax = columns.length; i < imax; ++i) {
-            var category = columns[i].category;
-            if (category != null) {
-                var count = isString(category) ? 1 : category.length;
-                result = Math.max(result, count);
-            }
-        }
-        return result;
-    };
-    DTable.prototype.toCategoryLabel = function (index, category) {
-        if (category) {
-            if (isString(category)) {
-                if (index === 0) {
-                    return category;
-                }
-            }
-            else {
-                if (index < category.length) {
-                    return category[index];
-                }
-            }
-        }
-        return undefined;
-    };
-    DTable.prototype.isSameCategory = function (index, a, b) {
-        if (a != null) {
-            if (b != null) {
-                if (isString(a)) {
-                    if (isString(b)) {
-                        if (0 < index) {
-                            return true;
-                        }
-                        else {
-                            return a === b;
-                        }
-                    }
-                    else {
-                        if (0 < index) {
-                            return b.length <= index;
-                        }
-                        else {
-                            return b.length === 1 && a === b[0];
-                        }
-                    }
-                }
-                else {
-                    if (isString(b)) {
-                        if (0 < index) {
-                            return a.length <= index;
-                        }
-                        else {
-                            return a.length === 1 && a[0] === b;
-                        }
-                    }
-                    else {
-                        if (a.length <= index && b.length <= index) {
-                            return true;
-                        }
-                        else if (b.length === a.length) {
-                            for (var i = index, imax = a.length; i < imax; ++i) {
-                                if (a[i] !== b[i]) {
-                                    return false;
-                                }
-                            }
-                            return true;
-                        }
-                        return false;
-                    }
-                }
-            }
-            else {
-                if (isString(a)) {
-                    if (0 < index) {
-                        return true;
-                    }
-                    else {
-                        return false;
-                    }
-                }
-                else {
-                    if (a.length <= index) {
-                        return true;
-                    }
-                    else {
-                        return false;
-                    }
-                }
-            }
-        }
-        else {
-            if (b != null) {
-                if (isString(b)) {
-                    if (0 < index) {
-                        return true;
-                    }
-                    else {
-                        return false;
-                    }
-                }
-                else {
-                    if (b.length <= index) {
-                        return true;
-                    }
-                    else {
-                        return false;
-                    }
-                }
-            }
-            else {
-                return true;
-            }
-        }
-    };
-    DTable.prototype.toCategoryColumns = function (index, columns, frozen) {
-        var result = [];
-        var tcolumn = null;
-        var ccolumn = null;
-        for (var i = 0, imax = columns.length; i < imax; ++i) {
-            var column = columns[i];
-            if (i !== frozen &&
-                ccolumn &&
-                tcolumn &&
-                this.isSameCategory(index, tcolumn.category, column.category)) {
-                if (ccolumn.weight != null && column.weight != null) {
-                    ccolumn.weight += column.weight;
-                }
-                else if (ccolumn.width != null && column.width != null) {
-                    ccolumn.width += column.width;
-                }
-                else {
-                    tcolumn = column;
-                    ccolumn = {
-                        label: this.toCategoryLabel(index, column.category),
-                        weight: column.weight,
-                        width: column.width,
-                        offset: 0.0
-                    };
-                    result.push(ccolumn);
-                }
-            }
-            else {
-                tcolumn = column;
-                ccolumn = {
-                    label: this.toCategoryLabel(index, column.category),
-                    weight: column.weight,
-                    width: column.width,
-                    offset: 0.0
-                };
-                result.push(ccolumn);
-            }
-        }
-        return result;
-    };
-    DTable.prototype.toCategoryOptions = function (index, options, columns, frozen, offset) {
-        if (options) {
-            if (options.columns === undefined) {
-                options.columns = this.toCategoryColumns(index, columns, frozen);
-            }
-            if (options.frozen == null) {
-                options.frozen = frozen;
-            }
-            if (options.offset == null) {
-                options.offset = offset;
-            }
-            return options;
-        }
-        return {
-            columns: this.toCategoryColumns(index, columns, frozen),
-            frozen: frozen,
-            offset: offset
-        };
-    };
-    DTable.prototype.newCategories = function (options, columns, frozen) {
-        var count = this.getCategoryCount(columns);
-        var result = [];
-        var offset = 0;
-        for (var i = count - 1; 0 <= i; --i) {
-            var category = new DTableCategory(this.toCategoryOptions(i, options === null || options === void 0 ? void 0 : options.category, columns, frozen, offset));
-            result.push(category);
-            offset += category.height;
-        }
-        return result;
-    };
     DTable.prototype.onDblClick = function (e, interactionManager) {
         var result = this.body.onDblClick(e, interactionManager);
         return _super.prototype.onDblClick.call(this, e, interactionManager) || result;
@@ -97040,24 +97856,35 @@ var DTable = /** @class */ (function (_super) {
             _this.onScrollBarUpdate(isRegionVisible);
         });
     };
-    DTable.prototype.toContentWidth = function (options) {
-        var columnWidthTotal = 0;
-        var columns = options === null || options === void 0 ? void 0 : options.columns;
-        if (columns) {
-            for (var i = 0, imax = columns.length; i < imax; ++i) {
-                var column = columns[i];
-                var columnWidth = column.width;
-                if (columnWidth != null) {
-                    columnWidthTotal += columnWidth;
-                }
-            }
+    DTable.prototype.newContent = function (options) {
+        var _this = this;
+        var result = _super.prototype.newContent.call(this, options);
+        // X & Width
+        var column = this.column;
+        var columnWidth = column.width;
+        if (0 < columnWidth) {
+            column.on("resize", function () {
+                columnWidth = column.width;
+                var parentWidth = _this.width;
+                var parentHeight = _this.height;
+                var newWidth = Math.max(parentWidth, columnWidth);
+                var newXMin = parentWidth - newWidth;
+                // The X position must be in [newXMin, 0].
+                if (result.x < newXMin) {
+                    result.x = newXMin;
+                }
+                // Force the with reevaluated
+                result.onParentResize(parentWidth, parentHeight, _this.padding);
+            });
+            result.setWidth(function (p) {
+                return Math.max(p, columnWidth);
+            });
         }
-        if (0 < columnWidthTotal) {
-            return function (p) {
-                return Math.max(p, columnWidthTotal);
-            };
+        else {
+            result.setWidth("100%");
         }
-        return "100%";
+        // Done
+        return result;
     };
     DTable.prototype.getHeaderOffset = function () {
         var result = this._headerOffset;
@@ -97079,7 +97906,7 @@ var DTable = /** @class */ (function (_super) {
         get: function () {
             var result = this._header;
             if (result === undefined) {
-                result = this.newHeader(this._options, this.columns, this.frozen, this.getHeaderOffset());
+                result = this.newHeader();
                 this._header = result;
             }
             return result;
@@ -97098,42 +97925,17 @@ var DTable = /** @class */ (function (_super) {
         }
         return false;
     };
-    DTable.prototype.newHeader = function (options, columns, frozen, offset) {
+    DTable.prototype.newHeader = function () {
+        var options = this._options;
         if (this.hasHeader(options)) {
-            return new DTableHeader(this.toHeaderOptions(options === null || options === void 0 ? void 0 : options.header, columns, frozen, offset));
+            var column = this.column;
+            return new DTableHeader(this, column.items, column.frozen, this.getHeaderOffset(), options === null || options === void 0 ? void 0 : options.header);
         }
         return null;
     };
-    DTable.prototype.toHeaderOptions = function (options, columns, frozen, offset) {
-        if (options) {
-            if (options.columns === undefined) {
-                options.columns = columns;
-            }
-            if (options.frozen == null) {
-                options.frozen = frozen;
-            }
-            if (options.offset === undefined) {
-                options.offset = offset;
-            }
-            if (options.table === undefined) {
-                options.table = this;
-            }
-            return options;
-        }
-        return {
-            columns: columns,
-            frozen: frozen,
-            offset: offset,
-            table: this
-        };
-    };
     DTable.prototype.getBodyOffset = function () {
-        var result = this._bodyOffset;
-        if (result == null) {
-            result = this.newBodyOffset();
-            this._bodyOffset = result;
-        }
-        return result;
+        var _a;
+        return ((_a = this._bodyOffset) !== null && _a !== void 0 ? _a : (this._bodyOffset = this.newBodyOffset()));
     };
     DTable.prototype.newBodyOffset = function () {
         var _a, _b;
@@ -97141,30 +97943,19 @@ var DTable = /** @class */ (function (_super) {
     };
     Object.defineProperty(DTable.prototype, "body", {
         get: function () {
-            var result = this._body;
-            if (result == null) {
-                result = this.newBody(this._options, this.columns, this.frozen, this.getBodyOffset());
-                this._body = result;
-            }
-            return result;
+            var _a;
+            return ((_a = this._body) !== null && _a !== void 0 ? _a : (this._body = this.newBody()));
         },
         enumerable: false,
         configurable: true
     });
-    DTable.prototype.newBody = function (options, columns, frozen, offset) {
-        return new DTableBody(this.toBodyOptions(options === null || options === void 0 ? void 0 : options.body, columns, frozen, offset, options === null || options === void 0 ? void 0 : options.data));
+    DTable.prototype.newBody = function () {
+        var options = this._options;
+        var column = this.column;
+        return new DTableBody(column.items, column.frozen, this.getBodyOffset(), this.toBodyOptions(options === null || options === void 0 ? void 0 : options.body, options === null || options === void 0 ? void 0 : options.data));
     };
-    DTable.prototype.toBodyOptions = function (options, columns, frozen, offset, data) {
+    DTable.prototype.toBodyOptions = function (options, data) {
         if (options != null) {
-            if (options.columns === undefined) {
-                options.columns = columns;
-            }
-            if (options.frozen == null) {
-                options.frozen = frozen;
-            }
-            if (options.offset === undefined) {
-                options.offset = offset;
-            }
             if (options.data === undefined && data !== undefined) {
                 if (isArray(data)) {
                     options.data = {
@@ -97182,9 +97973,6 @@ var DTable = /** @class */ (function (_super) {
         }
         if (isArray(data)) {
             return {
-                columns: columns,
-                frozen: frozen,
-                offset: offset,
                 data: {
                     rows: data
                 },
@@ -97193,9 +97981,6 @@ var DTable = /** @class */ (function (_super) {
         }
         else {
             return {
-                columns: columns,
-                frozen: frozen,
-                offset: offset,
                 data: data,
                 weight: 1
             };
@@ -98940,6 +99725,7 @@ exports.DImagePieceLayouterPartTop = DImagePieceLayouterPartTop;
 exports.DImagePieceMarginImpl = DImagePieceMarginImpl;
 exports.DImagePieceTintImpl = DImagePieceTintImpl;
 exports.DIndicatorProcessing = DIndicatorProcessing;
+exports.DIndicatorProcessingState = DIndicatorProcessingState;
 exports.DInput = DInput;
 exports.DInputAndLabel = DInputAndLabel;
 exports.DInputBoolean = DInputBoolean;
@@ -99138,6 +99924,11 @@ exports.DTableBodyCells = DTableBodyCells;
 exports.DTableBodyRow = DTableBodyRow;
 exports.DTableCategory = DTableCategory;
 exports.DTableCategoryCell = DTableCategoryCell;
+exports.DTableCategoryCellEdge = DTableCategoryCellEdge;
+exports.DTableCategoryColumnImpl = DTableCategoryColumnImpl;
+exports.DTableCategoryContainerImpl = DTableCategoryContainerImpl;
+exports.DTableColumnContainerImpl = DTableColumnContainerImpl;
+exports.DTableColumnImpl = DTableColumnImpl;
 exports.DTableColumnType = DTableColumnType;
 exports.DTableColumnUpdate = DTableColumnUpdate;
 exports.DTableDataList = DTableDataList;
@@ -99155,6 +99946,7 @@ exports.DTableDataTreeSorter = DTableDataTreeSorter;
 exports.DTableHeader = DTableHeader;
 exports.DTableHeaderCell = DTableHeaderCell;
 exports.DTableHeaderCellCheck = DTableHeaderCellCheck;
+exports.DTableHeaderCellEdge = DTableHeaderCellEdge;
 exports.DTableRow = DTableRow;
 exports.DTableScrollBar = DTableScrollBar;
 exports.DTableState = DTableState;