@pingux/astro 2.65.0 → 2.65.1-alpha.0

package/lib/cjs/components/DataTable/DataTable.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DataTableProps } from '../../index';
+declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLDivElement>>;
+export default DataTable;

package/lib/cjs/components/DataTable/DataTable.js

@@ -28,7 +28,6 @@ var _table = require("@react-aria/table");
 var _virtualizer = require("@react-aria/virtualizer");
 var _layout = require("@react-stately/layout");
 var _table2 = require("@react-stately/table");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DataTableContext = require("../../context/DataTableContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
@@ -59,14 +58,18 @@ var ROW_HEIGHTS = {
     large: 50
   },
   spacious: {
-    medium: 48
+    medium: 48,
+    large: 60
   }
 };
 var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var scale = 'large';
   var direction = 'ltr';
-  var onAction = props.onAction;
-  var getDefaultWidth = (0, _react.useCallback)();
+  var onAction = props.onAction,
+    _props$scale = props.scale,
+    scale = _props$scale === void 0 ? 'large' : _props$scale;
+
+  // const getDefaultWidth = useCallback(() => null, []) as GetDefaultWidth;
+
   var getDefaultMinWidth = (0, _react.useCallback)(function (_ref) {
     var _ref$props = _ref.props,
       hideHeader = _ref$props.hideHeader,
@@ -89,23 +92,22 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // with table layout, so we need to track it here
   var state = (0, _table2.useTableState)(_objectSpread({}, props));
   var domRef = (0, _hooks.useLocalOrForwardRef)(ref);
-  var headerRef = (0, _react.useRef)();
-  var bodyRef = (0, _react.useRef)();
+  var headerRef = (0, _react.useRef)(null);
+  var bodyRef = (0, _react.useRef)(null);
   var density = props.density || 'regular';
   var columnLayout = (0, _react.useMemo)(function () {
     return new _table2.TableColumnLayout({
-      getDefaultWidth: getDefaultWidth,
       getDefaultMinWidth: getDefaultMinWidth
     });
-  }, [getDefaultWidth, getDefaultMinWidth]);
+  }, [getDefaultMinWidth]);
   var layout = (0, _react.useMemo)(function () {
     return new _layout.TableLayout({
       // If props.rowHeight is auto,
       // then use estimated heights based on scale, otherwise use fixed heights.
       rowHeight: props.overflowMode === 'wrap' ? null : ROW_HEIGHTS[density][scale],
       estimatedRowHeight: props.overflowMode === 'wrap' ? ROW_HEIGHTS[density][scale] : null,
-      headingHeight: props.overflowMode === 'wrap' ? null : DEFAULT_HEADER_HEIGHT[scale],
-      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : null,
+      headingHeight: props.overflowMode === 'wrap' ? undefined : DEFAULT_HEADER_HEIGHT[scale],
+      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : undefined,
       columnLayout: columnLayout,
       initialCollection: state.collection
     });
@@ -127,10 +129,6 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // This overrides collection view's renderWrapper to support DOM hierarchy.
   var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
     var style = (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
-    if (style.overflow === 'hidden') {
-      style.overflow = 'visible'; // needed to support position: sticky
-    }
-
     if (reusableView.viewType === 'rowgroup') {
       return (0, _react2.jsx)(TableRowGroup, {
         key: reusableView.key,
@@ -175,7 +173,7 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       case 'rowgroup':
       case 'row':
       case 'headerrow':
-        return null;
+        return undefined;
       case 'cell':
         {
           return (0, _react2.jsx)(TableCell, {
@@ -194,7 +192,7 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
         }));
       default:
-        return null;
+        return undefined;
     }
   };
   var viewport = (0, _react.useRef)({
@@ -215,7 +213,9 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var isEmpty = state.collection.size === 0;
   var onFocusedResizer = function onFocusedResizer() {
     /* istanbul ignore next */
-    bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+    if (bodyRef.current && headerRef.current) {
+      bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+    }
   };
   var mergedProps = (0, _reactAria.mergeProps)(gridProps, focusProps);
   return (0, _react2.jsx)(_DataTableContext.DataTableContext.Provider, {
@@ -245,47 +245,6 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   })));
 });
-DataTable.propTypes = {
-  /**
-    * Sets the amount of vertical padding within each cell.
-    * density: 'compact' | 'regular' | 'spacious'
-    * @default 'regular'
-  */
-  density: _propTypes["default"].string,
-  /** Sets the height of table. */
-  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  /** Determine if the header should be hidden. */
-  hasHiddenHeader: _propTypes["default"].bool,
-  /** Bool that determines if the items are sortable. */
-  isSortable: _propTypes["default"].bool,
-  /** The list of DataTable items. */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
-  /** Reflects current loading state. */
-  loadingState: _propTypes["default"].oneOf(['error', 'filtering', 'idle', 'loading', 'loadingMore', 'sorting']),
-  /** Handler that is called when a user performs an action on a row. */
-  onAction: _propTypes["default"].func,
-  /**
-   * Sets the overflow behavior for the cell contents.
-   * overflowMode: 'wrap' | 'truncate'
-   * @default 'truncate'
-   */
-  overflowMode: _propTypes["default"].string,
-  /** Callback function that fires when more data should be loaded on demand as user scrolls. */
-  onLoadMore: _propTypes["default"].func,
-  /** Callback function that fires when sortable column header is pressed. */
-  onSortChange: _propTypes["default"].func,
-  /** Defines the current column key to sort by and the sort direction. */
-  sortDescriptor: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    column: _propTypes["default"].string,
-    direction: _propTypes["default"].oneOf(['ascending', 'descending'])
-  }), _propTypes["default"].string]),
-  /** Sets the width of table. */
-  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
-};
-DataTable.defaultProps = {
-  width: '100%',
-  height: 565
-};
 var TableHeader = function TableHeader(_ref2) {
   var children = _ref2.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
@@ -322,7 +281,7 @@ var TableColumnHeader = function TableColumnHeader(props) {
     }
   });
   var allProps = [columnHeaderProps];
