@desynova-digital/components 9.3.6 → 9.3.8

package/molecules/table/table.js

@@ -34,17 +34,129 @@ var _permissionIconMap = _interopRequireDefault(require("../../../tokens/permiss
 var _TableErrorScreen = _interopRequireDefault(require("../../molecules/errorScreen/TableErrorScreen"));
 var _inputText = _interopRequireDefault(require("../../atoms/inputText"));
 var _Shimmer = _interopRequireDefault(require("../../atoms/loader/ShimmerComponent/Shimmer"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/**
+ * Width used for a resizable column that carries no width of its own.
+ */
+var DEFAULT_COLUMN_WIDTH = "175px";
+
+/**
+ * Structural columns that own a fixed slot and are never user-resizable.
+ */
+var FIXED_COLUMN_WIDTHS = {
+  extra_columns: "40px",
+  rowChecked: "50px"
+};
+var NESTED_REVEAL_MS = 260;
+
+/**
+ * Normalises a column width into a valid CSS length.
+ * @param {number|string} value raw width from the column definition
+ * @returns {string|undefined} a CSS length, or undefined when unusable
+ */
+var toCssWidth = function toCssWidth(value) {
+  if (value === null || value === undefined || value === "") {
+    return undefined;
+  }
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? "".concat(value, "px") : undefined;
+  }
+  var trimmed = String(value).trim();
+  if (!trimmed || trimmed === "undefined" || trimmed === "null") {
+    return undefined;
+  }
+  return /^-?\d*\.?\d+$/.test(trimmed) ? "".concat(trimmed, "px") : trimmed;
+};
+
+/**
+ * Reads a column width back as a plain px number, for comparing
+ * @param {number|string} value raw width from the column definition
+ * @returns {number|undefined} rounded px value, or undefined when not in px
+ */
+var toPxNumber = function toPxNumber(value) {
+  var css = toCssWidth(value);
+  if (!css) {
+    return undefined;
+  }
+  var match = /^(-?\d*\.?\d+)px$/.exec(css);
+  return match ? Math.round(parseFloat(match[1])) : undefined;
+};
+var STRUCTURAL_LEFT_FIELDS = ["rowChecked", "extra_columns"];
+
+/**
+ * Reads a pinned flag off a column definition.
+ * @param {boolean} value raw pinned_left / pinned_right value
+ * @returns {boolean} true when the column should be frozen
+ */
+var isPinned = function isPinned(value) {
+  return value === true;
+};
 var Table = /*#__PURE__*/function (_Component) {
   function Table(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, Table);
     _this = _callSuper(this, Table, [props]);
+    (0, _defineProperty2["default"])(_this, "syncScrollContainer", function () {
+      var tableElement = _this.tableElementRef.current;
+      var container = tableElement ? tableElement.parentElement : null;
+      if (container !== _this.scrollContainer) {
+        if (_this.scrollObserver) {
+          _this.scrollObserver.disconnect();
+          _this.scrollObserver = null;
+        }
+        if (_this.scrollContainer) {
+          _this.scrollContainer.removeEventListener("scroll", _this.handleCardScroll);
+        }
+        _this.scrollContainer = container;
+        if (container) {
+          container.addEventListener("scroll", _this.handleCardScroll);
+          if (typeof ResizeObserver !== "undefined") {
+            _this.scrollObserver = new ResizeObserver(_this.measureScrollContainer);
+            _this.scrollObserver.observe(container);
+          }
+        }
+      }
+      _this.measureScrollContainer();
+    });
+    (0, _defineProperty2["default"])(_this, "measureScrollContainer", function () {
+      if (!_this.scrollContainer) {
+        return;
+      }
+      var width = _this.scrollContainer.clientWidth;
+      var contentWidth = _this.scrollContainer.scrollWidth;
+      if (!width) {
+        return;
+      }
+      if (width !== _this.state.viewportWidth || contentWidth !== _this.state.scrollContentWidth) {
+        _this.setState({
+          viewportWidth: width,
+          scrollContentWidth: contentWidth
+        });
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "handleCardScroll", function () {
+      var proxy = _this.scrollProxyRef.current;
+      if (!proxy || !_this.scrollContainer) {
+        return;
+      }
+      if (proxy.scrollLeft !== _this.scrollContainer.scrollLeft) {
+        proxy.scrollLeft = _this.scrollContainer.scrollLeft;
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "handleProxyScroll", function () {
+      var proxy = _this.scrollProxyRef.current;
+      if (!proxy || !_this.scrollContainer) {
+        return;
+      }
+      if (_this.scrollContainer.scrollLeft !== proxy.scrollLeft) {
+        _this.scrollContainer.scrollLeft = proxy.scrollLeft;
+      }
+    });
     (0, _defineProperty2["default"])(_this, "spiltColumns", function () {
       _this.defaultShowColumns = [];
       _this.extraColumns = [];
@@ -56,6 +168,7 @@ var Table = /*#__PURE__*/function (_Component) {
         type: "extra_columns"
       };
       if (_this.props.preserveActionPosition) {
+        var _this$defaultShowColu;
         _this.columns = _this.columns.filter(function (item) {
           if (item.type === "table") {
             _this.nestedTable.push(item);
@@ -63,16 +176,30 @@ var Table = /*#__PURE__*/function (_Component) {
           }
           return true;
         });
-        var allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
-        _this.defaultShowColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
-        _this.extraColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
-        var maxRegularColumns = _this.props.maxShowNoOfColumns;
-        var needsTruncation = _this.columns.length > maxRegularColumns;
-        if (needsTruncation) {
-          _this.defaultShowColumns.splice(maxRegularColumns);
-          _this.defaultShowColumns.push(extraColumnsSchema);
-          _this.extraColumns.splice(0, maxRegularColumns);
+
+        /*
+         * Every selected column belongs to one list and renders in the main row;
+         * Table.Card scrolls horizontally once they overflow.
+         */
+        _this.defaultShowColumns = (0, _toConsumableArray2["default"])(_this.columns);
+        _this.extraColumns = [];
+
+        /*
+         * Row actions own the right-most slot whatever order the saved column
+         */
+        var actionIndex = _this.defaultShowColumns.findIndex(function (item) {
+          return item.type === "action_icon";
+        });
+        if (actionIndex > -1) {
+          _this.actionIconCol = _this.defaultShowColumns.splice(actionIndex, 1);
         }
+        if (_this.nestedTable.length > 0) {
+          var rowCheckedIndex = _this.defaultShowColumns.findIndex(function (item) {
+            return item.field === "rowChecked";
+          });
+          _this.defaultShowColumns.splice(rowCheckedIndex + 1, 0, extraColumnsSchema);
+        }
+        (_this$defaultShowColu = _this.defaultShowColumns).push.apply(_this$defaultShowColu, (0, _toConsumableArray2["default"])(_this.actionIconCol));
       } else {
         _this.columns = _this.columns.filter(function (item) {
           if (item.type === "action_icon") {
@@ -84,22 +211,22 @@ var Table = /*#__PURE__*/function (_Component) {
           }
           return true;
         });
-        var _allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
-        _this.defaultShowColumns = (0, _toConsumableArray2["default"])(_allRegularColumns);
-        _this.extraColumns = (0, _toConsumableArray2["default"])(_allRegularColumns);
-        var _maxRegularColumns = _this.props.showActions ? _this.props.maxShowNoOfColumns - 1 : _this.props.maxShowNoOfColumns;
-        var _needsTruncation = _this.columns.length > _maxRegularColumns;
-        if (_needsTruncation) {
-          _this.defaultShowColumns.splice(_maxRegularColumns);
+        var allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
+        _this.defaultShowColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
+        _this.extraColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
+        var maxRegularColumns = _this.props.showActions ? _this.props.maxShowNoOfColumns - 1 : _this.props.maxShowNoOfColumns;
+        var needsTruncation = _this.columns.length > maxRegularColumns;
+        if (needsTruncation) {
+          _this.defaultShowColumns.splice(maxRegularColumns);
           if (_this.props.showActions && _this.actionIconCol.length > 0) {
-            var _this$defaultShowColu;
-            (_this$defaultShowColu = _this.defaultShowColumns).push.apply(_this$defaultShowColu, (0, _toConsumableArray2["default"])(_this.actionIconCol));
+            var _this$defaultShowColu2;
+            (_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
           }
           _this.defaultShowColumns.push(extraColumnsSchema);
-          _this.extraColumns.splice(0, _maxRegularColumns);
+          _this.extraColumns.splice(0, maxRegularColumns);
         } else if (_this.props.showActions && _this.actionIconCol.length > 0) {
-          var _this$defaultShowColu2;
-          (_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
+          var _this$defaultShowColu3;
+          (_this$defaultShowColu3 = _this.defaultShowColumns).push.apply(_this$defaultShowColu3, (0, _toConsumableArray2["default"])(_this.actionIconCol));
         }
       }
       return {
@@ -132,6 +259,19 @@ var Table = /*#__PURE__*/function (_Component) {
         return item.field;
       });
     });
+    /**
+     * Whether a row carries a nested table worth expanding
+     * @param {object} item a row of the table
+     * @returns {boolean} true when the row has nested rows to show
+     */
+    (0, _defineProperty2["default"])(_this, "hasNestedRows", function (item) {
+      var nestedTable = _this.state.nestedTable;
+      if (!item || !nestedTable || !nestedTable.length || !nestedTable[0].field) {
+        return false;
+      }
+      var nested = item[nestedTable[0].field];
+      return !!(nested && nested.rows && nested.rows.length > 0);
+    });
     // actions onClick event
     (0, _defineProperty2["default"])(_this, "actionClickEvents", function (e, action, idx) {
       // action eg. play, ingest_delete etc
@@ -261,23 +401,23 @@ var Table = /*#__PURE__*/function (_Component) {
                 height: "16px",
                 width: "100%"
               });
-            } else {
-              return /*#__PURE__*/_react["default"].createElement("div", {
-                onClick: function onClick(e) {
-                  _this.toggleExtraDetails(e, idx);
-                }
-              }, /*#__PURE__*/_react["default"].createElement("div", {
-                className: _this.state.showExtraRow === idx ? "show-row" : "hide-row"
-              }, /*#__PURE__*/_react["default"].createElement("span", {
-                className: "open-close-extra"
-              }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-                theme: _this.props.theme,
-                name: "chevron-down",
-                width: 12,
-                height: 10,
-                color: _tokens.colors[_this.props.theme].table.tdColor
-              }))));
             }
+            if (!_this.hasNestedRows(item)) {
+              return null;
+            }
+            return /*#__PURE__*/_react["default"].createElement(ExpandToggle, {
+              className: "expand-toggle".concat(_this.state.showExtraRow === idx ? " is-expanded" : ""),
+              onClick: function onClick(e) {
+                _this.toggleExtraDetails(e, idx);
+              }
+            }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+              theme: _this.props.theme,
+              name: "right-arrow-chevron",
+              width: 12,
+              height: 12,
+              color: "none",
+              stroke: _tokens.colors[_this.props.theme].table.tdColor
+            }));
           }
         /**
          * In link text we  expect actions array in our items array to perform click functionality and data
@@ -624,6 +764,282 @@ var Table = /*#__PURE__*/function (_Component) {
           break;
       }
     });
+    /**
+     * Resolves the width a column should render at.
+     * @param {object} column column definition
+     * @returns {string|undefined} a CSS length, or undefined to leave it to layout
+     */
+    (0, _defineProperty2["default"])(_this, "getColumnWidth", function (column) {
+      if (!column) {
+        return undefined;
+      }
+      if (FIXED_COLUMN_WIDTHS[column.field]) {
+        return FIXED_COLUMN_WIDTHS[column.field];
+      }
+      var override = _this.state.columnWidths[column.field];
+      if (override !== undefined) {
+        return "".concat(override, "px");
+      }
+      return toCssWidth(column.width) || (_this.props.resizableColumns ? DEFAULT_COLUMN_WIDTH : undefined);
+    });
+    /**
+     * The columns actually on screen, in render order.
+     * @returns {array} visible column definitions
+     */
+    (0, _defineProperty2["default"])(_this, "getVisibleColumns", function () {
+      return (_this.defaultShowColumns || []).filter(function (column) {
+        return _this.state.showColumnArr.indexOf(column.field) > -1;
+      });
+    });
+    /**
+     * Resolves where each pinned column parks, keyed by field.
+     * Left-pinned columns stack against the left edge in the order they appear,
+     * right-pinned ones against the right edge; everything between them scrolls
+     * @returns {object} map of field -> { side, offset, isEdge }
+     */
+    (0, _defineProperty2["default"])(_this, "getPinnedOffsets", function () {
+      var visibleColumns = _this.getVisibleColumns();
+      var offsets = {};
+      var left = 0;
+      var lastLeftField = null;
+      for (var i = 0; i < visibleColumns.length; i += 1) {
+        var column = visibleColumns[i];
+        var structural = STRUCTURAL_LEFT_FIELDS.includes(column.field);
+        if (structural || isPinned(column.pinned_left)) {
+          var width = toPxNumber(_this.getColumnWidth(column));
+          if (width === undefined) {
+            break;
+          }
+          offsets[column.field] = {
+            side: "left",
+            offset: left,
+            structural: structural
+          };
+          lastLeftField = column.field;
+          left += width;
+        }
+      }
+      var right = 0;
+      var lastRightField = null;
+      for (var _i = visibleColumns.length - 1; _i >= 0; _i -= 1) {
+        var _column = visibleColumns[_i];
+        if (isPinned(_column.pinned_right) && !offsets[_column.field]) {
+          var _width = toPxNumber(_this.getColumnWidth(_column));
+          if (_width === undefined) {
+            break;
+          }
+          offsets[_column.field] = {
+            side: "right",
+            offset: right
+          };
+          lastRightField = _column.field;
+          right += _width;
+        }
+      }
+      _this.frozenWidths = {
+        left: left,
+        right: right
+      };
+      if (lastLeftField) {
+        offsets[lastLeftField].isEdge = true;
+      }
+      if (lastRightField) {
+        offsets[lastRightField].isEdge = true;
+      }
+      return offsets;
+    });
+    /**
+     * Where a column is pinned this render, if at all.
+     * @param {object} column column definition
+     * @returns {object|undefined} { side, offset, isEdge }
+     */
+    (0, _defineProperty2["default"])(_this, "getPinnedPlacement", function (column) {
+      if (!column || !_this.pinnedOffsets) {
+        return undefined;
+      }
+      return _this.pinnedOffsets[column.field];
+    });
+    /**
+     * Width and freeze styles for a header/body cell
+     * @param {object} column column definition
+     * @returns {object|undefined} style object, or undefined when unsized
+     */
+    (0, _defineProperty2["default"])(_this, "getColumnStyle", function (column) {
+      var width = _this.getColumnWidth(column);
+      var pinned = _this.getPinnedPlacement(column);
+      if (!width && !pinned) {
+        return undefined;
+      }
+      var style = width ? {
+        width: width,
+        minWidth: width,
+        maxWidth: width
+      } : {};
+      if (pinned) {
+        style.position = "sticky";
+        style[pinned.side] = "".concat(pinned.offset, "px");
+      }
+      return style;
+    });
+    /**
+     * Class names for a header/body cell.
+     * @param {object} column column definition
+     * @param {string} base class name the cell carries regardless
+     * @returns {string|undefined} the full class name
+     */
+    (0, _defineProperty2["default"])(_this, "getColumnClassName", function (column, base) {
+      var pinned = _this.getPinnedPlacement(column);
+      if (!pinned) {
+        return base;
+      }
+      var classes = [base, "pinned-column", "pinned-".concat(pinned.side)];
+      if (pinned.isEdge) {
+        classes.push("pinned-".concat(pinned.side, "-edge"));
+      }
+      return classes.filter(Boolean).join(" ");
+    });
+    /**
+     * Live feedback during a drag. Held locally so the store is not written on
+     * every animation frame.
+     * @param {string} field field of the column being resized
+     * @param {number} width new width in px
+     */
+    (0, _defineProperty2["default"])(_this, "handleColumnResize", function (field, width) {
+      _this.setState(function (prevState) {
+        return {
+          columnWidths: _objectSpread(_objectSpread({}, prevState.columnWidths), {}, (0, _defineProperty2["default"])({}, field, width))
+        };
+      });
+    });
+    /**
+     * Drag finished - hand the final width up so the container can persist it.
+     * The local override is kept until props echo the same value back.
+     * @param {string} field field of the column being resized
+     * @param {number} width final width in px
+     */
+    (0, _defineProperty2["default"])(_this, "handleColumnResizeEnd", function (field, width) {
+      _this.setState(function (prevState) {
+        return {
+          columnWidths: _objectSpread(_objectSpread({}, prevState.columnWidths), {}, (0, _defineProperty2["default"])({}, field, width))
+        };
+      }, function () {
+        if (_this.props.onColumnResize) {
+          _this.props.onColumnResize(field, width);
+        }
+      });
+    });
+    /**
+     * Drops local overrides that props have caught up with, so the incoming
+     * column definitions stay the source of truth after a resize round-trip.
+     * @param {array} columns freshly derived column definitions
+     * @returns {object} the next columnWidths map
+     */
+    (0, _defineProperty2["default"])(_this, "reconcileColumnWidths", function (columns) {
+      var columnWidths = _this.state.columnWidths;
+      if (Object.keys(columnWidths).length === 0) {
+        return columnWidths;
+      }
+      var next = _objectSpread({}, columnWidths);
+      var changed = false;
+      columns.forEach(function (column) {
+        if (next[column.field] !== undefined && toPxNumber(column.width) === next[column.field]) {
+          delete next[column.field];
+          changed = true;
+        }
+      });
+      return changed ? next : columnWidths;
+    });
+    /**
+     * Pins the table to the exact sum of its column widths while resizing is on.
+     * @returns {object|undefined} style object, or undefined to keep the default
+     */
+    (0, _defineProperty2["default"])(_this, "getTableStyle", function () {
+      var total = _this.getVisibleColumnsWidth();
+      if (total === undefined) {
+        return undefined;
+      }
+      if (_this.hasTableSlack()) {
+        return {
+          width: "100%"
+        };
+      }
+      return {
+        width: "".concat(total, "px")
+      };
+    });
+    /**
+     * Total px width of the visible columns.
+     * @returns {number|undefined} the sum, or undefined when it cannot be known
+     */
+    (0, _defineProperty2["default"])(_this, "getVisibleColumnsWidth", function () {
+      if (!_this.props.resizableColumns) {
+        return undefined;
+      }
+      var visibleColumns = _this.getVisibleColumns();
+      if (visibleColumns.length === 0) {
+        return undefined;
+      }
+      var total = 0;
+      for (var i = 0; i < visibleColumns.length; i += 1) {
+        var width = toPxNumber(_this.getColumnWidth(visibleColumns[i]));
+        if (width === undefined) {
+          return undefined;
+        }
+        total += width;
+      }
+      return total;
+    });
+    /**
+     * Whether the columns leave empty space to the right of the table.
+     * @returns {boolean} true when a filler column is needed
+     */
+    /**
+     * Position of the filler column
+     * @returns {number} index into defaultShowColumns, or -1 when unneeded
+     */
+    (0, _defineProperty2["default"])(_this, "renderFillerCell", function (key) {
+      return /*#__PURE__*/_react["default"].createElement(Table.Cell, {
+        className: "table-cell filler-cell",
+        theme: _this.props.theme,
+        key: key,
+        maxWidth: "none",
+        column: {}
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "getFillerIndex", function () {
+      if (!_this.hasTableSlack()) {
+        return -1;
+      }
+      var columns = _this.defaultShowColumns || [];
+      for (var i = 0; i < columns.length; i += 1) {
+        var placement = _this.getPinnedPlacement(columns[i]);
+        if (placement && placement.side === "right") {
+          return i;
+        }
+      }
+      return columns.length;
+    });
+    (0, _defineProperty2["default"])(_this, "hasTableSlack", function () {
+      var viewportWidth = _this.state.viewportWidth;
+      if (!viewportWidth) {
+        return false;
+      }
+      var total = _this.getVisibleColumnsWidth();
+      return total !== undefined && total < viewportWidth;
+    });
+    (0, _defineProperty2["default"])(_this, "getColumnResizeProps", function () {
+      return {
+        resizableColumns: _this.props.resizableColumns,
+        getColumnWidth: _this.getColumnWidth,
+        getColumnStyle: _this.getColumnStyle,
+        getColumnClassName: _this.getColumnClassName,
+        getPinnedPlacement: _this.getPinnedPlacement,
+        onColumnResize: _this.handleColumnResize,
+        onColumnResizeEnd: _this.handleColumnResizeEnd
+      };
+    });
+    _this.tableElementRef = /*#__PURE__*/_react["default"].createRef();
+    _this.scrollProxyRef = /*#__PURE__*/_react["default"].createRef();
     _this.columns = _this.getColumns(props);
     var spiltColumns = _this.spiltColumns();
     _this.state = {
@@ -638,12 +1054,21 @@ var Table = /*#__PURE__*/function (_Component) {
       isAllRowsSelected: false,
       searchedText: props.searchValue || "",
       commonActionsSelected: [],
-      ingestedDbIdArray: []
+      ingestedDbIdArray: [],
+      columnWidths: {},
+      viewportWidth: null,
+      scrollContentWidth: null
     };
     return _this;
   }
   (0, _inherits2["default"])(Table, _Component);
   return (0, _createClass2["default"])(Table, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.syncScrollContainer();
+      window.addEventListener("resize", this.measureScrollContainer);
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       if (prevState.items !== this.state.items) {
@@ -675,18 +1100,42 @@ var Table = /*#__PURE__*/function (_Component) {
           showColumnArr: spiltColumns.showColumnArr ? spiltColumns.showColumnArr : []
         });
       }
+      this.syncScrollContainer();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.nestedCloseTimer);
+      window.removeEventListener("resize", this.measureScrollContainer);
+      if (this.scrollContainer) {
+        this.scrollContainer.removeEventListener("scroll", this.handleCardScroll);
+        this.scrollContainer = null;
+      }
+      if (this.scrollObserver) {
+        this.scrollObserver.disconnect();
+        this.scrollObserver = null;
+      }
     }
   }, {
     key: "toggleExtraDetails",
     value: function toggleExtraDetails(e, idx) {
+      var _this2 = this;
+      clearTimeout(this.nestedCloseTimer);
       if (this.state.showExtraRow !== idx) {
         this.setState({
-          showExtraRow: idx
+          showExtraRow: idx,
+          closingExtraRow: null
         });
       } else {
         this.setState({
-          showExtraRow: null
+          showExtraRow: null,
+          closingExtraRow: idx
         });
+        this.nestedCloseTimer = setTimeout(function () {
+          _this2.setState({
+            closingExtraRow: null
+          });
+        }, NESTED_REVEAL_MS);
       }
       this.props.onToggleExtraDetails(e, idx);
     }
@@ -698,13 +1147,17 @@ var Table = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(newProps) {
+      clearTimeout(this.nestedCloseTimer);
       this.setState({
-        showExtraRow: null
+        showExtraRow: null,
+        closingExtraRow: null
       });
       this.columns = this.getColumns(newProps);
+      var columnWidths = this.reconcileColumnWidths(this.columns);
       var spiltColumns = this.spiltColumns();
       var updatedData = this.applyRowChecked(this.state.items, newProps.items);
       this.setState({
+        columnWidths: columnWidths,
         defaultShowColumns: spiltColumns.defaultShowColumns,
         extraColumns: spiltColumns.extraColumns,
         nestedTable: spiltColumns.nestedTable,
@@ -787,7 +1240,7 @@ var Table = /*#__PURE__*/function (_Component) {
   }, {
     key: "execute",
     value: function execute(allChecked) {
-      var _this2 = this;
+      var _this3 = this;
       if (allChecked) {
         this.state.items.map(function (itemSelectedRows, i) {
           itemSelectedRows.rowChecked = true;
@@ -798,7 +1251,7 @@ var Table = /*#__PURE__*/function (_Component) {
         });
         var commonActions = this.findCommon(this.state.items);
         var commonDisplayActions = commonActions.filter(function (value) {
-          return _this2.props.dashboard_common_actions.includes(value);
+          return _this3.props.dashboard_common_actions.includes(value);
         });
         var n = this.state.items.length;
         var numberArray = [];
@@ -931,7 +1384,7 @@ var Table = /*#__PURE__*/function (_Component) {
   }, {
     key: "allRowCheckChange",
     value: function allRowCheckChange(e, value) {
-      var _this3 = this;
+      var _this4 = this;
       /*
        * var table = e.target.parentNode.parentNode.parentNode.parentNode.parentNode
        * console.log(table );
@@ -955,13 +1408,13 @@ var Table = /*#__PURE__*/function (_Component) {
         });
         this.setState(function (prevState) {
           return {
-            selectedRows: _this3.props.items.map(function (item, idx) {
+            selectedRows: _this4.props.items.map(function (item, idx) {
               return idx;
             }),
             isAllRowsSelected: true
           };
         }, function () {
-          _this3.props.rowSelectionChange(_this3.state.selectedRows);
+          _this4.props.rowSelectionChange(_this4.state.selectedRows);
         });
       } else {
         /*
@@ -983,7 +1436,7 @@ var Table = /*#__PURE__*/function (_Component) {
             isAllRowsSelected: false
           };
         }, function () {
-          _this3.props.rowSelectionChange(_this3.state.selectedRows);
+          _this4.props.rowSelectionChange(_this4.state.selectedRows);
         });
       }
     }
@@ -1049,19 +1502,25 @@ var Table = /*#__PURE__*/function (_Component) {
       } else {
         if (this.state.items.length == 0) {
           if (this.props.tableLoading === false) {
-            return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Table.Element, this.props, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+            return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Table.Element, (0, _extends2["default"])({}, this.props, {
+              style: this.getTableStyle()
+            }), /*#__PURE__*/_react["default"].createElement(Table.Header, (0, _extends2["default"])({
               theme: this.props.theme,
               columns: this.defaultShowColumns,
               selectedColumns: this.state.showColumnArr,
-              onSort: this.props.onSort
-            })), /*#__PURE__*/_react["default"].createElement(_TableErrorScreen["default"], null));
+              onSort: this.props.onSort,
+              fillerColumnIndex: this.getFillerIndex()
+            }, this.getColumnResizeProps()))), /*#__PURE__*/_react["default"].createElement(_TableErrorScreen["default"], null));
           } else {
-            return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Table.Element, this.props, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+            return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Table.Element, (0, _extends2["default"])({}, this.props, {
+              style: this.getTableStyle()
+            }), /*#__PURE__*/_react["default"].createElement(Table.Header, (0, _extends2["default"])({
               theme: this.props.theme,
               columns: this.defaultShowColumns,
               selectedColumns: this.state.showColumnArr,
-              onSort: this.props.onSort
-            })), /*#__PURE__*/_react["default"].createElement("div", {
+              onSort: this.props.onSort,
+              fillerColumnIndex: this.getFillerIndex()
+            }, this.getColumnResizeProps()))), /*#__PURE__*/_react["default"].createElement("div", {
               style: {
                 padding: "10px"
               }
@@ -1073,7 +1532,7 @@ var Table = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
       var _this$props3 = this.props,
         theme = _this$props3.theme,
         refreshDashboard = _this$props3.refreshDashboard,
@@ -1094,82 +1553,84 @@ var Table = /*#__PURE__*/function (_Component) {
         nestedTable = _this$state2.nestedTable,
         searchedText = _this$state2.searchedText,
         items = _this$state2.items;
+      this.pinnedOffsets = this.getPinnedOffsets();
+      var fillerIndex = this.getFillerIndex();
+      var hasSlack = fillerIndex > -1;
+      var _this$state3 = this.state,
+        viewportWidth = _this$state3.viewportWidth,
+        scrollContentWidth = _this$state3.scrollContentWidth;
+      var frozenLeft = this.frozenWidths ? this.frozenWidths.left : 0;
+      var frozenRight = this.frozenWidths ? this.frozenWidths.right : 0;
+      var showScrollProxy = !!(viewportWidth && scrollContentWidth && scrollContentWidth > viewportWidth);
+      var proxyWidth = Math.max(viewportWidth - frozenLeft - frozenRight, 0);
+      var proxyContentWidth = Math.max(scrollContentWidth - frozenLeft - frozenRight, 0);
       var rows = this.state.items.map(function (item, index) {
         return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
           key: index
         }, /*#__PURE__*/_react["default"].createElement(Table.Row, {
-          theme: _this4.props.theme,
+          theme: _this5.props.theme,
           key: index,
           className: item.rowChecked ? "selected-row " + (item._divider_ ? "divider-row" : "") : item._divider_ ? "divider-row" : ""
-        }, _this4.defaultShowColumns.map(function (column) {
-          var cellRenderer = column.children || _this4.defaultCellRenderer;
-          if (_this4.state.showColumnArr.indexOf(column.field) > -1) {
-            return /*#__PURE__*/_react["default"].createElement(Table.Cell, {
-              className: "table-cell",
-              theme: _this4.props.theme,
-              key: index + column.title + Math.random(),
+        }, _this5.defaultShowColumns.map(function (column, columnIndex) {
+          var cellRenderer = column.children || _this5.defaultCellRenderer;
+          var filler = columnIndex === fillerIndex ? _this5.renderFillerCell("".concat(index, "-filler")) : null;
+          if (_this5.state.showColumnArr.indexOf(column.field) > -1) {
+            return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+              key: index + "-" + column.title
+            }, filler, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
+              className: _this5.getColumnClassName(column, "table-cell"),
+              theme: _this5.props.theme,
               maxWidth: column.maxWidth,
               column: {
                 column: column,
-                width: column.field === "extra_columns" ? "40px" : "auto"
-              }
-            }, cellRenderer(item, column, index));
+                width: _this5.getColumnWidth(column)
+              },
+              style: _this5.getColumnStyle(column)
+            }, cellRenderer(item, column, index)));
           }
-        })), _this4.state.showExtraRow === index ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
-          theme: _this4.props.theme,
+          return filler;
+        }), fillerIndex >= _this5.defaultShowColumns.length && _this5.renderFillerCell("".concat(index, "-filler-end"))), (_this5.state.showExtraRow === index || _this5.state.closingExtraRow === index) && _this5.hasNestedRows(item) ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
+          theme: _this5.props.theme,
           key: "row-" + index + "extra"
         }, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
           className: "table-inner-cell",
-          theme: _this4.props.theme,
+          theme: _this5.props.theme,
           column: {},
-          colSpan: _this4.props.maxShowNoOfColumns + 1
+          maxWidth: "none",
+          colSpan: _this5.defaultShowColumns.length + (hasSlack ? 1 : 0)
           // className="tableHolder"
-        }, nestedTable.length > 0 && nestedTable[0] && nestedTable[0].field && item && item[nestedTable[0].field] && item[nestedTable[0].field].rows && item[nestedTable[0].field].rows.length > 0 ? /*#__PURE__*/_react["default"].createElement(Table.Card, {
-          theme: _this4.props.theme,
+        }, /*#__PURE__*/_react["default"].createElement(NestedRowReveal, {
+          open: _this5.state.showExtraRow === index
+        }, _this5.hasNestedRows(item) ? /*#__PURE__*/_react["default"].createElement(NestedTableHolder, {
+          className: "nested-table-holder",
+          style: _this5.state.viewportWidth ? {
+            width: "".concat(_this5.state.viewportWidth, "px")
+          } : undefined
+        }, /*#__PURE__*/_react["default"].createElement(Table.Card, {
+          theme: _this5.props.theme,
           width: "100%"
         }, /*#__PURE__*/_react["default"].createElement(TableInner.Element, {
-          theme: _this4.props.theme,
+          theme: _this5.props.theme,
           className: "nested-table"
         }, /*#__PURE__*/_react["default"].createElement(Table.Header, {
-          theme: _this4.props.theme,
+          theme: _this5.props.theme,
           columns: item[nestedTable[0].field].column_elements,
           selectedColumns: item[nestedTable[0].field].column_elements.map(function (column) {
             return column.field;
           })
         }), item[nestedTable[0].field].rows.map(function (element, i) {
           return /*#__PURE__*/_react["default"].createElement(Table.Body, {
-            theme: _this4.props.theme,
+            theme: _this5.props.theme,
             key: "nested-table-".concat(i)
           }, /*#__PURE__*/_react["default"].createElement("tr", null, item[nestedTable[0].field].column_elements.map(function (inner) {
-            var cellRenderer = inner.children || _this4.defaultCellRenderer;
+            var cellRenderer = inner.children || _this5.defaultCellRenderer;
             return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
-              theme: _this4.props.theme,
+              theme: _this5.props.theme,
               key: inner.title + "n",
               column: inner
             }, cellRenderer(element, inner, i));
           })));
-        }))) : null, /*#__PURE__*/_react["default"].createElement(Table.Card, (0, _extends2["default"])({}, _this4.props, {
-          width: "100%"
-        }), /*#__PURE__*/_react["default"].createElement(TableInner.Element, _this4.props, /*#__PURE__*/_react["default"].createElement(Table.Header, {
-          theme: _this4.props.theme,
-          columns: _this4.extraColumns,
-          selectedColumns: _this4.extraColumns.map(function (column) {
-            return column.field;
-          })
-          // displayAs="extraDetails"
-          ,
-          onSort: _this4.props.onSort
-        }), /*#__PURE__*/_react["default"].createElement(Table.Body, null, /*#__PURE__*/_react["default"].createElement(Table.Row, {
-          theme: _this4.props.theme,
-          key: "row-" + index + "child"
-        }, _this4.extraColumns.map(function (column) {
-          var cellRenderer = column.children || _this4.defaultCellRenderer;
-          return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
-            theme: _this4.props.theme,
-            key: column.title + "c",
-            column: column
-          }, cellRenderer(item, column, index));
-        }))))))) : null);
+        })))) : null))) : null);
       });
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showTableHeader && /*#__PURE__*/_react["default"].createElement(Table.Title, {
         style: {
@@ -1201,13 +1662,13 @@ var Table = /*#__PURE__*/function (_Component) {
         label: "Search",
         value: searchedText,
         onChange: function onChange(e) {
-          _this4.props.tableLoadingActionFunc(true);
-          _this4.handleInputChange(e.target.value);
+          _this5.props.tableLoadingActionFunc(true);
+          _this5.handleInputChange(e.target.value);
         }
       }), searchedText && searchedText.length && /*#__PURE__*/_react["default"].createElement("span", {
         className: "close-icon-wrapper",
         onClick: function onClick() {
-          return _this4.tableOperation("clearInput");
+          return _this5.tableOperation("clearInput");
         }
       }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
         theme: this.props.theme,
@@ -1252,7 +1713,7 @@ var Table = /*#__PURE__*/function (_Component) {
       }), (!tableLoading || tableLoadingAction) && /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isRefreshActivated ? "refresh-btn active" : "refresh-btn"),
         onClick: function onClick() {
-          return _this4.tableOperation("refresh");
+          return _this5.tableOperation("refresh");
         }
       }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
         theme: this.props.theme,
