@laerdal/life-react-components 1.3.2-dev.4 → 1.3.2-dev.7

package/dist/umd/InputFields/Checkbox.js

@@ -135,7 +135,7 @@
     }
   }
 
-  &:not(.disabled):focus {
+  &:not(.disabled):not(.readonly):focus {
     outline: none;
 
     .checkbox-icon {
@@ -148,7 +148,7 @@
     }
   }
 
-  &:not(.disabled):hover {
+  &:not(.disabled):not(.readonly):hover {
     .checkbox-icon {
       background-color: ${_styles.COLORS.primary_20};
 
@@ -158,7 +158,7 @@
     }
   }
 
-  &:not(.disabled):active {
+  &:not(.disabled):not(.readonly):active {
     .checkbox-icon {
       background: ${_styles.COLORS.primary_100};
       box-shadow: none;
@@ -169,6 +169,14 @@
     }
   }
 
+  &.readonly{
+    cursor: inherit;
+    .checkbox-icon,
+    .checkbox-label {
+      pointer-events: none;
+    }
+  }
+  
   &.disabled {
     box-shadow: none;
     cursor: not-allowed;
@@ -200,20 +208,21 @@
     margin,
     size,
     semiSelected,
-    children
+    children,
+    readonly
   }, ref) => {
     const onKeyPress = e => {
-      if (e.keyCode === 13 && !disabled) {
-        select(!selected);
+      if (e.keyCode === 13 && !disabled && !readonly) {
+        select && select(!selected);
       }
     };
 
     const handleClick = () => {
-      if (disabled) {
+      if (disabled || readonly) {
         return;
       }
 
-      select(!selected);
+      select && select(!selected);
     };
 
     size = size ?? _types.Size.Medium;
@@ -221,9 +230,9 @@
       key: id,
       ref: ref,
       disabled: disabled,
-      className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+      className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : ''),
       selected: selected,
-      tabIndex: disabled ? -1 : 0,
+      tabIndex: disabled || readonly ? -1 : 0,
       showWarning: showWarning,
       margin: margin,
       onClick: handleClick,
@@ -250,15 +259,16 @@
     }, children));
   });
   Checkbox.propTypes = {
-    id: _propTypes2.default.string.isRequired,
+    id: _propTypes2.default.string,
     selected: _propTypes2.default.bool.isRequired,
-    select: _propTypes2.default.func.isRequired,
+    select: _propTypes2.default.func,
     label: _propTypes2.default.string,
     showWarning: _propTypes2.default.bool,
     disabled: _propTypes2.default.bool,
     margin: _propTypes2.default.string,
     iconPointerEventsTransparent: _propTypes2.default.bool,
-    semiSelected: _propTypes2.default.bool
+    semiSelected: _propTypes2.default.bool,
+    readonly: _propTypes2.default.bool
   };
   exports.default = Checkbox;
 });

package/dist/umd/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","Checkbox","children","onKeyPress","e","handleClick","size","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","neutral_600","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","white","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","id","selected","select","label","showWarning","disabled","iconPointerEventsTransparent","semiSelected","readonly","Checkbox","onKeyPress","e","handleClick","size","Size"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly{\n    cursor: inherit;\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n  \n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readonly?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readonly\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readonly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readonly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(readonly ? ' readonly' : '')}\n                    selected={selected}\n                    tabIndex={disabled || readonly ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/umd/Table/Table.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "../icons/systemicons/SystemIcons", "../icons/index", "../Dropdown/index", "../Button/index", "../types", "../styles", "./TableStyles", "../LoadingIndicator"], factory);
+    define(["exports", "react", "../types", "./TableStyles", "../LoadingIndicator", "./TableHeaders", "./TableFooter", "./TableBody"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("../icons/systemicons/SystemIcons"), require("../icons/index"), require("../Dropdown/index"), require("../Button/index"), require("../types"), require("../styles"), require("./TableStyles"), require("../LoadingIndicator"));
+    factory(exports, require("react"), require("../types"), require("./TableStyles"), require("../LoadingIndicator"), require("./TableHeaders"), require("./TableFooter"), require("./TableBody"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.SystemIcons, global.index, global.index, global.index, global.types, global.styles, global.TableStyles, global.LoadingIndicator);
+    factory(mod.exports, global.react, global.types, global.TableStyles, global.LoadingIndicator, global.TableHeaders, global.TableFooter, global.TableBody);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _SystemIcons, _index, _index2, _index3, _types, _styles, _TableStyles, _LoadingIndicator) {
+})(this, function (exports, _react, _types, _TableStyles, _LoadingIndicator, _TableHeaders, _TableFooter, _TableBody) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -19,6 +19,18 @@
 
   var React = _interopRequireWildcard(_react);
 
+  var _TableHeaders2 = _interopRequireDefault(_TableHeaders);
+
+  var _TableFooter2 = _interopRequireDefault(_TableFooter);
+
+  var _TableBody2 = _interopRequireDefault(_TableBody);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
   function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -69,37 +81,44 @@
     return newObj;
   }
 
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
   /**
    * Import React libraries.
    */
 
