funuicss 3.3.6 → 3.3.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.3.6",
+  "version": "3.3.8",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/table/Table.d.ts

@@ -17,6 +17,7 @@ type TableProps = {
         "titles": string[];
         "funcss": string[];
     };
+    filterOnchange?: (filter?: any, value?: any, totals?: number) => {};
     head?: React.ReactNode;
     right?: React.ReactNode;
     body?: React.ReactNode;
@@ -36,5 +37,5 @@ type TableProps = {
 };
 export default function Table({ children, funcss, bordered, noStripped, hoverable, title, showTotal, light, dark, head, body, data, isLoading, right, hideExport, height, pageSize, // Default page size,
 customColumns, filterableFields, // New prop
-emptyResponse, ...rest }: TableProps): React.JSX.Element;
+emptyResponse, filterOnchange, ...rest }: TableProps): React.JSX.Element;
 export {};

package/ui/table/Table.js

@@ -88,7 +88,7 @@ function Table(_a) {
     var _b, _c;
     var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, title = _a.title, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, right = _a.right, hideExport = _a.hideExport, height = _a.height, _e = _a.pageSize, pageSize = _e === void 0 ? data ? 10 : 0 : _e, // Default page size,
     customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
-    emptyResponse = _a.emptyResponse, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse"]);
+    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange"]);
     // Check if data is null or undefined before accessing its properties
     // Replace this in your component
     var _f = (0, react_1.useState)(''), search = _f[0], setSearch = _f[1];
@@ -167,6 +167,11 @@ function Table(_a) {
     var uniqueValues = selectedField
         ? Array.from(new Set(dataArray.map(function (item) { return getNestedValue(item, selectedField); })))
         : [];
+    React.useEffect(function () {
+        if (filterOnchange) {
+            filterOnchange(selectedField, selectedValue, filteredData.length);
+        }
+    }, [selectedField, selectedValue]);
     return (React.createElement("div", { className: "".concat(funcss ? funcss : '', " roundEdge") },
         data &&
             React.createElement("div", { className: "padding bb" },
@@ -189,14 +194,14 @@ function Table(_a) {
                         React.createElement("div", { className: "col width-200-max" },
                             React.createElement(RowFlex_1.default, { gap: 0.7 },
                                 !selectedField &&
-                                    React.createElement(Select_1.default, { value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
+                                    React.createElement(Select_1.default, { searchable: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
                                             { text: '🔍 Filter', value: '' },
                                             { text: 'All*', value: '' }
                                         ], (filterableFields || []).map(function (field) { return ({
                                             text: field,
                                             value: field
                                         }); }), true) }),
-                                selectedField && (React.createElement(Select_1.default, { funcss: "width-200-max", value: selectedValue || '', onChange: function (e) {
+                                selectedField && (React.createElement(Select_1.default, { searchable: true, funcss: "width-200-max", value: selectedValue || '', onChange: function (e) {
                                         if (e === 'clear_all') {
                                             setSelectedField('');
                                         }
@@ -243,7 +248,7 @@ function Table(_a) {
                 isLoading &&
                     [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function () { return (React.createElement(Row_1.default, { funcss: 'skeleton' })); }),
                 children ? children : ''),
-            (filteredData.length === 0 && !isLoading) &&
+            (filteredData.length === 0 && !isLoading && !children) &&
                 React.createElement(ScrollInView_1.default, null,
                     React.createElement(View_1.default, { funcss: 'max-w-400 p-4 text-center center' },
                         React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.icon) || React.createElement(pi_1.PiEmpty, { size: 30, className: 'text-error' })),