@semcore/data-table 16.0.0-prerelease.12 → 16.0.0-prerelease.14

package/lib/esm/components/DataTable/DataTable.mjs

@@ -0,0 +1,492 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, createComponent, lastInteraction, assignProps, Component } from "@semcore/core";
+import * as React from "react";
+import { ScrollArea, Box } from "@semcore/base-components";
+import { Head } from "../Head/Head.mjs";
+import { Body } from "../Body/Body.mjs";
+import { hasFocusableIn, isFocusInside } from "@semcore/core/lib/utils/use/useFocusLock";
+import syncScroll from "@semcore/core/lib/utils/syncScroll";
+import { getScrollOffsetValue } from "../../utils.mjs";
+import findComponent from "@semcore/core/lib/utils/findComponent";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import { ROW_GROUP } from "../../DataTable.mjs";
+import { MergedRowsCell, MergedColumnsCell } from "../Body/MergedCells.mjs";
+import { forkRef } from "@semcore/core/lib/utils/ref";
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SDataTable_1yoby_gg_{display:grid;position:relative;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_1yoby_gg_.__gridTemplateColumns_1yoby_gg_{grid-template-columns:var(--gridTemplateColumns_1yoby)}.___SDataTable_1yoby_gg_.__gridTemplateAreas_1yoby_gg_{grid-template-areas:var(--gridTemplateAreas_1yoby)}",
+    "1yoby_gg_"
+  ), {
+    "__SDataTable": "___SDataTable_1yoby_gg_",
+    "_gridTemplateColumns": "__gridTemplateColumns_1yoby_gg_",
+    "--gridTemplateColumns": "--gridTemplateColumns_1yoby",
+    "_gridTemplateAreas": "__gridTemplateAreas_1yoby_gg_",
+    "--gridTemplateAreas": "--gridTemplateAreas_1yoby"
+  })
+);
+var scrollStyles = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SScrollArea_1765z_gg_{width:-moz-fit-content;width:fit-content}.___SShadowHorizontal_1765z_gg_:after,.___SShadowHorizontal_1765z_gg_:before,.___SShadowVertical_1765z_gg_:after,.___SShadowVertical_1765z_gg_:before{z-index:1}",
+    "1765z_gg_"
+  ), {
+    "__SScrollArea": "___SScrollArea_1765z_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_1765z_gg_",
+    "__SShadowVertical": "___SShadowVertical_1765z_gg_"
+  })
+);
+var ACCORDION = Symbol("accordion");
+var DataTableRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(DataTableRoot2, _Component);
+  var _super = _createSuper(DataTableRoot2);
+  function DataTableRoot2(props) {
+    var _this;
+    _classCallCheck(this, DataTableRoot2);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "columnsSplitter", "/");
+    _defineProperty(_assertThisInitialized(_this), "columns", []);
+    _defineProperty(_assertThisInitialized(_this), "focusedCell", [-1, -1]);
+    _defineProperty(_assertThisInitialized(_this), "tableContainerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "tableRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "headerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "scrollBodyRef", void 0);
+    _defineProperty(_assertThisInitialized(_this), "scrollHeadRef", void 0);
+    _defineProperty(_assertThisInitialized(_this), "gridAreaGroupMap", /* @__PURE__ */ new Map());
+    _defineProperty(_assertThisInitialized(_this), "getRow", function(index) {
+      var _this$tableRef$curren;
+      return (_this$tableRef$curren = _this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.querySelector('[aria-rowindex="'.concat(index + 1, '"]'));
+    });
+    _defineProperty(_assertThisInitialized(_this), "hasFocusableInHeader", function() {
+      var hasFocusable = _this.columns.some(function(column) {
+        var columnElement = column.ref.current;
+        return columnElement && hasFocusableIn(columnElement);
+      });
+      return hasFocusable;
+    });
+    _defineProperty(_assertThisInitialized(_this), "changeFocusCell", function(rowIndex, colIndex, direction) {
+      var _this$tableRef$curren2, _this$tableRef$curren3;
+      var hasFocusable = _this.hasFocusableInHeader();
+      var maxCol = _this.columns.length - 1;
+      var maxRow = _this.totalRows;
+      var currentRow = (_this$tableRef$curren2 = _this.tableRef.current) === null || _this$tableRef$curren2 === void 0 ? void 0 : _this$tableRef$curren2.querySelector('[aria-rowindex="'.concat(_this.focusedCell[0] + 1, '"]'));
+      var headerCells = (_this$tableRef$curren3 = _this.tableRef.current) === null || _this$tableRef$curren3 === void 0 ? void 0 : _this$tableRef$curren3.querySelectorAll("[role=columnheader]");
+      var currentCell = currentRow === null || currentRow === void 0 ? void 0 : currentRow.querySelector("[role=gridcell][aria-colindex='".concat(_this.focusedCell[1] + 1, "']"));
+      var currentHeaderCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(_this.focusedCell[1]);
+      var changed = true;
+      var newRow = _this.focusedCell[0] + rowIndex;
+      var newCol = _this.focusedCell[1] + colIndex;
+      if ((hasFocusable && newRow < 0 || !hasFocusable && newRow < 1 || newRow > maxRow) && newRow !== _this.focusedCell[0]) {
+        changed = false;
+      }
+      if ((newCol < 0 || newCol > maxCol) && newCol !== _this.focusedCell[1]) {
+        changed = false;
+      }
+      if (!changed) return;
+      var row = _this.getRow(newRow);
+      var cell = row === null || row === void 0 ? void 0 : row.querySelector('[role=gridcell][aria-colindex="'.concat(newCol + 1, '"], [role=columnheader][aria-colindex="').concat(newCol + 1, '"]'));
+      if (cell instanceof HTMLElement && currentCell !== cell) {
+        _this.focusedCell = [newRow, newCol];
+        currentCell === null || currentCell === void 0 ? void 0 : currentCell.setAttribute("inert", "");
+        if (currentCell !== currentHeaderCell) {
+          currentCell === null || currentCell === void 0 ? void 0 : currentCell.removeAttribute("aria-describedby");
+        }
+        var headerCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(newCol);
+        var describedBy = headerCell === null || headerCell === void 0 ? void 0 : headerCell.getAttribute("aria-describedby");
+        cell.removeAttribute("inert");
+        if (headerCell !== cell && describedBy) {
+          cell.setAttribute("aria-describedby", describedBy);
+        }
+        cell === null || cell === void 0 ? void 0 : cell.focus();
+        if (newRow !== 0) {
+          currentHeaderCell === null || currentHeaderCell === void 0 ? void 0 : currentHeaderCell.setAttribute("inert", "");
+          var _headerCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(newCol);
+          _headerCell === null || _headerCell === void 0 ? void 0 : _headerCell.removeAttribute("inert");
+        }
+      } else if (cell === null && currentCell instanceof HTMLElement) {
+        var rowI = rowIndex;
+        var colI = colIndex;
+        if (direction === "left" || direction === "right") {
+          if (currentCell.dataset.groupedBy === "columns") {
+            colI = direction === "left" ? colI - 1 : colI + 1;
+          } else {
+            rowI = rowI - 1;
+          }
+        } else if (direction === "up" || direction === "down") {
+          if (currentCell.dataset.groupedBy === "rows") {
+            rowI = direction === "up" ? rowI - 1 : rowI + 1;
+          } else {
+            colI = colI - 1;
+          }
+        }
+        _this.changeFocusCell(rowI, colI, direction);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(e) {
+      switch (e.key) {
+        case "Tab": {
+          _this.setInert(true);
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          _this.changeFocusCell(0, -1, "left");
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          _this.changeFocusCell(0, 1, "right");
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          _this.changeFocusCell(-1, 0, "up");
+          break;
+        }
+        case "ArrowDown": {
+          e.preventDefault();
+          _this.changeFocusCell(1, 0, "down");
+          break;
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "initFocusableCell", function() {
+      var hasFocusable = _this.hasFocusableInHeader();
+      if (hasFocusable) {
+        _this.focusedCell = [0, 0];
+      } else {
+        _this.focusedCell = [1, 0];
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFocus", function(e) {
+      if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && lastInteraction.isKeyboard()) {
+        var _row;
+        if (_this.focusedCell[0] === -1 && _this.focusedCell[1] === -1) {
+          _this.initFocusableCell();
+        }
+        _this.setInert(true);
+        var row = _this.getRow(_this.focusedCell[0]);
+        if (!row) {
+          _this.initFocusableCell();
+          row = _this.getRow(_this.focusedCell[0]);
+        }
+        var cell = (_row = row) === null || _row === void 0 ? void 0 : _row.querySelectorAll("[role=gridcell], [role=columnheader]").item(_this.focusedCell[1]);
+        cell === null || cell === void 0 ? void 0 : cell.removeAttribute("inert");
+        cell instanceof HTMLElement && cell.focus();
+        e.currentTarget.setAttribute("tabIndex", "-1");
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function(e) {
+      var relatedTarget = e.relatedTarget;
+      var tableElement = _this.tableRef.current;
+      if (tableElement && (!relatedTarget || !isFocusInside(tableElement, relatedTarget) || !lastInteraction.isKeyboard())) {
+        _this.setInert(false);
+        tableElement.setAttribute("tabIndex", "0");
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function() {
+      _this.setInert(false);
+    });
+    var createRef = syncScroll();
+    _this.scrollBodyRef = createRef("body");
+    _this.scrollHeadRef = createRef("head");
+    _this.columns = _this.calculateColumns();
+    return _this;
+  }
+  _createClass(DataTableRoot2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.forceUpdate();
+    }
+  }, {
+    key: "totalRows",
+    get: function get() {
+      var totalRows = this.asProps.totalRows;
+      return totalRows !== null && totalRows !== void 0 ? totalRows : this.calculateRows().length;
+    }
+  }, {
+    key: "gridSettings",
+    get: function get() {
+      var gridTemplateColumns = this.columns.map(function(c) {
+        return c.gridColumnWidth;
+      });
+      var gridTemplateAreas = this.columns.map(function(c) {
+        return c.name;
+      });
+      return {
+        gridTemplateColumns,
+        gridTemplateAreas
+      };
+    }
+  }, {
+    key: "getHeadProps",
+    value: function getHeadProps() {
+      var _this$asProps = this.asProps, use = _this$asProps.use, compact = _this$asProps.compact, sort = _this$asProps.sort, onSortChange = _this$asProps.onSortChange, getI18nText = _this$asProps.getI18nText, uid = _this$asProps.uid;
+      var _this$gridSettings = this.gridSettings, gridTemplateColumns = _this$gridSettings.gridTemplateColumns, gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
+      return {
+        columns: this.columns,
+        use,
+        tableRef: this.tableRef,
+        compact: Boolean(compact),
+        sort,
+        onSortChange,
+        getI18nText,
+        uid,
+        ref: this.headerRef,
+        gridAreaGroupMap: this.gridAreaGroupMap,
+        gridTemplateColumns,
+        gridTemplateAreas
+      };
+    }
+  }, {
+    key: "getBodyProps",
+    value: function getBodyProps() {
+      var _header$children;
+      var _this$asProps2 = this.asProps, use = _this$asProps2.use, compact = _this$asProps2.compact, loading = _this$asProps2.loading, getI18nText = _this$asProps2.getI18nText;
+      var rows = this.calculateRows();
+      var _this$gridSettings2 = this.gridSettings, gridTemplateColumns = _this$gridSettings2.gridTemplateColumns, gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
+      var header = this.headerRef.current;
+      var headerHeight = Array.from((_header$children = header === null || header === void 0 ? void 0 : header.children) !== null && _header$children !== void 0 ? _header$children : []).reduce(function(maxHeight, col) {
+        var rect = col.getBoundingClientRect();
+        if (rect.height > maxHeight) {
+          maxHeight = rect.height;
+        }
+        return maxHeight;
+      }, 0);
+      return {
+        columns: this.columns,
+        rows,
+        use,
+        scrollRef: this.scrollBodyRef,
+        headerRows: this.columns.some(function(column) {
+          return Boolean(column.parent);
+        }) ? 2 : 1,
+        compact: Boolean(compact),
+        gridTemplateColumns,
+        gridTemplateAreas,
+        loading,
+        headerHeight,
+        getI18nText
+      };
+    }
+  }, {
+    key: "setInert",
+    value: function setInert(value) {
+      var _this$tableRef$curren4;
+      var cells = (_this$tableRef$curren4 = this.tableRef.current) === null || _this$tableRef$curren4 === void 0 ? void 0 : _this$tableRef$curren4.querySelectorAll("[role=gridcell], [role=columnheader]");
+      cells === null || cells === void 0 ? void 0 : cells.forEach(function(cell) {
+        if (value === true) {
+          cell.setAttribute("inert", "");
+        } else {
+          cell.removeAttribute("inert");
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SDataTable = Box;
+      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, w = _this$asProps3.w, wMax = _this$asProps3.wMax, wMin = _this$asProps3.wMin, h = _this$asProps3.h, hMax = _this$asProps3.hMax, hMin = _this$asProps3.hMin;
+      _this$asProps3.loading;
+      var _getScrollOffsetValue = getScrollOffsetValue(this.columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2), offsetLeftSum = _getScrollOffsetValue2[0], offsetRightSum = _getScrollOffsetValue2[1];
+      var _this$gridSettings3 = this.gridSettings, gridTemplateColumns = _this$gridSettings3.gridTemplateColumns, gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
+      var Head2 = findComponent(Children, ["DataTable.Head"]);
+      var Body2 = findComponent(Children, ["DataTable.Body"]);
+      var width = w !== null && w !== void 0 ? w : this.columns.some(function(c) {
+        return c.gridColumnWidth === "auto" || c.gridColumnWidth === "1fr";
+      }) ? "100%" : void 0;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(ScrollArea, _ref2.cn("ScrollArea", {
+        "leftOffset": offsetLeftSum,
+        "rightOffset": offsetRightSum,
+        "w": width,
+        "wMax": wMax,
+        "wMin": wMin,
+        "h": h,
+        "hMax": hMax,
+        "hMin": hMin,
+        "shadow": true,
+        "container": this.tableContainerRef,
+        "styles": scrollStyles
+      }), /* @__PURE__ */ React.createElement(ScrollArea.Container, {
+        tabIndex: -1
+      }, /* @__PURE__ */ React.createElement(SDataTable, _ref2.cn("SDataTable", _objectSpread({}, assignProps({
+        "ref": forkRef(this.tableRef, this.tableContainerRef),
+        "role": "grid",
+        "onKeyDown": this.handleKeyDown,
+        "onMouseMove": this.handleMouseMove,
+        "tabIndex": 0,
+        "onFocus": this.handleFocus,
+        "onBlur": this.handleBlur,
+        "aria-rowcount": this.totalRows,
+        "aria-colcount": this.columns.length,
+        "gridTemplateColumns": gridTemplateColumns.join(" "),
+        "gridTemplateAreas": gridTemplateAreas.join(" "),
+        "w": "100%",
+        "use:data": void 0,
+        "use:w": void 0,
+        "use:wMax": void 0,
+        "use:wMin": void 0,
+        "use:h": void 0,
+        "use:hMax": void 0,
+        "use:hMin": void 0
+      }, _ref))), Body2, Head2)), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
+        orientation: "horizontal"
+      }), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
+        orientation: "vertical"
+      }));
+    }
+  }, {
+    key: "calculateColumns",
+    value: function calculateColumns() {
+      var _this2 = this;
+      var _this$props = this.props, children = _this$props.children, data = _this$props.data;
+      var HeadComponent = findComponent(children, ["Head"]);
+      var hasGroup = findComponent(HeadComponent.props.children, ["Head.Group"]) !== void 0;
+      var groupIndex = 0;
+      var gridColumnIndex = 1;
+      var calculateGridTemplateColumn = this.calculateGridTemplateColumn.bind(this);
+      var columns = [];
+      var makeColumn = function makeColumn2(columnElement, parent, isFirst, isLast) {
+        var _columnElement$props$, _ref3, _columnElement$props$2;
+        var leftBordersFromParent = isFirst && ((parent === null || parent === void 0 ? void 0 : parent.props.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.props.borders) === "left") ? "left" : void 0;
+        var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.props.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.props.borders) === "right") ? "right" : void 0;
+        var column = {
+          name: columnElement.props.name,
+          // @ts-ignore
+          ref: function ref(node) {
+            if (node) {
+              var calculatedWidth = node.getBoundingClientRect().width;
+              var calculatedHeight = node.getBoundingClientRect().height;
+              column.calculatedWidth = calculatedWidth;
+              column.calculatedHeight = calculatedHeight;
+            }
+            this.ref.current = node;
+          },
+          gridColumnWidth: calculateGridTemplateColumn(columnElement),
+          fixed: (_columnElement$props$ = columnElement.props.fixed) !== null && _columnElement$props$ !== void 0 ? _columnElement$props$ : parent === null || parent === void 0 ? void 0 : parent.props.fixed,
+          calculatedWidth: 0,
+          calculatedHeight: 0,
+          borders: (_ref3 = (_columnElement$props$2 = columnElement.props.borders) !== null && _columnElement$props$2 !== void 0 ? _columnElement$props$2 : leftBordersFromParent) !== null && _ref3 !== void 0 ? _ref3 : rightBordersFromParent,
+          parent,
+          flexWrap: columnElement.props.flexWrap,
+          alignItems: columnElement.props.alignItems,
+          alignContent: columnElement.props.alignContent,
+          justifyContent: columnElement.props.justifyContent
+        };
+        return column;
+      };
+      React.Children.forEach(HeadComponent.props.children, function(child, i) {
+        if (!/* @__PURE__ */ React.isValidElement(child)) return;
+        if (child.type === Head.Column) {
+          var col = makeColumn(child);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(hasGroup ? "3" : "2", " / ").concat(gridColumnIndex + 1);
+          gridColumnIndex++;
+          columns.push(col);
+        } else if (child.type === Head.Group) {
+          var Group = child;
+          var childCount = React.Children.count(child.props.children);
+          var initGridColumn = gridColumnIndex;
+          React.Children.forEach(child.props.children, function(child2, j) {
+            if ((child2 === null || child2 === void 0 ? void 0 : child2.type) === Head.Column) {
+              var isFirst = j === 0;
+              var isLast = j === childCount - 1;
+              var _col = makeColumn(child2, Group, isFirst, isLast);
+              if (i === 0 && j === 0 && data.some(function(d) {
+                return d[ACCORDION];
+              })) {
+                gridColumnIndex++;
+                _col.gridArea = "2 / ".concat(gridColumnIndex - 1, " / 3 / ").concat(gridColumnIndex + 1);
+              } else {
+                _col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+              }
+              _col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+              gridColumnIndex++;
+              columns.push(_col);
+            }
+          });
+          _this2.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          groupIndex++;
+        }
+      });
+      return columns.filter(Boolean);
+    }
+  }, {
+    key: "calculateRows",
+    value: function calculateRows() {
+      var _this3 = this;
+      var data = this.asProps.data;
+      var rows = [];
+      var addToRows = function addToRows2(row) {
+        var dtRow = Object.entries(row).reduce(function(acc, _ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2), key = _ref5[0], value = _ref5[1];
+          var columnsToRow = key.split(_this3.columnsSplitter);
+          if (columnsToRow.length === 1) {
+            acc[key] = value;
+          } else {
+            acc[columnsToRow[0]] = new MergedColumnsCell(value, columnsToRow.length);
+          }
+          if (row[ACCORDION]) {
+            acc[ACCORDION] = row[ACCORDION];
+          }
+          return acc;
+        }, {});
+        rows.push(dtRow);
+      };
+      data.forEach(function(row, rowIndex2) {
+        var groupedRows = row[ROW_GROUP];
+        if (groupedRows) {
+          groupedRows.forEach(function(childRow, index) {
+            if (index === 0) {
+              var rowData = _objectSpread(_objectSpread({}, childRow), Object.entries(row).reduce(function(acc, _ref6) {
+                var _ref7 = _slicedToArray(_ref6, 2), key = _ref7[0], value = _ref7[1];
+                acc[key] = new MergedRowsCell(value, groupedRows.length);
+                return acc;
+              }, {}));
+              addToRows(rowData);
+            } else {
+              addToRows(childRow);
+            }
+          });
+        } else {
+          addToRows(row);
+        }
+      });
+      return rows;
+    }
+  }, {
+    key: "calculateGridTemplateColumn",
+    value: function calculateGridTemplateColumn(c) {
+      var _c$props$gtcWidth;
+      return (_c$props$gtcWidth = c.props.gtcWidth) !== null && _c$props$gtcWidth !== void 0 ? _c$props$gtcWidth : this.props.defaultGridTemplateColumnWidth;
+    }
+  }]);
+  return DataTableRoot2;
+}(Component);
+_defineProperty(DataTableRoot, "displayName", "DataTable");
+_defineProperty(DataTableRoot, "style", style);
+_defineProperty(DataTableRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
+_defineProperty(DataTableRoot, "defaultProps", {
+  use: "primary",
+  defaultGridTemplateColumnWidth: "auto",
+  h: "auto"
+});
+var DataTable = createComponent(DataTableRoot, {
+  Head,
+  Body
+});
+export {
+  ACCORDION,
+  DataTable
+};