@deviceinsight/ng-ui-components 6.19.0 → 6.21.0

package/lib/cjs/assets/style.css

@@ -3,7 +3,6 @@
 * UI Components
 */
 
-
 /* ColorPicker */
 .di.color-picker {margin:-5px -10px; padding:0}
 .di.color-picker .color {width:20%; padding:15px; float:left; position:relative; transition: transform .1s ease; cursor:pointer;}
@@ -70,7 +69,6 @@
 .di.reactable.sortable th.sortable:hover::after {content: url('./svg/triangle_up_and_down.svg'); position:absolute; padding:0 0 0 0px; margin-left:1px; filter:opacity(0.3); width:16px; height:16px;}
 .di.reactable.sortable th.sortable.sortAsc::after {content: url('./svg/triangle_up.svg'); position:absolute; padding:0 0 0 0px; margin-left:2px; width:16px; height:16px;filter:none;}
 .di.reactable.sortable th.sortable.sortDes::after {content: url('./svg/triangle_down.svg'); position:absolute; padding:0 0 0 0px; margin-left:2px; width:16px; height:16px;filter:none;}
-/* TODO filterrow form styles */
 
 /* Upload */
 .di.upload,
@@ -253,3 +251,6 @@
 .di.slider .rc-slider-handle {border-color: var(--primary-color, #1a8ed3);}
 .di.slider .rc-slider-dot-active {border-color: var(--primary-color, #1a8ed3);}
 .di.slider .rc-slider-handle:active {box-shadow: 0 0 5px var(--primary-color, #1a8ed3);}
+
+.di.modal.scroll-horizontally-advice {padding-top: 40vh}
+.di.modal.scroll-horizontally-advice .modal-content .scroll-horizontally-advice-buttons {text-align: right; margin-top: 24px;}

package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts

@@ -1,21 +1,19 @@
-import * as React from 'react';
+import React from 'react';
 import { ReactableColumnDef, ReactableRowDef, ReactableFilterSettings } from '../types';
 import { Pageable, PaginationSettings, SortDirection } from '../../../types/pagination';
 declare type Props<T, ID extends string | number | undefined | null> = {
-    columnDefs: Array<ReactableColumnDef<T>>;
-    uniqueItemKey: (arg0: T) => ID;
+    columnDefs: ReactableColumnDef<T>[];
+    uniqueItemKey: (item: T) => ID;
     paginationSettings: PaginationSettings;
     onSort: (property: string, direction: SortDirection) => void;
     onFilter?: (filterSettings: ReactableFilterSettings) => void;
-    pageable: Pageable<T> | null | undefined;
+    pageable?: Pageable<T> | null;
     isLoading: boolean;
     rowDef?: ReactableRowDef<T>;
     clickable?: boolean;
     messageWhenEmpty?: string;
     'data-testid'?: string;
 };
-export default class ReactableTable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
-    render(): React.JSX.Element;
-}
+export default function ReactableTable<T, ID extends string | number | undefined | null>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }: Props<T, ID>): React.JSX.Element;
 export {};
 //# sourceMappingURL=ReactableTable.d.ts.map

package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAEtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAClC,CAAC,GAAG,GAAG,EACP,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAClD,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,MAAM;CA+DN"}
+{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBA+Gd"}

package/lib/cjs/components/reactable/helpers/ReactableTable.js

@@ -26,37 +26,67 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const i18n_1 = require("../../../i18n");
 const classnames_1 = __importDefault(require("classnames"));
 const ng_ui_basic_components_1 = require("@deviceinsight/ng-ui-basic-components");
 const ReactableTableRow_1 = __importDefault(require("./ReactableTableRow"));
 const ReactableTableHeader_1 = __importDefault(require("./ReactableTableHeader"));
 const ReactableTableFilterRow_1 = __importDefault(require("./ReactableTableFilterRow"));
-class ReactableTable extends React.Component {
-    render() {
-        const { columnDefs, rowDef, uniqueItemKey, paginationSettings, pageable, onSort, onFilter, isLoading, clickable, messageWhenEmpty } = this.props;
-        const showFilterRow = columnDefs.some((columnDef) => !!columnDef.filterable);
-        return (React.createElement(ng_ui_basic_components_1.SpinnerContainer, { show: isLoading },
-            React.createElement("div", { className: "di reactable scroll-x" },
-                React.createElement("table", { className: (0, classnames_1.default)('di reactable sortable hoverable', { selectable: clickable }), "data-testid": this.props['data-testid'] },
-                    React.createElement("thead", null,
-                        React.createElement(ReactableTableHeader_1.default, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
-                    React.createElement("tbody", null,
-                        onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow_1.default, { columnDefs: columnDefs, onFilter: onFilter })),
-                        pageable &&
-                            pageable.content.length > 0 &&
-                            pageable.content.map((item, index) => {
-                                if (paginationSettings.size > index) {
-                                    return (React.createElement(ReactableTableRow_1.default, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef }));
-                                }
-                                else {
-                                    return null;
-                                }
-                            }),
-                        (!pageable || !pageable.content.length) && !isLoading && (React.createElement("tr", null,
-                            React.createElement("td", { colSpan: columnDefs.length },
-                                React.createElement(i18n_1.Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
-    }
+const ng_ui_api_client_1 = require("@deviceinsight/ng-ui-api-client");
+function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const tableRef = (0, react_1.useRef)(null);
+    const [showScrollingAdvice, setShowScrollingAdvice] = (0, react_1.useState)(false);
+    const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = (0, react_1.useState)(false);
+    const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
+    const neverShowScrollingAdviceRef = (0, react_1.useRef)(neverShowScrollingAdvice);
+    (0, react_1.useEffect)(() => {
+        neverShowScrollingAdviceRef.current = neverShowScrollingAdvice;
+    }, [neverShowScrollingAdvice]);
+    const updateScrollingAdvice = () => {
+        if (containerRef.current && tableRef.current) {
+            setShowScrollingAdvice(!neverShowScrollingAdviceRef.current && tableRef.current.scrollWidth > containerRef.current.offsetWidth);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        (0, ng_ui_api_client_1.readAccountObject)(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
+            setNeverShowScrollingAdvice(value === undefined ? false : value);
+            if (containerRef.current && tableRef.current) {
+                updateScrollingAdvice();
+            }
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        updateScrollingAdvice();
+        window.addEventListener('resize', updateScrollingAdvice);
+        return () => window.removeEventListener('resize', updateScrollingAdvice);
+    }, [pageable, columnDefs]);
+    const showFilterRow = columnDefs.some((col) => col.filterable);
+    return (react_1.default.createElement(ng_ui_basic_components_1.SpinnerContainer, { show: isLoading },
+        react_1.default.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
+            showScrollingAdvice && !isLoading && (react_1.default.createElement(ng_ui_basic_components_1.Modal, { className: "scroll-horizontally-advice", content: react_1.default.createElement("div", null,
+                    react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
+                    react_1.default.createElement("div", { className: "scroll-horizontally-advice-buttons" },
+                        react_1.default.createElement(ng_ui_basic_components_1.Button, { primary: true, onClick: async () => {
+                                await (0, ng_ui_api_client_1.writeAccountObject)(HIDE_SCROLLING_ADVICE_PATH, true);
+                                setNeverShowScrollingAdvice(true);
+                                setShowScrollingAdvice(false);
+                            } },
+                            react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain" }, "Never show again")),
+                        react_1.default.createElement(ng_ui_basic_components_1.Button, { onClick: () => setShowScrollingAdvice(false) },
+                            react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.ok" }, "OK")))), width: '40%' })),
+            react_1.default.createElement("table", { ref: tableRef, className: (0, classnames_1.default)('di reactable sortable hoverable', { selectable: clickable }), "data-testid": testId },
+                react_1.default.createElement("thead", null,
+                    react_1.default.createElement(ReactableTableHeader_1.default, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
+                react_1.default.createElement("tbody", null,
+                    onFilter && showFilterRow && (react_1.default.createElement(ReactableTableFilterRow_1.default, { columnDefs: columnDefs, onFilter: onFilter })),
+                    pageable?.content.length
+                        ? pageable.content
+                            .slice(0, paginationSettings.size)
+                            .map((item) => (react_1.default.createElement(ReactableTableRow_1.default, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef })))
+                        : !isLoading && (react_1.default.createElement("tr", null,
+                            react_1.default.createElement("td", { colSpan: columnDefs.length },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
 }
 exports.default = ReactableTable;

package/lib/esm/assets/style.css

@@ -3,7 +3,6 @@
 * UI Components
 */
 
-
 /* ColorPicker */
 .di.color-picker {margin:-5px -10px; padding:0}
 .di.color-picker .color {width:20%; padding:15px; float:left; position:relative; transition: transform .1s ease; cursor:pointer;}
@@ -70,7 +69,6 @@
 .di.reactable.sortable th.sortable:hover::after {content: url('./svg/triangle_up_and_down.svg'); position:absolute; padding:0 0 0 0px; margin-left:1px; filter:opacity(0.3); width:16px; height:16px;}
 .di.reactable.sortable th.sortable.sortAsc::after {content: url('./svg/triangle_up.svg'); position:absolute; padding:0 0 0 0px; margin-left:2px; width:16px; height:16px;filter:none;}
 .di.reactable.sortable th.sortable.sortDes::after {content: url('./svg/triangle_down.svg'); position:absolute; padding:0 0 0 0px; margin-left:2px; width:16px; height:16px;filter:none;}
-/* TODO filterrow form styles */
 
 /* Upload */
 .di.upload,
@@ -253,3 +251,6 @@
 .di.slider .rc-slider-handle {border-color: var(--primary-color, #1a8ed3);}
 .di.slider .rc-slider-dot-active {border-color: var(--primary-color, #1a8ed3);}
 .di.slider .rc-slider-handle:active {box-shadow: 0 0 5px var(--primary-color, #1a8ed3);}
+
+.di.modal.scroll-horizontally-advice {padding-top: 40vh}
+.di.modal.scroll-horizontally-advice .modal-content .scroll-horizontally-advice-buttons {text-align: right; margin-top: 24px;}

package/lib/esm/components/reactable/helpers/ReactableTable.d.ts

@@ -1,21 +1,19 @@
-import * as React from 'react';
+import React from 'react';
 import { ReactableColumnDef, ReactableRowDef, ReactableFilterSettings } from '../types';
 import { Pageable, PaginationSettings, SortDirection } from '../../../types/pagination';
 declare type Props<T, ID extends string | number | undefined | null> = {
-    columnDefs: Array<ReactableColumnDef<T>>;
-    uniqueItemKey: (arg0: T) => ID;
+    columnDefs: ReactableColumnDef<T>[];
+    uniqueItemKey: (item: T) => ID;
     paginationSettings: PaginationSettings;
     onSort: (property: string, direction: SortDirection) => void;
     onFilter?: (filterSettings: ReactableFilterSettings) => void;
-    pageable: Pageable<T> | null | undefined;
+    pageable?: Pageable<T> | null;
     isLoading: boolean;
     rowDef?: ReactableRowDef<T>;
     clickable?: boolean;
     messageWhenEmpty?: string;
     'data-testid'?: string;
 };
-export default class ReactableTable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
-    render(): React.JSX.Element;
-}
+export default function ReactableTable<T, ID extends string | number | undefined | null>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }: Props<T, ID>): React.JSX.Element;
 export {};
 //# sourceMappingURL=ReactableTable.d.ts.map

package/lib/esm/components/reactable/helpers/ReactableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAEtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAClC,CAAC,GAAG,GAAG,EACP,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAClD,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,MAAM;CA+DN"}
+{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBA+Gd"}

package/lib/esm/components/reactable/helpers/ReactableTable.js

@@ -1,33 +1,63 @@
-import * as React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { Trans } from '../../../i18n';
 import cx from 'classnames';
-import { SpinnerContainer } from '@deviceinsight/ng-ui-basic-components';
+import { Button, Modal, SpinnerContainer } from '@deviceinsight/ng-ui-basic-components';
 import ReactableTableRow from './ReactableTableRow';
 import ReactableTableHeader from './ReactableTableHeader';
 import ReactableTableFilterRow from './ReactableTableFilterRow';
-export default class ReactableTable extends React.Component {
-    render() {
-        const { columnDefs, rowDef, uniqueItemKey, paginationSettings, pageable, onSort, onFilter, isLoading, clickable, messageWhenEmpty } = this.props;
-        const showFilterRow = columnDefs.some((columnDef) => !!columnDef.filterable);
-        return (React.createElement(SpinnerContainer, { show: isLoading },
-            React.createElement("div", { className: "di reactable scroll-x" },
-                React.createElement("table", { className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": this.props['data-testid'] },
-                    React.createElement("thead", null,
-                        React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
-                    React.createElement("tbody", null,
-                        onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
-                        pageable &&
-                            pageable.content.length > 0 &&
-                            pageable.content.map((item, index) => {
-                                if (paginationSettings.size > index) {
-                                    return (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef }));
-                                }
-                                else {
-                                    return null;
-                                }
-                            }),
-                        (!pageable || !pageable.content.length) && !isLoading && (React.createElement("tr", null,
+import { readAccountObject, writeAccountObject } from '@deviceinsight/ng-ui-api-client';
+export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }) {
+    const containerRef = useRef(null);
+    const tableRef = useRef(null);
+    const [showScrollingAdvice, setShowScrollingAdvice] = useState(false);
+    const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(false);
+    const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
+    const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
+    useEffect(() => {
+        neverShowScrollingAdviceRef.current = neverShowScrollingAdvice;
+    }, [neverShowScrollingAdvice]);
+    const updateScrollingAdvice = () => {
+        if (containerRef.current && tableRef.current) {
+            setShowScrollingAdvice(!neverShowScrollingAdviceRef.current && tableRef.current.scrollWidth > containerRef.current.offsetWidth);
+        }
+    };
+    useEffect(() => {
+        readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
+            setNeverShowScrollingAdvice(value === undefined ? false : value);
+            if (containerRef.current && tableRef.current) {
+                updateScrollingAdvice();
+            }
+        });
+    }, []);
+    useEffect(() => {
+        updateScrollingAdvice();
+        window.addEventListener('resize', updateScrollingAdvice);
+        return () => window.removeEventListener('resize', updateScrollingAdvice);
+    }, [pageable, columnDefs]);
+    const showFilterRow = columnDefs.some((col) => col.filterable);
+    return (React.createElement(SpinnerContainer, { show: isLoading },
+        React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
+            showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
+                    React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
+                    React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
+                        React.createElement(Button, { primary: true, onClick: async () => {
+                                await writeAccountObject(HIDE_SCROLLING_ADVICE_PATH, true);
+                                setNeverShowScrollingAdvice(true);
+                                setShowScrollingAdvice(false);
+                            } },
+                            React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain" }, "Never show again")),
+                        React.createElement(Button, { onClick: () => setShowScrollingAdvice(false) },
+                            React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.ok" }, "OK")))), width: '40%' })),
+            React.createElement("table", { ref: tableRef, className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": testId },
+                React.createElement("thead", null,
+                    React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
+                React.createElement("tbody", null,
+                    onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
+                    pageable?.content.length
+                        ? pageable.content
+                            .slice(0, paginationSettings.size)
+                            .map((item) => (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef })))
+                        : !isLoading && (React.createElement("tr", null,
                             React.createElement("td", { colSpan: columnDefs.length },
                                 React.createElement(Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
-    }
 }

package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts

@@ -1,21 +1,19 @@
-import * as React from 'react';
+import React from 'react';
 import { ReactableColumnDef, ReactableRowDef, ReactableFilterSettings } from '../types';
 import { Pageable, PaginationSettings, SortDirection } from '../../../types/pagination';
 declare type Props<T, ID extends string | number | undefined | null> = {
-    columnDefs: Array<ReactableColumnDef<T>>;
-    uniqueItemKey: (arg0: T) => ID;
+    columnDefs: ReactableColumnDef<T>[];
+    uniqueItemKey: (item: T) => ID;
     paginationSettings: PaginationSettings;
     onSort: (property: string, direction: SortDirection) => void;
     onFilter?: (filterSettings: ReactableFilterSettings) => void;
-    pageable: Pageable<T> | null | undefined;
+    pageable?: Pageable<T> | null;
     isLoading: boolean;
     rowDef?: ReactableRowDef<T>;
     clickable?: boolean;
     messageWhenEmpty?: string;
     'data-testid'?: string;
 };
-export default class ReactableTable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
-    render(): React.JSX.Element;
-}
+export default function ReactableTable<T, ID extends string | number | undefined | null>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }: Props<T, ID>): React.JSX.Element;
 export {};
 //# sourceMappingURL=ReactableTable.d.ts.map

package/lib/esm/src/components/reactable/helpers/ReactableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAEtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAClC,CAAC,GAAG,GAAG,EACP,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAClD,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,MAAM;CA+DN"}
+{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBA+Gd"}

package/lib/esm/src/components/reactable/helpers/ReactableTable.js

@@ -1,33 +1,63 @@
-import * as React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { Trans } from '../../../i18n';
 import cx from 'classnames';
-import { SpinnerContainer } from '@deviceinsight/ng-ui-basic-components';
+import { Button, Modal, SpinnerContainer } from '@deviceinsight/ng-ui-basic-components';
 import ReactableTableRow from './ReactableTableRow';
 import ReactableTableHeader from './ReactableTableHeader';
 import ReactableTableFilterRow from './ReactableTableFilterRow';
-export default class ReactableTable extends React.Component {
-    render() {
-        const { columnDefs, rowDef, uniqueItemKey, paginationSettings, pageable, onSort, onFilter, isLoading, clickable, messageWhenEmpty } = this.props;
-        const showFilterRow = columnDefs.some((columnDef) => !!columnDef.filterable);
-        return (React.createElement(SpinnerContainer, { show: isLoading },
-            React.createElement("div", { className: "di reactable scroll-x" },
-                React.createElement("table", { className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": this.props['data-testid'] },
-                    React.createElement("thead", null,
-                        React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
-                    React.createElement("tbody", null,
-                        onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
-                        pageable &&
-                            pageable.content.length > 0 &&
-                            pageable.content.map((item, index) => {
-                                if (paginationSettings.size > index) {
-                                    return (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef }));
-                                }
-                                else {
-                                    return null;
-                                }
-                            }),
-                        (!pageable || !pageable.content.length) && !isLoading && (React.createElement("tr", null,
+import { readAccountObject, writeAccountObject } from '@deviceinsight/ng-ui-api-client';
+export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }) {
+    const containerRef = useRef(null);
+    const tableRef = useRef(null);
+    const [showScrollingAdvice, setShowScrollingAdvice] = useState(false);
+    const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(false);
+    const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
+    const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
+    useEffect(() => {
+        neverShowScrollingAdviceRef.current = neverShowScrollingAdvice;
+    }, [neverShowScrollingAdvice]);
+    const updateScrollingAdvice = () => {
+        if (containerRef.current && tableRef.current) {
+            setShowScrollingAdvice(!neverShowScrollingAdviceRef.current && tableRef.current.scrollWidth > containerRef.current.offsetWidth);
+        }
+    };
+    useEffect(() => {
+        readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
+            setNeverShowScrollingAdvice(value === undefined ? false : value);
+            if (containerRef.current && tableRef.current) {
+                updateScrollingAdvice();
+            }
+        });
+    }, []);
+    useEffect(() => {
+        updateScrollingAdvice();
+        window.addEventListener('resize', updateScrollingAdvice);
+        return () => window.removeEventListener('resize', updateScrollingAdvice);
+    }, [pageable, columnDefs]);
+    const showFilterRow = columnDefs.some((col) => col.filterable);
+    return (React.createElement(SpinnerContainer, { show: isLoading },
+        React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
+            showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
+                    React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
+                    React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
+                        React.createElement(Button, { primary: true, onClick: async () => {
+                                await writeAccountObject(HIDE_SCROLLING_ADVICE_PATH, true);
+                                setNeverShowScrollingAdvice(true);
+                                setShowScrollingAdvice(false);
+                            } },
+                            React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain" }, "Never show again")),
+                        React.createElement(Button, { onClick: () => setShowScrollingAdvice(false) },
+                            React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.ok" }, "OK")))), width: '40%' })),
+            React.createElement("table", { ref: tableRef, className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": testId },
+                React.createElement("thead", null,
+                    React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
+                React.createElement("tbody", null,
+                    onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
+                    pageable?.content.length
+                        ? pageable.content
+                            .slice(0, paginationSettings.size)
+                            .map((item) => (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef })))
+                        : !isLoading && (React.createElement("tr", null,
                             React.createElement("td", { colSpan: columnDefs.length },
                                 React.createElement(Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
-    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@deviceinsight/ng-ui-components",
-	"version": "6.19.0",
+	"version": "6.21.0",
 	"private": false,
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {