@hitachivantara/uikit-react-core 3.74.0 → 4.0.1-next.2

package/dist/Table/Table.js

@@ -1,9 +1,17 @@
 "use strict";
 
+require("core-js/modules/es.object.keys.js");
+
 require("core-js/modules/es.symbol.js");
 
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
 require("core-js/modules/es.object.get-own-property-descriptor.js");
 
+require("core-js/modules/web.dom-collections.for-each.js");
+
 require("core-js/modules/es.object.get-own-property-descriptors.js");
 
 require("core-js/modules/es.array.iterator.js");
@@ -23,75 +31,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.array.filter.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.array.includes.js");
-
-require("core-js/modules/es.string.includes.js");
-
-require("core-js/modules/web.dom-collections.for-each.js");
-
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.array.concat.js");
-
-require("core-js/modules/es.regexp.to-string.js");
-
-require("core-js/modules/es.array.find.js");
-
-require("core-js/modules/es.string.fixed.js");
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _isNil = _interopRequireDefault(require("lodash/isNil"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactTable = _interopRequireWildcard(require("react-table"));
-
-var _reactTableHocFixedColumns = _interopRequireDefault(require("react-table-hoc-fixed-columns"));
-
-var _core = require("@material-ui/core");
-
-var _ = require("..");
-
-var _utils = require("../utils");
-
-var _withId = _interopRequireDefault(require("../withId"));
-
-var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
-
-var _Header = _interopRequireDefault(require("./Header"));
-
-var _NoData2 = _interopRequireDefault(require("./NoData"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _checkBoxUtils = require("./checkBoxUtils");
+var _clsx = _interopRequireDefault(require("clsx"));
 
-var _columnUtils = require("./columnUtils");
+var _styles = require("@mui/styles");
 
-var _expander = _interopRequireDefault(require("./expander"));
+var _TableContext = _interopRequireDefault(require("./TableContext"));
 
-var _selectTable = _interopRequireDefault(require("./selectTable"));
+var _styles2 = _interopRequireDefault(require("./styles"));
 
-var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["id", "classes", "className", "uniqClassName", "data", "columns", "page", "sortable", "defaultSorted", "selections", "onSelection", "onFetchData", "subElementTemplate", "tableProps", "rowCount", "noDataComponent", "idForCheckbox", "getTrProps", "getTableProps", "actions", "actionsCallback", "actionsDisabled", "maxVisibleActions", "secondaryActions", "allCheckBoxProps", "dropdownMenuProps", "paginationLabels", "paginationServerSide", "paginationProps", "showPagination", "showPageSize", "dataSize", "pageSize", "onPageSizeChange", "onPageChange", "pages", "collapseOnDataChange", "fixedCheckbox", "fixedSecondaryActions"];
+var _excluded = ["classes", "className", "component", "stickyHeader", "stickyColumns", "variant"];
 
 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); }
 
@@ -101,1051 +59,139 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var ReactTableFixedColumns = (0, _reactTableHocFixedColumns.default)(_reactTable.default);
-var ReactTableCheckbox = (0, _selectTable.default)(_reactTable.default);
-var ReactTableFixedColumnsCheckbox = (0, _selectTable.default)(ReactTableFixedColumns, {
-  callbackRefProperty: "innerRef"
-}); // TODO deprecate header labels in 2.x
+var defaultComponent = "table";
+
+var computeTablePartComponents = function computeTablePartComponents(rootComponent) {
+  if (rootComponent === "table") {
+    return {
+      Table: "table",
+      THead: "thead",
+      TBody: "tbody",
+      Tr: "tr",
+      Th: "th",
+      Td: "td"
+    };
+  }
 
+  return {
+    Table: rootComponent,
+    THead: rootComponent,
+    TBody: rootComponent,
+    Tr: rootComponent,
+    Th: rootComponent,
+    Td: rootComponent
+  };
+};
 /**
  * A Table gathers relational data, it displays values arranged to allow quick numerical analysis
  * like comparison and sorting.
  *
- * This component offers:
- * <ul>
- * <li>A standard table</li>
- * <li>Table with expander</li>
- * <li>Table with checkbox</li>
- * </ul>
+ * **HvTable** component offers a set of HTML-equivalent elements, **styled to Design System's specification**,
+ * for building tables.
+ * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.
  *
- * The type is defined by the existence of the properties:
- * <ul>
- * <li>subElementTemplate: Creates a table with expander</li>
- * <li>idForCheckbox: Creates a table with checkboxes</li>
- * <li>None: Creates a simple table</li>
- * </ul>
+ * For better data handling and **advanced features** we recommend the use of the utility hooks collection .
+ * See the <a href="?id=lab-table-hooks--main&viewMode=docs" target="_self">Table Hooks documentation</a> for more details.
  *
- * Only one of these properties should be set (or none), as it isn't possible to have a table with
- * an expander and checkbox simultaneously.
+ * **PLEASE NOTE**: This Table implementation is still a WIP. There might be breaking changes.
  */
 
-var HvTable = function HvTable(props) {
-  var _NoData;
 
-  var id = props.id,
-      classes = props.classes,
+var HvTable = /*#__PURE__*/(0, _react.forwardRef)(function HvTable(props, ref) {
+  var classes = props.classes,
       className = props.className,
-      uniqClassName = props.uniqClassName,
-      data = props.data,
-      columns = props.columns,
-      page = props.page,
-      _props$sortable = props.sortable,
-      sortable = _props$sortable === void 0 ? true : _props$sortable,
-      _props$defaultSorted = props.defaultSorted,
-      defaultSorted = _props$defaultSorted === void 0 ? [] : _props$defaultSorted,
-      selections = props.selections,
-      onSelection = props.onSelection,
-      onFetchData = props.onFetchData,
-      subElementTemplate = props.subElementTemplate,
-      _props$tableProps = props.tableProps,
-      tableProps = _props$tableProps === void 0 ? {
-    tableCaption: "Table Caption"
-  } : _props$tableProps,
-      rowCount = props.rowCount,
-      noDataComponent = props.noDataComponent,
-      _props$idForCheckbox = props.idForCheckbox,
-      idForCheckbox = _props$idForCheckbox === void 0 ? "" : _props$idForCheckbox,
-      getTrPropsProp = props.getTrProps,
-      getTablePropsProp = props.getTableProps,
-      actions = props.actions,
-      _actionsCallback = props.actionsCallback,
-      actionsDisabled = props.actionsDisabled,
-      maxVisibleActions = props.maxVisibleActions,
-      secondaryActions = props.secondaryActions,
-      allCheckBoxProps = props.allCheckBoxProps,
-      dropdownMenuProps = props.dropdownMenuProps,
-      paginationLabels = props.paginationLabels,
-      _props$paginationServ = props.paginationServerSide,
-      paginationServerSide = _props$paginationServ === void 0 ? false : _props$paginationServ,
-      _props$paginationProp = props.paginationProps,
-      paginationProps = _props$paginationProp === void 0 ? {} : _props$paginationProp,
-      _props$showPagination = props.showPagination,
-      showPagination = _props$showPagination === void 0 ? true : _props$showPagination,
-      _props$showPageSize = props.showPageSize,
-      showPageSize = _props$showPageSize === void 0 ? true : _props$showPageSize,
-      dataSize = props.dataSize,
-      pageSize = props.pageSize,
-      _onPageSizeChange = props.onPageSizeChange,
-      _onPageChange = props.onPageChange,
-      pages = props.pages,
-      _props$collapseOnData = props.collapseOnDataChange,
-      collapseOnDataChange = _props$collapseOnData === void 0 ? true : _props$collapseOnData,
-      fixedCheckbox = props.fixedCheckbox,
-      fixedSecondaryActions = props.fixedSecondaryActions,
+      _props$component = props.component,
+      component = _props$component === void 0 ? defaultComponent : _props$component,
+      _props$stickyHeader = props.stickyHeader,
+      stickyHeader = _props$stickyHeader === void 0 ? false : _props$stickyHeader,
+      _props$stickyColumns = props.stickyColumns,
+      stickyColumns = _props$stickyColumns === void 0 ? false : _props$stickyColumns,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? "default" : _props$variant,
       others = (0, _objectWithoutProperties2.default)(props, _excluded);
-
-  var _useState = (0, _react.useState)(defaultSorted),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      sorted = _useState2[0],
-      setSorted = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      initiallyLoaded = _useState4[0],
-      setInitiallyLoaded = _useState4[1];
-
-  var _useState5 = (0, _react.useState)({}),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      expanded = _useState6[0],
-      setExpanded = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(page || 0),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      currentPage = _useState8[0],
-      setCurrentPage = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(pageSize || data.length),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      currentPageSize = _useState10[0],
-      setCurrentPageSize = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(selections || []),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      selection = _useState12[0],
-      setSelection = _useState12[1];
-
-  var tableRef = (0, _react.useRef)(null);
-  /**
-   * Change the state property initiallyLoaded to identify that it is the first load.
-   */
-
-  (0, _react.useEffect)(function () {
-    setInitiallyLoaded(true);
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (page !== undefined) {
-      setCurrentPage(page);
-    }
-  }, [page]);
-  (0, _react.useEffect)(function () {
-    if (collapseOnDataChange) setExpanded({});
-  }, [data, collapseOnDataChange]);
-  (0, _react.useEffect)(function () {
-    if (!idForCheckbox) return;
-
-    if (selections) {
-      setSelection(selections);
-      return;
-    }
-
-    var dataIds = data.map(function (item) {
-      return item[idForCheckbox];
-    });
-    var updatedSelection = selection.filter(function (item) {
-      return dataIds.includes(item);
-    });
-    setSelection(updatedSelection); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, idForCheckbox, selections]);
-  (0, _react.useEffect)(function () {
-    var newPageSize = !pageSize && !showPagination ? data.length : pageSize;
-
-    if (pages && currentPage === pages) {
-      setCurrentPage(function (previousValue) {
-        return previousValue - 1;
-      });
-    }
-
-    if (newPageSize && currentPageSize !== newPageSize) {
-      var newPage = page !== undefined ? page : Math.floor(currentPageSize * currentPage / newPageSize);
-      setCurrentPage(newPage);
-      setCurrentPageSize(newPageSize);
-      _onPageSizeChange === null || _onPageSizeChange === void 0 ? void 0 : _onPageSizeChange(newPageSize, newPage);
-    } // currentPage and currentPageSize don't need to be watched
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [data.length, pageSize, showPagination, _onPageSizeChange]);
-  /**
-   * Returns data set with nulls replaced by em dashes.
-   *
-   * @returns {Array} new data set
-   */
-
-  var sanitizedData = function sanitizedData() {
-    return data.map(function (entry) {
-      var newEntry = {};
-      Object.keys(entry).forEach(function (key) {
-        var _entry$key;
-
-        newEntry[key] = (_entry$key = entry[key]) !== null && _entry$key !== void 0 ? _entry$key : "—";
-      });
-      return newEntry;
-    });
-  };
-
-  var PaginationComponent = (0, _react.useCallback)(function (tablePaginationProps) {
-    return /*#__PURE__*/_react.default.createElement(_.HvPagination, (0, _extends2.default)({
-      id: (0, _utils.setId)(id, "pagination"),
-      labels: paginationLabels,
-      pageSize: tablePaginationProps.pageSize,
-      pages: tablePaginationProps.pages,
-      page: tablePaginationProps.page,
-      canPrevious: tablePaginationProps.canPrevious,
-      canNext: tablePaginationProps.canNext,
-      onPageChange: tablePaginationProps.onPageChange,
-      onPageSizeChange: tablePaginationProps.onPageSizeChange,
-      showPageSizeOptions: tablePaginationProps.showPageSizeOptions
-    }, paginationProps));
-  }, [id, paginationLabels, paginationProps]);
-  /**
-   * Pagination customizations.
-   */
-
-  var getPaginationProps = function getPaginationProps() {
-    return _objectSpread(_objectSpread({
-      showPagination: data.length > 0 && showPagination,
-      showPageSizeOptions: showPageSize
-    }, showPagination && _objectSpread(_objectSpread({
-      PaginationComponent: PaginationComponent,
-      onPageSizeChange: function onPageSizeChange(newPageSize, p) {
-        setExpanded({});
-        setCurrentPage(p);
-        setCurrentPageSize(newPageSize);
-        _onPageSizeChange === null || _onPageSizeChange === void 0 ? void 0 : _onPageSizeChange(newPageSize, p);
-      },
-      onPageChange: function onPageChange(p) {
-        setExpanded({});
-        setCurrentPage(p);
-        _onPageChange === null || _onPageChange === void 0 ? void 0 : _onPageChange(p);
-      }
-    }, pageSize && {
-      defaultPageSize: pageSize
-    }), pages && {
-      pages: pages
-    })), {}, {
-      page: currentPage,
-      pageSize: paginationServerSide || data.length !== 0 ? currentPageSize : 0
-    });
-  };
-  /**
-   * Function used to load data asynchronously.
-   *
-   * @param {Object} tableState - an Object containing information about the current state of the table.
-   */
-
-
-  var onFetchDataInternal = function onFetchDataInternal(tableState) {
-    var pageSizeT = tableState.pageSize,
-        pageT = tableState.page,
-        sortedT = tableState.sorted;
-    if (!initiallyLoaded) return;
-    var cursor = "".concat(pageT * pageSizeT);
-
-    if (sorted.length > 0 && (sorted[0].id !== sortedT[0].id || sorted[0].desc !== sortedT[0].desc)) {
-      cursor = "0";
-    }
-
-    onFetchData === null || onFetchData === void 0 ? void 0 : onFetchData(cursor, pageSizeT, sortedT);
-  };
-  /**
-   * Obtains server side data.
-   *
-   * @returns {Object}
-   */
-
-
-  var getServerSideProps = function getServerSideProps() {
-    return paginationServerSide ? {
-      page: currentPage,
-      manual: true,
-      onFetchData: onFetchDataInternal
-    } : {};
-  };
-  /**
-   * Add the class "sorted" to the selected column.
-   *
-   * @param sortedColumn - the column representation from the user.
-   */
-
-
-  var onSortChange = (0, _react.useCallback)(function (sortedColumn) {
-    setSorted(sortedColumn);
-    setCurrentPage(0);
-    setExpanded({});
-  }, []);
-  /**
-   * Sort properties override to set onSortedChange
-   *
-   * @returns {{sortable: boolean, onSortedChange: onSortChange}}
-   */
-
-  var getSortProps = function getSortProps() {
-    return _objectSpread(_objectSpread({
-      sortable: sortable
-    }, sortable && {
-      defaultSorted: defaultSorted
-    }), {}, {
-      onSortedChange: onSortChange
-    });
-  };
-  /**
-   * Selects or unselect a row.
-   *
-   * @param {object} event - the event that triggered the selection
-   * @param {Number} key - the key that uniquely identifies the row.
-   */
-
-
-  var _toggleSelection = function toggleSelection(event, key) {
-    var newSelection = selection.includes(key) ? selection.filter(function (el) {
-      return el !== key;
-    }) : [].concat((0, _toConsumableArray2.default)(selection), [key]); // update the state
-
-    setSelection(newSelection);
-    onSelection === null || onSelection === void 0 ? void 0 : onSelection(event, newSelection);
-  };
-
-  var getCheckboxProps = function getCheckboxProps() {
-    return {
-      id: id,
-      selectWidth: 32,
-      SelectAllInputComponent: function SelectAllInputComponent() {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _clsx.default)(classes.checkBox)
-        });
-      },
-      toggleSelection: function toggleSelection(idSelection, shiftkey, row) {
-        _toggleSelection(null, row[idForCheckbox]);
-      }
-    };
-  };
-  /**
-   * Override of the thead th. This method is used to add properties to the entire column.
-   *
-   * @param {Object} state - The current state of the table.
-   * @param {Object} rowInfo - An object with row information.
-   * @param {Object} column - An object with column information.
-   * @param {Object} instance- An object with instance information.
-   * @returns {{onClick: onClick, scope: string, className: (*), id: (any)}}
-   */
-
-
-  var getTheadThProps = function getTheadThProps(state, rowInfo, column, instance) {
-    var isSortable = sortable && ((0, _isNil.default)(column.sortable) || column.sortable);
-
-    if (column.id === "secondaryActions") {
-      isSortable = null;
-    }
-
-    var ariaSort;
-
-    if (sorted.length > 0) {
-      if (column.id === sorted[0].id) {
-        var sortDirection = sorted[0].desc === true ? "descending" : "ascending";
-        ariaSort = {
-          "aria-sort": sortDirection
-        };
-      } else ariaSort = {
-        "aria-sort": undefined
-      };
-    }
-
-    (0, _columnUtils.appendClassnames)(column, sorted, classes, sortable);
-    return _objectSpread(_objectSpread({
-      id: (0, _utils.setId)(id, "column", column.id),
-      onKeyDown: function onKeyDown(event) {
-        if (isSortable && ((0, _utils.isKeypress)(event, _utils.KeyboardCodes.Enter) || (0, _utils.isKeypress)(event, _utils.KeyboardCodes.Space))) {
-          event.preventDefault();
-          instance.sortColumn(column);
-        }
-      },
-      onClick: function onClick() {
-        if (isSortable) {
-          document.getElementById("".concat(id, "-column-").concat(column.id, "-sort-button")).focus();
-          instance.sortColumn(column);
-        }
-      },
-      scope: "col"
-    }, ariaSort), {}, {
-      className: column.id !== "secondaryActions" ? (0, _columnUtils.setHeaderSortableClass)(isSortable, classes.theadTh) : (0, _clsx.default)(classes.theadTh, "secondaryAction")
-    });
-  };
-  /**
-   * Override of the tbody. This method is used to add properties to the entire table body.
-   *
-   * @returns {{role: string, className: string}}
-   */
-
-
-  var getTBodyProps = function getTBodyProps() {
-    return {
-      role: "rowgroup",
-      className: (0, _clsx.default)(classes.tbody, data.length === 0 && classes.tBodyEmpty)
-    };
-  };
-  /**
-   * A getter for the row provided by the React table
-   * used to correct the role definition for the row element.
-   *
-   * @returns {Object} - The object that contains the correct role to be applied to the table rows.
-   */
-
-
-  var getTrGroupProps = function getTrGroupProps() {
+  var containerRef = (0, _react.useRef)(ref);
+  var components = (0, _react.useMemo)(function () {
+    return computeTablePartComponents(component);
+  }, [component]);
+  var tableContext = (0, _react.useMemo)(function () {
     return {
-      role: undefined,
-      className: classes.trGroups
+      components: components,
+      variant: variant,
+      containerRef: containerRef
     };
-  };
-  /**
-   * Open and closes the expander of a row.
-   *
-   * @param {numeric} rowIndex - The index of the row to toggle.
-   */
-
-
-  var toggleExpand = function toggleExpand(rowIndex) {
-    setExpanded((0, _defineProperty2.default)({}, rowIndex, !expanded[rowIndex]));
-  };
-
-  var computeRowId = function computeRowId(rowInfo) {
-    var _rowInfo$original;
-
-    if (idForCheckbox && rowInfo !== null && rowInfo !== void 0 && (_rowInfo$original = rowInfo.original) !== null && _rowInfo$original !== void 0 && _rowInfo$original[idForCheckbox]) {
-      return rowInfo.original[idForCheckbox];
-    }
-
-    return null;
-  };
-
-  var computeRowElementId = function computeRowElementId(rowInfo) {
-    var rowId = computeRowId(rowInfo);
-    return rowId && (0, _utils.setId)(id, "row", rowId) || rowInfo && (0, _utils.setId)(id, "row-index", rowInfo.index) || undefined;
-  };
-  /**
-   * A getter for the row provided by the React table
-   * used to add an onClick function to open the expander when the row is clicked.
-   *
-   * @param {Object} state - The current state of the table.
-   * @param {Object} rowInfo - An object containing information about the row.
-   * @returns {Object} - The object that contains the classes to be applied to the table.
-   */
-
-
-  var getTrProps = function getTrProps(state, rowInfo) {
-    var expandedProps = rowInfo !== undefined && expanded[0] && Object.keys(expanded).toString() === rowInfo.nestingPath.toString() ? {
-      "aria-expanded": true
-    } : undefined;
-    var ariaRowIndex = rowInfo !== undefined ? {
-      "aria-rowindex": rowInfo.index
-    } : undefined;
-
-    var baseTrProps = _objectSpread(_objectSpread({
-      id: computeRowElementId(rowInfo),
-      className: classes.tr,
-      role: "row",
-      "aria-selected": "false"
-    }, expandedProps), ariaRowIndex);
-
-    if (subElementTemplate && rowInfo && rowInfo.row) {
-      return _objectSpread(_objectSpread({}, baseTrProps), {}, {
-        className: (0, _clsx.default)(classes.tr, classes.pointer)
-      });
-    }
-
-    var rowId = computeRowId(rowInfo);
-
-    if (rowId && selection.includes(rowId)) {
-      return _objectSpread(_objectSpread({}, baseTrProps), {}, {
-        className: (0, _clsx.default)(classes.tr, "selected"),
-        "aria-selected": "true"
-      });
-    }
-
-    return baseTrProps;
-  };
-
-  var getTableProps = function getTableProps() {
-    var baseTableProps = {
-      role: "table",
-      "aria-rowcount": rowCount || data.length,
-      id: (0, _utils.setId)(id, "table"),
-      className: classes.table
-    };
-
-    if (tableProps) {
-      return _objectSpread(_objectSpread({}, baseTableProps), {}, {
-        caption: tableProps.tableCaption
-      });
-    }
-
-    return baseTableProps;
-  };
-
-  var getTdProps = function getTdProps(state, rowInfo, column) {
-    return {
-      id: (0, _utils.setId)(computeRowElementId(rowInfo), "column", column.id),
-      className: (0, _clsx.default)(classes.td, sorted.find(function (elemt) {
-        return column.id === elemt.id;
-      }) !== undefined && "sorted"),
-      role: "cell"
-    };
-  };
-  /**
-   * Return the NoData component with label.
-   *
-   * @returns {*}
-   */
-
-
-  var getNoDataProps = function getNoDataProps() {
-    return _NoData || (_NoData = /*#__PURE__*/_react.default.createElement(_NoData2.default, null, noDataComponent));
-  };
+  }, [components, variant, containerRef]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableContext.default.Provider, {
+    value: tableContext,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(components.Table, _objectSpread({
+      ref: ref,
+      role: component === defaultComponent ? null : "table",
+      className: (0, _clsx.default)(classes.root, className, stickyHeader && classes.stickyHeader, stickyColumns && classes.stickyColumns, variant !== "default" && classes.listRow)
+    }, others))
+  });
+});
+process.env.NODE_ENV !== "production" ? HvTable.propTypes = {
   /**
-   * Selects all the available rows on the page.
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `table`.
    *
-   * @param {object} event - the event that triggered the selection
+   * When using non-table elements, layout is up to the developer using the component.
    */
+  component: _propTypes.default.elementType,
 
-
-  var togglePage = function togglePage(event) {
-    var config = {
-      currentPage: currentPage,
-      currentPageSize: currentPageSize,
-      paginationServerSide: paginationServerSide
-    };
-    var newSelection = (0, _checkBoxUtils.getPageSelection)(idForCheckbox, tableRef, config, selection);
-    setSelection(newSelection);
-    onSelection === null || onSelection === void 0 ? void 0 : onSelection(event, newSelection);
-  };
   /**
-   * Selects all the available rows on the page.
-   *
-   * @param {object} event - the event that triggered the selection
+   * Content to be rendered
    */
+  children: _propTypes.default.node.isRequired,
 
-
-  var toggleAll = function toggleAll(event) {
-    var allSelected = selection.length === data.length;
-    var newSelection = (0, _checkBoxUtils.getPageSelection)(idForCheckbox, tableRef, undefined, selection, allSelected);
-    setSelection(newSelection);
-    onSelection === null || onSelection === void 0 ? void 0 : onSelection(event, newSelection);
-  };
-
-  var hasFixedLeftColumns = (0, _react.useMemo)(function () {
-    return columns.some(function (col) {
-      return col.fixed === "left" || col.fixed === true;
-    });
-  }, [columns]);
-  var hasFixedRightColumns = (0, _react.useMemo)(function () {
-    return columns.some(function (col) {
-      return col.fixed === "right";
-    });
-  }, [columns]);
-  var hasFixedCheckbox = !!idForCheckbox && (fixedCheckbox === undefined && hasFixedLeftColumns || fixedCheckbox);
-  var hasFixedSecundaryActions = !!secondaryActions && (fixedSecondaryActions === undefined && hasFixedRightColumns || fixedSecondaryActions);
-  var AugmentedTable = (0, _react.useMemo)(function () {
-    var hasFixedColumns = hasFixedLeftColumns || hasFixedRightColumns || hasFixedCheckbox || hasFixedSecundaryActions;
-
-    if (idForCheckbox && hasFixedColumns) {
-      return ReactTableFixedColumnsCheckbox;
-    }
-
-    if (idForCheckbox) {
-      return ReactTableCheckbox;
-    }
-
-    if (hasFixedColumns) {
-      return ReactTableFixedColumns;
-    }
-
-    return _reactTable.default;
-  }, [hasFixedCheckbox, hasFixedLeftColumns, hasFixedRightColumns, hasFixedSecundaryActions, idForCheckbox]);
-
-  var getTableStyles = function getTableStyles() {
-    return (0, _styles.tableStyleOverrides)(classes);
-  }; // Add dropdown menu column if secondaryActions exists in props
-
-
-  if (!!secondaryActions && !columns.some(function (col) {
-    return col.accessor === "secondaryActions";
-  })) {
-    columns.push({
-      headerText: "",
-      accessor: "secondaryActions",
-      cellType: "alpha-numeric",
-      width: 33,
-      sortable: false,
-      // will be fixed if told so or automatically if there are any column fixed to the right
-      fixed: hasFixedSecundaryActions ? "right" : undefined,
-      Cell: function Cell(propsCell) {
-        return propsCell.original.noActions ? null : /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, (0, _extends2.default)({
-          id: (0, _utils.setId)(computeRowElementId(propsCell)),
-          secondaryActions: secondaryActions,
-          original: propsCell.original
-        }, dropdownMenuProps));
-      }
-    });
-  } // Creates the thead with the text and the sorted icon.
-
-
-  _reactTable.ReactTableDefaults.expanderDefaults.show = false; // eslint-disable-next-line react/prop-types
-
-  _reactTable.ReactTableDefaults.column.Header = (0, _react.useCallback)(function (_ref) {
-    var column = _ref.column;
-    return /*#__PURE__*/_react.default.createElement(_Header.default, {
-      id: id // eslint-disable-next-line react/prop-types
-      ,
-      key: column.id,
-      column: column,
-      sort: sorted,
-      tableSortable: sortable,
-      onSortChange: onSortChange
-    });
-  }, [id, onSortChange, sorted, sortable]); // add expander button
-
-  var expanderColumn = (0, _columnUtils.createExpanderButton)(columns, subElementTemplate, classes, toggleExpand); // add expander
-
-  var expanderComponent = (0, _expander.default)(subElementTemplate, classes);
-  var showSelectAllPages = !paginationServerSide && showPagination && selection.length < data.length;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    id: id,
-    className: (0, _clsx.default)(classes.tableContainer, className)
-  }, idForCheckbox && /*#__PURE__*/_react.default.createElement(_.HvBulkActions, (0, _extends2.default)({
-    id: (0, _utils.setId)(id, "select-all"),
-    "aria-controls": (0, _utils.setId)(id, "table"),
-    classes: {
-      root: classes.bulkActions
-    },
-    numTotal: dataSize !== null && dataSize !== void 0 ? dataSize : data.length,
-    numSelected: selection.length,
-    onSelectAll: togglePage,
-    onSelectAllPages: toggleAll,
-    showSelectAllPages: showSelectAllPages,
-    labels: {
-      selectAllPages: "Select all ".concat(data.length, " items across all pages")
-    },
-    actions: actions,
-    actionsCallback: function actionsCallback() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return _actionsCallback === null || _actionsCallback === void 0 ? void 0 : _actionsCallback.apply(void 0, args.concat([selection]));
-    },
-    actionsDisabled: actionsDisabled,
-    maxVisibleActions: maxVisibleActions
-  }, allCheckBoxProps)), /*#__PURE__*/_react.default.createElement(AugmentedTable, (0, _extends2.default)({
-    id: (0, _utils.setId)(id, "data")
-  }, others, getTableStyles(), getPaginationProps(), getServerSideProps(), getSortProps(), getCheckboxProps(), {
-    ref: tableRef,
-    getTableProps: getTableProps,
-    getTheadThProps: getTheadThProps,
-    getTrProps: getTrPropsProp || getTrProps,
-    getTdProps: getTdProps,
-    getTbodyProps: getTBodyProps,
-    data: sanitizedData(),
-    columns: expanderColumn,
-    className: "-highlight",
-    uniqClassName: uniqClassName,
-    SubComponent: expanderComponent,
-    expanded: expanded,
-    keyField: idForCheckbox,
-    isSelected: function isSelected(key) {
-      return (0, _checkBoxUtils.isSelected)(key, selection);
-    },
-    NoDataComponent: getNoDataProps,
-    getTrGroupProps: getTrGroupProps,
-    fixedCheckbox: hasFixedCheckbox
-  })));
-};
-
-process.env.NODE_ENV !== "production" ? HvTable.propTypes = {
   /**
    * Class names to be applied.
    */
   className: _propTypes.default.string,
 
   /**
-   * Unique class name used to identify the fixed table
+   * Whether the `HvTable` has a sticky header row.
    */
-  uniqClassName: _propTypes.default.string,
+  stickyHeader: _propTypes.default.bool,
 
   /**
-   * Id to be applied to the root node.
+   * Whether the `HvTable` has sticky columns.
    */
-  id: _propTypes.default.string,
+  stickyColumns: _propTypes.default.bool,
 
   /**
-   * the classes object to be applied into the root object.
+   * Whether the `HvTable` has the list row styles or the default.
    */
-  classes: _propTypes.default.shape({
-    /**
-     * Styles applied to the component root.
-     */
-    root: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component thead.
-     */
-    thead: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component tr.
-     */
-    tr: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component sort icon.
-     */
-    rtSortIcon: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component when the sort icon is shown.
-     */
-    sortedIconShown: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component when the sort icon is hidden.
-     */
-    sortedIconHidden: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component pointer.
-     */
-    pointer: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component subtitle.
-     */
-    subtitle: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component title.
-     */
-    title: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component when type is link.
-     */
-    link: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component expander.
-     */
-    subComponentContainer: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component icon in the columns.
-     */
-    iconContainer: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component columns.
-     */
-    firstWithNumeric: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component table header row.
-     */
-    theadTh: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component table body.
-     */
-    tbody: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component table body when empty.
-     */
-    tBodyEmpty: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component table cell.
-     */
-    td: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component table container.
-     */
-    tableContainer: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component checkbox.
-     */
-    checkBox: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component checkbox row.
-     */
-    checkBoxRow: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component checkbox text.
-     */
-    checkBoxText: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component table header groups.
-     */
-    trGroups: _propTypes.default.string,
-
-    /**
-     * Styles applied to the component table.
-     */
-    table: _propTypes.default.string,
-
-    /**
-     * Styles applied to the HvBulkActions component.
-     */
-    bulkActions: _propTypes.default.string
-  }).isRequired,
+  variant: _propTypes.default.oneOf(["listrow", "default"]),
 
   /**
-   * Labels for the pagination.
+   * A Jss Object used to override or extend the styles applied.
    */
-  paginationLabels: _propTypes.default.shape({
-    /**
-     * Show label.
-     */
-    pageSizePrev: _propTypes.default.string,
-
-    /**
-     * Indication of the units of the page size selection.
-     */
-    pageSizeEntryName: _propTypes.default.string,
-
-    /**
-     * Used for the aria-label of the selection of number of unit.
-     */
-    pageSizeSelectorDescription: _propTypes.default.string,
-
-    /**
-     * Separator of current page and total pages.
-     */
-    pagesSeparator: _propTypes.default.string,
-
-    /**
-     * Title of button `firstPage`.
-     */
-    paginationFirstPageTitle: _propTypes.default.string,
-
+  classes: _propTypes.default.shape({
     /**
-     * Title of button `previousPage`.
+     * Styles applied to the component root class.
      */
-    paginationPreviousPageTitle: _propTypes.default.string,
+    root: _propTypes.default.string,
 
     /**
-     * Title of button `nextPage`.
+     * Styles applied to the component root class when it has a sticky header.
      */
-    paginationNextPageTitle: _propTypes.default.string,
+    stickyHeader: _propTypes.default.string,
 
     /**
-     * Pagination title of button `lastPage`.
+     * Styles applied to the component root class when it has sticky columns.
      */
-    paginationLastPageTitle: _propTypes.default.string,
+    stickyColumns: _propTypes.default.string,
 
     /**
-     * Aria-label passed to the page input.
+     * Styles applied to the component root class when it has sticky columns.
      */
-    paginationInputLabel: _propTypes.default.string
-  }),
-
-  /**
-   * The column definition to apply to the table. Please check https://react-table.js.org/#/story/readme for more info
-   Use the property "cellType" to define the different types of cell. Available values: "number" , "alpha-numeric" and "link.
-   If the type is "link", in data use the structure {displayText: {text to display} ,url: {url} }.
-   */
-  columns: _propTypes.default.arrayOf(_propTypes.default.shape({
-    headerText: _propTypes.default.string,
-    accessor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-    format: _propTypes.default.func,
-    cellType: _propTypes.default.string,
-    style: _propTypes.default.instanceOf(Object),
-    fixed: _propTypes.default.string,
-    Cell: _propTypes.default.instanceOf(Object),
-    sortable: _propTypes.default.bool,
-    width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
-  })).isRequired,
-
-  /**
-   * Array with the data elements to show.
-   * It can also define the checkBoxProps property to pass extra props to the row checkbox selector.
-   */
-  data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-
-  /**
-   * Number of data entries for server side pagination
-   */
-  dataSize: _propTypes.default.number,
-
-  /**
-   * Boolean to show or hide the pagination controls
-   */
-  showPagination: _propTypes.default.bool,
-
-  /**
-   * Callback to notify when the page changes
-   */
-  onPageChange: _propTypes.default.func,
-
-  /**
-   * Boolean to show or hide the page size control
-   */
-  showPageSize: _propTypes.default.bool,
-
-  /**
-   * Numeric value to control the page size selected
-   */
-  pageSize: _propTypes.default.number,
-
-  /**
-   * Specify the current page number when using a server side pagination
-   */
-  page: _propTypes.default.number,
-
-  /**
-   * Callback to notify when the page size changes
-   */
-  onPageSizeChange: _propTypes.default.func,
-
-  /**
-   * Boolean to enable or disable the server side pagination mechanism
-   */
-  paginationServerSide: _propTypes.default.bool,
-
-  /**
-   * Attributes applied to the pagination component
-   */
-  paginationProps: _propTypes.default.instanceOf(Object),
-
-  /**
-   * Numeric value to control the number of pages. Useful when Server side pagination data is enabled
-   */
-  pages: _propTypes.default.number,
-
-  /**
-   * Callback with receives the page info and should fetch the data to show on the table
-   */
-  onFetchData: _propTypes.default.func,
-
-  /**
-   * Boolean to enable or disable the sort mechanism
-   */
-  sortable: _propTypes.default.bool,
-
-  /**
-   * An object describing what column is sorted by default on the table
-   */
-  defaultSorted: _propTypes.default.instanceOf(Array),
-
-  /**
-   * Element to be shown in the expander.
-   */
-  subElementTemplate: _propTypes.default.func,
-
-  /**
-   * Property to be uses as unique row identifier. One of the fields of the data.
-   */
-  idForCheckbox: _propTypes.default.string,
-
-  /**
-   * Function to overwrite the existed getTrProps
-   */
-  getTrProps: _propTypes.default.func,
-
-  /**
-   * Callback which receives the checked state of all items in the list
-   */
-  onSelection: _propTypes.default.func,
-
-  /**
-   * Ids of preselected items in the list
-   */
-  selections: _propTypes.default.arrayOf(_propTypes.default.any),
-
-  /**
-   *  Secondary actions listed in menu dropdown. Label is displayed and action is executed on click.
-   */
-  secondaryActions: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string,
-    action: _propTypes.default.func
-  })),
-
-  /**
-   * The renderable content inside the BulkActions right actions slot,
-   * or an Array of actions `{ id, label, icon, disabled, ... }`
-   */
-  actions: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string,
-    icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-    disabled: _propTypes.default.bool
-  }))]),
-
-  /**
-   *  Whether actions should be all disabled
-   */
-  actionsDisabled: _propTypes.default.bool,
-
-  /**
-   *  The callback function ran when an action is triggered, receiving `action` as param
-   */
-  actionsCallback: _propTypes.default.func,
-
-  /**
-   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.
-   */
-  maxVisibleActions: _propTypes.default.number,
-  column: _propTypes.default.shape({
-    id: _propTypes.default.string,
-    sortable: _propTypes.default.bool
-  }),
-
-  /**
-   *  Extra properties passed to the select all checkbox props.
-   */
-  allCheckBoxProps: _propTypes.default.instanceOf(Object),
-
-  /**
-   *  Extra properties passed to the dropdown menu.
-   */
-  dropdownMenuProps: _propTypes.default.instanceOf(Object),
-  getTableProps: _propTypes.default.func,
-  tableProps: _propTypes.default.instanceOf(Object),
-
-  /**
-   * Number of rows available in table to display in aria-rowcount
-   */
-  rowCount: _propTypes.default.number,
-
-  /**
-   * Component to be shown when no data is displayed.
-   */
-  noDataComponent: _propTypes.default.node,
-
-  /**
-   * Defines if the expanded row is collapsed when data changes.
-   */
-  collapseOnDataChange: _propTypes.default.bool,
-
-  /**
-   * Defines if the selection checkbox column should be always visible/fixed to the left.
-   *
-   * Defaults to true when there are any other columns fixed to the left, false otherwise.
-   */
-  fixedCheckbox: _propTypes.default.bool,
-
-  /**
-   * Defines if the secondary actions column should be always visible/fixed to the right.
-   *
-   * Defaults to true when there are any other columns fixed to the right, false otherwise.
-   */
-  fixedSecondaryActions: _propTypes.default.bool
+    listRow: _propTypes.default.string
+  }).isRequired
 } : void 0;
 
-var _default = (0, _core.withStyles)(_styles.styles, {
+var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvTable"
-})((0, _withId.default)(HvTable));
+})(HvTable);
 
 exports.default = _default;
 //# sourceMappingURL=Table.js.map