-  /**
-   * Import custom components.
-   */
 
-  /**
-   * Import custom styles.
-   */
+  const Table = props => {
+    let {
+      onPreviousPageClick,
+      onNextPageClick,
+      onRowsPerPageChange,
+      onTriggerSortingChange,
+      columns,
+      rows,
+      remoteOperations,
+      pagination,
+      showLoadingIndicator,
+      selectable,
+      multiSelect,
+      keyExpr
+    } = props; // States used within the component
 
-  /**
-   * Import custom types.
-   */
-  const Table = ({
-    rowClick,
-    linkClick,
-    iconClick,
-    previousPageClick,
-    nextPageClick,
-    rowsPerPageChange,
-    triggerSortingChange,
-    title,
-    columns,
-    rows,
-    remotePagination,
-    pagination,
-    showLoadingIndicator
-  }) => {
-    // States used within the component
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
     const [filteredRows, setFilteredRows] = React.useState([]);
     const [currentPageRows, setCurrentPageRows] = React.useState([]);
@@ -109,13 +128,29 @@
     const [from, setFrom] = React.useState();
     const [to, setTo] = React.useState();
     const [total, setTotal] = React.useState();
+    const [selectAllState, setSelectAllState] = React.useState('none');
+    const [selected, setSelected] = React.useState(multiSelect ? [] : undefined);
+    React.useEffect(() => {
+      setSelected(props.selectedRows || (multiSelect ? [] : undefined));
+    }, [props.selectedRows, multiSelect]);
+    /**
+     * update select all checkbox state
+     */
+
+    React.useEffect(() => {
+      if (multiSelect) {
+        const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
+        const count = selected.filter(item => currentList.includes(item)).length;
+        setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');
+      }
+    }, [currentPageRows, multiSelect, selected, keyExpr]);
     /**
      * Takes care of local pagination.
      * Works only in case remote pagination is not defined or is set to false.
      */
 
     React.useEffect(() => {
-      if (!remotePagination) {
+      if (!remoteOperations) {
         // Let's retrieve temporary filtered rows and update globally filtered rows
         const tmpFilteredRows = filterAndSortRows();
         setFilteredRows(tmpFilteredRows);
@@ -129,14 +164,14 @@
 
         setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
       }
-    }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);
+    }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remoteOperations]);
     /**
      * Takes care of remote pagination.
      * Works only in case remote pagination is set to true.
      */
 
     React.useEffect(() => {
-      if (remotePagination) {
+      if (remoteOperations) {
         setCurrentPageRows(rows); // Let's assign pagination values
 
         setFrom(pagination?.from);
@@ -145,7 +180,7 @@
         setCurrentPage(pagination?.currentPage);
         setRowsPerPage(pagination?.rowsPerPage);
       }
-    }, [remotePagination, pagination, rows]);
+    }, [remoteOperations, pagination, rows]);
     /**
      * Filters out a rows by specific column filters and sorts them if any sorting is set.
      * @returns Filtered and sorted rows.
@@ -214,8 +249,8 @@
               setSortedColumn(column.key);
               setSortedDirection('desc'); // Let's trigger remote sorting trigger function
 
-              if (remotePagination && triggerSortingChange) {
-                triggerSortingChange(column.key, 'desc');
+              if (remoteOperations && onTriggerSortingChange) {
+                onTriggerSortingChange(column.key, 'desc');
               }
             } else {
               tmpColumn.sortingDirection = 'asc'; // Update sorted column and direction
@@ -223,8 +258,8 @@
               setSortedColumn(column.key);
               setSortedDirection('asc'); // Let's trigger remote sorting trigger function
 
-              if (remotePagination && triggerSortingChange) {
-                triggerSortingChange(column.key, 'asc');
+              if (remoteOperations && onTriggerSortingChange) {
+                onTriggerSortingChange(column.key, 'asc');
               }
             }
           } else {
@@ -234,8 +269,8 @@
             setSortedColumn(column.key);
             setSortedDirection('asc'); // Let's trigger remote sorting trigger function
 
-            if (remotePagination && triggerSortingChange) {
-              triggerSortingChange(column.key, 'asc');
+            if (remoteOperations && onTriggerSortingChange) {
+              onTriggerSortingChange(column.key, 'asc');
             }
           }
         } else if (tmpColumn.sortingDirection !== undefined) {
@@ -252,10 +287,10 @@
 
 
     const previousPage = () => {
-      if (remotePagination) {
+      if (remoteOperations) {
         // Let's inform parent component about page change
-        if (previousPageClick) {
-          previousPageClick();
+        if (onPreviousPageClick) {
+          onPreviousPageClick();
         }
       } else {
         // Let's change the page within the component
@@ -268,10 +303,10 @@
 
 
     const nextPage = () => {
-      if (remotePagination) {
+      if (remoteOperations) {
         // Let's inform parent component about page change
-        if (nextPageClick) {
-          nextPageClick();
+        if (onNextPageClick) {
+          onNextPageClick();
         }
       } else {
         // Let's change the page within the component
@@ -286,10 +321,10 @@
 
     const changeRowsPerPage = value => {
       // Let's check if we are using remote pagination
-      if (remotePagination) {
+      if (remoteOperations) {
         // Inform parent component about rows per page change
-        if (rowsPerPageChange) {
-          rowsPerPageChange(parseInt(value));
+        if (onRowsPerPageChange) {
+          onRowsPerPageChange(value);
         }
       } else {
         // Let's reset current page to 1
@@ -297,172 +332,90 @@
       } // Let's set rows per page
 
 
-      setRowsPerPage(parseInt(value));
-    };
-    /**
-     * Renders the table header.
-     */
-
-
-    const renderHeader = () => {
-      return /*#__PURE__*/React.createElement("thead", null, title && /*#__PURE__*/React.createElement("tr", {
-        "data-testid": "TestTableHeaderRow"
-      }, /*#__PURE__*/React.createElement(_TableStyles.TableHeaderRowCol, {
-        colSpan: columns.length
-      }, /*#__PURE__*/React.createElement("div", null, title, /*#__PURE__*/React.createElement(_SystemIcons.MoreVertical, {
-        size: "18px",
-        color: _styles.COLORS.neutral_600
-      })))), /*#__PURE__*/React.createElement("tr", {
-        "data-testid": "TestTableColumnHeaderRow"
-      }, columns.map(column => /*#__PURE__*/React.createElement(_TableStyles.TableColumnHeaderCol, {
-        onClick: () => sortTableColumn(column),
-        key: column.key,
-        style: {
-          width: column.width
-        },
-        className: `${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`
-      }, column.name, column.sortingDirection === 'asc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineUp, {
-        size: "20px"
-      }) : column.sortingDirection === 'desc' ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineDown, {
-        size: "20px"
-      }) : ''))));
+      setRowsPerPage(value);
     };
     /**
-     * Function which is called when a mouse click happens on a link to pass data to the parent component.
+     * Function which is called when a mouse click happens on a row to pass data to the parent component.
      * @param row - Row in which the link is located.
-     * @param key - Key of the column for which the link is set.
-     * @param event - Click event handler.
      */
 
 
