@arcblock/ux 2.9.91 → 2.10.0

package/lib/Datatable/index.js

@@ -1,42 +1,26 @@
-"use strict";
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
+import { css } from '@emotion/react';
+import isObject from 'lodash/isObject';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import clsx from 'clsx';
+import CircularProgress from '@mui/material/CircularProgress';
+import Empty from '../Empty';
+import CustomToolbar from './CustomToolbar';
+import { DatatableProvider as DataTableProvider, useDatatableContext } from './DatatableContext';
+import { styled } from '../Theme';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DataTable;
-exports.getDurableData = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _muiDatatables = _interopRequireWildcard(require("mui-datatables"));
-var _react2 = require("@emotion/react");
-var _isObject = _interopRequireDefault(require("lodash/isObject"));
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-var _get = _interopRequireDefault(require("lodash/get"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _Empty = _interopRequireDefault(require("../Empty"));
-var _CustomToolbar = _interopRequireDefault(require("./CustomToolbar"));
-var _DatatableContext = require("./DatatableContext");
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const _excluded = ["data", "columns", "locale", "options", "style", "customButtons", "onChange", "loading", "disabled", "stripped", "verticalKeyWidth", "hideTableHeader", "components", "emptyNode", "durable", "durableKeys"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-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) { _defineProperty(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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react-hooks/exhaustive-deps */ /**
+/**
  * @typedef {{
  *  icon: import('react').ReactElement,
  *  title: string,
  * }} DataTableCustomButton
- */ /**
+ */
+
+/**
  * @typedef {{
  *  name: string,
  *  label: string,
@@ -48,9 +32,13 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  *    customBodyRenderLite?: (index: number) => import('react').ReactElement
  *  } & import('mui-datatables').MUIDataTableColumnOptions
  * } & import('mui-datatables').MUIDataTableColumnDef}  DataTableColumn
- */ /**
+ */
+
+/**
  * @typedef {Pick<import('mui-datatables').MUIDataTableState, 'count' | 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder' | 'filterList'>} DataTableState
- */ /**
+ */
+
+/**
  * @typedef {{
  *  data: Array<object | number[] | string[]>,
  *  columns: Array<DataTableColumn>,
@@ -69,24 +57,30 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  *  durable?: string,
  *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
  * } & import('mui-datatables').MUIDataTableProps} DataTableProps
- */ /**
+ */
+
+/**
  * @description
  * @export
  * @param {DataTableProps} props
  * @return {import('react').ReactComponentElement}
  */
-function DataTable(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatatableContext.DatatableProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ReDataTable, _objectSpread({}, props))
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function DataTable(props) {
+  return /*#__PURE__*/_jsx(DataTableProvider, {
+    children: /*#__PURE__*/_jsx(ReDataTable, {
+      ...props
+    })
   });
 }
 const fixCellProp = (tempObj, cellProps) => {
   const cellStyle = {};
   if (tempObj.align) {
-    cellProps.className = (0, _clsx.default)(cellProps.className, "pc-align-".concat(tempObj.align));
+    cellProps.className = clsx(cellProps.className, `pc-align-${tempObj.align}`);
   }
   if (tempObj.verticalKeyAlign) {
-    cellProps.className = (0, _clsx.default)(cellProps.className, "vertical-align-".concat(tempObj.verticalKeyAlign));
+    cellProps.className = clsx(cellProps.className, `vertical-align-${tempObj.verticalKeyAlign}`);
   }
   if (tempObj.minWidth) {
     cellStyle.minWidth = tempObj.minWidth;
@@ -101,34 +95,33 @@ const fixCellProp = (tempObj, cellProps) => {
  * @param {Boolean} props.loading For dynamic data, usually used with onChange
  * @returns
  */
-function ReDataTable(_ref) {
-  let {
-      data: originData,
-      columns: originColumns,
-      locale,
-      options,
-      // The options object is usually a property supported by mui-datatable
-      style,
-      customButtons,
-      onChange,
-      loading,
-      disabled,
-      stripped,
-      verticalKeyWidth,
-      hideTableHeader,
-      components,
-      emptyNode,
-      durable,
-      durableKeys
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const oldState = (0, _react.useRef)(null);
+function ReDataTable({
+  data: originData,
+  columns: originColumns,
+  locale,
+  options,
+  // The options object is usually a property supported by mui-datatable
+  style,
+  customButtons,
+  onChange,
+  loading,
+  disabled,
+  stripped,
+  verticalKeyWidth,
+  hideTableHeader,
+  components,
+  emptyNode,
+  durable,
+  durableKeys,
+  ...rest
+}) {
+  const oldState = useRef(null);
   const {
     setCustomButtons,
     setFilterLabel,
     setLoading,
     setDisabled
-  } = (0, _DatatableContext.useDatatableContext)();
+  } = useDatatableContext();
   const disabledCellStyle = {
     cursor: 'not-allowed',
     pointerEvents: 'none'
@@ -138,13 +131,13 @@ function ReDataTable(_ref) {
   // Convert Columns fields to object sets to support the width function
   const columns = originColumns.map(e => {
     let tempObj;
-    if (!(0, _isObject.default)(e)) {
+    if (!isObject(e)) {
       tempObj = {
         label: e,
         name: e
       };
     } else {
-      tempObj = (0, _cloneDeep.default)(e);
+      tempObj = cloneDeep(e);
     }
     keys.push(tempObj.name);
     if (!tempObj.align) {
@@ -158,19 +151,23 @@ function ReDataTable(_ref) {
       setCellHeaderProps,
       setCellProps
     } = tempObj.options;
-    tempObj.options.setCellHeaderProps = function () {
+    tempObj.options.setCellHeaderProps = (...args) => {
       let cellProps = {
         className: ''
       };
 
       // Complementing width while inheriting old setCellHeaderProps
       if (setCellHeaderProps && !setCellHeaderProps.__innerFunc) {
-        cellProps = _objectSpread(_objectSpread({}, cellProps), setCellHeaderProps(...arguments) || {});
+        cellProps = {
+          ...cellProps,
+          ...(setCellHeaderProps(...args) || {})
+        };
       }
       if (loading || disabled) {
-        cellProps = _objectSpread(_objectSpread({}, cellProps), {}, {
+        cellProps = {
+          ...cellProps,
           style: disabledCellStyle
-        });
+        };
       }
       if (tempObj.width) {
         cellProps.width = tempObj.width;
@@ -182,14 +179,17 @@ function ReDataTable(_ref) {
     // Prevent memory xie caused by recursive forwarding of setCellHeaderProps functions
     tempObj.options.setCellHeaderProps.__innerFunc = 1;
     if (tempObj.align || tempObj.style) {
-      tempObj.options.setCellProps = function () {
+      tempObj.options.setCellProps = (...args) => {
         let cellProps = {
           className: ''
         };
 
         // Complementing width while inheriting old setCellHeaderProps
         if (setCellProps && !setCellProps.__innerFunc) {
-          cellProps = _objectSpread(_objectSpread({}, cellProps), setCellProps(...arguments) || {});
+          cellProps = {
+            ...cellProps,
+            ...(setCellProps(...args) || {})
+          };
         }
         fixCellProp(tempObj, cellProps);
         return cellProps;
@@ -201,27 +201,27 @@ function ReDataTable(_ref) {
 
   // Fixing object-type structures
   const data = originData.map(e => {
-    if (!Array.isArray(e) && (0, _isObject.default)(e)) {
-      return keys.map(key => (0, _get.default)(e, key));
+    if (!Array.isArray(e) && isObject(e)) {
+      return keys.map(key => get(e, key));
     }
     return e;
   });
-  (0, _react.useEffect)(() => setCustomButtons(customButtons || []), [customButtons]);
-  (0, _react.useEffect)(() => setLoading(loading), [loading]);
-  (0, _react.useEffect)(() => setDisabled(disabled), [disabled]);
+  useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
+  useEffect(() => setLoading(loading), [loading]);
+  useEffect(() => setDisabled(disabled), [disabled]);
   let emptyEl;
   if (loading) {
-    emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+    emptyEl = /*#__PURE__*/_jsx(CircularProgress, {
       color: "primary"
     });
-  } else if ( /*#__PURE__*/(0, _react.isValidElement)(emptyNode)) {
+  } else if ( /*#__PURE__*/isValidElement(emptyNode)) {
     emptyEl = emptyNode;
   } else if (locale === 'zh') {
-    emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+    emptyEl = /*#__PURE__*/_jsx(Empty, {
       children: emptyNode || '没有找到匹配的记录'
     });
   } else {
-    emptyEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+    emptyEl = /*#__PURE__*/_jsx(Empty, {
       children: emptyNode || 'No matching records found'
     });
   }
@@ -295,14 +295,15 @@ function ReDataTable(_ref) {
       }
     };
   }
-  (0, _react.useEffect)(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
+  useEffect(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
   const durableData = getDurableData(durable);
-  const opts = _objectSpread(_objectSpread(_objectSpread({
+  const opts = {
     selectableRows: 'none',
     textLabels,
     rowsPerPage: 10,
-    rowsPerPageOptions: [10, 20, 50]
-  }, durableData), options), {}, {
+    rowsPerPageOptions: [10, 20, 50],
+    ...durableData,
+    ...options,
     // Wrap the more friendly onChange callback by listening to onTableChange,
     // which will only be triggered when the table key state changes
     onTableChange: (action, tableState) => {
@@ -323,7 +324,7 @@ function ReDataTable(_ref) {
         durableKeys.forEach(key => {
           needSaveState[key] = state[key];
         });
-        localStorage.setItem("datatable-durable-".concat(durable), JSON.stringify(needSaveState));
+        localStorage.setItem(`datatable-durable-${durable}`, JSON.stringify(needSaveState));
       }
       const stateStr = JSON.stringify(state);
       if (stateStr === oldState.current) {
@@ -334,49 +335,51 @@ function ReDataTable(_ref) {
         onChange(state, action);
       }
     }
-  });
+  };
   if (onChange) {
     opts.serverSide = true;
   }
-  const props = _objectSpread(_objectSpread({
-    options: opts
-  }, rest), {}, {
-    components: _objectSpread({
-      TableToolbar: _CustomToolbar.default,
+  const props = {
+    options: opts,
+    ...rest,
+    components: {
+      TableToolbar: CustomToolbar,
       TableFooter: WrapTableFooter,
-      TableFilterList: WrapFilterList
-    }, components)
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContainer, {
+      TableFilterList: WrapFilterList,
+      ...components
+    }
+  };
+  return /*#__PURE__*/_jsx(TableContainer, {
     verticalKeyWidth: verticalKeyWidth,
-    className: (0, _clsx.default)({
+    className: clsx({
       'datatable-stripped': stripped,
       'datatable-hide-header': hideTableHeader
     }),
     style: style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.default, _objectSpread({
+    children: /*#__PURE__*/_jsx(MUIDataTable, {
       data: data,
-      columns: columns
-    }, props))
+      columns: columns,
+      ...props
+    })
   });
 }
 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,
-  durable: _propTypes.default.string,
-  durableKeys: _propTypes.default.array
+  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,
+  durable: PropTypes.string,
+  durableKeys: PropTypes.array
 };
 ReDataTable.defaultProps = {
   options: {},
@@ -394,49 +397,177 @@ ReDataTable.defaultProps = {
   durable: '',
   durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder']
 };
-const getDurableData = key => {
-  const durableKey = "datatable-durable-".concat(key);
+export const getDurableData = key => {
+  const durableKey = `datatable-durable-${key}`;
   let localData = localStorage[durableKey];
   if (localData) {
     try {
       localData = JSON.parse(localData);
     } catch (err) {
-      console.error("parse durable data error (key:".concat(key, ") => "), err);
+      console.error(`parse durable data error (key:${key}) => `, err);
     }
   }
   return localData || {};
 };
-exports.getDurableData = getDurableData;
-const alignCss = (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .MuiTableCell-head {\n    [class*='MUIDataTableHeadCell-toolButton'] {\n      width: 100%;\n      > [class*='MUIDataTableHeadCell-sortAction'] {\n        width: 100%;\n      }\n    }\n    &.pc-align-center {\n      text-align: center;\n      [class*='MUIDataTableHeadCell-toolButton'] > [class*='MUIDataTableHeadCell-sortAction'] {\n        justify-content: center;\n      }\n    }\n    &.pc-align-right {\n      text-align: right;\n      [class*='MUIDataTableHeadCell-toolButton'] {\n        margin-right: 0;\n        padding-right: 0;\n        & > [class*='MUIDataTableHeadCell-sortAction'] {\n          justify-content: flex-end;\n        }\n      }\n    }\n  }\n  .MuiTableCell-body {\n    &.pc-align-center {\n      text-align: center;\n    }\n    &.pc-align-right {\n      text-align: right;\n    }\n  }\n"])));
-const TableContainer = (0, _Theme.styled)('div', {
+const alignCss = 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 = styled('div', {
   shouldForwardProp: prop => prop !== 'verticalKeyWidth'
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.datatable-hide-header {\n    thead.MuiTableHead-root {\n      display: none;\n    }\n  }\n\n  td {\n    &.vertical-align-top {\n      align-items: flex-start;\n    }\n    &.vertical-align-center {\n      align-items: center;\n    }\n    &.vertical-align-bottom {\n      align-items: flex-end;\n    }\n  }\n\n  height: 100%;\n  > .MuiPaper-root {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    box-shadow: none;\n  }\n  ", " {\n    td.MuiTableCell-body {\n      padding-right: 0;\n    }\n    [class*='MUIDataTable-responsiveBase'] {\n      tr:not([class*='responsiveSimple']) {\n        td.MuiTableCell-body {\n          display: flex;\n          > div {\n            width: auto;\n            flex: 1;\n            &:first-of-type {\n              font-weight: bold;\n              font-size: 14px;\n              width: auto;\n              flex: 0 0 auto;\n              padding-right: 16px;\n              &:empty {\n                padding-right: 0;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  ", " {\n    ", "\n  }\n  ", " {\n    [class*='responsiveSimple'] {\n      ", "\n    }\n  }\n\n  ", "\n\n  &.datatable-stripped {\n    .MuiTableBody-root {\n      tr:nth-of-type(odd) {\n        background-color: ", ";\n      }\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.up('md'), alignCss, props => props.theme.breakpoints.up('sm'), alignCss, inProps => {
+})`
+  &.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;
+  }
+  ${props => props.theme.breakpoints.down('md')} {
+    td.MuiTableCell-body {
+      padding-right: 0;
+    }
+    [class*='MUIDataTable-responsiveBase'] {
+      tr:not([class*='responsiveSimple']) {
+        td.MuiTableCell-body {
+          display: flex;
+          > div {
+            width: auto;
+            flex: 1;
+            &:first-of-type {
+              font-weight: bold;
+              font-size: 14px;
+              width: auto;
+              flex: 0 0 auto;
+              padding-right: 16px;
+              &:empty {
+                padding-right: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  ${props => props.theme.breakpoints.up('md')} {
+    ${alignCss}
+  }
+  ${props => props.theme.breakpoints.up('sm')} {
+    [class*='responsiveSimple'] {
+      ${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-of-type {\n                    width: ").concat(inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : ''), ";\n                  }\n                }\n              }\n            }\n          }\n        }\n      ");
+    return `
+        ${inProps.theme.breakpoints.down('md')} {
+          [class*='MUIDataTable-responsiveBase'] {
+            tr:not([class*='responsiveSimple']) {
+              td.MuiTableCell-body {
+                > div {
+                  &:first-of-type {
+                    width: ${inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : '')};
+                  }
+                }
+              }
+            }
+          }
+        }
+      `;
   }
   return '';
-}, props => props.theme.palette.action.hover);
-const FilterLine = (0, _Theme.styled)('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .toolbar-filter-content {\n    margin-bottom: 8px;\n  }\n  .toolbar-filter-title {\n    font-weight: 700;\n    font-size: 14px;\n  }\n"])));
+}}
+
+  &.datatable-stripped {
+    .MuiTableBody-root {
+      tr:nth-of-type(odd) {
+        background-color: ${props => props.theme.palette.action.hover};
+      }
+    }
+  }
+`;
+const FilterLine = styled('div')`
+  display: flex;
+  align-items: center;
+  .toolbar-filter-content {
+    margin-bottom: 8px;
+  }
+  .toolbar-filter-title {
+    font-weight: 700;
+    font-size: 14px;
+  }
+`;
 function WrapFilterList(props) {
   const {
     filterLabel
-  } = (0, _DatatableContext.useDatatableContext)();
+  } = useDatatableContext();
   const hasFilter = !!props.filterList.filter(e => e.length).length;
   if (hasFilter) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterLine, {
-      children: [hasFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/_jsxs(FilterLine, {
+      children: [hasFilter && /*#__PURE__*/_jsx("div", {
         className: "toolbar-filter-title",
         children: filterLabel
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      }), /*#__PURE__*/_jsx("div", {
         className: "toolbar-filter-content",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.TableFilterList, _objectSpread({}, props))
+        children: /*#__PURE__*/_jsx(TableFilterList, {
+          ...props
+        })
       })]
     });
   }
   return '';
 }
 WrapFilterList.propTypes = {
-  filterList: _propTypes.default.array
+  filterList: PropTypes.array
 };
 WrapFilterList.defaultProps = {
   filterList: []
@@ -445,12 +576,54 @@ function WrapTableFooter(props) {
   const {
     loading,
     disabled
-  } = (0, _DatatableContext.useDatatableContext)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FooterContainer, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "datatable-footer ".concat(loading || disabled ? 'datatable-footer-disabled' : ''),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDatatables.TableFooter, _objectSpread({}, props))
+  } = useDatatableContext();
+  return /*#__PURE__*/_jsx(FooterContainer, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: `datatable-footer ${loading || disabled ? 'datatable-footer-disabled' : ''}`,
+      children: /*#__PURE__*/_jsx(TableFooter, {
+        ...props
+      })
     })
   });
 }
-const FooterContainer = (0, _Theme.styled)('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  .datatable-footer {\n    position: relative;\n    margin-left: auto;\n    &.datatable-footer-disabled {\n      position: relative;\n      .MuiTablePagination-root {\n        opacity: 0.6;\n      }\n      &:after {\n        position: absolute;\n        display: block;\n        z-index: 2;\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n        content: '';\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  ", " {\n    .MuiTableCell-footer,\n    .MuiToolbar-gutters {\n      padding: 0;\n    }\n\n    div[variant='standard'] {\n      margin-left: 4px;\n      margin-right: 16px;\n    }\n\n    .MuiTablePagination-actions {\n      margin-left: 10px;\n    }\n  }\n"])), props => props.theme.breakpoints.down('sm'));
+const FooterContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  .datatable-footer {
+    position: relative;
+    margin-left: auto;
+    &.datatable-footer-disabled {
+      position: relative;
+      .MuiTablePagination-root {
+        opacity: 0.6;
+      }
+      &:after {
+        position: absolute;
+        display: block;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        content: '';
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  ${props => props.theme.breakpoints.down('sm')} {
+    .MuiTableCell-footer,
+    .MuiToolbar-gutters {
+      padding: 0;
+    }
+
+    div[variant='standard'] {
+      margin-left: 4px;
+      margin-right: 16px;
+    }
+
+    .MuiTablePagination-actions {
+      margin-left: 10px;
+    }
+  }
+`;