@shival99/z-ui 1.2.23 → 1.2.24

package/fesm2022/shival99-z-ui-components-z-table.mjs

@@ -325,7 +325,7 @@ class ZTableFilterComponent {
         this.zColumn().setFilterValue(value || undefined);
     }
     onDateRangeChange(value) {
-        if (value && value.start && value.end) {
+        if (value && (value.start || value.end)) {
             this.zColumn().setFilterValue(value);
             return;
         }
@@ -1029,15 +1029,20 @@ function columnConfigToColumnDef(config) {
         columnDef.cell = bodyContent;
     }
     columnDef.footer = resolveHeaderOrFooter(getFooterContent(config));
-    if (sortConfig?.sortFn) {
+    const isLocalFilterMode = !filterConfig?.mode || filterConfig.mode === 'local';
+    const isLocalSortMode = !sortConfig?.mode || sortConfig.mode === 'local';
+    if (isLocalSortMode && sortConfig?.sortFn) {
         columnDef.sortingFn = sortConfig.sortFn;
     }
-    // Only apply local filter functions when filter mode is 'local' (default)
-    // When mode is 'server', filtering is handled externally via zOnChange events
-    const isLocalFilterMode = !filterConfig?.mode || filterConfig.mode === 'local';
+    if (!isLocalSortMode) {
+        columnDef.sortingFn = () => 0;
+    }
     if (isLocalFilterMode && filterConfig?.filterFn) {
         columnDef.filterFn = filterConfig.filterFn;
     }
+    if (!isLocalFilterMode) {
+        columnDef.filterFn = () => true;
+    }
     if (isLocalFilterMode && !filterConfig?.filterFn && filterConfig?.type) {
         switch (filterConfig.type) {
             case 'select':
@@ -2429,6 +2434,23 @@ class ZTableComponent {
         };
         return columns.some(c => checkFilter(c));
     }, ...(ngDevMode ? [{ debugName: "hasFiltering" }] : []));
+    hasLocalFiltering = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        const checkLocalFilter = (col) => {
+            const filterConfig = typeof col.filter === 'boolean' ? { enabled: col.filter } : col.filter;
+            if (filterConfig?.enabled) {
+                const filterMode = filterConfig.mode ?? 'local';
+                if (filterMode === 'local') {
+                    return true;
+                }
+            }
+            if (col.columns?.length) {
+                return col.columns.some(c => checkLocalFilter(c));
+            }
+            return false;
+        };
+        return columns.some(c => checkLocalFilter(c));
+    }, ...(ngDevMode ? [{ debugName: "hasLocalFiltering" }] : []));
     hasSorting = computed(() => {
         const config = this.zConfig();
         if (config.enableColumnSorting === false) {
@@ -2450,6 +2472,65 @@ class ZTableComponent {
         };
         return columns.some(c => checkSorting(c));
     }, ...(ngDevMode ? [{ debugName: "hasSorting" }] : []));
+    hasLocalSorting = computed(() => {
+        const config = this.zConfig();
+        if (config.enableColumnSorting === false) {
+            return false;
+        }
+        const columns = config.columns ?? [];
+        const checkLocalSorting = (col) => {
+            const sortConfig = typeof col.sort === 'boolean' ? { enabled: col.sort } : col.sort;
+            if (sortConfig?.enabled) {
+                const sortMode = sortConfig.mode ?? 'local';
+                if (sortMode === 'local') {
+                    return true;
+                }
+            }
+            if (col.columns?.length) {
+                return col.columns.some(c => checkLocalSorting(c));
+            }
+            return false;
+        };
+        return columns.some(c => checkLocalSorting(c));
+    }, ...(ngDevMode ? [{ debugName: "hasLocalSorting" }] : []));
+    hasServerFiltering = computed(() => {
+        const columns = this.zConfig().columns ?? [];
+        const checkServerFilter = (col) => {
+            const filterConfig = typeof col.filter === 'boolean' ? { enabled: col.filter } : col.filter;
+            if (filterConfig?.enabled) {
+                const filterMode = filterConfig.mode ?? 'local';
+                if (filterMode === 'server') {
+                    return true;
+                }
+            }
+            if (col.columns?.length) {
+                return col.columns.some(c => checkServerFilter(c));
+            }
+            return false;
+        };
+        return columns.some(c => checkServerFilter(c));
+    }, ...(ngDevMode ? [{ debugName: "hasServerFiltering" }] : []));
+    hasServerSorting = computed(() => {
+        const config = this.zConfig();
+        if (config.enableColumnSorting === false) {
+            return false;
+        }
+        const columns = config.columns ?? [];
+        const checkServerSorting = (col) => {
+            const sortConfig = typeof col.sort === 'boolean' ? { enabled: col.sort } : col.sort;
+            if (sortConfig?.enabled) {
+                const sortMode = sortConfig.mode ?? 'local';
+                if (sortMode === 'server') {
+                    return true;
+                }
+            }
+            if (col.columns?.length) {
+                return col.columns.some(c => checkServerSorting(c));
+            }
+            return false;
+        };
+        return columns.some(c => checkServerSorting(c));
+    }, ...(ngDevMode ? [{ debugName: "hasServerSorting" }] : []));
     searchConfig = computed(() => {
         const { search } = this.zConfig();
         if (!search) {
@@ -2773,19 +2854,23 @@ class ZTableComponent {
         const isServerMode = config.mode === 'server';
         const pageSize = this.pagination().pageSize || 10;
         const pageCount = isServerMode && config.totalRows ? Math.ceil(config.totalRows / pageSize) : undefined;
+        const hasAnyLocalFiltering = this.hasLocalFiltering();
+        const hasAnyLocalSorting = this.hasLocalSorting();
+        const shouldEnableLocalFiltering = !isServerMode || hasAnyLocalFiltering;
+        const shouldEnableLocalSorting = !isServerMode || hasAnyLocalSorting;
         return {
             data: this._data(),
             columns: this._columns(),
             getCoreRowModel: getCoreRowModel(),
             getExpandedRowModel: this.hasExpandColumn() ? getExpandedRowModel() : undefined,
-            getFilteredRowModel: !isServerMode && this.hasFiltering() ? getFilteredRowModel() : undefined,
-            getSortedRowModel: !isServerMode && this.hasSorting() ? getSortedRowModel() : undefined,
+            getFilteredRowModel: shouldEnableLocalFiltering && this.hasFiltering() ? getFilteredRowModel() : undefined,
+            getSortedRowModel: shouldEnableLocalSorting && this.hasSorting() ? getSortedRowModel() : undefined,
             getPaginationRowModel: !isServerMode && config.enablePagination ? getPaginationRowModel() : undefined,
-            getFacetedRowModel: !isServerMode && this.hasFiltering() ? getFacetedRowModel() : undefined,
-            getFacetedUniqueValues: !isServerMode && this.hasFiltering() ? getFacetedUniqueValues() : undefined,
-            getFacetedMinMaxValues: !isServerMode && this.hasFiltering() ? getFacetedMinMaxValues() : undefined,
-            manualFiltering: isServerMode,
-            manualSorting: isServerMode,
+            getFacetedRowModel: shouldEnableLocalFiltering && this.hasFiltering() ? getFacetedRowModel() : undefined,
+            getFacetedUniqueValues: shouldEnableLocalFiltering && this.hasFiltering() ? getFacetedUniqueValues() : undefined,
+            getFacetedMinMaxValues: shouldEnableLocalFiltering && this.hasFiltering() ? getFacetedMinMaxValues() : undefined,
+            manualFiltering: isServerMode && !hasAnyLocalFiltering,
+            manualSorting: isServerMode && !hasAnyLocalSorting,
             manualPagination: isServerMode,
             pageCount: pageCount,
             columnResizeMode: 'onChange',
@@ -2839,24 +2924,38 @@ class ZTableComponent {
                 this._handleRowSelectionWithParents(newState);
             },
             onColumnFiltersChange: updater => {
-                const newState = typeof updater === 'function' ? updater(this.columnFilters()) : updater;
-                this._runAsyncStateUpdate(() => {
-                    this.columnFilters.set(newState);
-                    if (this.zConfig().mode !== 'server') {
+                const oldState = this.columnFilters();
+                const newState = typeof updater === 'function' ? updater(oldState) : updater;
+                const changedColumnIds = this._getChangedFilterColumnIds(oldState, newState);
+                const hasAnyLocalChange = changedColumnIds.some(id => this._isColumnFilterModeLocal(id));
+                const hasAnyServerChange = changedColumnIds.some(id => !this._isColumnFilterModeLocal(id));
+                const serverModeFilters = this._filterServerModeColumnFilters(newState);
+                this.columnFilters.set(newState);
+                if (hasAnyLocalChange) {
+                    this._runAsyncStateUpdate(() => {
                         this.pagination.update(p => ({ ...p, pageIndex: 1 }));
-                    }
-                    this._emitFilterChangeDebounced(newState, this.globalFilter());
-                });
+                    }, true);
+                }
+                if (hasAnyServerChange) {
+                    this.zChange.emit({
+                        type: 'filter',
+                        data: { filters: serverModeFilters, search: this.globalFilter() },
+                    });
+                }
             },
             onGlobalFilterChange: updater => {
                 const newState = typeof updater === 'function' ? updater(this.globalFilter()) : updater;
+                const hasLocalFilter = this.hasLocalFiltering();
+                const serverModeFilters = this._filterServerModeColumnFilters(this.columnFilters());
                 this._runAsyncStateUpdate(() => {
                     this.globalFilter.set(newState);
-                    if (this.zConfig().mode !== 'server') {
+                    if (hasLocalFilter) {
                         this.pagination.update(p => ({ ...p, pageIndex: 1 }));
                     }
-                    this._emitFilterChangeDebounced(this.columnFilters(), newState);
-                });
+                    if (serverModeFilters.length > 0 || this.hasServerFiltering()) {
+                        this._emitFilterChangeDebounced(serverModeFilters, newState);
+                    }
+                }, hasLocalFilter);
             },
             onPaginationChange: updater => {
                 const newState = typeof updater === 'function' ? updater(this._tanstackPagination()) : updater;
@@ -2868,14 +2967,21 @@ class ZTableComponent {
                 });
             },
             onSortingChange: updater => {
-                const newState = typeof updater === 'function' ? updater(this.sorting()) : updater;
-                this._runAsyncStateUpdate(() => {
-                    this.sorting.set(newState);
-                    if (this.zConfig().mode !== 'server') {
+                const oldState = this.sorting();
+                const newState = typeof updater === 'function' ? updater(oldState) : updater;
+                const changedColumnIds = this._getChangedSortColumnIds(oldState, newState);
+                const hasAnyLocalChange = changedColumnIds.some(id => this._isColumnSortModeLocal(id));
+                const hasAnyServerChange = changedColumnIds.some(id => !this._isColumnSortModeLocal(id));
+                const serverModeSorting = this._filterServerModeSorting(newState);
+                this.sorting.set(newState);
+                if (hasAnyLocalChange) {
+                    this._runAsyncStateUpdate(() => {
                         this.pagination.update(p => ({ ...p, pageIndex: 1 }));
-                    }
-                    this.zChange.emit({ type: 'sort', data: { sorting: newState } });
-                });
+                    }, true);
+                }
+                if (hasAnyServerChange) {
+                    this.zChange.emit({ type: 'sort', data: { sorting: serverModeSorting } });
+                }
             },
             onRowPinningChange: updater => {
                 const newState = typeof updater === 'function' ? updater(this.rowPinning()) : updater;
@@ -3032,8 +3138,10 @@ class ZTableComponent {
             }
         });
         explicitEffect([this.columnFilters, this.globalFilter, this.pagination, this.sorting], () => {
-            this._checkVerticalScroll();
-            this._checkHorizontalScroll();
+            queueMicrotask(() => {
+                this._checkVerticalScroll();
+                this._checkHorizontalScroll();
+            });
         });
         explicitEffect([this.zLoading, this.isProcessing], () => {
             const loading = this.zLoading();
@@ -3142,9 +3250,12 @@ class ZTableComponent {
             data: { selection: finalState },
         });
     }
-    _runAsyncStateUpdate(updateFn) {
+    _runAsyncStateUpdate(updateFn, forceLocal = false) {
         const isServerMode = this.zConfig().mode === 'server';
-        if (isServerMode) {
+        const hasLocalFiltering = this.hasLocalFiltering();
+        const hasLocalSorting = this.hasLocalSorting();
+        const shouldRunAsync = !isServerMode || forceLocal || hasLocalFiltering || hasLocalSorting;
+        if (!shouldRunAsync) {
             updateFn();
             return;
         }
@@ -3155,14 +3266,6 @@ class ZTableComponent {
         }, this.zConfig().debounceTime ?? Z_DEFAULT_DEBOUNCE_TIME);
     }
     _emitFilterChangeDebounced(filters, search) {
-        const isServerMode = this.zConfig().mode === 'server';
-        if (isServerMode) {
-            this.zChange.emit({
-                type: 'filter',
-                data: { filters, search },
-            });
-            return;
-        }
         if (this._filterEmitDebounceTimeout) {
             clearTimeout(this._filterEmitDebounceTimeout);
         }
@@ -3310,10 +3413,8 @@ class ZTableComponent {
                     pagination: this.pagination(),
                 },
             });
-            queueMicrotask(() => {
-                this._checkVerticalScroll();
-                this._checkHorizontalScroll();
-            });
+            this._checkVerticalScroll();
+            this._checkHorizontalScroll();
         });
     }
     toggleHeaderFooterShadow() {
@@ -3588,6 +3689,64 @@ class ZTableComponent {
         }
         return true;
     }
+    _getChangedFilterColumnIds(oldState, newState) {
+        const changedIds = [];
+        const oldMap = new Map(oldState.map(f => [f.id, f.value]));
+        const newMap = new Map(newState.map(f => [f.id, f.value]));
+        for (const filter of newState) {
+            const oldValue = oldMap.get(filter.id);
+            if (JSON.stringify(oldValue) !== JSON.stringify(filter.value)) {
+                changedIds.push(filter.id);
+            }
+        }
+        for (const filter of oldState) {
+            if (!newMap.has(filter.id)) {
+                changedIds.push(filter.id);
+            }
+        }
+        return [...new Set(changedIds)];
+    }
+    _getChangedSortColumnIds(oldState, newState) {
+        const changedIds = [];
+        const oldMap = new Map(oldState.map(s => [s.id, s.desc]));
+        const newMap = new Map(newState.map(s => [s.id, s.desc]));
+        for (const sort of newState) {
+            const oldDesc = oldMap.get(sort.id);
+            if (oldDesc !== sort.desc) {
+                changedIds.push(sort.id);
+            }
+        }
+        for (const sort of oldState) {
+            if (!newMap.has(sort.id)) {
+                changedIds.push(sort.id);
+            }
+        }
+        return [...new Set(changedIds)];
+    }
+    _isColumnFilterModeLocal(columnId) {
+        const columnConfig = this._findColumnConfig(columnId);
+        if (!columnConfig) {
+            return true;
+        }
+        const filterConfig = typeof columnConfig.filter === 'boolean' ? { enabled: columnConfig.filter } : columnConfig.filter;
+        const filterMode = filterConfig?.mode ?? 'local';
+        return filterMode === 'local';
+    }
+    _isColumnSortModeLocal(columnId) {
+        const columnConfig = this._findColumnConfig(columnId);
+        if (!columnConfig) {
+            return true;
+        }
+        const sortConfig = typeof columnConfig.sort === 'boolean' ? { enabled: columnConfig.sort } : columnConfig.sort;
+        const sortMode = sortConfig?.mode ?? 'local';
+        return sortMode === 'local';
+    }
+    _filterServerModeColumnFilters(filters) {
+        return filters.filter(filter => !this._isColumnFilterModeLocal(filter.id));
+    }
+    _filterServerModeSorting(sorting) {
+        return sorting.filter(sort => !this._isColumnSortModeLocal(sort.id));
+    }
     _findColumnConfig(columnId) {
         const { columns } = this.zConfig();
         if (columns !== this._lastColumnsRef) {