-  var _useStatusClasses = (0, _hooks.useStatusClasses)((_useStatusClasses2 = {
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', (_useStatusClasses2 = {
       'is-column-sortable': columnProps.allowsSorting
     }, (0, _defineProperty2["default"])(_useStatusClasses2, "is-align-".concat(columnProps.align), columnProps.align), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-first-column', isFirst), (0, _defineProperty2["default"])(_useStatusClasses2, 'is-last-column', isLast), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
@@ -334,7 +293,7 @@ var TableColumnHeader = function TableColumnHeader(props) {
     ref: ref,
     variant: "dataTable.tableHeadCell",
     className: classNames
-  }, _reactAria.mergeProps.apply(void 0, (0, _concat["default"])(allProps).call(allProps, [column.props.cellProps]))), columnProps.hideHeader ? (0, _react2.jsx)(_reactAria.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && ((_state$sortDescriptor3 = state.sortDescriptor) === null || _state$sortDescriptor3 === void 0 ? void 0 : _state$sortDescriptor3.column) === column.key && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
+  }, _reactAria.mergeProps.apply(void 0, (0, _concat["default"])(allProps).call(allProps, [column.props]))), columnProps.hideHeader ? (0, _react2.jsx)(_reactAria.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && ((_state$sortDescriptor3 = state.sortDescriptor) === null || _state$sortDescriptor3 === void 0 ? void 0 : _state$sortDescriptor3.column) === column.key && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
 };
 var TableRowGroup = function TableRowGroup(_ref3) {
   var children = _ref3.children,
@@ -348,7 +307,7 @@ var TableRow = function TableRow(_ref4) {
     children = _ref4.children,
     hasActions = _ref4.hasActions,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref4, _excluded3);
-  var ref = (0, _react.useRef)();
+  var ref = (0, _react.useRef)(null);
   var _useDataTableContext2 = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext2.state;
   var _useTableRow = (0, _table.useTableRow)({
@@ -365,7 +324,7 @@ var TableRow = function TableRow(_ref4) {
     isFocusVisible = _useFocusRing3.isFocusVisible,
     focusProps = _useFocusRing3.focusProps;
   var props = (0, _reactAria.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps);
-  var _useStatusClasses3 = (0, _hooks.useStatusClasses)({
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)('', {
       'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
     }),
     classNames = _useStatusClasses3.classNames;
@@ -381,7 +340,7 @@ var TableHeaderRow = function TableHeaderRow(_ref5) {
     style = _ref5.style;
   var _useDataTableContext3 = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext3.state;
-  var ref = (0, _react.useRef)();
+  var ref = (0, _react.useRef)(null);
   var _useTableHeaderRow = (0, _table.useTableHeaderRow)({
       node: item,
       isVirtualized: true
@@ -393,17 +352,18 @@ var TableHeaderRow = function TableHeaderRow(_ref5) {
   }), children);
 };
 var TableCell = function TableCell(_ref6) {
+  var _cell$column;
   var cell = _ref6.cell;
   var _useDataTableContext4 = (0, _DataTableContext.useDataTableContext)(),
     state = _useDataTableContext4.state;
-  var ref = (0, _react.useRef)();
-  var columnProps = cell.column.props;
+  var ref = (0, _react.useRef)(null);
+  var columnProps = (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.props;
   var _useTableCell = (0, _table.useTableCell)({
       node: cell,
       isVirtualized: true
     }, state, ref),
     gridCellProps = _useTableCell.gridCellProps;
-  var _useStatusClasses4 = (0, _hooks.useStatusClasses)((0, _defineProperty2["default"])({}, "is-align-".concat(columnProps.align), columnProps.align)),
+  var _useStatusClasses4 = (0, _hooks.useStatusClasses)('', (0, _defineProperty2["default"])({}, "is-align-".concat(columnProps.align), columnProps.align)),
     classNames = _useStatusClasses4.classNames;
   return (0, _react2.jsx)(_reactAria.FocusRing, {
     focusRingClass: "is-key-focused"
@@ -412,7 +372,7 @@ var TableCell = function TableCell(_ref6) {
     ref: ref,
     variant: "dataTable.tableCell",
     className: classNames
-  }, (0, _reactAria.mergeProps)(gridCellProps, cell.props.cellProps)), (0, _react2.jsx)(_index.Box, {
+  }, (0, _reactAria.mergeProps)(gridCellProps, cell.props)), (0, _react2.jsx)(_index.Box, {
     variant: "dataTable.tableCellContents"
   }, cell.rendered)));
 };
@@ -429,45 +389,5 @@ var CenteredWrapper = function CenteredWrapper(_ref7) {
     "aria-colspan": state.collection.columns.length
   }, children));
 };
-TableCell.propTypes = {
-  cell: _propTypes["default"].shape({
-    column: _propTypes["default"].shape({
-      props: _propTypes["default"].shape({
-        align: _propTypes["default"].string
-      })
-    }),
-    index: _propTypes["default"].number,
-    parentKey: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
-    props: _propTypes["default"].shape({
-      cellProps: _propTypes["default"].shape({})
-    }),
-    rendered: _propTypes["default"].node
-  })
-};
-TableHeaderRow.propTypes = {
-  children: _propTypes["default"].node,
-  item: _propTypes["default"].shape({}),
-  style: _propTypes["default"].shape({})
-};
-TableRow.propTypes = {
-  children: _propTypes["default"].node,
-  hasActions: _propTypes["default"].func,
-  item: _propTypes["default"].shape({})
-};
-TableColumnHeader.propTypes = {
-  column: _propTypes["default"].shape({
-    index: _propTypes["default"].number,
-    key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({
-      align: _propTypes["default"].string,
-      allowsSorting: _propTypes["default"].bool,
-      cellProps: _propTypes["default"].shape({}),
-      hideHeader: _propTypes["default"].bool
-    }),
-    rendered: _propTypes["default"].node
-  }),
-  isFirst: _propTypes["default"].bool,
-  isLast: _propTypes["default"].bool
-};
 var _default = DataTable;
 exports["default"] = _default;

package/lib/cjs/components/DataTable/DataTable.stories.d.ts

@@ -0,0 +1,202 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("../../index").DataTableProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            source: {
+                type: string;
+            };
+        };
+    };
+    argTypes: {
+        'aria-controls': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-describedby': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-details': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-errormessage': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-label': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        'aria-labelledby': {
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                category: string;
+            };
+            description: string;
+        };
+        density: {
+            control: {
+                disable: boolean;
+            };
+        };
+        overflowMode: {
+            control: {
+                disable: boolean;
+            };
+        };
+        width: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        height: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        sortDescriptor: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        onSortChange: {
+            description: string;
+        };
+        allowsSorting: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        hideHeader: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        loadingState: {
+            description: string;
+            control: {
+                disable: boolean;
+            };
+        };
+        onLoadMore: {
+            description: string;
+        };
+        items: {
+            control: {
+                disable: boolean;
+            };
+            description: string;
+        };
+    };
+    args: {
+        density: string;
+        overflowMode: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Dynamic: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const Sortable: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const AsyncLoading: {
+    (args: any): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};

package/lib/cjs/components/DataTable/DataTable.stories.js

@@ -124,10 +124,12 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var getCellProps = function getCellProps(columnKey) {
+var getCellProps = function getCellProps(columnKey, align) {
   return {
     pr: columnKey !== 'menu' ? 'lg' : 0,
-    pl: columnKey === 'timestamp' || columnKey === 'menu' ? 0 : 'lg'
+    pl: columnKey === 'timestamp' || columnKey === 'menu' ? 0 : 'lg',
+    hideHeader: columnKey === 'menu',
+    align: align
   };
 };
 var Default = function Default(args) {
@@ -216,19 +218,15 @@ var Default = function Default(args) {
   }), (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
-    return (0, _react2.jsx)(_index.DataTableColumn, {
-      cellProps: getCellProps(column.key),
+    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), {
       minWidth: column.key !== 'menu' ? 175 : 32,
-      width: column.key !== 'menu' ? '19.4%' : 32,
-      hideHeader: column.key === 'menu'
-    }, column.name);
+      width: column.key !== 'menu' ? '19.4%' : 32
+    }), column.name);
   }), (0, _react2.jsx)(_index.DataTableBody, {
     items: rows
   }, function (item) {
     return (0, _react2.jsx)(_index.DataTableRow, null, function (columnKey) {
-      return (0, _react2.jsx)(_index.DataTableCell, {
-        cellProps: getCellProps(columnKey)
-      }, item[columnKey]);
+      return (0, _react2.jsx)(_index.DataTableCell, getCellProps(columnKey, false), item[columnKey]);
     });
   }));
 };
