@shival99/z-ui 1.2.22 → 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,124 +1029,136 @@ 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;
     }
-    if (filterConfig?.filterFn) {
-        columnDef.filterFn = filterConfig.filterFn;
-    }
-    if (filterConfig?.type === 'select') {
-        columnDef.filterFn = (row, columnId, filterValue) => {
-            if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0)) {
-                return true;
-            }
-            const cellValue = row.getValue(columnId);
-            if (Array.isArray(filterValue)) {
-                return filterValue.includes(cellValue);
-            }
-            return cellValue === filterValue;
-        };
+    if (!isLocalSortMode) {
+        columnDef.sortingFn = () => 0;
     }
-    if (filterConfig?.type === 'multi-select' || filterConfig?.type === 'tags') {
-        columnDef.filterFn = (row, columnId, filterValue) => {
-            if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0)) {
-                return true;
-            }
-            const cellValue = row.getValue(columnId);
-            if (!Array.isArray(filterValue)) {
-                return cellValue === filterValue;
-            }
-            const filterSet = new Set(filterValue);
-            if (Array.isArray(cellValue)) {
-                return cellValue.some(cv => filterSet.has(cv));
-            }
-            return filterSet.has(cellValue);
-        };
+    if (isLocalFilterMode && filterConfig?.filterFn) {
+        columnDef.filterFn = filterConfig.filterFn;
     }
-    if (filterConfig?.type === 'date') {
-        columnDef.filterFn = (row, columnId, filterValue) => {
-            if (!filterValue) {
-                return true;
-            }
-            const cellValue = row.getValue(columnId);
-            if (!cellValue) {
-                return false;
-            }
-            const cellDate = cellValue instanceof Date ? cellValue : new Date(cellValue);
-            const filterDate = filterValue instanceof Date ? filterValue : new Date(filterValue);
-            if (isNaN(cellDate.getTime()) || isNaN(filterDate.getTime())) {
-                return false;
-            }
-            return (cellDate.getFullYear() === filterDate.getFullYear() &&
-                cellDate.getMonth() === filterDate.getMonth() &&
-                cellDate.getDate() === filterDate.getDate());
-        };
+    if (!isLocalFilterMode) {
+        columnDef.filterFn = () => true;
     }
-    if (filterConfig?.type === 'date-range') {
-        columnDef.filterFn = (row, columnId, filterValue) => {
-            if (!filterValue || typeof filterValue !== 'object') {
-                return true;
-            }
-            const { start, end } = filterValue;
-            if (!start && !end) {
-                return true;
-            }
-            const cellValue = row.getValue(columnId);
-            if (!cellValue) {
-                return false;
-            }
-            const cellDate = cellValue instanceof Date ? cellValue : new Date(cellValue);
-            if (isNaN(cellDate.getTime())) {
-                return false;
-            }
-            // Normalize cell date to start of day for comparison
-            const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
-            if (start) {
-                const startDate = start instanceof Date ? start : new Date(start);
-                if (!isNaN(startDate.getTime())) {
-                    const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
-                    if (cellDateOnly < startDateOnly) {
+    if (isLocalFilterMode && !filterConfig?.filterFn && filterConfig?.type) {
+        switch (filterConfig.type) {
+            case 'select':
+                columnDef.filterFn = (row, columnId, filterValue) => {
+                    if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0)) {
+                        return true;
+                    }
+                    const cellValue = row.getValue(columnId);
+                    if (Array.isArray(filterValue)) {
+                        return filterValue.includes(cellValue);
+                    }
+                    return cellValue === filterValue;
+                };
+                break;
+            case 'multi-select':
+            case 'tags':
+                columnDef.filterFn = (row, columnId, filterValue) => {
+                    if (!filterValue || (Array.isArray(filterValue) && filterValue.length === 0)) {
+                        return true;
+                    }
+                    const cellValue = row.getValue(columnId);
+                    if (!Array.isArray(filterValue)) {
+                        return cellValue === filterValue;
+                    }
+                    const filterSet = new Set(filterValue);
+                    if (Array.isArray(cellValue)) {
+                        return cellValue.some(cv => filterSet.has(cv));
+                    }
+                    return filterSet.has(cellValue);
+                };
+                break;
+            case 'date':
+                columnDef.filterFn = (row, columnId, filterValue) => {
+                    if (!filterValue) {
+                        return true;
+                    }
+                    const cellValue = row.getValue(columnId);
+                    if (!cellValue) {
                         return false;
                     }
-                }
-            }
-            if (end) {
-                const endDate = end instanceof Date ? end : new Date(end);
-                if (!isNaN(endDate.getTime())) {
-                    const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
-                    if (cellDateOnly > endDateOnly) {
+                    const cellDate = cellValue instanceof Date ? cellValue : new Date(cellValue);
+                    const filterDate = filterValue instanceof Date ? filterValue : new Date(filterValue);
+                    if (isNaN(cellDate.getTime()) || isNaN(filterDate.getTime())) {
                         return false;
                     }
-                }
-            }
-            return true;
-        };
-    }
-    if (filterConfig?.type === 'range') {
-        columnDef.filterFn = (row, columnId, filterValue) => {
-            if (!filterValue || !Array.isArray(filterValue)) {
-                return true;
-            }
-            const [min, max] = filterValue;
-            if (min === undefined && max === undefined) {
-                return true;
-            }
-            const cellValue = row.getValue(columnId);
-            if (cellValue === null || cellValue === undefined) {
-                return false;
-            }
-            const numValue = typeof cellValue === 'number' ? cellValue : Number(cellValue);
-            if (isNaN(numValue)) {
-                return false;
-            }
-            if (min !== undefined && numValue < min) {
-                return false;
-            }
-            if (max !== undefined && numValue > max) {
-                return false;
-            }
-            return true;
-        };
+                    return (cellDate.getFullYear() === filterDate.getFullYear() &&
+                        cellDate.getMonth() === filterDate.getMonth() &&
+                        cellDate.getDate() === filterDate.getDate());
+                };
+                break;
+            case 'date-range':
+                columnDef.filterFn = (row, columnId, filterValue) => {
+                    if (!filterValue || typeof filterValue !== 'object') {
+                        return true;
+                    }
+                    const { start, end } = filterValue;
+                    if (!start && !end) {
+                        return true;
+                    }
+                    const cellValue = row.getValue(columnId);
+                    if (!cellValue) {
+                        return false;
+                    }
+                    const cellDate = cellValue instanceof Date ? cellValue : new Date(cellValue);
+                    if (isNaN(cellDate.getTime())) {
+                        return false;
+                    }
+                    const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
+                    if (start) {
+                        const startDate = start instanceof Date ? start : new Date(start);
+                        if (!isNaN(startDate.getTime())) {
+                            const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+                            if (cellDateOnly < startDateOnly) {
+                                return false;
+                            }
+                        }
+                    }
+                    if (end) {
+                        const endDate = end instanceof Date ? end : new Date(end);
+                        if (!isNaN(endDate.getTime())) {
+                            const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+                            if (cellDateOnly > endDateOnly) {
+                                return false;
+                            }
+                        }
+                    }
+                    return true;
+                };
+                break;
+            case 'range':
+                columnDef.filterFn = (row, columnId, filterValue) => {
+                    if (!filterValue || !Array.isArray(filterValue)) {
+                        return true;
+                    }
+                    const [min, max] = filterValue;
+                    if (min === undefined && max === undefined) {
+                        return true;
+                    }
+                    const cellValue = row.getValue(columnId);
+                    if (cellValue === null || cellValue === undefined) {
+                        return false;
+                    }
+                    const numValue = typeof cellValue === 'number' ? cellValue : Number(cellValue);
+                    if (isNaN(numValue)) {
+                        return false;
+                    }
+                    if (min !== undefined && numValue < min) {
+                        return false;
+                    }
+                    if (max !== undefined && numValue > max) {
+                        return false;
+                    }
+                    return true;
+                };
+                break;
+        }
     }
     if (config.columns && config.columns.length > 0) {
         columnDef.columns = config.columns.map(subConfig => columnConfigToColumnDef(subConfig));
@@ -2422,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) {
@@ -2443,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) {
@@ -2766,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',
@@ -2832,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;
@@ -2861,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;
@@ -3025,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();
@@ -3135,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;
         }
@@ -3148,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);
         }
@@ -3303,10 +3413,8 @@ class ZTableComponent {
                     pagination: this.pagination(),
                 },
             });
-            queueMicrotask(() => {
-                this._checkVerticalScroll();
-                this._checkHorizontalScroll();
-            });
+            this._checkVerticalScroll();
+            this._checkHorizontalScroll();
         });
     }
     toggleHeaderFooterShadow() {
@@ -3581,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) {