@arcblock/ux 2.1.25 → 2.1.26

package/lib/Datatable/TableSearch.js

@@ -21,6 +21,8 @@ var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _DatatableContext = require("./DatatableContext");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,16 +38,22 @@ function TableSearch(_ref) {
     searchClose,
     onSearchOpen
   } = _ref;
-  const [inputMode, setInputMode] = (0, _react.useState)(false);
+  const {
+    searchOpen,
+    searchPlaceholder,
+    searchAlwaysOpen
+  } = options;
+  const [inputExpand, setInputExpand] = (0, _react.useState)(searchOpen || false);
   const [innerSearchText, setInnerSearchText] = (0, _react.useState)('');
   const inputTimer = (0, _react.useRef)(null);
   const {
     loading
   } = (0, _DatatableContext.useDatatableContext)();
   const searchDebounceTime = options.serverSide && options.searchDebounceTime;
+  const searchExpand = searchAlwaysOpen || inputExpand;
 
   const clickSearchIcon = () => {
-    setInputMode(true);
+    setInputExpand(true);
     onSearchOpen(true);
   };
 
@@ -66,14 +74,17 @@ function TableSearch(_ref) {
   };
 
   const clickClose = () => {
-    setInputMode(false);
+    setInputExpand(false);
     searchClose();
     setInnerSearchText('');
     onSearchOpen(false);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [inputMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _clsx.default)({
+      'search-always-open': searchAlwaysOpen
+    }),
+    children: [searchExpand ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "toolbar-search-icon-placeholder",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
@@ -87,21 +98,22 @@ function TableSearch(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "toolbar-search-area ".concat(inputMode ? 'toolbar-btn-show' : ''),
-      children: [inputMode && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+      className: "toolbar-search-area ".concat(searchExpand ? 'toolbar-btn-show' : ''),
+      children: [searchExpand && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         variant: "standard",
         spacing: 2,
         onChange: onChange,
         value: searchDebounceTime ? innerSearchText : searchText || '',
-        autoFocus: true
+        placeholder: searchPlaceholder || '',
+        autoFocus: !searchAlwaysOpen
       }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         disabled: true,
         variant: "standard",
         spacing: 2,
         value: searchDebounceTime ? innerSearchText : searchText || ''
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "toolbar-search-close ".concat(inputMode ? 'toolbar-btn-show' : ''),
+    }), !searchAlwaysOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "toolbar-search-close ".concat(searchExpand ? 'toolbar-btn-show' : ''),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
         onClick: clickClose,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {})
@@ -127,4 +139,4 @@ TableSearch.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "TableSearch__Container",
   componentId: "sc-43ylue-0"
-})(["display:flex;align-items:center;.toolbar-search-area{width:0;transition:all ease 0.3s;overflow:hidden;.MuiFormControl-root{width:inherit;margin:0 12px;}&.toolbar-btn-show{width:260px;padding-left:8px;", "{width:200px;}", "{width:180px;}&.small-textfield{width:200px;}}}.toolbar-search-close{width:0;transition:all ease 0.3s;overflow:hidden;&.toolbar-btn-show{width:40px;}}.toolbar-search-icon-placeholder{display:flex;justify-content:center;align-items:center;width:40px;height:40px;}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));
+})(["display:flex;align-items:center;.toolbar-search-area{width:0;transition:all ease 0.3s;overflow:hidden;.MuiFormControl-root{width:inherit;margin:0 12px;}&.toolbar-btn-show{width:260px;padding-left:8px;", "{width:200px;}", "{width:180px;}&.small-textfield{width:200px;}}}.toolbar-search-close{width:0;transition:all ease 0.3s;overflow:hidden;&.toolbar-btn-show{width:40px;}}.toolbar-search-icon-placeholder{display:flex;justify-content:center;align-items:center;width:40px;height:40px;}&.search-always-open{.MuiFormControl-root{margin:0 12px 0 0;}.toolbar-btn-show{padding-left:0;}}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'));

package/lib/Datatable/index.js

@@ -19,15 +19,19 @@ var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 var _Empty = _interopRequireDefault(require("../Empty"));
 
+var _Spinner = _interopRequireDefault(require("../Spinner"));
+
 var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
 
 var _DatatableContext = require("./DatatableContext");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped"];
+const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped", "verticalKeyWidth", "hideTableHeader", "components", "emptyNode"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -66,16 +70,20 @@ function ReDatatable(_ref2) {
     columns: originColumns,
     locale,
     options,
+    // The options object is usually a property supported by mui-datatable
     style,
     customButtons,
     onChange,
     loading,
     disabled,
-    stripped
+    stripped,
+    verticalKeyWidth,
+    hideTableHeader,
+    components,
+    emptyNode
   } = _ref2,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
-  const container = (0, _react.useRef)(null);
   const oldState = (0, _react.useRef)(null);
   const {
     setCustomButtons,
@@ -103,6 +111,11 @@ function ReDatatable(_ref2) {
 
     keys.push(tempObj.name);
 
+    if (!tempObj.align) {
+      // There must be an align default for setCellRender to take effect, this is a bug in mui-datatable
+      tempObj.align = 'left';
+    }
+
     if (!tempObj.options) {
       tempObj.options = {};
     }
@@ -132,7 +145,11 @@ function ReDatatable(_ref2) {
       }
 
       if (tempObj.align) {
-        cellProps.className = "pc-align-".concat(tempObj.align);
+        cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
+      }
+
+      if (tempObj.verticalKeyAlign) {
+        cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
       }
 
       return cellProps;
@@ -152,7 +169,11 @@ function ReDatatable(_ref2) {
         }
 
         if (tempObj.align) {
-          cellProps.className = "pc-align-".concat(tempObj.align);
+          cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
+        }
+
+        if (tempObj.verticalKeyAlign) {
+          cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
         }
 
         return cellProps;
@@ -174,11 +195,25 @@ function ReDatatable(_ref2) {
   (0, _react.useEffect)(() => setCustomButtons(customButtons || []), [customButtons]);
   (0, _react.useEffect)(() => setLoading(loading), [loading]);
   (0, _react.useEffect)(() => setDisabled(disabled), [disabled]);
+  let emptyEl;
+
+  if (loading) {
+    emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {});
+  } else if ( /*#__PURE__*/(0, _react.isValidElement)(emptyNode)) {
+    emptyEl = emptyNode;
+  } else if (locale === 'zh') {
+    emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+      children: emptyNode || '对不起，没有找到匹配的记录'
+    });
+  } else {
+    emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+      children: emptyNode || 'Sorry, no matching records found'
+    });
+  }
+
   let textLabels = {
     body: {
-      noMatch: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
-        children: "Sorry, no matching records found"
-      }),
+      noMatch: emptyEl,
       toolTip: 'Sort'
     },
     pagination: {
@@ -214,9 +249,7 @@ function ReDatatable(_ref2) {
   if (locale === 'zh') {
     textLabels = {
       body: {
-        noMatch: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
-          children: "\u5BF9\u4E0D\u8D77\uFF0C\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8BB0\u5F55"
-        }),
+        noMatch: emptyEl,
         toolTip: '排序'
       },
       pagination: {
@@ -293,38 +326,19 @@ function ReDatatable(_ref2) {
   const props = _objectSpread(_objectSpread({
     options: opts
   }, rest), {}, {
-    components: {
+    components: _objectSpread(_objectSpread({}, components), {}, {
       TableToolbar: _CustomToolbar.default,
       TableFooter: WrapTableFooter,
       TableFilterList: WrapFilterList
-    }
+    })
   });
 
-  ReDatatable.propTypes = {
-    data: _propTypes.default.array.isRequired,
-    columns: _propTypes.default.array.isRequired,
-    options: _propTypes.default.object,
-    style: _propTypes.default.object,
-    locale: _propTypes.default.string,
-    loading: _propTypes.default.bool,
-    disabled: _propTypes.default.bool,
-    customButtons: _propTypes.default.array,
-    onChange: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
-    stripped: _propTypes.default.bool
-  };
-  ReDatatable.defaultProps = {
-    options: {},
-    style: {},
-    locale: 'en',
-    loading: false,
-    disabled: false,
-    customButtons: [],
-    onChange: '',
-    stripped: false
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContainer, {
-    ref: container,
-    className: stripped ? 'datatable-stripped' : '',
+    verticalKeyWidth: verticalKeyWidth,
+    className: (0, _clsx.default)({
+      'datatable-stripped': stripped,
+      'datatable-hide-header': hideTableHeader
+    }),
     style: style,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.default, _objectSpread({
       data: data,
@@ -333,12 +347,48 @@ function ReDatatable(_ref2) {
   });
 }
 
-const alignCss = (0, _styledComponents.css)([".MuiTableCell-head{[class*='MUIDataTableHeadCell-toolButton']{width:100%;> [class*='MUIDataTableHeadCell-sortAction']{width:100%;}}&.pc-align-center{text-align:center;[class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction']{justify-content:center;}}&.pc-align-right{text-align:right;[class*='MUIDataTableHeadCell-toolButton']{margin-right:0;padding-right:0;& > [class*='MUIDataTableHeadCell-sortAction']{justify-content:right;}}}}.MuiTableCell-body{&.pc-align-center{text-align:center;}&.pc-align-right{text-align:right;}}"]);
+ReDatatable.propTypes = {
+  data: _propTypes.default.array.isRequired,
+  columns: _propTypes.default.array.isRequired,
+  options: _propTypes.default.object,
+  style: _propTypes.default.object,
+  locale: _propTypes.default.string,
+  loading: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  customButtons: _propTypes.default.array,
+  onChange: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  stripped: _propTypes.default.bool,
+  verticalKeyWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  hideTableHeader: _propTypes.default.bool,
+  components: _propTypes.default.object,
+  emptyNode: _propTypes.default.node
+};
+ReDatatable.defaultProps = {
+  options: {},
+  style: {},
+  locale: 'en',
+  loading: false,
+  disabled: false,
+  customButtons: [],
+  onChange: '',
+  stripped: false,
+  verticalKeyWidth: '',
+  hideTableHeader: false,
+  components: {},
+  emptyNode: ''
+};
+const alignCss = (0, _styledComponents.css)([".MuiTableCell-head{[class*='MUIDataTableHeadCell-toolButton']{width:100%;> [class*='MUIDataTableHeadCell-sortAction']{width:100%;}}&.pc-align-center{text-align:center;[class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction']{justify-content:center;}}&.pc-align-right{text-align:right;[class*='MUIDataTableHeadCell-toolButton']{margin-right:0;padding-right:0;& > [class*='MUIDataTableHeadCell-sortAction']{justify-content:flex-end;}}}}.MuiTableCell-body{&.pc-align-center{text-align:center;}&.pc-align-right{text-align:right;}}"]);
 
 const TableContainer = _styledComponents.default.div.withConfig({
   displayName: "Datatable__TableContainer",
   componentId: "sc-1ju12vq-0"
-})(["height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:200%;margin-left:-100%;text-align:center;}[class*='MUIDataTableBodyCell-simpleCell']{[class*='MUIDataTableBody-emptyTitle']{padding-left:16px;width:100%;margin-left:0;text-align:center;}}}", "{[class*='responsiveSimple']{td.MuiTableCell-body{display:flex;padding-right:0;> div{width:auto;flex:1;&:first-child{flex:0;padding-right:16px;}}}}}", "{", "}", "{[class*='responsiveSimple']{", "}}&.datatable-stripped{.MuiTableBody-root{tr:nth-of-type(odd){background-color:", ";}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('sm'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, props => props.theme.palette.action.hover);
+})(["&.datatable-hide-header{thead.MuiTableHead-root{display:none;}}td{&.vertical-align-top{align-items:flex-start;}&.vertical-align-center{align-items:center;}&.vertical-align-bottom{align-items:flex-end;}}height:100%;> .MuiPaper-root{display:flex;flex-direction:column;height:100%;box-shadow:none;}", "{td.MuiTableCell-body{padding-right:0;}[class*='MUIDataTable-responsiveBase']{tr:not([class*='responsiveSimple']){td.MuiTableCell-body{display:flex;> div{width:auto;flex:1;&:first-child{font-weight:bold;font-size:14px;width:auto;flex:0 0 auto;padding-right:16px;&:empty{padding-right:0;}}}}}}}", "{", "}", "{[class*='responsiveSimple']{", "}}", " &.datatable-stripped{.MuiTableBody-root{tr:nth-of-type(odd){background-color:", ";}}}"], props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
+  if (inProps.verticalKeyWidth) {
+    return "\n        ".concat(inProps.theme.breakpoints.down('md'), " {\n          [class*='MUIDataTable-responsiveBase'] {\n            tr:not([class*='responsiveSimple']) {\n              td.MuiTableCell-body {\n                > div {\n                  &:first-child {\n                    width: ").concat(inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : ''), ";\n                  }\n                }\n              }\n            }\n          }\n        }\n      ");
+  }
+
+  return '';
+}, props => props.theme.palette.action.hover);
 
 const FilterLine = _styledComponents.default.div.withConfig({
   displayName: "Datatable__FilterLine",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.1.25",
+  "version": "2.1.26",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -52,10 +52,10 @@
     "react": ">=18.1.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "a01ecf24a8c82fb899716cfbd1de9175166f8a79",
+  "gitHead": "5c5282d38dad227f1855d482d7164d07a6b12ff4",
   "dependencies": {
-    "@arcblock/icons": "^2.1.25",
-    "@arcblock/react-hooks": "^2.1.25",
+    "@arcblock/icons": "^2.1.26",
+    "@arcblock/react-hooks": "^2.1.26",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",

package/src/Datatable/TableSearch.js

@@ -6,18 +6,22 @@ import SearchIcon from '@mui/icons-material/Search';
 import TextField from '@mui/material/TextField';
 import ClearIcon from '@mui/icons-material/Clear';
 import styled from 'styled-components';
+import clsx from 'clsx';
 import { useDatatableContext } from './DatatableContext';
 
 export default function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }) {
-  const [inputMode, setInputMode] = useState(false);
+  const { searchOpen, searchPlaceholder, searchAlwaysOpen } = options;
+  const [inputExpand, setInputExpand] = useState(searchOpen || false);
   const [innerSearchText, setInnerSearchText] = useState('');
   const inputTimer = useRef(null);
   const { loading } = useDatatableContext();
 
   const searchDebounceTime = options.serverSide && options.searchDebounceTime;
 
+  const searchExpand = searchAlwaysOpen || inputExpand;
+
   const clickSearchIcon = () => {
-    setInputMode(true);
+    setInputExpand(true);
     onSearchOpen(true);
   };
 
@@ -35,15 +39,18 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
   };
 
   const clickClose = () => {
-    setInputMode(false);
+    setInputExpand(false);
     searchClose();
     setInnerSearchText('');
     onSearchOpen(false);
   };
 
   return (
-    <Container>
-      {inputMode ? (
+    <Container
+      className={clsx({
+        'search-always-open': searchAlwaysOpen,
+      })}>
+      {searchExpand ? (
         <div className="toolbar-search-icon-placeholder">
           <SearchIcon />
         </div>
@@ -59,14 +66,15 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
         </Tooltip>
       )}
 
-      <div className={`toolbar-search-area ${inputMode ? 'toolbar-btn-show' : ''}`}>
-        {inputMode && !loading && (
+      <div className={`toolbar-search-area ${searchExpand ? 'toolbar-btn-show' : ''}`}>
+        {searchExpand && !loading && (
           <TextField
             variant="standard"
             spacing={2}
             onChange={onChange}
             value={searchDebounceTime ? innerSearchText : searchText || ''}
-            autoFocus
+            placeholder={searchPlaceholder || ''}
+            autoFocus={!searchAlwaysOpen}
           />
         )}
         {/* loading完成后没办法使用focus方法，所以改用两个 TextField */}
@@ -79,11 +87,13 @@ export default function TableSearch({ search, options, searchText, searchTextUpd
           />
         )}
       </div>
-      <div className={`toolbar-search-close ${inputMode ? 'toolbar-btn-show' : ''}`}>
-        <IconButton onClick={clickClose}>
-          <ClearIcon />
-        </IconButton>
-      </div>
+      {!searchAlwaysOpen && (
+        <div className={`toolbar-search-close ${searchExpand ? 'toolbar-btn-show' : ''}`}>
+          <IconButton onClick={clickClose}>
+            <ClearIcon />
+          </IconButton>
+        </div>
+      )}
     </Container>
   );
 }
@@ -145,4 +155,12 @@ const Container = styled.div`
     width: 40px;
     height: 40px;
   }
+  &.search-always-open {
+    .MuiFormControl-root {
+      margin: 0 12px 0 0;
+    }
+    .toolbar-btn-show {
+      padding-left: 0;
+    }
+  }
 `;

package/src/Datatable/index.js

@@ -1,12 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
 import styled, { css } from 'styled-components';
 import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
+import clsx from 'clsx';
 import Empty from '../Empty';
+import Spinner from '../Spinner';
 import CustomToolbar from './CustomToolbar';
 import { DatatableProvide, useDatatableContext } from './DatatableContext';
 
@@ -29,16 +31,19 @@ function ReDatatable({
   data: originData,
   columns: originColumns,
   locale,
-  options,
+  options, // The options object is usually a property supported by mui-datatable
   style,
   customButtons,
   onChange,
   loading,
   disabled,
   stripped,
+  verticalKeyWidth,
+  hideTableHeader,
+  components,
+  emptyNode,
   ...rest
 }) {
-  const container = useRef(null);
   const oldState = useRef(null);
   const { setCustomButtons, setFilterLabel, setLoading, setDisabled } = useDatatableContext();
 
@@ -63,6 +68,11 @@ function ReDatatable({
     }
     keys.push(tempObj.name);
 
+    if (!tempObj.align) {
+      // There must be an align default for setCellRender to take effect, this is a bug in mui-datatable
+      tempObj.align = 'left';
+    }
+
     if (!tempObj.options) {
       tempObj.options = {};
     }
@@ -91,7 +101,11 @@ function ReDatatable({
       }
 
       if (tempObj.align) {
-        cellProps.className = `pc-align-${tempObj.align}`;
+        cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
+      }
+
+      if (tempObj.verticalKeyAlign) {
+        cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
       }
 
       return cellProps;
@@ -115,7 +129,11 @@ function ReDatatable({
         }
 
         if (tempObj.align) {
-          cellProps.className = `pc-align-${tempObj.align}`;
+          cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
+        }
+
+        if (tempObj.verticalKeyAlign) {
+          cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
         }
 
         return cellProps;
@@ -138,9 +156,20 @@ function ReDatatable({
   useEffect(() => setLoading(loading), [loading]);
   useEffect(() => setDisabled(disabled), [disabled]);
 
+  let emptyEl;
+  if (loading) {
+    emptyEl = <Spinner />;
+  } else if (isValidElement(emptyNode)) {
+    emptyEl = emptyNode;
+  } else if (locale === 'zh') {
+    emptyEl = <Empty>{emptyNode || '对不起，没有找到匹配的记录'}</Empty>;
+  } else {
+    emptyEl = <Empty>{emptyNode || 'Sorry, no matching records found'}</Empty>;
+  }
+
   let textLabels = {
     body: {
-      noMatch: <Empty>Sorry, no matching records found</Empty>,
+      noMatch: emptyEl,
       toolTip: 'Sort',
     },
     pagination: {
@@ -164,7 +193,7 @@ function ReDatatable({
 
   if (locale === 'zh') {
     textLabels = {
-      body: { noMatch: <Empty>对不起，没有找到匹配的记录</Empty>, toolTip: '排序' },
+      body: { noMatch: emptyEl, toolTip: '排序' },
       pagination: {
         next: '下一页',
         previous: '上一页',
@@ -226,43 +255,58 @@ function ReDatatable({
     options: opts,
     ...rest,
     components: {
+      ...components,
       TableToolbar: CustomToolbar,
       TableFooter: WrapTableFooter,
       TableFilterList: WrapFilterList,
     },
   };
 
-  ReDatatable.propTypes = {
-    data: PropTypes.array.isRequired,
-    columns: PropTypes.array.isRequired,
-    options: PropTypes.object,
-    style: PropTypes.object,
-    locale: PropTypes.string,
-    loading: PropTypes.bool,
-    disabled: PropTypes.bool,
-    customButtons: PropTypes.array,
-    onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    stripped: PropTypes.bool,
-  };
-
-  ReDatatable.defaultProps = {
-    options: {},
-    style: {},
-    locale: 'en',
-    loading: false,
-    disabled: false,
-    customButtons: [],
-    onChange: '',
-    stripped: false,
-  };
-
   return (
-    <TableContainer ref={container} className={stripped ? 'datatable-stripped' : ''} style={style}>
+    <TableContainer
+      verticalKeyWidth={verticalKeyWidth}
+      className={clsx({
+        'datatable-stripped': stripped,
+        'datatable-hide-header': hideTableHeader,
+      })}
+      style={style}>
       <MUIDataTable data={data} columns={columns} {...props} />
     </TableContainer>
   );
 }
 
+ReDatatable.propTypes = {
+  data: PropTypes.array.isRequired,
+  columns: PropTypes.array.isRequired,
+  options: PropTypes.object,
+  style: PropTypes.object,
+  locale: PropTypes.string,
+  loading: PropTypes.bool,
+  disabled: PropTypes.bool,
+  customButtons: PropTypes.array,
+  onChange: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  stripped: PropTypes.bool,
+  verticalKeyWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  hideTableHeader: PropTypes.bool,
+  components: PropTypes.object,
+  emptyNode: PropTypes.node,
+};
+
+ReDatatable.defaultProps = {
+  options: {},
+  style: {},
+  locale: 'en',
+  loading: false,
+  disabled: false,
+  customButtons: [],
+  onChange: '',
+  stripped: false,
+  verticalKeyWidth: '',
+  hideTableHeader: false,
+  components: {},
+  emptyNode: '',
+};
+
 const alignCss = css`
   .MuiTableCell-head {
     [class*='MUIDataTableHeadCell-toolButton'] {
@@ -283,7 +327,7 @@ const alignCss = css`
         margin-right: 0;
         padding-right: 0;
         & > [class*='MUIDataTableHeadCell-sortAction'] {
-          justify-content: right;
+          justify-content: flex-end;
         }
       }
     }
@@ -299,6 +343,24 @@ const alignCss = css`
 `;
 
 const TableContainer = styled.div`
+  &.datatable-hide-header {
+    thead.MuiTableHead-root {
+      display: none;
+    }
+  }
+
+  td {
+    &.vertical-align-top {
+      align-items: flex-start;
+    }
+    &.vertical-align-center {
+      align-items: center;
+    }
+    &.vertical-align-bottom {
+      align-items: flex-end;
+    }
+  }
+
   height: 100%;
   > .MuiPaper-root {
     display: flex;
@@ -307,32 +369,26 @@ const TableContainer = styled.div`
     box-shadow: none;
   }
   ${(props) => props.theme.breakpoints.down('md')} {
-    [class*='MUIDataTableBody-emptyTitle'] {
-      padding-left: 16px;
-      width: 200%;
-      margin-left: -100%;
-      text-align: center;
-    }
-    [class*='MUIDataTableBodyCell-simpleCell'] {
-      [class*='MUIDataTableBody-emptyTitle'] {
-        padding-left: 16px;
-        width: 100%;
-        margin-left: 0;
-        text-align: center;
-      }
+    td.MuiTableCell-body {
+      padding-right: 0;
     }
-  }
-  ${(props) => props.theme.breakpoints.down('sm')} {
-    [class*='responsiveSimple'] {
-      td.MuiTableCell-body {
-        display: flex;
-        padding-right: 0;
-        > div {
-          width: auto;
-          flex: 1;
-          &:first-child {
-            flex: 0;
-            padding-right: 16px;
+    [class*='MUIDataTable-responsiveBase'] {
+      tr:not([class*='responsiveSimple']) {
+        td.MuiTableCell-body {
+          display: flex;
+          > div {
+            width: auto;
+            flex: 1;
+            &:first-child {
+              font-weight: bold;
+              font-size: 14px;
+              width: auto;
+              flex: 0 0 auto;
+              padding-right: 16px;
+              &:empty {
+                padding-right: 0;
+              }
+            }
           }
         }
       }
@@ -346,6 +402,29 @@ const TableContainer = styled.div`
       ${alignCss}
     }
   }
+
+  ${(inProps) => {
+    if (inProps.verticalKeyWidth) {
+      return `
+        ${inProps.theme.breakpoints.down('md')} {
+          [class*='MUIDataTable-responsiveBase'] {
+            tr:not([class*='responsiveSimple']) {
+              td.MuiTableCell-body {
+                > div {
+                  &:first-child {
+                    width: ${inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : '')};
+                  }
+                }
+              }
+            }
+          }
+        }
+      `;
+    }
+
+    return '';
+  }}
+
   &.datatable-stripped {
     .MuiTableBody-root {
       tr:nth-of-type(odd) {