@rolster/react-components 18.12.7 → 18.12.8

package/dist/cjs/index.js

@@ -1114,6 +1114,17 @@ const reactI18n = i18n.i18n({
     }
 });
 
+function useDatatable() {
+    const [scrolleable, setScrolleable] = react.useState(false);
+    const bodyRef = react.useRef(null);
+    react.useEffect(() => {
+        const scrollHeight = bodyRef?.current?.scrollHeight || 0;
+        const clientHeight = bodyRef?.current?.clientHeight || 0;
+        setScrolleable(scrollHeight > clientHeight);
+    }, [bodyRef]);
+    return { bodyRef, scrolleable };
+}
+
 class ListCollection {
     constructor(value) {
         this.value = value;
@@ -1528,19 +1539,18 @@ function RlsDatatableHeader({ children }) {
     return jsxRuntime.jsx("tr", { className: "rls-datatable__header", children: children });
 }
 function RlsDatatableTitle({ children, className, control }) {
-    return (jsxRuntime.jsx("th", { className: (renderClassStatus('rls-datatable__title', { control }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
 }
 function RlsDatatableData({ children, className, error }) {
-    return (jsxRuntime.jsx("tr", { className: (renderClassStatus('rls-datatable__data', { error }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsxRuntime.jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
 }
 function RlsDatatableCell({ children, className, control, overflow }) {
-    return (jsxRuntime.jsx("th", { className: (renderClassStatus('rls-datatable__cell', { control, overflow }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
 }
-function RlsDatatable({ bodyRef, children, footer, header, rlsTheme }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-datatable", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { ref: bodyRef, className: "rls-datatable__tbody", children: children })] }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+function RlsDatatable({ children, datatable, footer, header, rlsTheme }) {
+    return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-datatable', {
+            scrolleable: datatable?.scrolleable
+        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
 const controlIsValid = (props) => {
@@ -2153,6 +2163,7 @@ exports.RlsToolbar = RlsToolbar;
 exports.RlsYearPicker = RlsYearPicker;
 exports.renderClassStatus = renderClassStatus;
 exports.useConfirmationService = useConfirmationService;
+exports.useDatatable = useDatatable;
 exports.useListControl = useListControl;
 exports.useSnackbarService = useSnackbarService;
 //# sourceMappingURL=index.js.map