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

package/dist/Table/Table.js

@@ -1,292 +1,397 @@
-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 _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; }
 /**
  * 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 { 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;
+ */
+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