dtable-ui-component 6.0.3 → 6.0.4

package/lib/{RowExpandFileFormatter → RowExpandFormatter/RowExpandFileFormatter}/row-expand-file-item-formatter.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
-var _lang = require("../lang");
-var _utils = require("../FileItemFormatter/utils");
-var _deleteTip = _interopRequireDefault(require("../common/delete-tip"));
+var _lang = require("../../lang");
+var _url = require("../../utils/url");
+var _DeleteTip = _interopRequireDefault(require("../../DeleteTip"));
 class RowExpandFileItemFormatter extends _react.Component {
   constructor(props) {
     super(props);
@@ -39,10 +39,6 @@ class RowExpandFileItemFormatter extends _react.Component {
       this.closeDeleteTip();
       this.props.deleteFile(this.props.index);
     };
-    this.getFileIconData = item => {
-      let fileIconUrl = (0, _utils.getFileIconUrl)(item.name, item.type);
-      return require('../FileItemFormatter/' + fileIconUrl);
-    };
     this.state = {
       isTooltipOpen: false,
       isDeleteTipOpen: false
@@ -55,20 +51,23 @@ class RowExpandFileItemFormatter extends _react.Component {
       index,
       readOnly,
       downloadFile,
-      deleteFile
+      deleteFile,
+      config
     } = this.props;
     const id = 'file-list-preview-item' + column.key + index;
-    const url = this.getFileIconData(file);
+    const {
+      fileIconUrl
+    } = (0, _url.getFileThumbnailInfo)(file, config);
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       key: "file-".concat(index),
       className: "row-expand-item-file",
       id: id
     }, /*#__PURE__*/_react.default.createElement("img", {
-      src: url,
+      src: fileIconUrl,
       id: "item-file-".concat(index),
       alt: file.name
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-file-icons-choice"
+      className: "dtable-ui-file-icons-choice"
     }, downloadFile && /*#__PURE__*/_react.default.createElement("span", {
       className: "file-icon",
       onClick: e => this.props.downloadFile(file, e)
@@ -79,10 +78,10 @@ class RowExpandFileItemFormatter extends _react.Component {
       onClick: this.onClickDelete
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "dtable-font dtable-icon-fork-number"
-    })))), this.state.isDeleteTipOpen && /*#__PURE__*/_react.default.createElement(_deleteTip.default, {
+    })))), this.state.isDeleteTipOpen && /*#__PURE__*/_react.default.createElement(_DeleteTip.default, {
       position: this.position,
       toggle: this.closeDeleteTip,
-      onDelete: this.onDelete,
+      handleDelete: this.onDelete,
       deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_file')
     }), /*#__PURE__*/_react.default.createElement(_reactstrap.Tooltip, {
       placement: "bottom",

package/lib/{RowExpandFormulaFormatter → RowExpandFormatter/RowExpandFormulaFormatter}/index.js

@@ -8,13 +8,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
-var _baseFormatterConfig = _interopRequireDefault(require("../formatterConfig/base-formatter-config"));
-var _TextFormatter = _interopRequireDefault(require("../TextFormatter"));
-var _utils = require("../FormulaFormatter/utils");
-var _cellValueValidator = _interopRequireDefault(require("../FormulaFormatter/cell-value-validator"));
-var _toaster = _interopRequireDefault(require("../toaster"));
-var _lang = require("../lang");
-require("../FormulaFormatter/index.css");
+var _baseFormatterConfig = _interopRequireDefault(require("../../formatterConfig/base-formatter-config"));
+var _TextFormatter = _interopRequireDefault(require("../../TextFormatter"));
+var _utils = require("../../FormulaFormatter/utils");
+var _utils2 = require("../../utils/utils");
+var _cellValueValidator = _interopRequireDefault(require("../../FormulaFormatter/cell-value-validator"));
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _lang = require("../../lang");
+require("../../FormulaFormatter/index.css");
 class RowExpandFormulaFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -32,11 +33,11 @@ class RowExpandFormulaFormatter extends _react.default.Component {
       }
     };
     this.onOpenUrlLink = url => {
-      if (!(0, _utils.isValidUrl)(url)) {
+      if (!(0, _utils2.isValidUrl)(url)) {
         url = "http://".concat(url);
       }
       try {
-        (0, _utils.openUrlLink)(url);
+        (0, _utils2.openUrlLink)(url);
       } catch {
         _toaster.default.danger((0, _lang.getLocale)('URL_is_invalid'));
       }
@@ -179,7 +180,7 @@ class RowExpandFormulaFormatter extends _react.default.Component {
       return /*#__PURE__*/_react.default.cloneElement(Formatter, {
         ...formatterProps
       });
-    } else if ((0, _utils.isFunction)(Formatter)) {
+    } else if ((0, _utils2.isFunction)(Formatter)) {
       return /*#__PURE__*/_react.default.createElement(Formatter, formatterProps);
     } else {
       return /*#__PURE__*/_react.default.createElement(_TextFormatter.default, formatterProps);

package/lib/{RowExpandImageFormatter → RowExpandFormatter/RowExpandImageFormatter}/index.css

@@ -1,4 +1,4 @@
-@import url('../css/cell-formatter.css');
+@import url('../../css/cell-formatter.css');
 
 .dtable-ui.row-expand-image-formatter {
   display: flex;
@@ -28,7 +28,7 @@
   border-color: #c9c9c9;
 }
 
-.dtable-ui.row-expand-image-formatter .row-expand-item-image .dtable-image-icons-choice {
+.dtable-ui.row-expand-image-formatter .row-expand-item-image .dtable-ui-image-icons-choice {
   height: 20px;
   width: 100%;
   top: 0;
@@ -40,11 +40,11 @@
   align-items: center;
 }
 
-.dtable-ui.row-expand-image-formatter .row-expand-item-image:hover .dtable-image-icons-choice {
+.dtable-ui.row-expand-image-formatter .row-expand-item-image:hover .dtable-ui-image-icons-choice {
   display: flex;
 }
 
-.dtable-ui.row-expand-image-formatter .row-expand-item-image .dtable-image-icons-choice .image-icon {
+.dtable-ui.row-expand-image-formatter .row-expand-item-image .dtable-ui-image-icons-choice .image-icon {
   height: 16px;
   width: 16px;
   border-radius: 50%;
@@ -56,11 +56,11 @@
   align-items: center;
 }
 
-.dtable-ui.row-expand-image-formatter .row-expand-item-image .dtable-image-icons-choice .image-icon:nth-child(2) {
+.dtable-ui.row-expand-image-formatter .row-expand-item-image .dtable-ui-image-icons-choice .image-icon:nth-child(2) {
   margin-left: 5px;
 }
 
-.dtable-ui.row-expand-image-formatter .row-expand-item-image .dtable-image-icons-choice .image-icon .dtable-font {
+.dtable-ui.row-expand-image-formatter .row-expand-item-image .dtable-ui-image-icons-choice .image-icon .dtable-font {
   font-size: 12px;
   transform: scale(.7);
 }

package/lib/{RowExpandImageFormatter → RowExpandFormatter/RowExpandImageFormatter}/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _rowExpandImageItemFormatter = _interopRequireDefault(require("./row-expand-image-item-formatter"));
-var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerLightbox"));
+var _ImagePreviewerLightbox = _interopRequireDefault(require("../../ImagePreviewerLightbox"));
 require("./index.css");
 class RowExpandImageFormatter extends _react.default.Component {
   constructor(props) {

package/lib/{RowExpandImageFormatter → RowExpandFormatter/RowExpandImageFormatter}/row-expand-image-item-formatter.js

@@ -9,8 +9,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactstrap = require("reactstrap");
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
-var _lang = require("../lang");
-var _deleteTip = _interopRequireDefault(require("../common/delete-tip"));
+var _lang = require("../../lang");
+var _DeleteTip = _interopRequireDefault(require("../../DeleteTip"));
 class RowExpandImageItemFormatter extends _react.Component {
   constructor(props) {
     super(props);
@@ -74,7 +74,7 @@ class RowExpandImageItemFormatter extends _react.Component {
       id: "item-image-".concat(index),
       alt: name
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-image-icons-choice"
+      className: "dtable-ui-image-icons-choice"
     }, downloadFile && /*#__PURE__*/_react.default.createElement("span", {
       className: "image-icon",
       onClick: this.onClickDownload
@@ -85,10 +85,10 @@ class RowExpandImageItemFormatter extends _react.Component {
       onClick: this.onClickDelete
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "dtable-font dtable-icon-fork-number"
-    })))), this.state.isDeleteTipOpen && /*#__PURE__*/_react.default.createElement(_deleteTip.default, {
+    })))), this.state.isDeleteTipOpen && /*#__PURE__*/_react.default.createElement(_DeleteTip.default, {
       position: this.position,
       toggle: this.closeDeleteTip,
-      onDelete: this.onDelete,
+      handleDelete: this.onDelete,
       deleteTip: (0, _lang.getLocale)('Are_you_sure_you_want_to_delete_this_image')
     }), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
       query: '(min-width: 768px)'

package/lib/{RowExpandLinkFormatter → RowExpandFormatter/RowExpandLinkFormatter}/collaborator-item-formatter.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
-var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
+var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
 class CollaboratorItemFormatter extends _react.Component {
   constructor(_props) {
     super(_props);

package/lib/{RowExpandLinkFormatter → RowExpandFormatter/RowExpandLinkFormatter}/index.css

@@ -1,4 +1,4 @@
-.dtable-link-formatter {
+.dtable-ui-row-expand-link-formatter {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -7,7 +7,7 @@
   height: auto;
 }
 
-.dtable-link-formatter .row-expand-link-item {
+.dtable-ui-row-expand-link-formatter .row-expand-link-item {
   flex-shrink: 0;
   margin: 2px 4px 2px 0;
   padding: 0 6px;

package/lib/{RowExpandLinkFormatter → RowExpandFormatter/RowExpandLinkFormatter}/index.js

@@ -7,13 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _constants = require("../constants");
-var _MultipleSelectFormatter = _interopRequireDefault(require("../MultipleSelectFormatter"));
-var _CTimeFormatter = _interopRequireDefault(require("../CTimeFormatter"));
-var _MTimeFormatter = _interopRequireDefault(require("../MTimeFormatter"));
-var _DateFormatter = _interopRequireDefault(require("../DateFormatter"));
+var _dtableUtils = require("dtable-utils");
+var _MultipleSelectFormatter = _interopRequireDefault(require("../../MultipleSelectFormatter"));
+var _CTimeFormatter = _interopRequireDefault(require("../../CTimeFormatter"));
+var _MTimeFormatter = _interopRequireDefault(require("../../MTimeFormatter"));
+var _DateFormatter = _interopRequireDefault(require("../../DateFormatter"));
 var _collaboratorItemFormatter = _interopRequireDefault(require("./collaborator-item-formatter"));
-var _utils = require("./utils");
+var _utils = require("../../utils/utils");
 var _valueDisplayUtils = require("./value-display-utils");
 require("./index.css");
 class RowExpandLinkFormatter extends _react.Component {
@@ -42,19 +42,19 @@ class RowExpandLinkFormatter extends _react.Component {
       data: displayColumnData
     } = displayColumn;
     if (displayColumnType === 'string') {
-      displayColumnType = _constants.CellType.TEXT;
+      displayColumnType = _dtableUtils.CellType.TEXT;
     }
     const cellValue = (0, _utils.getFormulaArrayValue)(value, !(0, _utils.isArrayFormatColumn)(displayColumnType));
     if (!Array.isArray(cellValue) || cellValue.length === 0) {
       return props.renderEmpty();
     }
     switch (displayColumnType) {
-      case _constants.CellType.TEXT:
-      case _constants.CellType.AUTO_NUMBER:
-      case _constants.CellType.EMAIL:
-      case _constants.CellType.URL:
-      case _constants.CellType.DURATION:
-      case _constants.CellType.NUMBER:
+      case _dtableUtils.CellType.TEXT:
+      case _dtableUtils.CellType.AUTO_NUMBER:
+      case _dtableUtils.CellType.EMAIL:
+      case _dtableUtils.CellType.URL:
+      case _dtableUtils.CellType.DURATION:
+      case _dtableUtils.CellType.NUMBER:
         {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: containerClassName
@@ -66,7 +66,7 @@ class RowExpandLinkFormatter extends _react.Component {
             }, value);
           }));
         }
-      case _constants.CellType.DATE:
+      case _dtableUtils.CellType.DATE:
         {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: containerClassName
@@ -83,7 +83,7 @@ class RowExpandLinkFormatter extends _react.Component {
             });
           }));
         }
-      case _constants.CellType.CTIME:
+      case _dtableUtils.CellType.CTIME:
         {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: containerClassName
@@ -96,7 +96,7 @@ class RowExpandLinkFormatter extends _react.Component {
             });
           }));
         }
-      case _constants.CellType.MTIME:
+      case _dtableUtils.CellType.MTIME:
         {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: containerClassName
@@ -109,8 +109,8 @@ class RowExpandLinkFormatter extends _react.Component {
             });
           }));
         }