@@ -310,22 +308,20 @@ var Dynamic = function Dynamic(args) {
     }
   });
   return (0, _react2.jsx)(_index.DataTable, (0, _extends2["default"])({}, args, {
-    "aria-label": "Dynamic table"
+    "aria-label": "Dynamic table",
+    density: "compact",
+    scale: "medium"
   }), (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
-    return (0, _react2.jsx)(_index.DataTableColumn, {
-      cellProps: getCellProps(column.key),
-      minWidth: 155,
-      align: "center"
-    }, column.name);
+    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, 'center'), {
+      minWidth: 155
+    }), column.name);
   }), (0, _react2.jsx)(_index.DataTableBody, {
     items: list.items
   }, function (item) {
     return (0, _react2.jsx)(_index.DataTableRow, null, function (columnKey) {
-      return (0, _react2.jsx)(_index.DataTableCell, {
-        cellProps: getCellProps(columnKey)
-      }, item[columnKey]);
+      return (0, _react2.jsx)(_index.DataTableCell, getCellProps(columnKey, 'left'), item[columnKey]);
     });
   }));
 };
@@ -427,12 +423,15 @@ var Sortable = function Sortable(args) {
               };
               return _context3.abrupt("return", {
                 items: (0, _sort["default"])(items).call(items, function (a, b) {
-                  var first = a[sortDescriptor.column];
-                  var second = b[sortDescriptor.column];
-                  var firstNumericValue = getNumericValue(first);
-                  var secondNumericValue = getNumericValue(second);
-                  var cmp = firstNumericValue && secondNumericValue ? firstNumericValue - secondNumericValue : collator.compare(first, second);
-                  return sortDescriptor.direction === 'descending' ? -cmp : cmp;
+                  if (sortDescriptor.column) {
+                    var first = a[sortDescriptor.column];
+                    var second = b[sortDescriptor.column];
+                    var firstNumericValue = getNumericValue(first);
+                    var secondNumericValue = getNumericValue(second);
+                    var cmp = firstNumericValue && secondNumericValue ? firstNumericValue - secondNumericValue : collator.compare(first, second);
+                    return sortDescriptor.direction === 'descending' ? -cmp : cmp;
+                  }
+                  return 1;
                 })
               });
             case 3:
