@wcardinal/wcardinal-ui 0.410.0 → 0.412.0

package/dist/wcardinal-ui.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.410.0
+ Winter Cardinal UI v0.412.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -14354,6 +14354,13 @@
             get: function () {
                 return this._weight;
             },
+            set: function (weight) {
+                if (this._weight !== weight) {
+                    this._weight = weight;
+                    this.toHierarchyDirty();
+                    DApplications.update(this);
+                }
+            },
             enumerable: false,
             configurable: true
         });
@@ -15171,10 +15178,10 @@
             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 {
@@ -15806,6 +15813,7 @@
             this._dt = 0;
             this._dtw = 0;
             this._t = 0;
+            this._duration = 333 * ((_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : 1);
             this._animation = new DAnimationBase({
                 onTime: function (t) {
                     _this.onEase(t);
@@ -15814,7 +15822,7 @@
                     _this.onEaseEnd();
                 },
                 timing: DAnimationTimings.LINEAR,
-                duration: 333 * ((_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : 1)
+                duration: this._duration
             });
             this._onMove = onMove;
             this._onEnd = onEnd;
@@ -15895,6 +15903,11 @@
             }
         };
         UtilGestureEasing.prototype.onEnd = function (ldt) {
+            var d0 = this._duration;
+            var d = d0 - ldt;
+            if (d <= 0) {
+                return this.onEaseEnd();
+            }
             this.updateHistoriesSorted(ldt);
             var sorted = this._historiesSorted;
             var sortedLength = sorted.length;
@@ -15919,22 +15932,27 @@
             dx *= w;
             dy *= w;
             ds *= w;
-            dt *= w;
+            dt *= w * (d0 / d); // Effectively, this lowers the velocity (dx, dy, ds) by d / d0.
             this._dx = dx;
             this._dy = dy;
             this._ds = ds;
             this._dt = dt;
             // Start animation
             var animation = this._animation;
-            var d = animation.duration;
-            this._t = -ldt / d;
+            animation.duration = d;
+            this._t = 0;
             this._dtw = d / dt;
             animation.start();
         };
         UtilGestureEasing.prototype.onEase = function (t) {
             var ot = this._t;
             this._t = t;
-            // Note: Integral of (1-x) is x (1 - 0.5 x) + c.
+            // Note: Integral_{x=ot...t} (1-x) dx
+            //       = [x (1 - 0.5 x)]_{x=ot...t}
+            //       = t (1 - 0.5 t) - ot (1 - 0.5 ot)
+            //       = t - ot - 0.5 t t + 0.5 ot ot
+            //       = (t - ot) - 0.5 (t + ot) (t - ot)
+            //       = (1 - 0.5 (t + ot)) * (t - ot)
             var w = (1 - 0.5 * (t + ot)) * (t - ot) * this._dtw;
             this._onMove(this._dx * w, this._dy * w, 1 + (this._ds - 1) * w, t);
         };
@@ -16139,6 +16157,7 @@
             if (target == null || !target.state.isGesturing) {
                 return;
             }
+            var oldTime = data.time;
             if (!data.end(e)) {
                 return;
             }
@@ -16170,7 +16189,7 @@
             }
             var easing = data.easing;
             if (easing) {
-                easing.onEnd(e.data.originalEvent.timeStamp - data.time);
+                easing.onEnd(data.time - oldTime);
             }
             else {
                 this.deleteData(data);
@@ -71492,7 +71511,15 @@
         /**
          * 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"
     };
 
     /*
@@ -72146,15 +72173,17 @@
      */
     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);
@@ -72246,8 +72275,8 @@
      */
     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) {
@@ -72255,7 +72284,7 @@
             };
             _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) {
@@ -72399,7 +72428,7 @@
         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
@@ -73468,18 +73497,11 @@
      * 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
@@ -73491,9 +73513,7 @@
         }
         else {
             result = {
-                columns: columns,
                 height: theme.getRowHeight(),
-                frozen: options.frozen,
                 selection: {
                     type: selectionType
                 }
@@ -73503,18 +73523,18 @@
     };
     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;
@@ -73725,14 +73745,14 @@
             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) {
@@ -73947,11 +73967,249 @@
      * 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";
         };
@@ -73964,15 +74222,53 @@
      */
     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;