-    const onLinkClick = (row, key, event) => {
-      if (linkClick) {
-        event.stopPropagation();
-        linkClick(row, key);
-      }
-    };
-    /**
-     * Function which is called when a mouse click happens on an icon to pass data to the parent component.
-     * @param row - Row in which the icon is located.
-     * @param key - Key of the column for which the icon is set.
-     * @param event - Click event handler.
-     */
+    const onRowClick = row => {
+      const selectedText = window?.getSelection()?.toString();
 
+      if (selectedText?.length === 0 && selectable) {
+        const value = keyExpr ? row[keyExpr] : row;
+        let currentSelection = value;
 
-    const onIconClick = (row, key, event) => {
-      if (iconClick) {
-        event.stopPropagation();
-        iconClick(row, key);
-      }
-    };
-    /**
-     * Function which is called when a mouse click happens on a row to pass data to the parent component.
-     * @param row - Row in which the link is located.
-     */
+        if (!!multiSelect) {
+          const existing = selected?.indexOf(value);
 
+          if (existing > -1) {
+            currentSelection = [...selected];
+            currentSelection.splice(existing, 1);
+          } else {
+            currentSelection = [...selected, currentSelection];
+          }
+        }
 
-    const onRowClick = row => {
-      const selectedText = window?.getSelection()?.toString(); // Let's trigger row click only if we haven't selected any text and action exists
-
-      if (selectedText?.length === 0 && rowClick) {
-        rowClick(row);
+        setSelected(currentSelection);
+        props.onSelectionChange && props.onSelectionChange(currentSelection);
       }
     };
     /**
-     * Renders the table body.
+     * Function which is called when user clicks checkbox to select or deselect all rows.
      */
 
 
-    const renderBody = () => {
-      return /*#__PURE__*/React.createElement("tbody", null, currentPageRows.length > 0 ? currentPageRows.map((row, index) => /*#__PURE__*/React.createElement(_TableStyles.TableDataRow, {
-        key: `row_${index}`,
-        onClick: () => onRowClick(row),
-        "data-testid": "TestTableDataRow"
-      }, columns.map(column => /*#__PURE__*/React.createElement(_TableStyles.TableDataCol, {
-        key: `row_${index}_${column.key}`,
-        style: column.colorFn ? {
-          color: column.colorFn(row, column.key),
-          maxWidth: column.width
-        } : {
-          maxWidth: column.width
-        },
-        className: `${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `,
-        title: column.shortenText && row[column.key]
-      }, column.isLink && row[column.key] ? /*#__PURE__*/React.createElement(_index3.Button, {
-        size: _types.Size.Small,
-        variant: "tertiary",
-        onClick: event => onLinkClick(row, column.key, event),
-        style: column.colorFn && {
-          color: column.colorFn(row, column.key)
-        }
-      }, row[column.key]) : column.isIcon && column.icon ? /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        action: event => onIconClick(row, column.key, event)
-      }, _index.SystemIcons[column.icon]({
-        size: '24',
-        className: 'icon'
-      })) : column.customContent ? column.customContent(row, column.key) : row[column.key])))) : /*#__PURE__*/React.createElement(_TableStyles.TableDataRow, {
-        className: "no-rows",
-        "data-testid": "TestTableNoDataRow"
-      }, /*#__PURE__*/React.createElement(_TableStyles.TableDataCol, {
-        colSpan: columns.length,
-        className: "center"
-      }, "There are no rows to display")));
-    };
-    /**
-     * Renders the table footer.
-     */
+    const onSelectAllClick = () => {
+      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);
+
+      switch (selectAllState) {
+        case 'all':
+          setSelected([...selected].filter(item => !currentList.includes(item)));
+          setSelectAllState('none');
+          break;
 
+        case 'none':
+          setSelected([...selected, ...currentList]);
+          setSelectAllState('all');
+          break;
 
-    const renderFooter = () => {
-      // Define local values used within the footer
-      const rowsPerPageValues = ['10', '20', '50', '100'];
-      return /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(_TableStyles.TableFooterCol, {
-        colSpan: columns.length,
-        "data-testid": "TestTableFooterRow"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "Rows per page: "), /*#__PURE__*/React.createElement(_index2.DropdownFilter, {
-        id: "rows-per-page",
-        list: rowsPerPageValues.map(x => ({
-          label: x
-        })),
-        disableSorting: true,
-        onSelect: value => changeRowsPerPage(value),
-        initalValue: rowsPerPage.toString(),
-        isButton: true
-      }), /*#__PURE__*/React.createElement("span", {
-        className: "current-page-info"
-      }, total === 0 ? 0 : from, "-", to, " of ", total), /*#__PURE__*/React.createElement("div", {
-        className: "controls"
-      }, /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => previousPage(),
-        disabled: from === 1
-      }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronLeft, {
-        size: "24",
-        color: _styles.COLORS.neutral_600
-      })), /*#__PURE__*/React.createElement(_index3.IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        action: () => nextPage(),
-        disabled: to === total
-      }, /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
-        size: "24",
-        color: _styles.COLORS.neutral_600
-      })))))));
+        case 'some':
+          setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);
+          setSelectAllState('all');
+          break;
+      }
     };
     /**
      * Return Table component.
      */
 
 
