@hitachivantara/uikit-react-core 2.23.2

package/dist/modern/Table/Table.js

@@ -0,0 +1,1007 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _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 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) { _defineProperty(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; }
+
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.includes.js";
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import isNil from "lodash/isNil";
+import ReactTable, { ReactTableDefaults } from "react-table";
+import withFixedColumns from "react-table-hoc-fixed-columns";
+import "react-table/react-table.css";
+import "react-table-hoc-fixed-columns/lib/styles.css";
+import { withStyles } from "@material-ui/core";
+import { HvBulkActions, HvPagination, HvTypography } from "..";
+import withLabels from "../withLabels";
+import withId from "../withId";
+import { setId, KeyboardCodes, isKeypress } from "../utils";
+import expander from "./expander";
+import { appendClassnames, createExpanderButton, setHeaderSortableClass } from "./columnUtils";
+import { isSelected, selectPage } from "./checkBoxUtils";
+import DropDownMenu from "./DropdownMenu";
+import NoData from "./NoData";
+import Header from "./Header";
+import withCheckbox from "./selectTable";
+import { styles, tableStyleOverrides } from "./styles";
+const ReactTableFixedColumns = withFixedColumns(ReactTable);
+const ReactTableCheckbox = withCheckbox(ReactTable);
+const ReactTableFixedColumnsCheckbox = withCheckbox(ReactTableFixedColumns, {
+  callbackRefProperty: "innerRef"
+});
+const 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.
+ */
+
+const HvTable = props => {
+  var _NoData;
+
+  const {
+    id,
+    classes,
+    className,
+    uniqClassName,
+    data,
+    columns,
+    page,
+    sortable = true,
+    defaultSorted = [],
+    selections,
+    onSelection,
+    onFetchData,
+    subElementTemplate,
+    tableProps = {
+      tableCaption: "Table Caption"
+    },
+    rowCount,
+    noDataComponent,
+    idForCheckbox = "",
+    getTrProps: getTrPropsProp,
+    getTableProps: getTablePropsProp,
+    labels,
+    actions,
+    actionsCallback,
+    actionsDisabled,
+    maxVisibleActions,
+    secondaryActions,
+    allCheckBoxProps,
+    dropdownMenuProps,
+    paginationLabels,
+    paginationServerSide = false,
+    paginationProps = {},
+    showPagination = true,
+    showPageSize = true,
+    dataSize,
+    pageSize = data.length,
+    onPageSizeChange,
+    onPageChange,
+    pages,
+    collapseOnDataChange = true,
+    fixedCheckbox,
+    fixedSecondaryActions
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const [sorted, setSorted] = useState(defaultSorted);
+  const [initiallyLoaded, setInitiallyLoaded] = useState(false);
+  const [expanded, setExpanded] = useState({});
+  const [currentPage, setCurrentPage] = useState(page || 0);
+  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const [selection, setSelection] = useState(selections || []);
+  const tableRef = useRef(null);
+  /**
+   * Change the state property initiallyLoaded to identify that it is the first load.
+   */
+
+  useEffect(() => {
+    setInitiallyLoaded(true);
+  }, []);
+  useEffect(() => {
+    if (page !== currentPage) setCurrentPage(page);
+  }, [page]);
+  useEffect(() => {
+    if (collapseOnDataChange) setExpanded({});
+  }, [data, collapseOnDataChange]);
+  useEffect(() => {
+    setSelection(selections || []);
+  }, [selections]);
+  useEffect(() => {
+    if (!idForCheckbox) return;
+    const dataIds = data.map(item => item[idForCheckbox]);
+    const updatedSelection = selection.filter(item => dataIds.includes(item));
+    setSelection(updatedSelection); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, idForCheckbox]);
+  useEffect(() => {
+    // 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
+   */
+
+  const sanitizedData = () => data.map(entry => {
+    const newEntry = {};
+    Object.keys(entry).forEach(key => {
+      var _entry$key;
+
+      newEntry[key] = (_entry$key = entry[key]) !== null && _entry$key !== void 0 ? _entry$key : "—";
+    });
+    return newEntry;
+  });
+  /**
+   * Pagination customizations.
+   */
+
+
+  const getPaginationProps = () => {
+    const 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(_objectSpread({
+      showPagination: data.length > 0 && showPagination,
+      showPageSizeOptions: showPageSize
+    }, showPagination && _objectSpread({
+      PaginationComponent,
+      onPageSizeChange: (newPageSize, p) => {
+        setExpanded({});
+        setCurrentPage(p);
+        setCurrentPageSize(newPageSize);
+        onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(newPageSize, p);
+      },
+      onPageChange: p => {
+        setExpanded({});
+        setCurrentPage(p);
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(p);
+      }
+    }, pages && {
+      pages
+    })), (pageSize || pageSize !== undefined) && (showPagination ? {
+      defaultPageSize: pageSize
+    } : {
+      pageSize
+    })), {
+      page: currentPage
+    });
+  };
+  /**
+   * Function used to load data asynchronously.
+   *
+   * @param {Object} tableState - an Object containing information about the current state of the table.
+   */
+
+
+  const onFetchDataInternal = tableState => {
+    const {
+      pageSize: pageSizeT,
+      page: pageT,
+      sorted: sortedT
+    } = tableState;
+    if (!initiallyLoaded) return;
+    let cursor = `${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}
+   */
+
+
+  const getServerSideProps = () => paginationServerSide ? {
+    page,
+    manual: true,
+    onFetchData: onFetchDataInternal
+  } : {};
+  /**
+   * Add the class "sorted" to the selected column.
+   *
+   * @param sortedColumn - the column representation from the user.
+   */
+
+
+  const onSortChange = sortedColumn => {
+    setSorted(sortedColumn);
+    setCurrentPage(0);
+    setExpanded({});
+  };
+  /**
+   * Sort properties override to set onSortedChange
+   *
+   * @returns {{sortable: boolean, onSortedChange: onSortChange}}
+   */
+
+
+  const getSortProps = () => _objectSpread(_objectSpread({
+    sortable
+  }, sortable && {
+    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.
+   */
+
+
+  const toggleSelection = (event, key) => {
+    const newSelection = selection.includes(key) ? selection.filter(el => el !== key) : [...selection, key]; // update the state
+
+    setSelection(newSelection);
+    onSelection === null || onSelection === void 0 ? void 0 : onSelection(event, newSelection);
+  };
+
+  const getCheckboxProps = () => ({
+    id,
+    selectWidth: 32,
+    SelectAllInputComponent: () => /*#__PURE__*/React.createElement("div", {
+      className: clsx(classes.checkBox)
+    }),
+    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)}}
+   */
+
+
+  const getTheadThProps = (state, rowInfo, column, instance) => {
+    let isSortable = sortable && (isNil(column.sortable) || column.sortable);
+
+    if (column.id === "secondaryActions") {
+      isSortable = null;
+    }
+
+    let ariaSort;
+
+    if (sorted.length > 0) {
+      if (column.id === sorted[0].id) {
+        const 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: event => {
+        if (isSortable && (isKeypress(event, KeyboardCodes.Enter) || isKeypress(event, KeyboardCodes.Space))) {
+          event.preventDefault();
+          instance.sortColumn(column);
+        }
+      },
+      onClick: () => {
+        if (isSortable) {
+          document.getElementById(`${id}-column-${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}}
+   */
+
+
+  const getTBodyProps = () => ({
+    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.
+   */
+
+
+  const getTrGroupProps = () => ({
+    role: undefined,
+    className: classes.trGroups
+  });
+  /**
+   * Open and closes the expander of a row.
+   *
+   * @param {numeric} rowIndex - The index of the row to toggle.
+   */
+
+
+  const toggleExpand = rowIndex => {
+    setExpanded({
+      [rowIndex]: !expanded[rowIndex]
+    });
+  };
+
+  const 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;
+  };
+
+  const computeRowElementId = rowInfo => {
+    const 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.
+   */
+
+
+  const getTrProps = (state, rowInfo) => {
+    const expandedProps = rowInfo !== undefined && expanded[0] && Object.keys(expanded).toString() === rowInfo.nestingPath.toString() ? {
+      "aria-expanded": true
+    } : undefined;
+    const ariaRowIndex = rowInfo !== undefined ? {
+      "aria-rowindex": rowInfo.index
+    } : undefined;
+
+    const 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)
+      });
+    }
+
+    const rowId = computeRowId(rowInfo);
+
+    if (rowId && selection.includes(rowId)) {
+      return _objectSpread(_objectSpread({}, baseTrProps), {}, {
+        className: clsx(classes.tr, "selected"),
+        "aria-selected": "true"
+      });
+    }
+
+    return baseTrProps;
+  };
+
+  const getTableProps = () => {
+    const 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;
+  };
+
+  const getTdProps = (state, rowInfo, column) => ({
+    id: setId(computeRowElementId(rowInfo), "column", column.id),
+    className: classes.td,
+    role: "cell"
+  });
+  /**
+   * Return the NoData component with label.
+   *
+   * @returns {*}
+   */
+
+
+  const getNoDataProps = () => _NoData || (_NoData = /*#__PURE__*/React.createElement(NoData, null, noDataComponent));
+  /**
+   * Selects all the available rows on the page.
+   *
+   * @param {object} event - the event that triggered the selection
+   */
+
+
+  const togglePage = event => {
+    const anySelected = selection.length > 0;
+    const config = {
+      currentPage,
+      currentPageSize,
+      paginationServerSide
+    };
+    const newSelection = anySelected ? [] : 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
+   */
+
+
+  const toggleAll = event => {
+    const allSelected = selection.length === data.length;
+    const newSelection = allSelected ? [] : selectPage(idForCheckbox, tableRef);
+    setSelection(newSelection);
+    onSelection === null || onSelection === void 0 ? void 0 : onSelection(event, newSelection);
+  };
+
+  const hasFixedLeftColumns = useMemo(() => columns.some(col => col.fixed === "left" || col.fixed === true), [columns]);
+  const hasFixedRightColumns = useMemo(() => columns.some(col => col.fixed === "right"), [columns]);
+  const hasFixedCheckbox = !!idForCheckbox && (fixedCheckbox === undefined && hasFixedLeftColumns || fixedCheckbox);
+  const hasFixedSecundaryActions = !!secondaryActions && (fixedSecondaryActions === undefined && hasFixedRightColumns || fixedSecondaryActions);
+  const AugmentedTable = useMemo(() => {
+    const 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]);
+
+  const getTableStyles = () => tableStyleOverrides(classes); // Add dropdown menu column if secondaryActions exists in props
+
+
+  if (!!secondaryActions && !columns.some(col => 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: propsCell => 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 = ({
+    column
+  }) => /*#__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
+
+
+  const expanderColumn = createExpanderButton(columns, subElementTemplate, classes, toggleExpand); // add expander
+
+  const expanderComponent = expander(subElementTemplate, classes);
+  const showSelectAllPages = !paginationServerSide && showPagination && selection.length < data.length;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: clsx(classes.tableContainer, className)
+  }, labels.titleText && /*#__PURE__*/React.createElement("div", {
+    className: classes.title
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "mTitle",
+    id: setId(id, "title")
+  }, labels.titleText)), labels.subtitleText && /*#__PURE__*/React.createElement("div", {
+    className: classes.subtitle
+  }, /*#__PURE__*/React.createElement(HvTypography, {
+    variant: "sText",
+    id: setId(id, "subtitle")
+  }, labels.subtitleText))), idForCheckbox && /*#__PURE__*/React.createElement(HvBulkActions, _extends({
+    id: setId(id, "select-all"),
+    "aria-controls": 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 ${data.length} items across all pages`
+    },
+    actions: actions,
+    actionsCallback: (...args) => actionsCallback === null || actionsCallback === void 0 ? void 0 : actionsCallback(...args, 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: key => isSelected(key, selection),
+    NoDataComponent: getNoDataProps,
+    getTrGroupProps: getTrGroupProps,
+    fixedCheckbox: hasFixedCheckbox
+  })));
+};
+
+process.env.NODE_ENV !== "production" ? 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
+  }).isRequired,
+
+  /**
+   * The labels inside the table.
+   */
+  labels: PropTypes.shape({
+    /**
+     * The title that identifies the title, rendered outside of the table.
+     */
+    titleText: PropTypes.string,
+
+    /**
+     * The subtitle that identifies the title, rendered outside of the table.
+     */
+    subtitleText: PropTypes.string
+  }),
+
+  /**
+   * 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,
+    iconCallback: PropTypes.func,
+    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
+} : void 0;
+export default withStyles(styles, {
+  name: "HvTable"
+})(withLabels(DEFAULT_LABELS)(withId(HvTable)));
+//# sourceMappingURL=Table.js.map