@deviceinsight/ng-ui-components 6.22.0 → 6.24.0

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

@@ -7,6 +7,7 @@ declare type Props<T, ID extends string | number | undefined | null> = {
     paginationSettings: PaginationSettings;
     onSort: (property: string, direction: SortDirection) => void;
     onFilter?: (filterSettings: ReactableFilterSettings) => void;
+    tableName?: string;
     pageable?: Pageable<T> | null;
     isLoading: boolean;
     rowDef?: ReactableRowDef<T>;
@@ -14,6 +15,6 @@ declare type Props<T, ID extends string | number | undefined | null> = {
     messageWhenEmpty?: string;
     'data-testid'?: string;
 };
-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 default function ReactableTable<T, ID extends string | number | undefined | null>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, tableName, 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,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,qBAkHd"}
+{"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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAmId"}

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

@@ -6,11 +6,12 @@ import ReactableTableRow from './ReactableTableRow';
 import ReactableTableHeader from './ReactableTableHeader';
 import ReactableTableFilterRow from './ReactableTableFilterRow';
 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 }) {
+export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, tableName, 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 [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(true);
+    const [hasInitialized, setHasInitialized] = useState(false);
     const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
     const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
     useEffect(() => {
@@ -22,14 +23,25 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
         }
     };
     useEffect(() => {
-        readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
-            const neverShow = value === undefined ? false : value;
-            setNeverShowScrollingAdvice(neverShow);
-            neverShowScrollingAdviceRef.current = neverShow;
-            if (containerRef.current && tableRef.current) {
-                updateScrollingAdvice();
-            }
-        });
+        setTimeout(() => {
+            (async () => {
+                try {
+                    const value = await readAccountObject(HIDE_SCROLLING_ADVICE_PATH);
+                    const neverShow = value === true;
+                    setNeverShowScrollingAdvice(neverShow);
+                    neverShowScrollingAdviceRef.current = neverShow;
+                    if (!neverShow) {
+                        updateScrollingAdvice();
+                    }
+                }
+                catch (error) {
+                    setNeverShowScrollingAdvice(false);
+                    neverShowScrollingAdviceRef.current = false;
+                    updateScrollingAdvice();
+                }
+                setHasInitialized(true);
+            })();
+        }, 0);
     }, []);
     useEffect(() => {
         updateScrollingAdvice();
@@ -39,7 +51,7 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
     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,
+            hasInitialized && 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 () => {
@@ -53,13 +65,13 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
                             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(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort, tableName: tableName })),
                 React.createElement("tbody", null,
-                    onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
+                    onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter, tableName: tableName })),
                     pageable?.content.length
                         ? pageable.content
                             .slice(0, paginationSettings.size)