@@ -73986,16 +74282,20 @@
             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 {
@@ -74985,24 +75285,37 @@
      * 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;
@@ -75031,23 +75344,201 @@
             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 () {
@@ -75082,11 +75573,7 @@
         });
         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
@@ -75113,8 +75600,8 @@
             }
         };
         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) {
@@ -75139,6 +75626,10 @@
             }
             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);
@@ -75148,13 +75639,15 @@
             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) {
@@ -75184,11 +75677,14 @@
         };
         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
@@ -75278,14 +75774,12 @@
      */
     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", {
@@ -75308,10 +75802,10 @@
             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;
@@ -75327,15 +75821,6 @@
                 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 {
@@ -75344,10 +75829,7 @@
                     width: column.width,
                     text: {
                         value: column.label
-                    },
-                    header: this,
-                    column: column,
-                    columnIndex: columnIndex
+                    }
                 };
             }
         };
@@ -75368,10 +75850,6 @@
         return DTableScrollBar;
     }(DPaneScrollBar));
 
-    /*
-     * Copyright (C) 2019 Toshiba Corporation
-     * SPDX-License-Identifier: Apache-2.0
-     */
     var defaultGetter = function (row, columnIndex) {
         return row[columnIndex];
     };
@@ -75432,7 +75910,7 @@
             };
         }
     };
-    var toColumnAlign = function (options, type) {
+    var toAlign = function (options, type) {
         var align = options.align;
         if (align != null) {
             if (isString(align)) {
@@ -75462,7 +75940,7 @@
                 return DAlignHorizontal.LEFT;
         }
     };
-    var toColumnDataChecker = function (path) {
+    var toDataChecker = function (path) {
         if (path != null) {
             var pathLength_1 = path.length;
             if (pathLength_1 <= 1) {
@@ -75490,9 +75968,9 @@
             return columnIndex < row.length;
         };
     };
-    var toColumnEditingEnable = function (enable, path) {
+    var toEditingEnable = function (enable, path) {
         if (isString(enable)) {
-            return toColumnDataChecker(path);
+            return toDataChecker(path);
         }
         else if (enable != null) {
             return enable;
@@ -75501,20 +75979,20 @@
             return false;
         }
     };
-    var toColumnEditing = function (options, path) {
+    var toEditing = 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),
+                enable: toEditingEnable((_a = editing.enable) !== null && _a !== void 0 ? _a : editable, path),
                 formatter: editing.formatter,
                 unformatter: editing.unformatter,
                 validator: editing.validator
             };
         }
         return {
-            enable: toColumnEditingEnable(editable, path)
+            enable: toEditingEnable(editable, path)
         };
     };
     var toComparator = function (getter, index) {
@@ -75524,7 +76002,7 @@
             return valueA < valueB ? -1 : valueB < valueA ? +1 : 0;
         };
     };
-    var toColumnSorting = function (getter, index, options) {
+    var toSorting = function (getter, index, options) {
         var sorting = options.sorting;
         var sortable = options.sortable;
         if (sorting) {
@@ -75548,7 +76026,7 @@
             enable: false
         };
     };
-    var toColumnMenu = function (options) {
+    var toMenu = function (options) {
         if (options == null) {
             return undefined;
         }
@@ -75559,7 +76037,7 @@
             return new DMenu(options);
         }
     };
-    var toColumnDialog = function (options) {
+    var toDialog = function (options) {
         if (options == null) {
             return undefined;
         }
@@ -75576,14 +76054,14 @@
     var defaultSelectingSetter = function () {
         // DO NOTHING
     };
-    var toColumnSelecting = function (options) {
+    var toSelecting = 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),
+                menu: toMenu(options.menu),
+                multiple: toMenu(options.multiple),
+                dialog: toDialog(options.dialog),
                 promise: options.promise
             };
         }
@@ -75592,7 +76070,7 @@
             setter: defaultSelectingSetter
         };
     };
-    var toColumnGetter = function (options, type, parts) {
+    var toGetter = function (options, type, parts) {
         var getter = options.getter;
         if (getter) {
             return getter;
@@ -75610,7 +76088,7 @@
                 }
         }
     };
-    var toColumnSetter = function (options, type, path) {
+    var toSetter = function (options, type, path) {
         var setter = options.setter;
         if (setter) {
             return setter;
@@ -75629,7 +76107,7 @@
                 }
         }
     };
-    var toColumnState = function (options) {
+    var toState = function (options) {
         var state = options.state;
         if (state != null) {
             if (isString(state) || isArray(state)) {
@@ -75650,155 +76128,445 @@
             modifier: undefined
         };
     };
-    var toColumnPath = function (options) {
+    var toPath = function (options) {
         return options.path != null ? options.path.split(".") : null;
     };
-    var toColumnRenderable = function (options, path) {
+    var toRenderable = function (options, path) {
         var renderable = options.renderable;
         if (isString(renderable)) {
-            return toColumnDataChecker(path);
+            return toDataChecker(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]));
+    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;
         }
-        return result;
-    };
-    var toFrozen = function (columns) {
-        for (var i = columns.length - 1; 0 <= i; --i) {
-            if (columns[i].frozen === true) {
-                return i + 1;
+        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;
         }
-        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) {
-                _this.on(UtilPointerEvent.tap, function (e) {
-                    body.onRowClick(e);
-                });
+        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);
+                    }
+                }
             }
-            var header = _this.header;
-            if (header) {
-                content.addChild(header);
+        };
+        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);
+                }
             }
-            var categories = _this.categories;
-            for (var i = categories.length - 1; 0 <= i; --i) {
-                content.addChild(categories[i]);
+            else {
+                var columnWidth = column.width;
+                if (columnWidth != null) {
+                    for (var i = 0, imax = rows.length; i < imax; ++i) {
+                        this.onColumnResizeWidth(rows[i], index, columnWidth);
+                    }
+                }
             }
-            body.update();
+        };
+        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
+     */
+    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;
         }