@@ -455,23 +454,21 @@ var Sortable = function Sortable(args) {
   return (0, _react2.jsx)(_index.DataTable, (0, _extends2["default"])({}, args, {
     "aria-label": "Sortable table",
     sortDescriptor: list.sortDescriptor,
-    onSortChange: (0, _sort["default"])(list)
+    onSortChange: (0, _sort["default"])(list),
+    density: "compact",
+    scale: "medium"
   }), (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
-    return (0, _react2.jsx)(_index.DataTableColumn, {
-      cellProps: getCellProps(column.key),
+    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, 'center'), {
       allowsSorting: true,
-      minWidth: 155,
-      align: "center"
-    }, column.name);
+      minWidth: 155
+    }), column.name);
   }), (0, _react2.jsx)(_index.DataTableBody, {
     items: list.items
   }, function (item) {
     return (0, _react2.jsx)(_index.DataTableRow, null, function (columnKey) {
-      return (0, _react2.jsx)(_index.DataTableCell, {
-        cellProps: getCellProps(columnKey)
-      }, item[columnKey]);
+      return (0, _react2.jsx)(_index.DataTableCell, getCellProps(columnKey, false), item[columnKey]);
     });
   }));
 };
@@ -549,14 +546,15 @@ var AsyncLoading = function AsyncLoading(args) {
   });
   return (0, _react2.jsx)(_index.DataTable, (0, _extends2["default"])({}, args, {
     "aria-label": "Custom content table",
-    onAction: (0, _addonActions.action)('onAction')
+    onAction: (0, _addonActions.action)('onAction'),
+    density: "compact",
+    scale: "medium"
   }), (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
-    return (0, _react2.jsx)(_index.DataTableColumn, {
-      cellProps: getCellProps(column.key),
+    return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), {
       minWidth: 155
-    }, column.name);
+    }), column.name);
   }), (0, _react2.jsx)(_index.DataTableBody, {
     items: list.items,
     loadingState: list.loadingState,
@@ -565,9 +563,7 @@ var AsyncLoading = function AsyncLoading(args) {
     return (0, _react2.jsx)(_index.DataTableRow, {
       key: item.name
     }, function (columnKey) {
-      return (0, _react2.jsx)(_index.DataTableCell, {
-        cellProps: getCellProps(columnKey)
-      }, item[columnKey]);
+      return (0, _react2.jsx)(_index.DataTableCell, getCellProps(columnKey, false), item[columnKey]);
     });
   }));
 };