-                            .map((item) => (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef })))
+                            .map((item) => (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef, tableName: tableName })))
                         : !isLoading && (React.createElement("tr", null,
                             React.createElement("td", { colSpan: columnDefs.length },
                                 React.createElement(Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));

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

@@ -3,6 +3,7 @@ import { ReactableColumnDef, ReactableFilterSettings } from '../types';
 declare type Props = {
     columnDefs: Array<ReactableColumnDef<any>>;
     onFilter: (filterColumns: ReactableFilterSettings) => void;
+    tableName?: string;
 };
 declare const ReactableTableFilterRow: React.FC<Props>;
 export default ReactableTableFilterRow;

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

@@ -1 +1 @@
-{"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAGrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuF5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuF5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from '../../../i18n';
 import ReactableTextFilter from './ReactableTextFilter';
-const ReactableTableFilterRow = ({ columnDefs, onFilter }) => {
+import { getClassName } from './helper';
+const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
     const { t } = useTranslation();
     const [state, setState] = useState({});
     useEffect(() => {
@@ -46,7 +47,7 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter }) => {
             React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
                 defaultValue: '- All -'
             })),
-            filterOptions.map((option) => (React.createElement("option", { key: option.value, value: option.value }, typeof option.label === 'string'
+            filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
                 ? option.label
                 : t(option.label.id, {
                     defaultValue: option.label.defaultValue

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

@@ -5,10 +5,11 @@ declare type Props = {
     columnDefs: Array<ReactableColumnDef<any>>;
     paginationSettings: PaginationSettings;
     onSort: (property: string, direction: SortDirection) => void;
+    tableName?: string;
 };
 export default class ReactableTableHeader extends React.Component<Props> {
     handleSort: (columnDef: ReactableColumnDef<unknown>) => void;
-    getClassName: (columnDef: ReactableColumnDef<any>) => "" | "sortable sortAsc" | "sortable sortDes" | "sortable";
+    getClassName: (columnDef: ReactableColumnDef<any>) => string;
     printLabel: (label: ReactableColumnLabel) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | import("../../../types/i18n").TranslationDescriptor | null | undefined;
     render(): React.JSX.Element;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ReactableTableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,MAAM,UAAU,CAAC;AAClE,OAAO,EAAC,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAI5E,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvE,UAAU,EAAE,CAAC,SAAS,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAO1D;IAEF,YAAY,cAAe,mBAAmB,GAAG,CAAC,+DAgBhD;IAEF,UAAU,UAAW,oBAAoB,wJAQvC;IAEF,MAAM;CAuBN"}
+{"version":3,"file":"ReactableTableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,MAAM,UAAU,CAAC;AAClE,OAAO,EAAC,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAK5E,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvE,UAAU,EAAE,CAAC,SAAS,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAO1D;IAEF,YAAY,cAAe,mBAAmB,GAAG,CAAC,YAiBhD;IAEF,UAAU,UAAW,oBAAoB,wJAQvC;IAEF,MAAM;CAuBN"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Trans } from '../../../i18n';
+import { getClassName } from './helper';
 const toggleSortDirection = (direction) => (direction === 'ASC' ? 'DESC' : 'ASC');
 export default class ReactableTableHeader extends React.Component {
     constructor() {
@@ -12,22 +13,23 @@ export default class ReactableTableHeader extends React.Component {
             onSort(columnDef.name, direction);
         };
         this.getClassName = (columnDef) => {
-            const { paginationSettings } = this.props;
+            const { paginationSettings, tableName } = this.props;
+            const className = getClassName(tableName, columnDef.name);
             if (columnDef.sortable) {
                 if (columnDef.name === paginationSettings.sort.property) {
                     if (paginationSettings.sort.direction === 'ASC') {
-                        return 'sortable sortAsc';
+                        return `${className} sortable sortAsc`;
                     }
                     else {
-                        return 'sortable sortDes';
+                        return `${className} sortable sortDes`;
                     }
                 }
                 else {
-                    return 'sortable';
+                    return `${className} sortable`;
                 }
             }
             else {
-                return '';
+                return `${className}`;
             }
         };
         this.printLabel = (label) => {

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

@@ -4,6 +4,7 @@ declare type Props<T> = {
     columnDefs: Array<ReactableColumnDef<T>>;
     item: T;
     rowDef: ReactableRowDef<T> | null | undefined;
+    tableName?: string;
 };
 export default class ReactableTableRow extends React.Component<Props<any>> {
     getRowClass: () => string;

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

@@ -1 +1 @@
-{"version":3,"file":"ReactableTableRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAC,MAAM,UAAU,CAAC;AAE7D,aAAK,KAAK,CAAC,CAAC,IAAI;IACf,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAC9C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzE,WAAW,eAQT;IAEF,WAAW,aAMT;IAEF,UAAU,eAQR;IAEF,WAAW,wCAQT;IAEF,MAAM;CAkCN"}
+{"version":3,"file":"ReactableTableRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAC,MAAM,UAAU,CAAC;AAG7D,aAAK,KAAK,CAAC,CAAC,IAAI;IACf,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,IAAI,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzE,WAAW,eAQT;IAEF,WAAW,aAMT;IAEF,UAAU,eAQR;IAEF,WAAW,wCAQT;IAEF,MAAM;CAmCN"}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { getClassName } from './helper';
 export default class ReactableTableRow extends React.Component {
     constructor() {
         super(...arguments);
@@ -37,7 +38,7 @@ export default class ReactableTableRow extends React.Component {
         };
     }
     render() {
-        const { columnDefs, item } = this.props;
+        const { columnDefs, item, tableName } = this.props;
         return (React.createElement("tr", { className: this.getRowClass(), onClick: this.handleClick, title: this.getTooltip(), style: this.getRowStyle() }, columnDefs.map((columnDef) => {
             const textAlign = columnDef.align || 'left';
             const cursor = columnDef.onClick ? 'pointer' : 'inherit';
@@ -50,7 +51,7 @@ export default class ReactableTableRow extends React.Component {
                     cursor,
                     // @ts-ignore
                     whiteSpace
-                }, onClick: onClick }, columnDef.render(item)));
+                }, onClick: onClick, className: getClassName(tableName, columnDef.name) }, columnDef.render(item)));
         })));
     }
 }

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

@@ -4,4 +4,5 @@ export declare function makePageable<T>(items: Array<T> | null | undefined, colu
 export declare function filterItems<T>(items: Array<T> | null | undefined, columnDefs: Array<ReactableColumnDef<any>>, filterSettings: ReactableFilterSettings): Array<T> | null | undefined;
 export declare function sortItems<T>(items: Array<T>, sort: Sort): Array<T>;
 export declare function extendColumnDefsWithCheckboxes<T>(columnDefs: Array<ReactableColumnDef<T>>, onSelectChange: (selected: boolean, item: T) => void, onSelectAllChange: (selected: boolean) => void, selectedAll: boolean, selectedItems: Array<any>, uniqueItemKey: (arg0: T) => any): Array<ReactableColumnDef<T>>;
+export declare function getClassName(tableName: string | undefined, columnName: string): string;
 //# sourceMappingURL=helper.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/helper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAC,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAErE,wBAAgB,YAAY,CAAC,CAAC,EAC7B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EAClC,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAC1C,cAAc,EAAE,uBAAuB,EACvC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EACf,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,GACxG,IAAI,GACJ,SAAS,GACV,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAehC;AAWD,wBAAgB,WAAW,CAAC,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EAClC,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAC1C,cAAc,EAAE,uBAAuB,GACrC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAyB7B;AAYD,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAkBlE;AAED,wBAAgB,8BAA8B,CAAC,CAAC,EAC/C,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EACxC,cAAc,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,EACpD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,EAC9C,WAAW,EAAE,OAAO,EACpB,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,EACzB,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,GAC7B,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CA2B9B"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/helper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,kBAAkB,EAAC,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAErE,wBAAgB,YAAY,CAAC,CAAC,EAC7B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EAClC,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAC1C,cAAc,EAAE,uBAAuB,EACvC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EACf,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,GACxG,IAAI,GACJ,SAAS,GACV,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAehC;AAWD,wBAAgB,WAAW,CAAC,CAAC,EAC5B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EAClC,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAC1C,cAAc,EAAE,uBAAuB,GACrC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAyB7B;AAYD,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAkBlE;AAED,wBAAgB,8BAA8B,CAAC,CAAC,EAC/C,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,EACxC,cAAc,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,EACpD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,EAC9C,WAAW,EAAE,OAAO,EACpB,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,EACzB,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,GAC7B,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CA2B9B;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAEtF"}

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

@@ -88,3 +88,6 @@ export function extendColumnDefsWithCheckboxes(columnDefs, onSelectChange, onSel
         ...columnDefs
     ];
 }
+export function getClassName(tableName, columnName) {
+    return `${tableName || 'unnamedTable'}-${columnName}`;
+}

package/lib/esm/components/reactableWithClientSidePagination/ReactableWithClientSidePagination.d.ts

@@ -29,6 +29,8 @@ export declare type Props<T, ID extends string | number | undefined | null = any
     onContentChange?: (content: Array<T>) => void;
     /** (Optional) Function, executed if filtered items change */
     onFilteredItemsChanged?: (filteredItems: Array<T>) => void;
+    /** (Optional) name of the table */
+    tableName?: string;
     /** (Optional) if true, makes rows clickable */
     clickable?: boolean;
     /** If equals *true* additional column with checkboxes is rendered */

package/lib/esm/components/reactableWithClientSidePagination/ReactableWithClientSidePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactableWithClientSidePagination.d.ts","sourceRoot":"","sources":["../../../../src/components/reactableWithClientSidePagination/ReactableWithClientSidePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,IAAI,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEzF,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,oBAAoB,CAAC;AAGhG,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,kBAAkB,CAAC;IAE/C,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IAGxC,wBAAwB;IACxB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,CACpB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EACf,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KACvD,KAAK,CAAC,CAAC,CAAC,CAAC;IAEd,4EAA4E;IAC5E,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAE5C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,sDAAsD;IACtD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE9C,6DAA6D;IAC7D,sBAAsB,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE3D,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAE1B,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IAE3D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,aAAK,KAAK,CAAC,CAAC,IAAI;IACf,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,cAAc,EAAE,uBAAuB,CAAC;IACxC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CAC3C,CAAC;AAWF;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,iCAAiC,CACrD,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,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;gBACpC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAoB3B,OAAO,CAAC,OAAO,CAAgB;IAE/B,mBAAmB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,kBAAkB,KAAK,IAAI,CAiBpF;IAEF,kBAAkB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAoBtC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAItC;IAEF,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAU9D;IAEF,YAAY,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAgB7D;IAEF,WAAW,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAqB/C;IAEF,kBAAkB,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,KAAK,IAAI,CAatD;IAEF,qBAAqB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAcnD;IAEF,cAAc,EAAE,MAAM,OAAO,CAO3B;IAEF,MAAM;CA8BN"}
+{"version":3,"file":"ReactableWithClientSidePagination.d.ts","sourceRoot":"","sources":["../../../../src/components/reactableWithClientSidePagination/ReactableWithClientSidePagination.tsx"],"names":[],"mappings":"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"}

package/lib/esm/components/reactableWithClientSidePagination/ReactableWithClientSidePagination.js

@@ -146,10 +146,10 @@ export default class ReactableWithClientSidePagination extends React.Component {
         }
     }
     render() {
-        const { uniqueItemKey, isLoading, columnDefs, rowDef, clickable, selectable, selectedItems, onChangeSize } = this.props;
+        const { uniqueItemKey, isLoading, columnDefs, rowDef, tableName, clickable, selectable, selectedItems, onChangeSize } = this.props;
         const finalColumnDefs = selectable
             ? extendColumnDefsWithCheckboxes(columnDefs, this.handleSelectChange, this.handleSelectAllChange, this.areSelectedAll(), selectedItems || [], uniqueItemKey)
             : columnDefs;
-        return (React.createElement(Reactable, { columnDefs: finalColumnDefs, rowDef: rowDef, uniqueItemKey: uniqueItemKey, paginationSettings: this.state.paginationSettings, onChangePage: this.handleChangePage, onChangeSize: onChangeSize, onSort: this.handleSort, onFilter: this.handleFilter, pageable: this.getPageable(), isLoading: isLoading, clickable: clickable, "data-testid": this.props['data-testid'] }));
+        return (React.createElement(Reactable, { columnDefs: finalColumnDefs, rowDef: rowDef, uniqueItemKey: uniqueItemKey, paginationSettings: this.state.paginationSettings, onChangePage: this.handleChangePage, onChangeSize: onChangeSize, onSort: this.handleSort, onFilter: this.handleFilter, tableName: tableName, pageable: this.getPageable(), isLoading: isLoading, clickable: clickable, "data-testid": this.props['data-testid'] }));
     }
 }

package/lib/esm/components/reactableWithClientSidePagination/__tests__/ReactableWithClientSidePagination.spec.js

@@ -40,7 +40,7 @@ describe('ReactableWithClientSidePagination.js', () => {
         it('should match snapshot', () => {
             const ReactableWithClientSidePaginationWrapper = render(
             // @ts-ignore
-            React.createElement(ReactableWithClientSidePagination, { ...COMMON_PROPS, selectedItems: [], onSelectedItemsChange: () => { } }));
+            React.createElement(ReactableWithClientSidePagination, { ...COMMON_PROPS, selectedItems: [], onSelectedItemsChange: () => { }, tableName: 'test' }));
             expect(ReactableWithClientSidePaginationWrapper).toMatchSnapshot();
         });
         it('should call the callback with correct argument when checkbox is checked', async () => {

package/lib/esm/src/components/input/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAwDP"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}

package/lib/esm/src/components/input/DateTimeInput.js

@@ -1,7 +1,9 @@
+import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { dayjsTz } from '../periodpicker/periods';
 import DateInput from './DateInput';
 import ValidatedTextInput from './ValidatedTextInput';
+import { toInteger } from 'lodash';
 const extractTime = (timezone, date) => {
     try {
         return dayjsTz(timezone, date).format('HH:mm');
@@ -11,6 +13,15 @@ const extractTime = (timezone, date) => {
         return '00:00';
     }
 };
+const extractDate = (timezone, date) => {
+    try {
+        return dayjs(dayjsTz(timezone, date).format('YYYY-MM-DD'));
+    }
+    catch (error) {
+        console.error('DateTimeInput: Error while extracting time from date', error);
+        return dayjs(new Date());
+    }
+};
 /**
  * Extends DateInput but also displaying the current time.
  * Usually the user's locale is used for displaying the correct date format.
@@ -23,17 +34,36 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
     }, [timezone, timestamp]);
     function handleChangeDate(date, fromTextField) {
         const oldDate = dayjsTz(timezone, timestamp);
-        onChange(dayjsTz(timezone, date).set('hour', oldDate.get('hour')).set('minute', oldDate.get('minute')).valueOf(), fromTextField);
+        const dateFix = dayjs(date);
+        let newDate = dayjsTz(timezone, date)
+            .set('day', dateFix.day())
+            .set('month', dateFix.month())
+            .set('year', dateFix.year())
+            .set('hour', toInteger(oldDate.hour()))
+            .set('minute', toInteger(oldDate.minute()));
+        const dstOffset = getLocalDstOffset(newDate);
+        newDate = newDate.subtract(dstOffset, 'minutes');
+        onChange(newDate.valueOf(), fromTextField);
+    }
+    function getMaxUtcOffset(year) {
+        const jan = new Date(`${year}-01-01`).getTimezoneOffset();
+        const jul = new Date(`${year}-07-01`).getTimezoneOffset();
+        return Math.min(jan, jul);
+    }
+    function getLocalDstOffset(newDate) {
+        return newDate.toDate().getTimezoneOffset() - getMaxUtcOffset(newDate.year());
     }
     function handleChangeTime(time, valid) {
         if (valid) {
             const [hours, minutes] = time.split(':');
-            onChange(dayjsTz(timezone, timestamp)
+            const date = extractDate(timezone, timestamp);
+            const dateTime = dayjsTz(timezone, timestamp)
+                .set('date', date.date())
                 .set('hour', parseInt(hours, 10))
                 .set('minute', parseInt(minutes, 10))
                 .set('second', 0)
-                .set('millisecond', 0)
-                .valueOf());
+                .set('millisecond', 0);
+            onChange(dateTime.valueOf());
         }
         setTime(time);
     }
@@ -43,7 +73,7 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
         }
     }
     return (React.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
-        React.createElement(DateInput, { ...otherProps, value: timestamp, onChange: handleChangeDate, readOnly: readOnly }),
+        React.createElement(DateInput, { ...otherProps, value: extractDate(timezone, timestamp).valueOf(), onChange: handleChangeDate, readOnly: readOnly }),
         React.createElement(ValidatedTextInput, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
                 borderColor: 'red'
             }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));

package/lib/esm/src/components/input/__tests__/DateTimeInput.spec.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 import DateTimeInput from '../DateTimeInput';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+import { userEvent } from '@storybook/testing-library';
 describe('DateTimeInput.js', () => {
     it('should update time when timestamp has changed', () => {
         const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
@@ -10,4 +11,24 @@ describe('DateTimeInput.js', () => {
         rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
         expect(timeElement).toHaveDisplayValue('03:24');
     });
+    it('should display the time and date as timezone date', async () => {
+        const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
+        const timeElementUtm = screen.queryByDisplayValue('11:11');
+        expect(timeElementUtm).not.toBeInTheDocument();
+        const timeElement = screen.queryByDisplayValue('03:11');
+        expect(timeElement).toBeInTheDocument();
+        const dateElement = screen.queryByDisplayValue('01.02.2019');
+        expect(dateElement).toBeInTheDocument();
+        rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
+        expect(timeElement).toHaveDisplayValue('19:24');
+        expect(dateElement).toHaveDisplayValue('01.02.2019');
+        await act(async () => {
+            dateElement?.click();
+            timeElement?.click();
+            userEvent.clear(timeElement);
+            userEvent.type(timeElement, '10:24');
+        });
+        expect(timeElement).toHaveDisplayValue('10:24');
+        expect(dateElement).toHaveDisplayValue('01.02.2019');
+    });
 });

package/lib/esm/src/components/reactable/Reactable.d.ts

@@ -16,6 +16,8 @@ export declare type Props<T, ID extends string | number | undefined | null = any
     onChangeSize?: (size: number) => void;
     /** (Optional) function, executed if the Reactable gets filtered */
     onFilter?: (filterSettings: ReactableFilterSettings) => void;
+    /** (Optional) name of the table */
+    tableName?: string;
     /** Content, totalElements, totalPages, number, size, sort */
     pageable: Pageable<T> | null | undefined;
     /** (Optional) can set custom event handler and/or functions in general */

package/lib/esm/src/components/reactable/Reactable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,MAAM;CAoBN"}
+{"version":3,"file":"Reactable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/Reactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,SAAS,CAAC;AACrF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAEnF,oBAAY,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,IAAI;IAC3E,+EAA+E;IAC/E,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IAEzC,8DAA8D;IAC9D,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAE/B,qCAAqC;IACrC,kBAAkB,EAAE,kBAAkB,CAAC;IAEvC,qDAAqD;IACrD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,4CAA4C;IAC5C,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAE7D,6DAA6D;IAC7D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE7D,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAEzC,0EAA0E;IAC1E,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAE5B,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAAE,SAAQ,KAAK,CAAC,SAAS,CACnH,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CACZ;IACA,MAAM;CAoBN"}

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

@@ -7,6 +7,7 @@ declare type Props<T, ID extends string | number | undefined | null> = {
     paginationSettings: PaginationSettings;
     onSort: (property: string, direction: SortDirection) => void;
     onFilter?: (filterSettings: ReactableFilterSettings) => void;
+    tableName?: string;
     pageable?: Pageable<T> | null;
     isLoading: boolean;
     rowDef?: ReactableRowDef<T>;
@@ -14,6 +15,6 @@ declare type Props<T, ID extends string | number | undefined | null> = {
     messageWhenEmpty?: string;
     'data-testid'?: string;
 };
-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 default function ReactableTable<T, ID extends string | number | undefined | null>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, tableName, 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,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,qBAkHd"}
+{"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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAmId"}

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

@@ -6,11 +6,12 @@ import ReactableTableRow from './ReactableTableRow';
 import ReactableTableHeader from './ReactableTableHeader';
 import ReactableTableFilterRow from './ReactableTableFilterRow';
 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 }) {
+export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, tableName, 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 [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(true);
+    const [hasInitialized, setHasInitialized] = useState(false);
     const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
     const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
     useEffect(() => {
@@ -22,14 +23,25 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
         }
     };
     useEffect(() => {
-        readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
-            const neverShow = value === undefined ? false : value;
-            setNeverShowScrollingAdvice(neverShow);
-            neverShowScrollingAdviceRef.current = neverShow;
-            if (containerRef.current && tableRef.current) {
-                updateScrollingAdvice();
-            }
-        });
+        setTimeout(() => {
+            (async () => {
+                try {
+                    const value = await readAccountObject(HIDE_SCROLLING_ADVICE_PATH);
+                    const neverShow = value === true;
+                    setNeverShowScrollingAdvice(neverShow);
+                    neverShowScrollingAdviceRef.current = neverShow;
+                    if (!neverShow) {
+                        updateScrollingAdvice();
+                    }
+                }
+                catch (error) {
+                    setNeverShowScrollingAdvice(false);
+                    neverShowScrollingAdviceRef.current = false;
+                    updateScrollingAdvice();
+                }
+                setHasInitialized(true);
+            })();
+        }, 0);
     }, []);
     useEffect(() => {
         updateScrollingAdvice();
@@ -39,7 +51,7 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
     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,
+            hasInitialized && 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 () => {
@@ -53,13 +65,13 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
                             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(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort, tableName: tableName })),
                 React.createElement("tbody", null,
-                    onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
+                    onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter, tableName: tableName })),
                     pageable?.content.length
                         ? pageable.content
                             .slice(0, paginationSettings.size)
-                            .map((item) => (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef })))
+                            .map((item) => (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef, tableName: tableName })))
                         : !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/ReactableTableFilterRow.d.ts

@@ -3,6 +3,7 @@ import { ReactableColumnDef, ReactableFilterSettings } from '../types';
 declare type Props = {
     columnDefs: Array<ReactableColumnDef<any>>;
     onFilter: (filterColumns: ReactableFilterSettings) => void;
+    tableName?: string;
 };
 declare const ReactableTableFilterRow: React.FC<Props>;
 export default ReactableTableFilterRow;

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

@@ -1 +1 @@
-{"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAGrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuF5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuF5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

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

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from '../../../i18n';
 import ReactableTextFilter from './ReactableTextFilter';
-const ReactableTableFilterRow = ({ columnDefs, onFilter }) => {
+import { getClassName } from './helper';
+const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
     const { t } = useTranslation();
     const [state, setState] = useState({});
     useEffect(() => {
@@ -46,7 +47,7 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter }) => {
             React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
                 defaultValue: '- All -'
             })),
-            filterOptions.map((option) => (React.createElement("option", { key: option.value, value: option.value }, typeof option.label === 'string'
+            filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
                 ? option.label
                 : t(option.label.id, {
                     defaultValue: option.label.defaultValue

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

@@ -5,10 +5,11 @@ declare type Props = {
     columnDefs: Array<ReactableColumnDef<any>>;
     paginationSettings: PaginationSettings;
     onSort: (property: string, direction: SortDirection) => void;
+    tableName?: string;
 };
 export default class ReactableTableHeader extends React.Component<Props> {
     handleSort: (columnDef: ReactableColumnDef<unknown>) => void;
-    getClassName: (columnDef: ReactableColumnDef<any>) => "" | "sortable sortAsc" | "sortable sortDes" | "sortable";
+    getClassName: (columnDef: ReactableColumnDef<any>) => string;
     printLabel: (label: ReactableColumnLabel) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | import("../../../types/i18n").TranslationDescriptor | null | undefined;
     render(): React.JSX.Element;
 }