@@ -1326,20 +1787,20 @@ var Table = /*#__PURE__*/function (_Component) {
         name: "example2",
         type: "label",
         onChange: function onChange(e) {
-          _this4.showCloumnCheckChange(e.target.value, e.target.checked);
+          _this5.showCloumnCheckChange(e.target.value, e.target.checked);
         },
         align: "horizontal",
         selected: this.state.showColumnArr ? this.state.showColumnArr : []
       }, this.columns ? this.columns.map(function (item) {
         return /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
-          theme: _this4.props.theme,
+          theme: _this5.props.theme,
           value: item.field
         }, item.title);
       }) : null)))))))), rows.length && this.state.showColumnArr[0] === "rowChecked" && this.props.selectAllRows && !tableLoading ? /*#__PURE__*/_react["default"].createElement(SelectAllButton, {
         theme: this.props.theme,
         isActive: !this.state.isAllRowsSelected,
         onClick: function onClick(e) {
-          _this4.execute(!_this4.state.isAllRowsSelected);
+          _this5.execute(!_this5.state.isAllRowsSelected);
         }
       }, /*#__PURE__*/_react["default"].createElement("input", {
         className: "input-select-all-button",
@@ -1349,43 +1810,45 @@ var Table = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: "span-select-all-button"
       }))) : null, /*#__PURE__*/_react["default"].createElement(Table.Card, (0, _extends2["default"])({
-        theme: this.props.theme,
-        className: "table-card"
+        theme: this.props.theme
       }, this.props, {
+        className: "table-card ".concat(this.props.className || ""),
         width: "100%",
         radius: 2
-      }), this.state.commonActionsSelected.length > 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Table.SelectedAction, {
+      }), this.state.commonActionsSelected.length > 0 ? /*#__PURE__*/_react["default"].createElement(SelectedActionRail, {
+        className: "selected-action-rail"
+      }, /*#__PURE__*/_react["default"].createElement(Table.SelectedAction, {
         theme: this.props.theme,
         className: this.state.selectedRows.length > 0 && this.state.commonActionsSelected.length > 0 ? "selectedAction show" : "selectedAction"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "action-icons-common"
       }, this.state.commonActionsSelected.map(function (item, idx) {
         return item !== "play" ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
-          theme: _this4.props.theme,
+          theme: _this5.props.theme,
           className: "action-button " + (item === "play" ? "play" : "default"),
           key: idx,
           onClick: function onClick(e) {
-            if (_this4.props.commonActionClickHandler) {
+            if (_this5.props.commonActionClickHandler) {
               if (item !== 'restore') {
                 items.map(function (ele) {
                   return ele.rowChecked = false;
                 });
               }
-              _this4.setState(_objectSpread(_objectSpread({}, _this4.state), {}, {
-                ingestedDbIdArray: _this4.props.bulkRestoreAllowed ? _this4.state.selectedRows.map(function (index) {
-                  var _this4$state$items$in;
-                  return (_this4$state$items$in = _this4.state.items[index]) === null || _this4$state$items$in === void 0 ? void 0 : _this4$state$items$in.ingest_db_id;
+              _this5.setState(_objectSpread(_objectSpread({}, _this5.state), {}, {
+                ingestedDbIdArray: _this5.props.bulkRestoreAllowed ? _this5.state.selectedRows.map(function (index) {
+                  var _this5$state$items$in;
+                  return (_this5$state$items$in = _this5.state.items[index]) === null || _this5$state$items$in === void 0 ? void 0 : _this5$state$items$in.ingest_db_id;
                 }) : [],
                 isAllRowsSelected: false,
-                commonActionsSelected: _this4.props.bulkRestoreAllowed ? _this4.state.commonActionsSelected : [],
-                selectedRows: _this4.props.bulkRestoreAllowed ? _this4.state.selectedRows : []
+                commonActionsSelected: _this5.props.bulkRestoreAllowed ? _this5.state.commonActionsSelected : [],
+                selectedRows: _this5.props.bulkRestoreAllowed ? _this5.state.selectedRows : []
               }));
               switch (item) {
                 case 'restore':
-                  _this4.props.actionClickHandler('restoreCommon', _this4.state.ingestedDbIdArray);
+                  _this5.props.actionClickHandler('restoreCommon', _this5.state.ingestedDbIdArray);
                   break;
                 default:
-                  _this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray, "common-action");
+                  _this5.props.commonActionClickHandler(item, e, _this5.state.ingestedDbIdArray, "common-action");
                   break;
               }
             } else {
@@ -1397,16 +1860,33 @@ var Table = /*#__PURE__*/function (_Component) {
           icon: _permissionIconMap["default"][item],
           iconWidth: 10,
           iconHeight: 10,
-          label: _this4.props.actionLable && _this4.props.actionLable[item] ? _this4.props.actionLable[item] : item,
+          label: _this5.props.actionLable && _this5.props.actionLable[item] ? _this5.props.actionLable[item] : item,
           width: 24,
           height: 24
         }) : null;
-      })))) : null, rows.length ? /*#__PURE__*/_react["default"].createElement(Table.Element, this.props, /*#__PURE__*/_react["default"].createElement(Table.Header, {
+      })))) : null, rows.length ? /*#__PURE__*/_react["default"].createElement(Table.Element, (0, _extends2["default"])({}, this.props, {
+        ref: this.tableElementRef,
+        style: this.getTableStyle()
+      }), /*#__PURE__*/_react["default"].createElement(Table.Header, (0, _extends2["default"])({
         theme: this.props.theme,
-        columns: this.defaultShowColumns,
+        columns: this.defaultShowColumns
+      }, this.getColumnResizeProps(), {
+        fillerColumnIndex: fillerIndex,
         selectedColumns: !tableLoading || tableLoading && tableLoadingAction ? this.state.showColumnArr : [],
         onSort: this.props.onSort
-      }), /*#__PURE__*/_react["default"].createElement(Table.Body, null, rows)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.returnTableStatus())));
+      })), /*#__PURE__*/_react["default"].createElement(Table.Body, null, rows)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, this.returnTableStatus()), showScrollProxy && /*#__PURE__*/_react["default"].createElement(ScrollProxy, {
+        className: "table-scroll-proxy",
+        ref: this.scrollProxyRef,
+        onScroll: this.handleProxyScroll,
+        style: {
+          left: "".concat(frozenLeft, "px"),
+          width: "".concat(proxyWidth, "px")
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: "".concat(proxyContentWidth, "px")
+        }
+      }))));
     }
   }]);
 }(_react.Component);
