@hitachivantara/uikit-react-core 3.52.5

package/dist/legacy/Table/Table.js

@@ -0,0 +1,1089 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.string.fixed.js";
+import clsx from "clsx";
+import isNil from "lodash/isNil";
+import PropTypes from "prop-types";
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import ReactTable, { ReactTableDefaults } from "react-table";
+import withFixedColumns from "react-table-hoc-fixed-columns";
+import { withStyles } from "@material-ui/core";
+import { HvBulkActions, HvPagination } from "..";
+import { setId, KeyboardCodes, isKeypress } from "../utils";
+import withId from "../withId";
+import DropDownMenu from "./DropdownMenu";
+import Header from "./Header";
+import NoData from "./NoData";
+import { isSelected as _isSelected, getPageSelection } from "./checkBoxUtils";
+import { appendClassnames, createExpanderButton, setHeaderSortableClass } from "./columnUtils";
+import expander from "./expander";
+import withCheckbox from "./selectTable";
+import { styles, tableStyleOverrides } from "./styles";
+var ReactTableFixedColumns = withFixedColumns(ReactTable);
+var ReactTableCheckbox = withCheckbox(ReactTable);
+var ReactTableFixedColumnsCheckbox = withCheckbox(ReactTableFixedColumns, {
+  callbackRefProperty: "innerRef"
+}); // TODO deprecate header labels in 2.x
+
+/**
+ * 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>
+ *
+ * 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>
+ *
+ * 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.
+ */
+
+var HvTable = function HvTable(props) {
+  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,
+      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,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _useState = useState(defaultSorted),
+      _useState2 = _slicedToArray(_useState, 2),
+      sorted = _useState2[0],
+      setSorted = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initiallyLoaded = _useState4[0],
+      setInitiallyLoaded = _useState4[1];
+
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      expanded = _useState6[0],
+      setExpanded = _useState6[1];
+
+  var _useState7 = useState(page || 0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentPage = _useState8[0],
+      setCurrentPage = _useState8[1];
+
+  var _useState9 = useState(pageSize || data.length),
+      _useState10 = _slicedToArray(_useState9, 2),
+      currentPageSize = _useState10[0],
+      setCurrentPageSize = _useState10[1];
+
+  var _useState11 = useState(selections || []),
+      _useState12 = _slicedToArray(_useState11, 2),
+      selection = _useState12[0],
+      setSelection = _useState12[1];
+
+  var tableRef = useRef(null);
+  /**
+   * Change the state property initiallyLoaded to identify that it is the first load.
+   */
+
+  useEffect(function () {
+    setInitiallyLoaded(true);
+  }, []);
+  useEffect(function () {
+    if (page !== undefined) {
+      setCurrentPage(page);
+    }
+  }, [page]);
+  useEffect(function () {
+    if (collapseOnDataChange) setExpanded({});
+  }, [data, collapseOnDataChange]);
+  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]);
+  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;
+    });
+  };
+  /**
+   * Pagination customizations.
+   */
+
+
+  var getPaginationProps = function getPaginationProps() {
+    var PaginationComponent = function PaginationComponent(tablePaginationProps) {
+      return /*#__PURE__*/React.createElement(HvPagination, _extends({
+        id: 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({
+      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 = 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(_toConsumableArray(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.createElement("div", {
+          className: clsx(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 && (isNil(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
+      };
+    }
+
+    appendClassnames(column, sorted, classes, sortable);
+    return _objectSpread(_objectSpread({
+      id: setId(id, "column", column.id),
+      onKeyDown: function onKeyDown(event) {
+        if (isSortable && (isKeypress(event, KeyboardCodes.Enter) || isKeypress(event, 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" ? setHeaderSortableClass(isSortable, classes.theadTh) : clsx(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: clsx(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(_defineProperty({}, 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 && setId(id, "row", rowId) || rowInfo && 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: clsx(classes.tr, classes.pointer)
+      });
+    }
+
+    var rowId = computeRowId(rowInfo);
+
+    if (rowId && selection.includes(rowId)) {
+      return _objectSpread(_objectSpread({}, baseTrProps), {}, {
+        className: clsx(classes.tr, "selected"),
+        "aria-selected": "true"
+      });
+    }
+
+    return baseTrProps;
+  };
+
+  var getTableProps = function getTableProps() {
+    var baseTableProps = {
+      role: "table",
+      "aria-rowcount": rowCount || data.length,
+      id: 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: setId(computeRowElementId(rowInfo), "column", column.id),
+      className: clsx(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 /*#__PURE__*/React.createElement(NoData, 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 config = {
+      currentPage: currentPage,
+      currentPageSize: currentPageSize,
+      paginationServerSide: paginationServerSide
+    };
+    var newSelection = 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
+   */
+
+
+  var toggleAll = function toggleAll(event) {
+    var allSelected = selection.length === data.length;
+    var newSelection = getPageSelection(idForCheckbox, tableRef, undefined, selection, allSelected);
+    setSelection(newSelection);
+    onSelection === null || onSelection === void 0 ? void 0 : onSelection(event, newSelection);
+  };
+
+  var hasFixedLeftColumns = useMemo(function () {
+    return columns.some(function (col) {
+      return col.fixed === "left" || col.fixed === true;
+    });
+  }, [columns]);
+  var hasFixedRightColumns = 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 = useMemo(function () {
+    var hasFixedColumns = hasFixedLeftColumns || hasFixedRightColumns || hasFixedCheckbox || hasFixedSecundaryActions;
+
+    if (idForCheckbox && hasFixedColumns) {
+      return ReactTableFixedColumnsCheckbox;
+    }
+
+    if (idForCheckbox) {
+      return ReactTableCheckbox;
+    }
+
+    if (hasFixedColumns) {
+      return ReactTableFixedColumns;
+    }
+
+    return ReactTable;
+  }, [hasFixedCheckbox, hasFixedLeftColumns, hasFixedRightColumns, hasFixedSecundaryActions, idForCheckbox]);
+
+  var getTableStyles = function getTableStyles() {
+    return 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.createElement(DropDownMenu, _extends({
+          id: setId(computeRowElementId(propsCell)),
+          secondaryActions: secondaryActions,
+          original: propsCell.original
+        }, dropdownMenuProps));
+      }
+    });
+  } // Creates the thead with the text and the sorted icon.
+
+
+  ReactTableDefaults.expanderDefaults.show = false; // eslint-disable-next-line react/prop-types
+
+  ReactTableDefaults.column.Header = function (_ref) {
+    var column = _ref.column;
+    return /*#__PURE__*/React.createElement(Header, {
+      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 = createExpanderButton(columns, subElementTemplate, classes, toggleExpand); // add expander
+
+  var expanderComponent = expander(subElementTemplate, classes);
+  var showSelectAllPages = !paginationServerSide && showPagination && selection.length < data.length;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: clsx(classes.tableContainer, className)
+  }, idForCheckbox && /*#__PURE__*/React.createElement(HvBulkActions, _extends({
+    id: setId(id, "select-all"),
+    "aria-controls": 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.createElement(AugmentedTable, _extends({
+    id: 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 _isSelected(key, selection);
+    },
+    NoDataComponent: getNoDataProps,
+    getTrGroupProps: getTrGroupProps,
+    fixedCheckbox: hasFixedCheckbox
+  })));
+};
+
+HvTable.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Unique class name used to identify the fixed table
+   */
+  uniqClassName: PropTypes.string,
+
+  /**
+   * Id to be applied to the root node.
+   */
+  id: PropTypes.string,
+
+  /**
+   * the classes object to be applied into the root object.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the component thead.
+     */
+    thead: PropTypes.string,
+
+    /**
+     * Styles applied to the component tr.
+     */
+    tr: PropTypes.string,
+
+    /**
+     * Styles applied to the component sort icon.
+     */
+    rtSortIcon: PropTypes.string,
+
+    /**
+     * Styles applied to the component when the sort icon is shown.
+     */
+    sortedIconShown: PropTypes.string,
+
+    /**
+     * Styles applied to the component when the sort icon is hidden.
+     */
+    sortedIconHidden: PropTypes.string,
+
+    /**
+     * Styles applied to the component pointer.
+     */
+    pointer: PropTypes.string,
+
+    /**
+     * Styles applied to the component subtitle.
+     */
+    subtitle: PropTypes.string,
+
+    /**
+     * Styles applied to the component title.
+     */
+    title: PropTypes.string,
+
+    /**
+     * Styles applied to the component when type is link.
+     */
+    link: PropTypes.string,
+
+    /**
+     * Styles applied to the component expander.
+     */
+    subComponentContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the component icon in the columns.
+     */
+    iconContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the component columns.
+     */
+    firstWithNumeric: PropTypes.string,
+
+    /**
+     * Styles applied to the component table header row.
+     */
+    theadTh: PropTypes.string,
+
+    /**
+     * Styles applied to the component table body.
+     */
+    tbody: PropTypes.string,
+
+    /**
+     * Styles applied to the component table body when empty.
+     */
+    tBodyEmpty: PropTypes.string,
+
+    /**
+     * Styles applied to the component table cell.
+     */
+    td: PropTypes.string,
+
+    /**
+     * Styles applied to the component table container.
+     */
+    tableContainer: PropTypes.string,
+
+    /**
+     * Styles applied to the component checkbox.
+     */
+    checkBox: PropTypes.string,
+
+    /**
+     * Styles applied to the component checkbox row.
+     */
+    checkBoxRow: PropTypes.string,
+
+    /**
+     * Styles applied to the component checkbox text.
+     */
+    checkBoxText: PropTypes.string,
+
+    /**
+     * Styles applied to the component table header groups.
+     */
+    trGroups: PropTypes.string,
+
+    /**
+     * Styles applied to the component table.
+     */
+    table: PropTypes.string,
+
+    /**
+     * Styles applied to the HvBulkActions component.
+     */
+    bulkActions: PropTypes.string
+  }).isRequired,
+
+  /**
+   * Labels for the pagination.
+   */
+  paginationLabels: PropTypes.shape({
+    /**
+     * Show label.
+     */
+    pageSizePrev: PropTypes.string,
+
+    /**
+     * Indication of the units of the page size selection.
+     */
+    pageSizeEntryName: PropTypes.string,
+
+    /**
+     * Used for the aria-label of the selection of number of unit.
+     */
+    pageSizeSelectorDescription: PropTypes.string,
+
+    /**
+     * Separator of current page and total pages.
+     */
+    pagesSeparator: PropTypes.string,
+
+    /**
+     * Title of button `firstPage`.
+     */
+    paginationFirstPageTitle: PropTypes.string,
+
+    /**
+     * Title of button `previousPage`.
+     */
+    paginationPreviousPageTitle: PropTypes.string,
+
+    /**
+     * Title of button `nextPage`.
+     */
+    paginationNextPageTitle: PropTypes.string,
+
+    /**
+     * Pagination title of button `lastPage`.
+     */
+    paginationLastPageTitle: PropTypes.string,
+
+    /**
+     * Aria-label passed to the page input.
+     */
+    paginationInputLabel: PropTypes.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.arrayOf(PropTypes.shape({
+    headerText: PropTypes.string,
+    accessor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    format: PropTypes.func,
+    cellType: PropTypes.string,
+    style: PropTypes.instanceOf(Object),
+    fixed: PropTypes.string,
+    Cell: PropTypes.instanceOf(Object),
+    sortable: PropTypes.bool,
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.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.arrayOf(PropTypes.object).isRequired,
+
+  /**
+   * Number of data entries for server side pagination
+   */
+  dataSize: PropTypes.number,
+
+  /**
+   * Boolean to show or hide the pagination controls
+   */
+  showPagination: PropTypes.bool,
+
+  /**
+   * Callback to notify when the page changes
+   */
+  onPageChange: PropTypes.func,
+
+  /**
+   * Boolean to show or hide the page size control
+   */
+  showPageSize: PropTypes.bool,
+
+  /**
+   * Numeric value to control the page size selected
+   */
+  pageSize: PropTypes.number,
+
+  /**
+   * Specify the current page number when using a server side pagination
+   */
+  page: PropTypes.number,
+
+  /**
+   * Callback to notify when the page size changes
+   */
+  onPageSizeChange: PropTypes.func,
+
+  /**
+   * Boolean to enable or disable the server side pagination mechanism
+   */
+  paginationServerSide: PropTypes.bool,
+
+  /**
+   * Attributes applied to the pagination component
+   */
+  paginationProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Numeric value to control the number of pages. Useful when Server side pagination data is enabled
+   */
+  pages: PropTypes.number,
+
+  /**
+   * Callback with receives the page info and should fetch the data to show on the table
+   */
+  onFetchData: PropTypes.func,
+
+  /**
+   * Boolean to enable or disable the sort mechanism
+   */
+  sortable: PropTypes.bool,
+
+  /**
+   * An object describing what column is sorted by default on the table
+   */
+  defaultSorted: PropTypes.instanceOf(Array),
+
+  /**
+   * Element to be shown in the expander.
+   */
+  subElementTemplate: PropTypes.func,
+
+  /**
+   * Property to be uses as unique row identifier. One of the fields of the data.
+   */
+  idForCheckbox: PropTypes.string,
+
+  /**
+   * Function to overwrite the existed getTrProps
+   */
+  getTrProps: PropTypes.func,
+
+  /**
+   * Callback which receives the checked state of all items in the list
+   */
+  onSelection: PropTypes.func,
+
+  /**
+   * Ids of preselected items in the list
+   */
+  selections: PropTypes.arrayOf(PropTypes.any),
+
+  /**
+   *  Secondary actions listed in menu dropdown. Label is displayed and action is executed on click.
+   */
+  secondaryActions: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    action: PropTypes.func
+  })),
+
+  /**
+   * The renderable content inside the BulkActions right actions slot,
+   * or an Array of actions `{ id, label, icon, disabled, ... }`
+   */
+  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    disabled: PropTypes.bool
+  }))]),
+
+  /**
+   *  Whether actions should be all disabled
+   */
+  actionsDisabled: PropTypes.bool,
+
+  /**
+   *  The callback function ran when an action is triggered, receiving `action` as param
+   */
+  actionsCallback: PropTypes.func,
+
+  /**
+   *  The number of maximum visible actions before they're collapsed into a `DropDownMenu`.
+   */
+  maxVisibleActions: PropTypes.number,
+  column: PropTypes.shape({
+    id: PropTypes.string,
+    sortable: PropTypes.bool
+  }),
+
+  /**
+   *  Extra properties passed to the select all checkbox props.
+   */
+  allCheckBoxProps: PropTypes.instanceOf(Object),
+
+  /**
+   *  Extra properties passed to the dropdown menu.
+   */
+  dropdownMenuProps: PropTypes.instanceOf(Object),
+  getTableProps: PropTypes.func,
+  tableProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Number of rows available in table to display in aria-rowcount
+   */
+  rowCount: PropTypes.number,
+
+  /**
+   * Component to be shown when no data is displayed.
+   */
+  noDataComponent: PropTypes.node,
+
+  /**
+   * Defines if the expanded row is collapsed when data changes.
+   */
+  collapseOnDataChange: PropTypes.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.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.bool
+};
+export default withStyles(styles, {
+  name: "HvTable"
+})(withId(HvTable));
+//# sourceMappingURL=Table.js.map