-    return /*#__PURE__*/React.createElement(_TableStyles.TableWrapper, null, /*#__PURE__*/React.createElement(_TableStyles.TableContainer, {
+    return /*#__PURE__*/React.createElement(_TableStyles.TableWrapper, null, /*#__PURE__*/React.createElement("table", {
       cellPadding: "0",
       cellSpacing: "0",
-      "data-testid": "TestTable"
-    }, renderHeader(), renderBody(), renderFooter()), showLoadingIndicator && /*#__PURE__*/React.createElement(_TableStyles.TableLoadingIndicator, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
+      "data-testid": "TestTable",
+      className: 'table'
+    }, /*#__PURE__*/React.createElement(_TableHeaders2.default, _extends({}, props, {
+      sortByColumn: sortTableColumn,
+      onSelectAllClick: onSelectAllClick,
+      selectAllState: selectAllState
+    })), /*#__PURE__*/React.createElement(_TableBody2.default, _extends({}, props, {
+      currentPageRows: currentPageRows,
+      selected: selected,
+      onRowClick: onRowClick
+    })), /*#__PURE__*/React.createElement(_TableFooter2.default, _extends({}, props, {
+      onRowsPerPageChange: changeRowsPerPage,
+      rowsPerPage: rowsPerPage,
+      from: from,
+      to: to,
+      total: total,
+      nextPage: nextPage,
+      prevPage: previousPage
+    }))), showLoadingIndicator && /*#__PURE__*/React.createElement("div", {
+      className: 'table-spinner'
+    }, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
       size: _types.Size.Medium,
       color: "#ffffff"
     })));