@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.12

package/dist/Table/Table.js

@@ -1,397 +1,292 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 /**
  * Import React libraries.
- */
-import * as React from 'react';
-
+ */
+import * as React from 'react';
 /**
  * Import custom components.
- */
-import { Size } from '../types';
-
+ */
+import { Size } from '../types';
 /**
  * Import custom styles.
- */
-import { StyledTableSpinner, TableWrapper } from './TableStyles';
-
-/**
- * Import custom types.
- */
-
-import { LoadingIndicator } from '../LoadingIndicator';
-import TableHeader from './TableHeaders';
-import TableFooter from './TableFooter';
-import TableBody from './TableBody';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Table = function Table(props) {
-  var onPreviousPageClick = props.onPreviousPageClick,
-    onNextPageClick = props.onNextPageClick,
-    onRowsPerPageChange = props.onRowsPerPageChange,
-    onTriggerSortingChange = props.onTriggerSortingChange,
-    columns = props.columns,
-    rows = props.rows,
-    remoteOperations = props.remoteOperations,
-    pagination = props.pagination,
-    showLoadingIndicator = props.showLoadingIndicator,
-    selectable = props.selectable,
-    multiSelect = props.multiSelect,
-    keyExpr = props.keyExpr,
-    sortProps = props.sortProps,
-    accordion = props.accordion,
-    _props$collapsed = props.collapsed,
-    collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
-    collapsedRows = props.collapsedRows,
-    rowsPerPageLabel = props.rowsPerPageLabel,
-    loaderZIndex = props.loaderZIndex;
-
-  // States used within the component
-  var _React$useState = React.useState(10),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    rowsPerPage = _React$useState2[0],
-    setRowsPerPage = _React$useState2[1];
-  var _React$useState3 = React.useState([]),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    filteredRows = _React$useState4[0],
-    setFilteredRows = _React$useState4[1];
-  var _React$useState5 = React.useState([]),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    currentPageRows = _React$useState6[0],
-    setCurrentPageRows = _React$useState6[1];
-  var _React$useState7 = React.useState(1),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    currentPage = _React$useState8[0],
-    setCurrentPage = _React$useState8[1];
-  var _React$useState9 = React.useState(),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    sort = _React$useState10[0],
-    setSort = _React$useState10[1];
-  var _React$useState11 = React.useState(),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    from = _React$useState12[0],
-    setFrom = _React$useState12[1];
-  var _React$useState13 = React.useState(),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    to = _React$useState14[0],
-    setTo = _React$useState14[1];
-  var _React$useState15 = React.useState(),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    total = _React$useState16[0],
-    setTotal = _React$useState16[1];
-  var _React$useState17 = React.useState(true),
-    _React$useState18 = _slicedToArray(_React$useState17, 2),
-    isCollapsed = _React$useState18[0],
-    setIsCollapsed = _React$useState18[1];
-  var _React$useState19 = React.useState('none'),
-    _React$useState20 = _slicedToArray(_React$useState19, 2),
-    selectAllState = _React$useState20[0],
-    setSelectAllState = _React$useState20[1];
-  var _React$useState21 = React.useState(multiSelect ? [] : undefined),
-    _React$useState22 = _slicedToArray(_React$useState21, 2),
-    selected = _React$useState22[0],
-    setSelected = _React$useState22[1];
-  React.useEffect(function () {
-    var _sortProps$column, _sortProps$direction;
-    setSort({
-      column: (_sortProps$column = sortProps === null || sortProps === void 0 ? void 0 : sortProps.column) !== null && _sortProps$column !== void 0 ? _sortProps$column : '',
-      direction: (_sortProps$direction = sortProps === null || sortProps === void 0 ? void 0 : sortProps.direction) !== null && _sortProps$direction !== void 0 ? _sortProps$direction : 'asc',
-      allowClearingSort: (sortProps === null || sortProps === void 0 ? void 0 : sortProps.allowClearingSort) === undefined ? true : sortProps.allowClearingSort
-    });
-  }, [sortProps]);
-  React.useEffect(function () {
-    setSelected(props.selectedRows || (multiSelect ? [] : undefined));
-  }, [props.selectedRows, multiSelect]);
-
-  /**
-   * update select all checkbox state
-   */
-  React.useEffect(function () {
-    if (multiSelect) {
-      var currentList = currentPageRows.map(function (row) {
-        return keyExpr ? row[keyExpr] : row;
-      });
-      var count = selected.filter(function (item) {
-        return currentList.includes(item);
-      }).length;
-      setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');
-    }
-  }, [currentPageRows, multiSelect, selected, keyExpr]);
-
-  /**
-   * Takes care of remote pagination.
-   * Works only in case remote pagination is set to true.
-   */
-  React.useEffect(function () {
-    if (remoteOperations) {
-      setCurrentPageRows(rows);
-
-      // Let's assign pagination values
-      setFrom(pagination === null || pagination === void 0 ? void 0 : pagination.from);
-      setTo(pagination === null || pagination === void 0 ? void 0 : pagination.to);
-      setTotal(pagination === null || pagination === void 0 ? void 0 : pagination.total);
-      setCurrentPage(pagination === null || pagination === void 0 ? void 0 : pagination.currentPage);
-      setRowsPerPage(pagination === null || pagination === void 0 ? void 0 : pagination.rowsPerPage);
-    }
-  }, [remoteOperations, pagination, rows]);
-
-  /**
-   * Sets number of rows to display when accordion.
-   */
-  React.useEffect(function () {
-    if (!accordion) return;
-    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);
-  }, [rows, accordion, collapsedRows, isCollapsed]);
-  React.useEffect(function () {
-    if (!accordion) return;
-    setIsCollapsed(!!collapsed);
-  }, [accordion, collapsed]);
-
-  /**
-   * Filters out a rows by specific column filters and sorts them if any sorting is set.
-   * @returns Filtered and sorted rows.
-   */
-  var filterAndSortRows = function filterAndSortRows() {
-    var tmpFilteredRows = rows.filter(function (row) {
-      // Let's start with matched filter criteria
-      var matchFilterCriteria = true;
-
-      // Let's go through columns
-      var _iterator = _createForOfIteratorHelper(columns),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var column = _step.value;
-          // Let's check if filter value is specified for the column
-          // And if it doesn't match the current row column value
-          // Then let's update match filter criteria to failed
-          if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {
-            matchFilterCriteria = false;
-          }
-        }
-
-        // Let's return row only in case match filter criteria succeeds
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      if (matchFilterCriteria) {
-        return row;
-      }
-    });
-
-    // Let's apply sorting if needed
-    if (!!(sort !== null && sort !== void 0 && sort.column) && !!(sort !== null && sort !== void 0 && sort.direction)) {
-      // Let's sort the rows
-      tmpFilteredRows.sort(function (a, b) {
-        if (a[sort.column] > b[sort.column]) {
-          return sort.direction === 'asc' ? 1 : -1;
-        } else if (a[sort.column] < b[sort.column]) {
-          return sort.direction === 'asc' ? -1 : 1;
-        } else {
-          return 0;
-        }
-      });
-    }
-
-    // Let's return filtered rows
-    return tmpFilteredRows;
-  };
-
-  /**
-   * Takes care of local pagination.
-   * Works only in case remote pagination is not defined or is set to false.
-   */
-  React.useEffect(function () {
-    if (!remoteOperations) {
-      // Let's retrieve temporary filtered rows and update globally filtered rows
-      var tmpFilteredRows = filterAndSortRows();
-      setFilteredRows(tmpFilteredRows);
-      setTotal(tmpFilteredRows.length);
-
-      // Assign rows from and rows to
-      var rowsFrom = (currentPage - 1) * rowsPerPage;
-      var rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;
-
-      // Set from and to values
-      setFrom(rowsFrom + 1);
-      setTo(rowsTo);
-
-      // Filter out the rows
-      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
-    }
-  }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);
-
-  /**
-   * Applies a specific sorting to a column.
-   * If no sorting exists, then applies ascending initially
-   * @param column - Column to which sorting should be applied.
-   */
-  var sortTableColumn = function sortTableColumn(column) {
-    var columnKey = '';
-    var sortDirection = undefined;
-    if ((sort === null || sort === void 0 ? void 0 : sort.column) !== column.key) {
-      columnKey = column.key;
-      sortDirection = 'asc';
-    } else {
-      if ((sort === null || sort === void 0 ? void 0 : sort.direction) === 'desc' && sort !== null && sort !== void 0 && sort.allowClearingSort) {
-        columnKey = '';
-        sortDirection = undefined;
-      } else {
-        columnKey = sort.column;
-        sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';
-      }
-    }
-    if (columnKey == '') setSort({
-      column: '',
-      direction: 'asc',
-      allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort
-    });else setSort({
-      column: columnKey,
-      direction: sortDirection,
-      allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort
-    });
-    remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);
-  };
-
-  /**
-   * Navigates user back to the previous page and updates the current table page.
-   */
-  var previousPage = function previousPage() {
-    if (remoteOperations) {
-      // Let's inform parent component about page change
-      if (onPreviousPageClick) {
-        onPreviousPageClick();
-      }
-    } else {
-      // Let's change the page within the component
-      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);
-    }
-  };
-
-  /**
-   * Navigates user to the next page and updates the current table page.
-   */
-  var nextPage = function nextPage() {
-    if (remoteOperations) {
-      // Let's inform parent component about page change
-      if (onNextPageClick) {
-        onNextPageClick();
-      }
-    } else {
-      // Let's change the page within the component
-      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);
-    }
-  };
-
-  /**
-   * Updates the rows per page value and refreshes the table content accordingly.
-   * @param value - Newly selected rows per page value.
-   */
-  var changeRowsPerPage = function changeRowsPerPage(value) {
-    // Let's check if we are using remote pagination
-    if (remoteOperations) {
-      // Inform parent component about rows per page change
-      if (onRowsPerPageChange) {
-        onRowsPerPageChange(value);
-      }
-    } else {
-      // Let's reset current page to 1
-      setCurrentPage(1);
-    }
-
-    // Let's set rows per page
-    setRowsPerPage(value);
-  };
-
-  /**
-   * 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.
-   */
-  var onRowClick = function onRowClick(row) {
-    var _window, _window$getSelection;
-    var selectedText = (_window = window) === null || _window === void 0 ? void 0 : (_window$getSelection = _window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.toString();
-    if ((selectedText === null || selectedText === void 0 ? void 0 : selectedText.length) === 0 && selectable) {
-      var value = keyExpr ? row[keyExpr] : row;
-      var currentSelection = value;
-      if (!!multiSelect) {
-        var existing = selected === null || selected === void 0 ? void 0 : selected.indexOf(value);
-        if (existing > -1) {
-          currentSelection = _toConsumableArray(selected);
-          currentSelection.splice(existing, 1);
-        } else {
-          currentSelection = [].concat(_toConsumableArray(selected), [currentSelection]);
-        }
-      }
-      setSelected(currentSelection);
-      props.onSelectionChange && props.onSelectionChange(currentSelection);
-    }
-  };
-
-  /**
-   * Function which is called when user clicks checkbox to select or deselect all rows.
-   */
-  var onSelectAllClick = function onSelectAllClick() {
-    var currentList = currentPageRows.map(function (row) {
-      return keyExpr ? row[keyExpr] : row;
-    });
-    switch (selectAllState) {
-      case 'all':
-        setSelected(_toConsumableArray(selected).filter(function (item) {
-          return !currentList.includes(item);
-        }));
-        setSelectAllState('none');
-        break;
-      case 'none':
-        setSelected([].concat(_toConsumableArray(selected), _toConsumableArray(currentList)));
-        setSelectAllState('all');
-        break;
-      case 'some':
-        setSelected([].concat(_toConsumableArray(selected), _toConsumableArray(currentList.filter(function (item) {
-          return !selected.includes(item);
-        }))));
-        setSelectAllState('all');
-        break;
-    }
-  };
-
-  /**
-   * Return Table component.
-   */
-  return /*#__PURE__*/_jsxs(TableWrapper, {
-    className: props.border ? 'border' : undefined,
-    children: [/*#__PURE__*/_jsx(TableHeader, _objectSpread({}, props)), /*#__PURE__*/_jsx(TableBody, _objectSpread(_objectSpread({}, props), {}, {
-      currentPageRows: currentPageRows,
-      selected: selected,
-      onRowClick: onRowClick,
-      sortByColumn: sortTableColumn,
-      onSelectAllClick: onSelectAllClick,
-      sortProps: sort,
-      selectAllState: selectAllState
-    })), /*#__PURE__*/_jsx(TableFooter, _objectSpread(_objectSpread({}, props), {}, {
-      onRowsPerPageChange: changeRowsPerPage,
-      rowsPerPage: rowsPerPage,
-      setIsCollapsed: setIsCollapsed,
-      isCollapsed: isCollapsed,
-      from: from,
-      to: to,
-      total: total,
-      nextPage: nextPage,
-      prevPage: previousPage
-    })), showLoadingIndicator && /*#__PURE__*/_jsx(StyledTableSpinner, {
-      zindex: loaderZIndex,
-      children: /*#__PURE__*/_jsx(LoadingIndicator, {
-        size: Size.Medium
-      })
-    })]
-  });
-};
-export default Table;
-//# sourceMappingURL=Table.js.map
+ */
+import { StyledTableSpinner, TableWrapper } from './TableStyles';
+import { LoadingIndicator } from '../LoadingIndicator';
+import TableHeader from './TableHeaders';
+import TableFooter from './TableFooter';
+import TableBody from './TableBody';
+var Table = function (props) {
+    var onPreviousPageClick = props.onPreviousPageClick, onNextPageClick = props.onNextPageClick, onRowsPerPageChange = props.onRowsPerPageChange, onTriggerSortingChange = props.onTriggerSortingChange, columns = props.columns, rows = props.rows, remoteOperations = props.remoteOperations, pagination = props.pagination, showLoadingIndicator = props.showLoadingIndicator, selectable = props.selectable, multiSelect = props.multiSelect, keyExpr = props.keyExpr, sortProps = props.sortProps, accordion = props.accordion, _a = props.collapsed, collapsed = _a === void 0 ? true : _a, collapsedRows = props.collapsedRows, rowsPerPageLabel = props.rowsPerPageLabel, loaderZIndex = props.loaderZIndex;
+    // States used within the component
+    var _b = React.useState(10), rowsPerPage = _b[0], setRowsPerPage = _b[1];
+    var _c = React.useState([]), filteredRows = _c[0], setFilteredRows = _c[1];
+    var _d = React.useState([]), currentPageRows = _d[0], setCurrentPageRows = _d[1];
+    var _e = React.useState(1), currentPage = _e[0], setCurrentPage = _e[1];
+    var _f = React.useState(), sort = _f[0], setSort = _f[1];
+    var _g = React.useState(), from = _g[0], setFrom = _g[1];
+    var _h = React.useState(), to = _h[0], setTo = _h[1];
+    var _j = React.useState(), total = _j[0], setTotal = _j[1];
+    var _k = React.useState(true), isCollapsed = _k[0], setIsCollapsed = _k[1];
+    var _l = React.useState('none'), selectAllState = _l[0], setSelectAllState = _l[1];
+    var _m = React.useState(multiSelect ? [] : undefined), selected = _m[0], setSelected = _m[1];
+    React.useEffect(function () {
+        var _a, _b;
+        setSort({
+            column: (_a = sortProps === null || sortProps === void 0 ? void 0 : sortProps.column) !== null && _a !== void 0 ? _a : '',
+            direction: (_b = sortProps === null || sortProps === void 0 ? void 0 : sortProps.direction) !== null && _b !== void 0 ? _b : 'asc',
+            allowClearingSort: (sortProps === null || sortProps === void 0 ? void 0 : sortProps.allowClearingSort) === undefined ? true : sortProps.allowClearingSort
+        });
+    }, [sortProps]);
+    React.useEffect(function () {
+        setSelected(props.selectedRows || (multiSelect ? [] : undefined));
+    }, [props.selectedRows, multiSelect]);
+    /**
+     * update select all checkbox state
+     */
+    React.useEffect(function () {
+        if (multiSelect) {
+            var currentList_1 = currentPageRows.map(function (row) { return keyExpr ? row[keyExpr] : row; });
+            var count = selected.filter(function (item) { return currentList_1.includes(item); }).length;
+            setSelectAllState(count === currentList_1.length ? 'all' : count > 0 ? 'some' : 'none');
+        }
+    }, [currentPageRows, multiSelect, selected, keyExpr]);
+    /**
+     * Takes care of remote pagination.
+     * Works only in case remote pagination is set to true.
+     */
+    React.useEffect(function () {
+        if (remoteOperations) {
+            setCurrentPageRows(rows);
+            // Let's assign pagination values
+            setFrom(pagination === null || pagination === void 0 ? void 0 : pagination.from);
+            setTo(pagination === null || pagination === void 0 ? void 0 : pagination.to);
+            setTotal(pagination === null || pagination === void 0 ? void 0 : pagination.total);
+            setCurrentPage(pagination === null || pagination === void 0 ? void 0 : pagination.currentPage);
+            setRowsPerPage(pagination === null || pagination === void 0 ? void 0 : pagination.rowsPerPage);
+        }
+    }, [remoteOperations, pagination, rows]);
+    /**
+     * Sets number of rows to display when accordion.
+     */
+    React.useEffect(function () {
+        if (!accordion)
+            return;
+        setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);
+    }, [rows, accordion, collapsedRows, isCollapsed]);
+    React.useEffect(function () {
+        if (!accordion)
+            return;
+        setIsCollapsed(!!collapsed);
+    }, [accordion, collapsed]);
+    /**
+     * Filters out a rows by specific column filters and sorts them if any sorting is set.
+     * @returns Filtered and sorted rows.
+     */
+    var filterAndSortRows = function () {
+        var tmpFilteredRows = rows.filter(function (row) {
+            // Let's start with matched filter criteria
+            var matchFilterCriteria = true;
+            // Let's go through columns
+            for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+                var column = columns_1[_i];
+                // Let's check if filter value is specified for the column
+                // And if it doesn't match the current row column value
+                // Then let's update match filter criteria to failed
+                if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {
+                    matchFilterCriteria = false;
+                }
+            }
+            // Let's return row only in case match filter criteria succeeds
+            if (matchFilterCriteria) {
+                return row;
+            }
+        });
+        // Let's apply sorting if needed
+        if (!!(sort === null || sort === void 0 ? void 0 : sort.column) && !!(sort === null || sort === void 0 ? void 0 : sort.direction)) {
+            // Let's sort the rows
+            tmpFilteredRows.sort(function (a, b) {
+                if (a[sort.column] > b[sort.column]) {
+                    return sort.direction === 'asc' ? 1 : -1;
+                }
+                else if (a[sort.column] < b[sort.column]) {
+                    return sort.direction === 'asc' ? -1 : 1;
+                }
+                else {
+                    return 0;
+                }
+            });
+        }
+        // Let's return filtered rows
+        return tmpFilteredRows;
+    };
+    /**
+     * Takes care of local pagination.
+     * Works only in case remote pagination is not defined or is set to false.
+     */
+    React.useEffect(function () {
+        if (!remoteOperations) {
+            // Let's retrieve temporary filtered rows and update globally filtered rows
+            var tmpFilteredRows = filterAndSortRows();
+            setFilteredRows(tmpFilteredRows);
+            setTotal(tmpFilteredRows.length);
+            // Assign rows from and rows to
+            var rowsFrom = (currentPage - 1) * rowsPerPage;
+            var rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;
+            // Set from and to values
+            setFrom(rowsFrom + 1);
+            setTo(rowsTo);
+            // Filter out the rows
+            setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));
+        }
+    }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);
+    /**
+     * Applies a specific sorting to a column.
+     * If no sorting exists, then applies ascending initially
+     * @param column - Column to which sorting should be applied.
+     */
+    var sortTableColumn = function (column) {
+        var columnKey = '';
+        var sortDirection = undefined;
+        if ((sort === null || sort === void 0 ? void 0 : sort.column) !== column.key) {
+            columnKey = column.key;
+            sortDirection = 'asc';
+        }
+        else {
+            if ((sort === null || sort === void 0 ? void 0 : sort.direction) === 'desc' && (sort === null || sort === void 0 ? void 0 : sort.allowClearingSort)) {
+                columnKey = '';
+                sortDirection = undefined;
+            }
+            else {
+                columnKey = sort.column;
+                sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';
+            }
+        }
+        if (columnKey == '')
+            setSort({ column: '', direction: 'asc', allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort });
+        else
+            setSort({ column: columnKey, direction: sortDirection, allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort });
+        remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);
+    };
+    /**
+     * Navigates user back to the previous page and updates the current table page.
+     */
+    var previousPage = function () {
+        if (remoteOperations) {
+            // Let's inform parent component about page change
+            if (onPreviousPageClick) {
+                onPreviousPageClick();
+            }
+        }
+        else {
+            // Let's change the page within the component
+            setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);
+        }
+    };
+    /**
+     * Navigates user to the next page and updates the current table page.
+     */
+    var nextPage = function () {
+        if (remoteOperations) {
+            // Let's inform parent component about page change
+            if (onNextPageClick) {
+                onNextPageClick();
+            }
+        }
+        else {
+            // Let's change the page within the component
+            setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);
+        }
+    };
+    /**
+     * Updates the rows per page value and refreshes the table content accordingly.
+     * @param value - Newly selected rows per page value.
+     */
+    var changeRowsPerPage = function (value) {
+        // Let's check if we are using remote pagination
+        if (remoteOperations) {
+            // Inform parent component about rows per page change
+            if (onRowsPerPageChange) {
+                onRowsPerPageChange(value);
+            }
+        }
+        else {
+            // Let's reset current page to 1
+            setCurrentPage(1);
+        }
+        // Let's set rows per page
+        setRowsPerPage(value);
+    };
+    /**
+     * 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.
+     */
+    var onRowClick = function (row) {
+        var _a;
+        var selectedText = (_a = window === null || window === void 0 ? void 0 : window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString();
+        if ((selectedText === null || selectedText === void 0 ? void 0 : selectedText.length) === 0 && selectable) {
+            var value = keyExpr ? row[keyExpr] : row;
+            var currentSelection = value;
+            if (!!multiSelect) {
+                var existing = selected === null || selected === void 0 ? void 0 : selected.indexOf(value);
+                if (existing > -1) {
+                    currentSelection = __spreadArray([], selected, true);
+                    currentSelection.splice(existing, 1);
+                }
+                else {
+                    currentSelection = __spreadArray(__spreadArray([], selected, true), [currentSelection], false);
+                }
+            }
+            setSelected(currentSelection);
+            props.onSelectionChange && props.onSelectionChange(currentSelection);
+        }
+    };
+    /**
+     * Function which is called when user clicks checkbox to select or deselect all rows.
+     */
+    var onSelectAllClick = function () {
+        var currentList = currentPageRows.map(function (row) { return keyExpr ? row[keyExpr] : row; });
+        switch (selectAllState) {
+            case 'all':
+                setSelected(__spreadArray([], selected, true).filter(function (item) { return !currentList.includes(item); }));
+                setSelectAllState('none');
+                break;
+            case 'none':
+                setSelected(__spreadArray(__spreadArray([], selected, true), currentList, true));
+                setSelectAllState('all');
+                break;
+            case 'some':
+                setSelected(__spreadArray(__spreadArray([], selected, true), currentList.filter(function (item) { return !selected.includes(item); }), true));
+                setSelectAllState('all');
+                break;
+        }
+    };
+    /**
+     * Return Table component.
+     */
+    return (React.createElement(TableWrapper, { className: props.border ? 'border' : undefined },
+        React.createElement(TableHeader, __assign({}, props)),
+        React.createElement(TableBody, __assign({}, props, { currentPageRows: currentPageRows, selected: selected, onRowClick: onRowClick, sortByColumn: sortTableColumn, onSelectAllClick: onSelectAllClick, sortProps: sort, selectAllState: selectAllState })),
+        React.createElement(TableFooter, __assign({}, props, { onRowsPerPageChange: changeRowsPerPage, rowsPerPage: rowsPerPage, setIsCollapsed: setIsCollapsed, isCollapsed: isCollapsed, from: from, to: to, total: total, nextPage: nextPage, prevPage: previousPage })),
+        showLoadingIndicator && (React.createElement(StyledTableSpinner, { zindex: loaderZIndex },
+            React.createElement(LoadingIndicator, { size: Size.Medium })))));
+};
+export default Table;