@@ -1416,17 +1896,18 @@ var SearchContainer = _styledComponents["default"].div(_templateObject || (_temp
 var AvatarBox = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  & .avatar-details {\n    display: none;\n  }\n\n  .initial-placeholder {\n    background: #78909c;\n    width: 24px;\n    height: 24px;\n    text-align: center;\n    border-radius: 100%;\n    font-size: 12px;\n    color: #fff;\n  }\n"])));
 var EditableColumn = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  background-color: #121d28;\n  border: 1px solid #121d28;\n  padding: 7px;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n\n  &:hover {\n    svg path {\n      fill: white;\n    }\n    .tooltip {\n      display: flex;\n    }\n  }\n"])));
 var Tooltip = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: -35px; /* Adjust if needed */\n  left: 50%;\n  transform: translateX(-50%);\n  display: none;\n  width: max-content;\n  height: 25px;\n  padding: 5px 10px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n  background-color: #ffffff;\n  color: #0c141d;\n  font-family: \"SFUIText-Regular\";\n  font-size: 12px;\n  border-radius: 4px;\n  z-index: 999;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    bottom: -6px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-top: 6px dashed #ffffff;\n    border-right: 6px solid transparent;\n    border-left: 6px solid transparent;\n  }\n"])));
-Table.SelectedAction = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n\n  position: absolute;\n  top: 0;\n  left: 55px;\n  width: 0px;\n  overflow: hidden;\n  transition: all 0.4s ease;\n  height: 38px;\n  background: ", ";//#ccc;\n  display: flex;\n  align-items: center;\n  &.show{\n    width: 146px;\n    overflow: visible;\n  }\n\n  div.action-icons-common{\n    white-space: nowrap;\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .tooltip-container{\n      display: inline-block;\n      margin: 0px 5px;\n    }\n\n    .action-button{\n      // padding: 0px;\n      // border-radius: 50%;\n      // -webkit-appearance: none;\n      // cursor:pointer;\n      // align-items: center;\n      // justify-content: center;\n      // height: 25px;\n      // width: 25px;\n\n      &.default{\n        //background: #666666;\n        //border:1px solid #666666;\n        &:hover{\n          //background: #8e8e8e;\n          //border:1px solid #8e8e8e;\n        }\n      }\n      &.play{\n        background:  ", ";\n        border:1px solid ", ";\n        &:hover{\n          background: #39cac2;\n          border:1px solid #39cac2;\n        }\n      }\n    }\n\n"])), function (props) {
+var SelectedActionRail = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  width: 0;\n  height: 0;\n"])));
+Table.SelectedAction = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n\n  position: absolute;\n  top: 0;\n  left: 55px;\n  width: 0px;\n  overflow: hidden;\n  transition: all 0.4s ease;\n  height: 38px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  &.show{\n    width: 146px;\n    overflow: visible;\n  }\n\n  div.action-icons-common{\n    display: flex;\n    align-items: center;\n    position: relative;\n    top: -2px;\n    white-space: nowrap;\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .tooltip-container{\n      display: inline-block;\n      margin: 0px 5px;\n    }\n\n    .action-button{\n      // padding: 0px;\n      // border-radius: 50%;\n      // -webkit-appearance: none;\n      // cursor:pointer;\n      // align-items: center;\n      // justify-content: center;\n      // height: 25px;\n      // width: 25px;\n\n      &.default{\n        //background: #666666;\n        //border:1px solid #666666;\n        &:hover{\n          //background: #8e8e8e;\n          //border:1px solid #8e8e8e;\n        }\n      }\n      &.play{\n        background:  ", ";\n        border:1px solid ", ";\n        &:hover{\n          background: #39cac2;\n          border:1px solid #39cac2;\n        }\n      }\n    }\n\n"])), function (props) {
   return _tokens.colors[props.theme].table.background;
 }, function (props) {
   return _tokens.colors[props.theme].table.otherThemeShade;
 }, function (props) {
   return _tokens.colors[props.theme].table.otherThemeShade;
 });
-Table.Card = (0, _styledComponents["default"])(_card["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  // overflow-x: auto;\n  // overflow-y: hidden;\n  margin: 10px 0;\n  /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n  position:relative\n\n  ", "\n\ninput[type='checkbox']{ height: 0; width: 0; display:none;}\n\ninput[type='checkbox'] + label{\n  position: relative;\n  display: flex;\n  margin:0;\n  align-items: center;\n  color: #9e9e9e;\n  transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox'] + label > span{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: 1px solid #9E9E9E;\n  border-radius: 50%;\n  cursor: pointer;  \n  transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type='checkbox'] + label:hover > span,\ninput[type='checkbox']:focus + label > span{\n  background: rgba(255,255,255,.1);\n}\n\ninput[type='checkbox']:checked + label > span{\n  border: 10px solid #49dad0\n  animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox']:checked + label > span:before{\n  content: \"\";\n  position: absolute;\n  top: 6px;\n  left: 4px;\n  border-right: 2px solid transparent;\n  border-bottom: 2px solid transparent;\n  transform: rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n  0%{\n    transform: scale(1);\n  }\n  33%{    \n    transform: scale(.85);\n  }\n  100%{\n    transform: scale(1);    \n  }\n}\n@keyframes checkbox-check{\n  0%{\n    width: 0;\n    height: 0;\n    border-color: #FFF;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  33%{\n    width: 4px;\n    height: 0;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  100%{    \n    width: 4px;\n    height: 9px;    \n    border-color: #FFF;\n    transform: translate3d(0,-.5em,0) rotate(45deg);\n  }\n}\n  \n"])), function (props) {
+Table.Card = (0, _styledComponents["default"])(_card["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;\n  &.table-card {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  &.table-card::-webkit-scrollbar {\n    display: none;\n  }\n  // overflow-y: hidden;\n  margin: 10px 0;\n  /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n  position:relative\n\n  ", "\n\ninput[type='checkbox']{ height: 0; width: 0; display:none;}\n\ninput[type='checkbox'] + label{\n  position: relative;\n  display: flex;\n  margin:0;\n  align-items: center;\n  color: #9e9e9e;\n  transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox'] + label > span{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: 1px solid #9E9E9E;\n  border-radius: 50%;\n  cursor: pointer;  \n  transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type='checkbox'] + label:hover > span,\ninput[type='checkbox']:focus + label > span{\n  background: rgba(255,255,255,.1);\n}\n\ninput[type='checkbox']:checked + label > span{\n  border: 10px solid #49dad0\n  animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox']:checked + label > span:before{\n  content: \"\";\n  position: absolute;\n  top: 6px;\n  left: 4px;\n  border-right: 2px solid transparent;\n  border-bottom: 2px solid transparent;\n  transform: rotate(45deg);\n  transform-origin: 0% 100%;\n  animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n  0%{\n    transform: scale(1);\n  }\n  33%{    \n    transform: scale(.85);\n  }\n  100%{\n    transform: scale(1);    \n  }\n}\n@keyframes checkbox-check{\n  0%{\n    width: 0;\n    height: 0;\n    border-color: #FFF;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  33%{\n    width: 4px;\n    height: 0;\n    transform: translate3d(0,0,0) rotate(45deg);\n  }\n  100%{    \n    width: 4px;\n    height: 9px;    \n    border-color: #FFF;\n    transform: translate3d(0,-.5em,0) rotate(45deg);\n  }\n}\n  \n"])), function (props) {
   // console.log(props.theme);
 });
-Table.Title = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  .table-title {\n    font-family: 'SFUIText-Medium';\n    font-size: 18px;\n    letter-spacing: 0.3px;\n    color: ", ";\n  }\n  .title-right-area {\n    display: flex;\n    align-items: center;\n    & > div {\n      margin-left: 10px;\n    }\n\n    .refresh-section {\n      position: relative;\n\n      @keyframes glowing {\n        0% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        15% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        30% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        45% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        60% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        75% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        90% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        100% {\n          box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n        }\n      }\n\n      .red-dot {\n        position: absolute;\n        top: 0;\n        right 0;\n        width: 16px\n        height: 16px;\n        border-radius: 100%;\n        background-color: rgba(255, 108, 86, 0.1);\n        &:after {\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 6px;\n          height: 6px;\n          background-color: #FF6C56;\n          border-radius: 100%;\n          transform: translate(-50%, -50%);\n        }\n        \n      }\n\n      .tooltip {\n        font-family: 'SFUIText-Regular';\n        font-size: 12px;\n        top: -38px;\n        right: -66px;\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        width: 170px;\n        background-color: ", ";\n        color: #0c141d;\n        border-radius: 20px;\n        padding: 10px 5px;\n        &:after {\n          content: '';\n          border-top: 6px dashed ", ";\n          border-right: 6px solid transparent;\n          border-left: 6px solid transparent;\n          position: absolute;\n          bottom: -6px;\n          right: 76px;\n        }\n      }\n\n      .refresh-btn {\n        background-color: #121d28;\n        border: 1px solid #121d28;\n        padding: 7px;\n        border-radius: 50%;\n        cursor: pointer;\n\n        &:hover {\n          path {\n            fill: ", ";\n          }\n          cursor:  ", ";\n        }\n        \n        &.active {\n          background-color: ", ";\n          border-color: ", ";\n          transition: all 0.2s ease-in-out;\n          path {\n            transition: all 0.2s ease-in-out;\n            fill: #fff;\n          }\n        }\n\n        &.active {\n          animation: glowing 5000ms infinite;\n        }\n\n        > button {\n          border: none;\n          background-color: transparent;\n          position: relative;\n          path {\n            fill: #afb2ba;\n          }\n          cursor:  ", ";\n        }\n      }\n    }\n  }\n  .column-show-holder {\n    position: relative;\n    text-align: left;\n\n    .column-show-icon {\n      width: 30px;\n      height: 30px;\n      background: #121d28;\n      border-radius: 50%;\n      padding: 7px 7px;\n\n      &:hover {\n        path {\n          fill: #fff;\n          transition: all 0.4s ease-out;\n        }\n      }\n    }\n\n    .column-show-list-box {\n      position: absolute;\n      display: none;\n      //display:block;\n      width: 345px;\n      right: 0;\n      z-index: 101;\n      padding-top: 7px;\n      top: 29px;\n\n      & > div {\n        box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        /* left: 42%; */\n        /* top: 100%; */\n        width: 0;\n        height: 0;\n\n        border-left: 4px solid transparent;\n        border-right: 4px solid transparent;\n        border-bottom: 6px solid ", ";\n        transform: translate(327px, -6px);\n      }\n\n      .column-show-info {\n        background: #182738;\n        color: #afb2ba;\n        font-family: 'SFUIText-Regular';\n        padding: 15px;\n        font-size: 12px;\n        border-bottom: solid 1px #303f51;\n        line-height: 15px;\n        border-top-left-radius: 2px;\n        border-top-right-radius: 2px;\n        .column-show-info-header {\n          font-family: SFUIText-Medium;\n          font-size: 14px;\n          padding-bottom: 5px;\n        }\n      }\n\n      .column-show-list {\n        background: #182738;\n        color: #fff;\n        padding: 5px;\n        border-bottom-left-radius: 2px;\n        border-bottom-right-radius: 2px;\n        & .label {\n          margin-right: 0px;\n\n          & > input {\n            & ~ span {\n              color: #fff;\n              background: #303f51;\n              &:hover {\n                background: #303f51;\n                color: ", ";\n              }\n            }\n\n            &:checked ~ span {\n              background: ", ";\n              &:hover {\n                background: ", ";\n                color: #fff;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &:hover {\n      .column-show-list-box {\n        display: block;\n      }\n    }\n  }\n"])), function (props) {
+Table.Title = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 20px;\n  .table-title {\n    font-family: 'SFUIText-Medium';\n    font-size: 18px;\n    letter-spacing: 0.3px;\n    color: ", ";\n  }\n  .title-right-area {\n    display: flex;\n    align-items: center;\n    & > div {\n      margin-left: 10px;\n    }\n\n    .refresh-section {\n      position: relative;\n\n      @keyframes glowing {\n        0% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        15% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        30% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        45% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        60% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n        }\n        75% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        90% {\n          box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n        }\n        100% {\n          box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n        }\n      }\n\n      .red-dot {\n        position: absolute;\n        top: 0;\n        right 0;\n        width: 16px\n        height: 16px;\n        border-radius: 100%;\n        background-color: rgba(255, 108, 86, 0.1);\n        &:after {\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 6px;\n          height: 6px;\n          background-color: #FF6C56;\n          border-radius: 100%;\n          transform: translate(-50%, -50%);\n        }\n        \n      }\n\n      .tooltip {\n        font-family: 'SFUIText-Regular';\n        font-size: 12px;\n        top: -38px;\n        right: -66px;\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        width: 170px;\n        background-color: ", ";\n        color: #0c141d;\n        border-radius: 20px;\n        padding: 10px 5px;\n        &:after {\n          content: '';\n          border-top: 6px dashed ", ";\n          border-right: 6px solid transparent;\n          border-left: 6px solid transparent;\n          position: absolute;\n          bottom: -6px;\n          right: 76px;\n        }\n      }\n\n      .refresh-btn {\n        background-color: #121d28;\n        border: 1px solid #121d28;\n        padding: 7px;\n        border-radius: 50%;\n        cursor: pointer;\n\n        &:hover {\n          path {\n            fill: ", ";\n          }\n          cursor:  ", ";\n        }\n        \n        &.active {\n          background-color: ", ";\n          border-color: ", ";\n          transition: all 0.2s ease-in-out;\n          path {\n            transition: all 0.2s ease-in-out;\n            fill: #fff;\n          }\n        }\n\n        &.active {\n          animation: glowing 5000ms infinite;\n        }\n\n        > button {\n          border: none;\n          background-color: transparent;\n          position: relative;\n          path {\n            fill: #afb2ba;\n          }\n          cursor:  ", ";\n        }\n      }\n    }\n  }\n  .column-show-holder {\n    position: relative;\n    text-align: left;\n\n    .column-show-icon {\n      width: 30px;\n      height: 30px;\n      background: #121d28;\n      border-radius: 50%;\n      padding: 7px 7px;\n\n      &:hover {\n        path {\n          fill: #fff;\n          transition: all 0.4s ease-out;\n        }\n      }\n    }\n\n    .column-show-list-box {\n      position: absolute;\n      display: none;\n      //display:block;\n      width: 345px;\n      right: 0;\n      z-index: 101;\n      padding-top: 7px;\n      top: 29px;\n\n      & > div {\n        box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        /* left: 42%; */\n        /* top: 100%; */\n        width: 0;\n        height: 0;\n\n        border-left: 4px solid transparent;\n        border-right: 4px solid transparent;\n        border-bottom: 6px solid ", ";\n        transform: translate(327px, -6px);\n      }\n\n      .column-show-info {\n        background: #182738;\n        color: #afb2ba;\n        font-family: 'SFUIText-Regular';\n        padding: 15px;\n        font-size: 12px;\n        border-bottom: solid 1px #303f51;\n        line-height: 15px;\n        border-top-left-radius: 2px;\n        border-top-right-radius: 2px;\n        .column-show-info-header {\n          font-family: SFUIText-Medium;\n          font-size: 14px;\n          padding-bottom: 5px;\n        }\n      }\n\n      .column-show-list {\n        background: #182738;\n        color: #fff;\n        padding: 5px;\n        border-bottom-left-radius: 2px;\n        border-bottom-right-radius: 2px;\n        & .label {\n          margin-right: 0px;\n\n          & > input {\n            & ~ span {\n              color: #fff;\n              background: #303f51;\n              &:hover {\n                background: #303f51;\n                color: ", ";\n              }\n            }\n\n            &:checked ~ span {\n              background: ", ";\n              &:hover {\n                background: ", ";\n                color: #fff;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    &:hover {\n      .column-show-list-box {\n        display: block;\n      }\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.titleColor;
 }, function (props) {
   return _tokens.colors[props.theme].table.titleBackgroundColor;
@@ -1462,10 +1943,12 @@ Table.compare = {
     return String(row1[column.field]) - String(row2[column.field]);
   }
 };
-Table.Element = _styledComponents["default"].table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: collapse;\n"])));
+Table.Element = _styledComponents["default"].table(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: separate;\n  ", "\n"])), function (props) {
+  return props.resizableColumns ? "table-layout: fixed;" : "";
+});
 var TableInner = {};
-TableInner.Element = _styledComponents["default"].table(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: collapse;\n"])));
-TableInner.Cell = _styledComponents["default"].td(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"SFUIText-Regular\";\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ", ";\n  padding: 7px 14px;\n  border-top: 1px solid ", ";\n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: ", ";\n  max-width: ", ";\n\n  & > div.text-box {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    &.text-linkexpired {\n      color: #ff6c56;\n    }\n  }\n"])), function (props) {
+TableInner.Element = _styledComponents["default"].table(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  border-spacing: 0;\n  border-collapse: collapse;\n"])));
+TableInner.Cell = _styledComponents["default"].td(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"SFUIText-Regular\";\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ", ";\n  padding: 7px 14px;\n  border-top: 1px solid ", ";\n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: ", ";\n  max-width: ", ";\n\n  & > div.text-box {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    &.text-linkexpired {\n      color: #ff6c56;\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.InnerTdColor;
 }, function (props) {
   return _tokens.colors[props.theme].table.border;
@@ -1474,8 +1957,89 @@ TableInner.Cell = _styledComponents["default"].td(_templateObject0 || (_template
 }, function (props) {
   return props.maxWidth || "175px";
 });
-Table.Body = _styledComponents["default"].tbody(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2["default"])([""])));
-Table.Row = _styledComponents["default"].tr(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  .show-row {\n    transform: rotate(-180deg);\n    -webkit-transform: rotate(-180deg);\n    -moz-transform: rotate(-180deg);\n    -ms-transform: rotate(-180deg);\n    -o-transform: rotate(-180deg);\n  }\n  .hide-row {\n    transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -moz-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n  }\n  .show-row,\n  .hide-row {\n    transition: transform 0.5s ease-in-out;\n    -webkit-transition: transform 0.5s ease-in-out;\n    -moz-transition: transform 0.5s ease-in-out;\n    -ms-transition: transform 0.5s ease-in-out;\n    -o-transition: transform 0.5s ease-in-out;\n    text-align: right;\n    cursor: pointer;\n  }\n\n  &.selected-row > td,\n  &.selected-row:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:hover {\n    .asset-play {\n      color: ", ";\n    }\n  }\n\n  ", " {\n    margin: 0px;\n    box-shadow: 0px 0px 0px transparent;\n    ", ";\n  }\n"])), function (props) {
+var ExpandToggle = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  svg {\n    transform: rotate(0deg);\n    transform-origin: 50% 50%;\n    transition: transform 0.25s ease-in-out;\n  }\n\n  &.is-expanded svg {\n    transform: rotate(90deg);\n  }\n\n\n  @media (prefers-reduced-motion: reduce) {\n    svg {\n      transition: none;\n    }\n  }\n\n  path {\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: stroke 0.3s ease-out;\n  }\n\n  &:hover path {\n    stroke: #60bef8;\n  }\n"])));
+var NestedReveal = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  transition: height ", "ms ease,\n    opacity ", "ms ease;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n"])), NESTED_REVEAL_MS, NESTED_REVEAL_MS);
+var NestedRowReveal = /*#__PURE__*/function (_Component2) {
+  function NestedRowReveal(props) {
+    var _this6;
+    (0, _classCallCheck2["default"])(this, NestedRowReveal);
+    _this6 = _callSuper(this, NestedRowReveal, [props]);
+    (0, _defineProperty2["default"])(_this6, "currentHeight", function () {
+      var el = _this6.revealRef.current;
+      return el ? el.getBoundingClientRect().height : 0;
+    });
+    (0, _defineProperty2["default"])(_this6, "grow", function (from) {
+      var el = _this6.revealRef.current;
+      if (!el) {
+        return;
+      }
+      clearTimeout(_this6.releaseTimer);
+      el.style.overflow = "hidden";
+      el.style.height = "".concat(from, "px");
+      el.style.opacity = from > 0 ? "1" : "0";
+      el.getBoundingClientRect();
+      el.style.height = "".concat(el.scrollHeight, "px");
+      el.style.opacity = "1";
+      _this6.releaseTimer = setTimeout(function () {
+        var node = _this6.revealRef.current;
+        if (node) {
+          node.style.height = "auto";
+          node.style.overflow = "visible";
+        }
+      }, NESTED_REVEAL_MS);
+    });
+    (0, _defineProperty2["default"])(_this6, "shrink", function () {
+      var el = _this6.revealRef.current;
+      if (!el) {
+        return;
+      }
+      clearTimeout(_this6.releaseTimer);
+      el.style.overflow = "hidden";
+      el.style.height = "".concat(_this6.currentHeight(), "px");
+      el.getBoundingClientRect();
+      el.style.height = "0px";
+      el.style.opacity = "0";
+    });
+    _this6.revealRef = /*#__PURE__*/_react["default"].createRef();
+    return _this6;
+  }
+  (0, _inherits2["default"])(NestedRowReveal, _Component2);
+  return (0, _createClass2["default"])(NestedRowReveal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.grow(0);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.open === this.props.open) {
+        return;
+      }
+      if (this.props.open) {
+        this.grow(this.currentHeight());
+      } else {
+        this.shrink();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.releaseTimer);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement(NestedReveal, {
+        ref: this.revealRef,
+        className: "nested-reveal"
+      }, this.props.children);
+    }
+  }]);
+}(_react.Component);
+var NestedTableHolder = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  left: 0;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding: 7px 14px;\n"])));
+var ScrollProxy = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  bottom: 0;\n  z-index: 2;\n  overflow-x: auto;\n  overflow-y: hidden;\n  height: 10px;\n  scrollbar-width: thin;\n  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;\n\n  &::-webkit-scrollbar {\n    height: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: rgba(255, 255, 255, 0.22);\n    border-radius: 4px;\n  }\n\n  & > div {\n    height: 1px;\n  }\n"])));
+Table.Body = _styledComponents["default"].tbody(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])([""])));
+Table.Row = _styledComponents["default"].tr(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  .show-row {\n    transform: rotate(-180deg);\n    -webkit-transform: rotate(-180deg);\n    -moz-transform: rotate(-180deg);\n    -ms-transform: rotate(-180deg);\n    -o-transform: rotate(-180deg);\n  }\n  .hide-row {\n    transform: rotate(0deg);\n    -webkit-transform: rotate(0deg);\n    -moz-transform: rotate(0deg);\n    -ms-transform: rotate(0deg);\n    -o-transform: rotate(0deg);\n  }\n  .show-row,\n  .hide-row {\n    transition: transform 0.5s ease-in-out;\n    -webkit-transition: transform 0.5s ease-in-out;\n    -moz-transition: transform 0.5s ease-in-out;\n    -ms-transition: transform 0.5s ease-in-out;\n    -o-transition: transform 0.5s ease-in-out;\n    text-align: right;\n    cursor: pointer;\n  }\n\n  &.selected-row > td,\n  &.selected-row:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:nth-child(even) > td {\n    background: ", ";\n  }\n\n  &:hover {\n    .asset-play {\n      color: ", ";\n    }\n  }\n\n  ", " {\n    margin: 0px;\n    box-shadow: 0px 0px 0px transparent;\n    ", ";\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.rowSelectedBackground;
 }, function (props) {
   return _tokens.colors[props.theme].table.evenRowBackground;
@@ -1484,7 +2048,7 @@ Table.Row = _styledComponents["default"].tr(_templateObject10 || (_templateObjec
 }, Table.Card, function (props) {
   if (typeof props.theme === "string") return "background:" + _tokens.colors[props.theme].table.innerTableBackground;
 });
-Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: 'SFUIText-Regular';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ", "; \n  padding: 7px 14px;\n // border-top: 1px solid ", "; \n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: ", ";\n  max-width:  ", ";\n\n  &.tableHolder{\n    padding:0px;\n  }\n\n  .asset-play {\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: #dddddd;\n    &:hover, &:focus {\n      outline: none;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .icon-circle {\n    border-radius: 50%;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    i {\n      line-height: 0;\n    }\n  }\n\n    // max-width: 0;\n    // overflow: hidden;\n    // text-overflow: ellipsis;\n    // white-space: nowrap;\n\n    & > div.text-box {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      &.text-linkexpired {\n        color: #FF6C56;\n      }\n    }\n  & > div.action-icons-cell{\n    white-space: nowrap;\n\n    .tooltip-block {\n      top: -50px;\n    }\n    \n    .action-item-btn {\n      padding: 0 15px;\n      cursor: pointer;\n      background-color: transparent;\n\n      &.nested {\n        border-bottom: 1px solid #303f51;\n        display: flex;\n        padding: 10px;\n        align-items: center;\n        &>div:first-child{\n          margin-right:10px;\n        }\n        &:last-child{\n          border-bottom: 0px none;\n        }\n      }\n\n      &:hover {\n        transition: color 0.4s ease-out;\n        color: ", ";\n        path{\n          fill: ", ";\n          transition: fill 0.4s ease-out;\n        }\n      }\n    }\n\n\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .more-action-holder {\n      position: relative;\n\n      &:hover {\n      .more-action-list-box{\n        display:block;\n      }\n      .more-action-icon{\n        transition: all 0.4s ease-out;\n        background: ", ";\n      }\n    }\n\n      .more-action-icon{\n        height: 24px;\n        width: 24px;\n        background: #303f51;\n        border-radius: 50%;\n        padding: 0px 10px;\n        transform: translate(0px, -1px);\n      }\n      .more-action-list-box{\n        position: absolute;\n        z-index:100;\n        display:none;\n        //display:block;\n        padding-top: 11px;\n        transform: translate(-136px,-2px);\n        \n        .more-action-list {\n          box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n          background: ", ";\n          min-width: 200px;\n        }\n\n        &:before{\n          content: '';\n          position: absolute;\n          /* left: 42%; */\n          /* top: 100%; */\n          width: 0;\n          height: 0;\n          \n          border-left: 4px solid transparent;\n          border-right: 4px solid transparent;\n          border-bottom: 6px solid ", ";\n          transform: translate(144px,-6px);\n        }\n\n      }\n\n    }\n  }\n\n  .nested-table {\n    background: #182738;\n    border-left: 2px solid ", ";\n  }\n\n\n"])), function (props) {
+Table.Cell = _styledComponents["default"].td(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: 'SFUIText-Regular';\n  font-size: 12px;\n  letter-spacing: 0.4px;\n  color: ", "; \n  padding: 7px 14px;\n // border-top: 1px solid ", "; \n  text-align: left;\n  vertical-align: middle;\n  line-height: 2;\n  width: ", ";\n  max-width:  ", ";\n\n  &.tableHolder{\n    padding:0px;\n  }\n  &.table-inner-cell {\n    padding: 0;\n  }\n  &.pinned-column {\n    background: ", ";\n    z-index: 1;\n  }\n\n  &.pinned-column:hover {\n    z-index: 3;\n  }\n\n  &.pinned-left-edge {\n    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55);\n  }\n\n  &.pinned-right-edge {\n    box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.55);\n  }\n\n  .asset-play {\n    cursor: pointer;\n    background-color: transparent;\n    border: none;\n    color: #dddddd;\n    &:hover, &:focus {\n      outline: none;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .icon-circle {\n    border-radius: 50%;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    i {\n      line-height: 0;\n    }\n  }\n\n    // max-width: 0;\n    // overflow: hidden;\n    // text-overflow: ellipsis;\n    // white-space: nowrap;\n\n    & > div.text-box {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      &.text-linkexpired {\n        color: #FF6C56;\n      }\n    }\n  & > div.action-icons-cell{\n    white-space: nowrap;\n\n    .tooltip-block {\n      top: -50px;\n    }\n    \n    .action-item-btn {\n      padding: 0 15px;\n      cursor: pointer;\n      background-color: transparent;\n\n      &.nested {\n        border-bottom: 1px solid #303f51;\n        display: flex;\n        padding: 10px;\n        align-items: center;\n        &>div:first-child{\n          margin-right:10px;\n        }\n        &:last-child{\n          border-bottom: 0px none;\n        }\n      }\n\n      &:hover {\n        transition: color 0.4s ease-out;\n        color: ", ";\n        path{\n          fill: ", ";\n          transition: fill 0.4s ease-out;\n        }\n      }\n    }\n\n\n    &>button{\n      margin-right: 15px;\n      display: inline-flex;\n    }\n    &>button:last-child{\n      margin-right: 0px;\n    }\n\n    .more-action-holder {\n      position: relative;\n\n      &:hover {\n      .more-action-list-box{\n        display:block;\n      }\n      .more-action-icon{\n        transition: all 0.4s ease-out;\n        background: ", ";\n      }\n    }\n\n      .more-action-icon{\n        height: 24px;\n        width: 24px;\n        background: #303f51;\n        border-radius: 50%;\n        padding: 0px 10px;\n        transform: translate(0px, -1px);\n      }\n      .more-action-list-box{\n        position: absolute;\n        z-index:100;\n        display:none;\n        //display:block;\n        padding-top: 11px;\n        transform: translate(-136px,-2px);\n        \n        .more-action-list {\n          box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n          background: ", ";\n          min-width: 200px;\n        }\n\n        &:before{\n          content: '';\n          position: absolute;\n          /* left: 42%; */\n          /* top: 100%; */\n          width: 0;\n          height: 0;\n          \n          border-left: 4px solid transparent;\n          border-right: 4px solid transparent;\n          border-bottom: 6px solid ", ";\n          transform: translate(144px,-6px);\n        }\n\n      }\n\n    }\n  }\n\n  .nested-table {\n    background: #182738;\n    border-left: 2px solid ", ";\n  }\n\n\n"])), function (props) {
   return _tokens.colors[props.theme].table.tdColor;
 }, function (props) {
   return _tokens.colors[props.theme].table.border;
@@ -1492,6 +2056,8 @@ Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObje
   return props.column.width;
 }, function (props) {
   return props.maxWidth || "175px";
+}, function (props) {
+  return _tokens.colors[props.theme].card.background;
 }, function (props) {
   return _tokens.colors[props.theme].table.CellHoverFocusColor;
 }, function (props) {
@@ -1507,11 +2073,11 @@ Table.Cell = _styledComponents["default"].td(_templateObject11 || (_templateObje
 }, function (props) {
   return _tokens.colors[props.theme].table.CellNestedTableBorderLeft;
 });
-var TableTitleLoadingInitial = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 30px;\n  position: absolute;\n  left: -1px;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  top: -1px;\n"])));
-var DubbingStatusStyles = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  .detail-block {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-right: 7px;\n    }\n\n    .status-color {\n      width: 7px;\n      height: 7px;\n      margin-right: 6px;\n      border-radius: 100%;\n      background: rgba(255, 255, 255, 0.3);\n      &.approved {\n        background: ", ";\n      }\n      &.rejected {\n        background: #ef5350;\n      }\n    }\n    .language-name {\n      text-transform: capitalize;\n      font-size: 12px;\n      font-family: SFUIText-Regular;\n      color: #fff;\n    }\n  }\n"])), function (props) {
+var TableTitleLoadingInitial = _styledComponents["default"].div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 30px;\n  position: absolute;\n  left: -1px;\n  z-index: 2;\n  display: flex;\n  width: 100%;\n  top: -1px;\n"])));
+var DubbingStatusStyles = _styledComponents["default"].div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  .detail-block {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-right: 7px;\n    }\n\n    .status-color {\n      width: 7px;\n      height: 7px;\n      margin-right: 6px;\n      border-radius: 100%;\n      background: rgba(255, 255, 255, 0.3);\n      &.approved {\n        background: ", ";\n      }\n      &.rejected {\n        background: #ef5350;\n      }\n    }\n    .language-name {\n      text-transform: capitalize;\n      font-size: 12px;\n      font-family: SFUIText-Regular;\n      color: #fff;\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].table.ApprovedBackground;
 });
-var SelectAllButton = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  position: absolute;\n  left: 14px;\n  z-index: 2;\n  top: 75px;\n  .input-select-all-button {\n    height: 0px;\n    width: 0px;\n    display: none;\n  }\n  .label-select-all-button {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    margin: 0px;\n    height: 20px;\n    align-items: center;\n    border-radius: 50%;\n    background: ", ";\n    .span-select-all-button {\n      display: ", ";\n      position: absolute;\n      top: 10px;\n      left: 5px;\n      border-right: 2px solid transparent;\n      border-bottom: 2px solid transparent;\n      transform: rotate(45deg);\n      transform-origin: 0 100%;\n      animation: ", ";\n    }\n  }\n"])), function (props) {
+var SelectAllButton = _styledComponents["default"].div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 20px;\n  height: 20px;\n  background: transparent;\n  border: ", ";\n  border-radius: 50%;\n  cursor: pointer;\n  position: absolute;\n  left: 14px;\n  z-index: 2;\n  top: 73px;\n  .input-select-all-button {\n    height: 0px;\n    width: 0px;\n    display: none;\n  }\n  .label-select-all-button {\n    position: relative;\n    cursor: pointer;\n    display: flex;\n    margin: 0px;\n    height: 20px;\n    align-items: center;\n    border-radius: 50%;\n    background: ", ";\n    .span-select-all-button {\n      display: ", ";\n      position: absolute;\n      top: 10px;\n      left: 5px;\n      border-right: 2px solid transparent;\n      border-bottom: 2px solid transparent;\n      transform: rotate(45deg);\n      transform-origin: 0 100%;\n      animation: ", ";\n    }\n  }\n"])), function (props) {
   return props.isActive ? "1px solid #9E9E9E" : "";
 }, function (props) {
   return !props.isActive ? "#49dad0" : "";
@@ -1532,7 +2098,9 @@ Table.propTypes = {
   showSearchBox: _propTypes["default"].bool,
   handleUserIdFilterChange: _propTypes["default"].func,
   userIdsList: _propTypes["default"].instanceOf(Object),
-  pageDropdown: _propTypes["default"].instanceOf(Object)
+  pageDropdown: _propTypes["default"].instanceOf(Object),
+  resizableColumns: _propTypes["default"].bool,
+  onColumnResize: _propTypes["default"].func
 };
 Table.defaultProps = {
   theme: "dark",
@@ -1544,6 +2112,7 @@ Table.defaultProps = {
   maxShowNoOfColumns: 8,
   searchable: false,
   selectable: false,
-  showTableHeader: true
+  showTableHeader: true,
+  resizableColumns: false
 };
 var _default = exports["default"] = Table;