-      case _constants.CellType.CREATOR:
-      case _constants.CellType.LAST_MODIFIER:
+      case _dtableUtils.CellType.CREATOR:
+      case _dtableUtils.CellType.LAST_MODIFIER:
         {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: "dtable-ui cell-formatter-container collaborator-formatter sql-query-collaborator-formatter"
@@ -125,7 +125,7 @@ class RowExpandLinkFormatter extends _react.Component {
             });
           }));
         }
-      case _constants.CellType.SINGLE_SELECT:
+      case _dtableUtils.CellType.SINGLE_SELECT:
         {
           const options = displayColumnData && Array.isArray(displayColumnData.options) ? displayColumnData.options : [];
           return /*#__PURE__*/_react.default.createElement(_MultipleSelectFormatter.default, {
@@ -133,7 +133,7 @@ class RowExpandLinkFormatter extends _react.Component {
             options: options || []
           });
         }
-      case _constants.CellType.FORMULA:
+      case _dtableUtils.CellType.FORMULA:
         {
           return /*#__PURE__*/_react.default.createElement("div", {
             className: containerClassName

package/lib/{RowExpandRateFormatter → RowExpandFormatter/RowExpandRateFormatter}/index.css

@@ -1,4 +1,4 @@
-@import url('../css/cell-formatter.css');
+@import url('../../css/cell-formatter.css');
 
 .dtable-ui.dtable-row-expand-formatter .dtable-rate-formatter .dtable-icon-rate {
   padding-right: 5px;

package/lib/RowExpandFormatter/RowExpandUrlFormatter/index.css

@@ -0,0 +1 @@
+@import url('../../css/cell-formatter.css');

package/lib/{RowExpandUrlFormatter → RowExpandFormatter/RowExpandUrlFormatter}/index.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _toaster = _interopRequireDefault(require("../toaster"));
-var _editorUtils = require("../utils/editor-utils");
+var _toaster = _interopRequireDefault(require("../../toaster"));
+var _editorUtils = require("../../utils/editor-utils");
+var _utils = require("../../utils/utils");
 require("./index.css");
 class UrlFormatter extends _react.default.Component {
   constructor() {
@@ -18,7 +19,7 @@ class UrlFormatter extends _react.default.Component {
         value
       } = this.props;
       const url = (0, _editorUtils.getTrimmedString)(value);
-      const validUrl = (0, _editorUtils.isValidUrl)(url) ? url : "http://".concat(url);
+      const validUrl = (0, _utils.isValidUrl)(url) ? url : "http://".concat(url);
       try {
         let a = document.createElement('a');
         document.body.appendChild(a);

package/lib/RowExpandFormatter/constants.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_FORMATTER = void 0;
+var _dtableUtils = require("dtable-utils");
+var _TextFormatter = _interopRequireDefault(require("../TextFormatter"));
+var _NumberFormatter = _interopRequireDefault(require("../NumberFormatter"));
+var _CheckboxFormatter = _interopRequireDefault(require("../CheckboxFormatter"));
+var _DateFormatter = _interopRequireDefault(require("../DateFormatter"));
+var _SingleSelectFormatter = _interopRequireDefault(require("../SingleSelectFormatter"));
+var _MultipleSelectFormatter = _interopRequireDefault(require("../MultipleSelectFormatter"));
+var _CollaboratorFormatter = _interopRequireDefault(require("../CollaboratorFormatter"));
+var _LongTextFormatter = _interopRequireDefault(require("../LongTextFormatter"));
+var _GeolocationFormatter = _interopRequireDefault(require("../GeolocationFormatter"));
+var _CTimeFormatter = _interopRequireDefault(require("../CTimeFormatter"));
+var _CreatorFormatter = _interopRequireDefault(require("../CreatorFormatter"));
+var _LastModifierFormatter = _interopRequireDefault(require("../LastModifierFormatter"));
+var _MTimeFormatter = _interopRequireDefault(require("../MTimeFormatter"));
+var _AutoNumberFormatter = _interopRequireDefault(require("../AutoNumberFormatter"));
+var _DurationFormatter = _interopRequireDefault(require("../DurationFormatter"));
+var _ButtonFormatter = _interopRequireDefault(require("../ButtonFormatter"));
+var _RowExpandUrlFormatter = _interopRequireDefault(require("./RowExpandUrlFormatter"));
+var _RowExpandEmailFormatter = _interopRequireDefault(require("./RowExpandEmailFormatter"));
+var _RowExpandRateFormatter = _interopRequireDefault(require("./RowExpandRateFormatter"));
+var _RowExpandImageFormatter = _interopRequireDefault(require("./RowExpandImageFormatter"));
+var _RowExpandFileFormatter = _interopRequireDefault(require("./RowExpandFileFormatter"));
+var _RowExpandLinkFormatter = _interopRequireDefault(require("./RowExpandLinkFormatter"));
+var _RowExpandFormulaFormatter = _interopRequireDefault(require("./RowExpandFormulaFormatter"));
+var _DigitalSignFormatter = _interopRequireDefault(require("../DigitalSignFormatter"));
+var _RowExpandDepartmentFormatter = _interopRequireDefault(require("./RowExpandDepartmentFormatter"));
+const DEFAULT_FORMATTER = exports.DEFAULT_FORMATTER = {
+  [_dtableUtils.CellType.TEXT]: _TextFormatter.default,
+  [_dtableUtils.CellType.NUMBER]: _NumberFormatter.default,
+  [_dtableUtils.CellType.CHECKBOX]: _CheckboxFormatter.default,
+  [_dtableUtils.CellType.DATE]: _DateFormatter.default,
+  [_dtableUtils.CellType.SINGLE_SELECT]: _SingleSelectFormatter.default,
+  [_dtableUtils.CellType.MULTIPLE_SELECT]: _MultipleSelectFormatter.default,
+  [_dtableUtils.CellType.COLLABORATOR]: _CollaboratorFormatter.default,
+  [_dtableUtils.CellType.LONG_TEXT]: _LongTextFormatter.default,
+  [_dtableUtils.CellType.GEOLOCATION]: _GeolocationFormatter.default,
+  [_dtableUtils.CellType.CTIME]: _CTimeFormatter.default,
+  [_dtableUtils.CellType.CREATOR]: _CreatorFormatter.default,
+  [_dtableUtils.CellType.LAST_MODIFIER]: _LastModifierFormatter.default,
+  [_dtableUtils.CellType.MTIME]: _MTimeFormatter.default,
+  [_dtableUtils.CellType.AUTO_NUMBER]: _AutoNumberFormatter.default,
+  [_dtableUtils.CellType.DURATION]: _DurationFormatter.default,
+  [_dtableUtils.CellType.BUTTON]: _ButtonFormatter.default,
+  [_dtableUtils.CellType.URL]: _RowExpandUrlFormatter.default,
+  [_dtableUtils.CellType.EMAIL]: _RowExpandEmailFormatter.default,
+  [_dtableUtils.CellType.RATE]: _RowExpandRateFormatter.default,
+  [_dtableUtils.CellType.IMAGE]: _RowExpandImageFormatter.default,
+  [_dtableUtils.CellType.FILE]: _RowExpandFileFormatter.default,
+  [_dtableUtils.CellType.LINK]: _RowExpandLinkFormatter.default,
+  [_dtableUtils.CellType.FORMULA]: _RowExpandFormulaFormatter.default,
+  [_dtableUtils.CellType.LINK_FORMULA]: _RowExpandFormulaFormatter.default,
+  [_dtableUtils.CellType.DIGITAL_SIGN]: _DigitalSignFormatter.default,
+  [_dtableUtils.CellType.DEPARTMENT_SINGLE_SELECT]: _RowExpandDepartmentFormatter.default
+};

package/lib/RowExpandFormatter/index.css

@@ -71,7 +71,6 @@
 }
 
 .dtable-ui.dtable-row-expand-formatter .button-formatter {
-  margin-top: 6px;
   text-align: center;
   height: 26px;
   line-height: 14px;
@@ -79,8 +78,8 @@
   max-width: 100%;
   width: fit-content;
   display: inline-flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   border-radius: 3px;
@@ -100,7 +99,7 @@
   background-color: #fff;
 }
 
-.dtable-ui.dtable-row-expand-formatter .geolocation-formatter-container {
+.dtable-ui.dtable-row-expand-formatter .dtable-ui-geolocation-formatter-container {
   margin-top: 0.5rem;
   display: flex;
   align-items: center;
@@ -109,3 +108,29 @@
 .dtable-ui.dtable-row-expand-formatter .dtable-link-formatter {
   padding-top: 8px;
 }
+
+.dtable-ui-row-expand-select-formatter.custom-select {
+  display: flex;
+  padding: 0 10px;
+  border-radius: 3px;
+  align-items: center;
+  justify-content: space-between;
+  -webkit-user-select: none;
+  user-select: none;
+  text-align: left;
+  position: relative;
+  cursor: pointer;
+  height: fit-content;
+  min-height: 2.375rem;
+  background-color: #f8f9fa !important;
+  cursor: default;
+}
+
+.dtable-ui-row-expand-select-formatter .dtable-ui-row-expand-select-formatter-inner {
+  display: flex;
+  flex: 1 1;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+}