-        Object.defineProperty(DTable.prototype, "columns", {
+        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 () {
-                var result = this._columns;
-                if (result == null) {
-                    var options = this._options;
-                    result = options ? toColumns(options.columns) : [];
-                    this._columns = result;
+                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();
+                    }
                 }
-                return result;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(DTable.prototype, "frozen", {
+        Object.defineProperty(DTableCategoryColumnImpl.prototype, "minWeight", {
             get: function () {
-                var result = this._frozen;
-                if (result == null) {
-                    result = toFrozen(this.columns);
-                    this._frozen = result;
+                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(DTable.prototype, "categories", {
+        Object.defineProperty(DTableCategoryColumnImpl.prototype, "width", {
             get: function () {
-                var result = this._categories;
-                if (result == null) {
-                    result = this.newCategories(this._options, this.columns, this.frozen);
-                    this._categories = result;
+                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
         });
-        DTable.prototype.initContent = function (content) {
-            _super.prototype.initContent.call(this, content);
-            content.state.isFocusReverse = true;
-        };
-        DTable.prototype.onContentChange = function () {
-            _super.prototype.onContentChange.call(this);
-            this.body.update();
-        };
-        DTable.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
-            var scrollbar = this.scrollbar;
-            scrollbar.lock();
-            var body = this.body;
-            body.lock();
-            _super.prototype.onResize.call(this, newWidth, newHeight, oldWidth, oldHeight);
-            body.update();
-            body.unlock(true);
-            scrollbar.unlock(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);
+                }
+            }
         };
-        DTable.prototype.getCategoryCount = function (columns) {
+        return DTableCategoryColumnImpl;
+    }(pixi_js.utils.EventEmitter));
+
+    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;
@@ -75809,22 +76577,7 @@
             }
             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) {
+        DTableCategoryContainerImpl.prototype.isCategory = function (index, a, b) {
             if (a != null) {
                 if (b != null) {
                     if (isString(a)) {
@@ -75913,7 +76666,7 @@
                 }
             }
         };
-        DTable.prototype.toCategoryColumns = function (index, columns, frozen) {
+        DTableCategoryContainerImpl.prototype.toColumns = function (index, columns, frozen) {
             var result = [];
             var tcolumn = null;
             var ccolumn = null;
@@ -75922,66 +76675,119 @@
                 if (i !== frozen &&
                     ccolumn &&
                     tcolumn &&
-                    this.isSameCategory(index, tcolumn.category, column.category)) {
+                    this.isCategory(index, tcolumn.category, column.category)) {
                     if (ccolumn.weight != null && column.weight != null) {
-                        ccolumn.weight += column.weight;
+                        ccolumn.add(column);
                     }
                     else if (ccolumn.width != null && column.width != null) {
-                        ccolumn.width += column.width;
+                        ccolumn.add(column);
                     }
                     else {
                         tcolumn = column;
-                        ccolumn = {
-                            label: this.toCategoryLabel(index, column.category),
-                            weight: column.weight,
-                            width: column.width,
-                            offset: 0.0
-                        };
+                        ccolumn = new DTableCategoryColumnImpl(index, column);
                         result.push(ccolumn);
                     }
                 }
                 else {
                     tcolumn = column;
-                    ccolumn = {
-                        label: this.toCategoryLabel(index, column.category),
-                        weight: column.weight,
-                        width: column.width,
-                        offset: 0.0
-                    };
+                    ccolumn = new DTableCategoryColumnImpl(index, column);
                     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 DTableCategoryContainerImpl;
+    }());
+
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var DTable = /** @class */ (function (_super) {
+        __extends(DTable, _super);
+        function DTable(options) {
+            var _this = _super.call(this, options) || this;
+            var content = _this.content;
+            var body = _this.body;
+            content.addChild(body);
+            if (body.data.selection.type !== DTableDataSelectionType.NONE) {
+                _this.on(UtilPointerEvent.tap, function (e) {
+                    body.onRowClick(e);
+                });
             }
-            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;
+            var header = _this.header;
+            if (header) {
+                content.addChild(header);
             }
-            return result;
+            var categories = _this.categories;
+            for (var i = categories.length - 1; 0 <= i; --i) {
+                content.addChild(categories[i]);
+            }
+            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 () {
+                return this.column.items;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DTable.prototype, "frozen", {
+            get: function () {
+                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 () {
+                return this.category.items;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DTable.prototype.initContent = function (content) {
+            _super.prototype.initContent.call(this, content);
+            content.state.isFocusReverse = true;
+        };
+        DTable.prototype.onContentChange = function () {
+            _super.prototype.onContentChange.call(this);
+            this.body.update();
+        };
+        DTable.prototype.onResize = function (newWidth, newHeight, oldWidth, oldHeight) {
+            var scrollbar = this.scrollbar;
+            scrollbar.lock();
+            var body = this.body;
+            body.lock();
+            _super.prototype.onResize.call(this, newWidth, newHeight, oldWidth, oldHeight);
+            body.update();
+            body.unlock(true);
+            scrollbar.unlock(true);
         };
         DTable.prototype.onDblClick = function (e, interactionManager) {
             var result = this.body.onDblClick(e, interactionManager);
@@ -75993,24 +76799,35 @@
                 _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;
@@ -76032,7 +76849,7 @@
             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;
@@ -76051,42 +76868,17 @@
             }
             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;
@@ -76094,30 +76886,19 @@
         };
         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 = {
@@ -76135,9 +76916,6 @@
             }
             if (isArray(data)) {
                 return {
-                    columns: columns,
-                    frozen: frozen,
-                    offset: offset,
                     data: {
                         rows: data
                     },
@@ -76146,9 +76924,6 @@
             }
             else {
                 return {
-                    columns: columns,
-                    frozen: frozen,
-                    offset: offset,
                     data: data,
                     weight: 1
                 };
@@ -78655,6 +79430,7 @@
         DTableBodyCells: DTableBodyCells,
         DTableBodyRow: DTableBodyRow,
         DTableBody: DTableBody,
+        DTableCategoryCellEdge: DTableCategoryCellEdge,
         DTableCategoryCell: DTableCategoryCell,
         DTableCategory: DTableCategory,
         DTableColumnType: DTableColumnType,
@@ -78672,6 +79448,7 @@
         DTableDataTreeSorter: DTableDataTreeSorter,
         DTableDataTree: DTableDataTree,
         DTableHeaderCellCheck: DTableHeaderCellCheck,
+        DTableHeaderCellEdge: DTableHeaderCellEdge,
         DTableHeaderCell: DTableHeaderCell,
         DTableHeader: DTableHeader,
         DTableRow: DTableRow,