@hitachivantara/uikit-react-core 2.23.2

package/dist/Table/Table.js

@@ -0,0 +1,1160 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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.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 _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
+var _reactTable = _interopRequireWildcard(require("react-table"));
+
+var _reactTableHocFixedColumns = _interopRequireDefault(require("react-table-hoc-fixed-columns"));
+
+require("react-table/react-table.css");
+
+require("react-table-hoc-fixed-columns/lib/styles.css");
+
+var _core = require("@material-ui/core");
+
+var _ = require("..");
+
+var _withLabels = _interopRequireDefault(require("../withLabels"));
+
+var _withId = _interopRequireDefault(require("../withId"));
+
+var _utils = require("../utils");
+
+var _expander = _interopRequireDefault(require("./expander"));
+
+var _columnUtils = require("./columnUtils");
+
+var _checkBoxUtils = require("./checkBoxUtils");
+
+var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
+
+var _NoData2 = _interopRequireDefault(require("./NoData"));
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+var _selectTable = _interopRequireDefault(require("./selectTable"));
+
+var _styles2 = require("./styles");
+
+var _excluded = ["id", "classes", "className", "uniqClassName", "data", "columns", "page", "sortable", "defaultSorted", "selections", "onSelection", "onFetchData", "subElementTemplate", "tableProps", "rowCount", "noDataComponent", "idForCheckbox", "getTrProps", "getTableProps", "labels", "actions", "actionsCallback", "actionsDisabled", "maxVisibleActions", "secondaryActions", "allCheckBoxProps", "dropdownMenuProps", "paginationLabels", "paginationServerSide", "paginationProps", "showPagination", "showPageSize", "dataSize", "pageSize", "onPageSizeChange", "onPageChange", "pages", "collapseOnDataChange", "fixedCheckbox", "fixedSecondaryActions"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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"
+});
+var DEFAULT_LABELS = {
+  titleText: "",
+  subtitleText: ""
+};
+/**
+ * Table component. This component offers:
+ * - A standard table;
+ * - Table with expander;
+ * - Table with checkbox.
+ *
+ * The type is defined by the existence of the properties:
+ *  - subElementTemplate: Creates a table with expander;
+ *  - idForCheckbox: Creates a table with checkboxes;
+ *  - None: Creates a simple table.
+ *
+ *   Just one of this properties should be set (or none) has it isn't possible to have a table with
+ *   expander and checkbox simultaneously.
+ */
+
+var HvTable = function HvTable(props) {
+  var _NoData;
+
+  var id = props.id,
+      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,
+      labels = props.labels,
+      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,
+      _props$pageSize = props.pageSize,
+      pageSize = _props$pageSize === void 0 ? data.length : _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,
+      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),
+      _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 !== currentPage) setCurrentPage(page);
+  }, [page]);
+  (0, _react.useEffect)(function () {
+    if (collapseOnDataChange) setExpanded({});
+  }, [data, collapseOnDataChange]);
+  (0, _react.useEffect)(function () {
+    setSelection(selections || []);
+  }, [selections]);
+  (0, _react.useEffect)(function () {
+    if (!idForCheckbox) 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]);
+  (0, _react.useEffect)(function () {
+    // When showPagination is true, pageSize is totally managed by the pagination component.
+    // Avoid running the first time, when pageSize and currentPageSize will already be equal.
+    if (!showPagination && pageSize !== currentPageSize) {
+      setCurrentPageSize(pageSize);
+      _onPageSizeChange === null || _onPageSizeChange === void 0 ? void 0 : _onPageSizeChange(pageSize, currentPage);
+    } // Need not track dependencies for onPageSizeChange and currentPage.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [showPagination, pageSize]);
+  /**
+   * 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;
+    });
+  };
+  /**
+   * Pagination customizations.
+   */
+
+
+  var getPaginationProps = function getPaginationProps() {
+    var PaginationComponent = function PaginationComponent(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));
+    };
+
+    return _objectSpread(_objectSpread(_objectSpread({
+      showPagination: data.length > 0 && showPagination,
+      showPageSizeOptions: showPageSize
+    }, showPagination && _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);
+      }
+    }, pages && {
+      pages: pages
+    })), (pageSize || pageSize !== undefined) && (showPagination ? {
+      defaultPageSize: pageSize
+    } : {
+      pageSize: pageSize
+    })), {
+      page: currentPage
+    });
+  };
+  /**
+   * 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: page,
+      manual: true,
+      onFetchData: onFetchDataInternal
+    } : {};
+  };
+  /**
+   * Add the class "sorted" to the selected column.
+   *
+   * @param sortedColumn - the column representation from the user.
+   */
+
+
+  var onSortChange = function onSortChange(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() {
+    return {
+      role: undefined,
+      className: classes.trGroups
+    };
+  };
+  /**
+   * 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: classes.td,
+      role: "cell"
+    };
+  };
+  /**
+   * Return the NoData component with label.
+   *
+   * @returns {*}
+   */
+
+
+  var getNoDataProps = function getNoDataProps() {
+    return _NoData || (_NoData = /*#__PURE__*/_react.default.createElement(_NoData2.default, null, noDataComponent));
+  };
+  /**
+   * Selects all the available rows on the page.
+   *
+   * @param {object} event - the event that triggered the selection
+   */
+
+
+  var togglePage = function togglePage(event) {
+    var anySelected = selection.length > 0;
+    var config = {
+      currentPage: currentPage,
+      currentPageSize: currentPageSize,
+      paginationServerSide: paginationServerSide
+    };
+    var newSelection = anySelected ? [] : (0, _checkBoxUtils.selectPage)(idForCheckbox, tableRef, config);
+    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
+   */
+
+
+  var toggleAll = function toggleAll(event) {
+    var allSelected = selection.length === data.length;
+    var newSelection = allSelected ? [] : (0, _checkBoxUtils.selectPage)(idForCheckbox, tableRef);
+    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, _styles2.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 = 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
+    });
+  }; // 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)
+  }, labels.titleText && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.title
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.HvTypography, {
+    variant: "mTitle",
+    id: (0, _utils.setId)(id, "title")
+  }, labels.titleText)), labels.subtitleText && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.subtitle
+  }, /*#__PURE__*/_react.default.createElement(_.HvTypography, {
+    variant: "sText",
+    id: (0, _utils.setId)(id, "subtitle")
+  }, labels.subtitleText))), idForCheckbox && /*#__PURE__*/_react.default.createElement(_.HvBulkActions, (0, _extends2.default)({
+    id: (0, _utils.setId)(id, "select-all"),
+    "aria-controls": (0, _utils.setId)(id, "table"),
+    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
+   */
+  uniqClassName: _propTypes.default.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * the classes object to be applied into the root object.
+   */
+  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
+  }).isRequired,
+
+  /**
+   * The labels inside the table.
+   */
+  labels: _propTypes.default.shape({
+    /**
+     * The title that identifies the title, rendered outside of the table.
+     */
+    titleText: _propTypes.default.string,
+
+    /**
+     * The subtitle that identifies the title, rendered outside of the table.
+     */
+    subtitleText: _propTypes.default.string
+  }),
+
+  /**
+   * Labels for the pagination.
+   */
+  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,
+
+    /**
+     * Title of button `previousPage`.
+     */
+    paginationPreviousPageTitle: _propTypes.default.string,
+
+    /**
+     * Title of button `nextPage`.
+     */
+    paginationNextPageTitle: _propTypes.default.string,
+
+    /**
+     * Pagination title of button `lastPage`.
+     */
+    paginationLastPageTitle: _propTypes.default.string,
+
+    /**
+     * Aria-label passed to the page input.
+     */
+    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,
+    iconCallback: _propTypes.default.func,
+    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
+} : void 0;
+
+var _default = (0, _core.withStyles)(_styles2.styles, {
+  name: "HvTable"
+})((0, _withLabels.default)(DEFAULT_LABELS)((0, _withId.default)(HvTable)));
+
+exports.default = _default;
+//# sourceMappingURL=Table.js.map