@devjuliovilla/jv-ui 1.5.3 → 1.5.5

package/fesm2022/devjuliovilla-jv-ui.mjs

@@ -17843,47 +17843,47 @@ class JvIconComponent {
         return JV_LUCIDE_ICON_REGISTRY[JV_FALLBACK_ICON_NAME];
     }, ...(ngDevMode ? [{ debugName: "iconDefinition" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvIconComponent, isStandalone: true, selector: "jv-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <svg
-      class="jv-icon"
-      [attr.viewBox]="iconDefinition().viewBox"
-      [attr.width]="size()"
-      [attr.height]="size()"
-      [attr.stroke-width]="strokeWidth()"
-      [attr.role]="decorative() ? 'presentation' : 'img'"
-      [attr.aria-hidden]="decorative() ? 'true' : null"
-      [attr.aria-label]="decorative() ? null : ariaLabel() || normalizedName()"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      @for (element of iconDefinition().elements; track $index) {
-        @switch (element.tag) {
-          @case ('path') {
-            <path [attr.d]="element.attrs['d']" />
-          }
-          @case ('circle') {
-            <circle [attr.cx]="element.attrs['cx']" [attr.cy]="element.attrs['cy']" [attr.r]="element.attrs['r']" />
-          }
-          @case ('line') {
-            <line [attr.x1]="element.attrs['x1']" [attr.x2]="element.attrs['x2']" [attr.y1]="element.attrs['y1']" [attr.y2]="element.attrs['y2']" />
-          }
-          @case ('polyline') {
-            <polyline [attr.points]="element.attrs['points']" />
-          }
-          @case ('rect') {
-            <rect [attr.x]="element.attrs['x']" [attr.y]="element.attrs['y']" [attr.width]="element.attrs['width']" [attr.height]="element.attrs['height']" [attr.rx]="element.attrs['rx']" [attr.ry]="element.attrs['ry']" />
-          }
-          @case ('ellipse') {
-            <ellipse [attr.cx]="element.attrs['cx']" [attr.cy]="element.attrs['cy']" [attr.rx]="element.attrs['rx']" [attr.ry]="element.attrs['ry']" />
-          }
-          @case ('polygon') {
-            <polygon [attr.points]="element.attrs['points']" />
-          }
-        }
-      }
-    </svg>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvIconComponent, isStandalone: true, selector: "jv-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      class="jv-icon"
+      [attr.viewBox]="iconDefinition().viewBox"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.stroke-width]="strokeWidth()"
+      [attr.role]="decorative() ? 'presentation' : 'img'"
+      [attr.aria-hidden]="decorative() ? 'true' : null"
+      [attr.aria-label]="decorative() ? null : ariaLabel() || normalizedName()"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      @for (element of iconDefinition().elements; track $index) {
+        @switch (element.tag) {
+          @case ('path') {
+            <path [attr.d]="element.attrs['d']" />
+          }
+          @case ('circle') {
+            <circle [attr.cx]="element.attrs['cx']" [attr.cy]="element.attrs['cy']" [attr.r]="element.attrs['r']" />
+          }
+          @case ('line') {
+            <line [attr.x1]="element.attrs['x1']" [attr.x2]="element.attrs['x2']" [attr.y1]="element.attrs['y1']" [attr.y2]="element.attrs['y2']" />
+          }
+          @case ('polyline') {
+            <polyline [attr.points]="element.attrs['points']" />
+          }
+          @case ('rect') {
+            <rect [attr.x]="element.attrs['x']" [attr.y]="element.attrs['y']" [attr.width]="element.attrs['width']" [attr.height]="element.attrs['height']" [attr.rx]="element.attrs['rx']" [attr.ry]="element.attrs['ry']" />
+          }
+          @case ('ellipse') {
+            <ellipse [attr.cx]="element.attrs['cx']" [attr.cy]="element.attrs['cy']" [attr.rx]="element.attrs['rx']" [attr.ry]="element.attrs['ry']" />
+          }
+          @case ('polygon') {
+            <polygon [attr.points]="element.attrs['points']" />
+          }
+        }
+      }
+    </svg>
   `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvIconComponent, decorators: [{
@@ -17891,47 +17891,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{
                     selector: 'jv-icon',
                     standalone: true,
-                    template: `
-    <svg
-      class="jv-icon"
-      [attr.viewBox]="iconDefinition().viewBox"
-      [attr.width]="size()"
-      [attr.height]="size()"
-      [attr.stroke-width]="strokeWidth()"
-      [attr.role]="decorative() ? 'presentation' : 'img'"
-      [attr.aria-hidden]="decorative() ? 'true' : null"
-      [attr.aria-label]="decorative() ? null : ariaLabel() || normalizedName()"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      @for (element of iconDefinition().elements; track $index) {
-        @switch (element.tag) {
-          @case ('path') {
-            <path [attr.d]="element.attrs['d']" />
-          }
-          @case ('circle') {
-            <circle [attr.cx]="element.attrs['cx']" [attr.cy]="element.attrs['cy']" [attr.r]="element.attrs['r']" />
-          }
-          @case ('line') {
-            <line [attr.x1]="element.attrs['x1']" [attr.x2]="element.attrs['x2']" [attr.y1]="element.attrs['y1']" [attr.y2]="element.attrs['y2']" />
-          }
-          @case ('polyline') {
-            <polyline [attr.points]="element.attrs['points']" />
-          }
-          @case ('rect') {
-            <rect [attr.x]="element.attrs['x']" [attr.y]="element.attrs['y']" [attr.width]="element.attrs['width']" [attr.height]="element.attrs['height']" [attr.rx]="element.attrs['rx']" [attr.ry]="element.attrs['ry']" />
-          }
-          @case ('ellipse') {
-            <ellipse [attr.cx]="element.attrs['cx']" [attr.cy]="element.attrs['cy']" [attr.rx]="element.attrs['rx']" [attr.ry]="element.attrs['ry']" />
-          }
-          @case ('polygon') {
-            <polygon [attr.points]="element.attrs['points']" />
-          }
-        }
-      }
-    </svg>
+                    template: `
+    <svg
+      class="jv-icon"
+      [attr.viewBox]="iconDefinition().viewBox"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      [attr.stroke-width]="strokeWidth()"
+      [attr.role]="decorative() ? 'presentation' : 'img'"
+      [attr.aria-hidden]="decorative() ? 'true' : null"
+      [attr.aria-label]="decorative() ? null : ariaLabel() || normalizedName()"
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      @for (element of iconDefinition().elements; track $index) {
+        @switch (element.tag) {
+          @case ('path') {
+            <path [attr.d]="element.attrs['d']" />
+          }
+          @case ('circle') {
+            <circle [attr.cx]="element.attrs['cx']" [attr.cy]="element.attrs['cy']" [attr.r]="element.attrs['r']" />
+          }
+          @case ('line') {
+            <line [attr.x1]="element.attrs['x1']" [attr.x2]="element.attrs['x2']" [attr.y1]="element.attrs['y1']" [attr.y2]="element.attrs['y2']" />
+          }
+          @case ('polyline') {
+            <polyline [attr.points]="element.attrs['points']" />
+          }
+          @case ('rect') {
+            <rect [attr.x]="element.attrs['x']" [attr.y]="element.attrs['y']" [attr.width]="element.attrs['width']" [attr.height]="element.attrs['height']" [attr.rx]="element.attrs['rx']" [attr.ry]="element.attrs['ry']" />
+          }
+          @case ('ellipse') {
+            <ellipse [attr.cx]="element.attrs['cx']" [attr.cy]="element.attrs['cy']" [attr.rx]="element.attrs['rx']" [attr.ry]="element.attrs['ry']" />
+          }
+          @case ('polygon') {
+            <polygon [attr.points]="element.attrs['points']" />
+          }
+        }
+      }
+    </svg>
   `,
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
@@ -18905,6 +18905,11 @@ const ES = {
     'grid.pageOfTotal': 'Página {page} de {total}',
     'grid.itemsTotal': '{total} registros',
     'grid.itemsShowing': 'Mostrando {start}-{end} de {total}',
+    'grid.exportCsv': 'CSV',
+    'grid.exportExcel': 'Excel',
+    'grid.filterPlaceholder': 'Filtrar...',
+    'grid.filterForColumn': 'Filtrar por ${column}',
+    'grid.actionsLabel': 'Acciones',
     'pagination.pageLabel': 'Página {page}',
     'pagination.itemsShowing': '{start}-{end} de {total}',
     'pagination.of': 'de',
@@ -18935,6 +18940,11 @@ const EN = {
     'grid.pageOfTotal': 'Page {page} of {total}',
     'grid.itemsTotal': '{total} items',
     'grid.itemsShowing': 'Showing {start}-{end} of {total}',
+    'grid.exportCsv': 'CSV',
+    'grid.exportExcel': 'Excel',
+    'grid.filterPlaceholder': 'Filter...',
+    'grid.filterForColumn': 'Filter by ${column}',
+    'grid.actionsLabel': 'Actions',
     'pagination.pageLabel': 'Page {page}',
     'pagination.itemsShowing': '{start}-{end} of {total}',
     'pagination.of': 'of',
@@ -20193,6 +20203,17 @@ const JV_GRID_DEFAULT_OPTIONS = {
     noResultsMessage: '',
     searchPlaceholder: '',
     ariaLabel: '',
+    serverSide: false,
+    totalItems: 0,
+    stickyColumns: false,
+    resizableColumns: false,
+    reorderableColumns: false,
+    editable: false,
+    virtualScroll: false,
+    virtualScrollRowHeight: 48,
+    exportable: false,
+    columnFilters: false,
+    rowDoubleClick: false,
 };
 
 let gridIdSequence = 0;
@@ -20206,11 +20227,16 @@ class JvGridComponent {
     trackBy = input(null, ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
     selectedIds = input([], ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
     rowClick = output();
+    rowDoubleClick = output();
     actionClick = output();
     selectionChange = output();
     pageChange = output();
     searchChange = output();
     sortChange = output();
+    columnFilter = output();
+    columnResize = output();
+    columnReorder = output();
+    rowEdit = output();
     effectiveOptions = computed(() => ({ ...JV_GRID_DEFAULT_OPTIONS, ...this.options() }), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
     idKey = computed(() => {
         const tb = this.trackBy();
@@ -20220,7 +20246,18 @@ class JvGridComponent {
     }, ...(ngDevMode ? [{ debugName: "idKey" }] : /* istanbul ignore next */ []));
     resolvedOptions = this.effectiveOptions;
     gridLabel = computed(() => this.resolvedOptions().ariaLabel || `Grid ${this.gridId}`, ...(ngDevMode ? [{ debugName: "gridLabel" }] : /* istanbul ignore next */ []));
-    visibleColumns = computed(() => this.columns().filter(col => !col.hidden), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    columnOrder = signal([], ...(ngDevMode ? [{ debugName: "columnOrder" }] : /* istanbul ignore next */ []));
+    colFilters = signal({}, ...(ngDevMode ? [{ debugName: "colFilters" }] : /* istanbul ignore next */ []));
+    columnWidths = signal({}, ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+    visibleColumns = computed(() => {
+        const cols = this.columns().filter(col => !col.hidden);
+        const order = this.columnOrder();
+        if (order.length > 0) {
+            return order.map(key => cols.find(c => this.colKey(c) === key)).filter(Boolean);
+        }
+        return cols;
+    }, ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    groupedHeaders = computed(() => this.columns().filter(col => col.children && col.children.length > 0), ...(ngDevMode ? [{ debugName: "groupedHeaders" }] : /* istanbul ignore next */ []));
     internalSelectedIds = signal([], ...(ngDevMode ? [{ debugName: "internalSelectedIds" }] : /* istanbul ignore next */ []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     sortState = signal({ columnKey: '', direction: null }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
@@ -20236,23 +20273,51 @@ class JvGridComponent {
         const ids = fromInput.length > 0 ? fromInput : fromInternal;
         return new Set(ids);
     }, ...(ngDevMode ? [{ debugName: "selectedIdSet" }] : /* istanbul ignore next */ []));
+    hasActiveFilters = computed(() => Object.values(this.colFilters()).some(f => f.value.trim().length > 0), ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
     filteredData = computed(() => {
+        if (this.effectiveOptions().serverSide)
+            return this.data();
         let items = this.data();
         const term = this.searchTerm().trim().toLowerCase();
-        if (!term)
-            return items;
-        return items.filter(row => {
-            return this.visibleColumns().some(col => {
-                if (col.searchable === false)
-                    return false;
-                const value = this.getRawCellValue(row, col);
-                if (value == null)
-                    return false;
-                return String(value).toLowerCase().includes(term);
+        if (term) {
+            items = items.filter(row => {
+                return this.visibleColumns().some(col => {
+                    if (col.searchable === false)
+                        return false;
+                    const value = this.getRawCellValue(row, col);
+                    if (value == null)
+                        return false;
+                    return String(value).toLowerCase().includes(term);
+                });
             });
-        });
+        }
+        const filters = this.colFilters();
+        const hasFilters = Object.values(filters).some(f => f.value.trim().length > 0);
+        if (hasFilters) {
+            items = items.filter(row => {
+                return Object.entries(filters).every(([key, filter]) => {
+                    if (!filter.value.trim())
+                        return true;
+                    const col = this.columns().find(c => this.colKey(c) === key);
+                    if (!col || col.filterable === false)
+                        return true;
+                    const value = String(this.getRawCellValue(row, col) ?? '').toLowerCase();
+                    const fv = filter.value.toLowerCase();
+                    switch (filter.operator) {
+                        case 'contains': return value.includes(fv);
+                        case 'equals': return value === fv;
+                        case 'startsWith': return value.startsWith(fv);
+                        case 'endsWith': return value.endsWith(fv);
+                        default: return value.includes(fv);
+                    }
+                });
+            });
+        }
+        return items;
     }, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
     sortedData = computed(() => {
+        if (this.effectiveOptions().serverSide)
+            return this.filteredData();
         let items = this.filteredData();
         const { columnKey, direction } = this.sortState();
         if (!columnKey || !direction)
@@ -20268,18 +20333,50 @@ class JvGridComponent {
             return direction === 'asc' ? cmp : -cmp;
         });
     }, ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
-    totalItems = computed(() => this.sortedData().length, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
-    totalPages = computed(() => Math.max(1, Math.ceil(this.totalItems() / this.pageSize())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
-    pagedData = computed(() => {
+    effectiveTotalItems = computed(() => {
+        if (this.effectiveOptions().serverSide) {
+            return this.effectiveOptions().totalItems ?? this.data().length;
+        }
+        return this.sortedData().length;
+    }, ...(ngDevMode ? [{ debugName: "effectiveTotalItems" }] : /* istanbul ignore next */ []));
+    effectiveTotalPages = computed(() => Math.max(1, Math.ceil(this.effectiveTotalItems() / this.pageSize())), ...(ngDevMode ? [{ debugName: "effectiveTotalPages" }] : /* istanbul ignore next */ []));
+    displayData = computed(() => {
+        if (this.effectiveOptions().virtualScroll) {
+            return this.sortedData();
+        }
+        if (!this.effectiveOptions().pageable)
+            return this.sortedData();
         const items = this.sortedData();
         const ps = this.pageSize();
-        const page = Math.min(this.pageIndex(), this.totalPages() - 1);
+        const page = Math.min(this.pageIndex(), this.effectiveTotalPages() - 1);
         return items.slice(page * ps, page * ps + ps);
-    }, ...(ngDevMode ? [{ debugName: "pagedData" }] : /* istanbul ignore next */ []));
-    pageStart = computed(() => this.totalItems() === 0 ? 0 : this.pageIndex() * this.pageSize() + 1, ...(ngDevMode ? [{ debugName: "pageStart" }] : /* istanbul ignore next */ []));
-    pageEnd = computed(() => Math.min((this.pageIndex() + 1) * this.pageSize(), this.totalItems()), ...(ngDevMode ? [{ debugName: "pageEnd" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "displayData" }] : /* istanbul ignore next */ []));
+    virtualScroll = computed(() => this.effectiveOptions().virtualScroll && this.effectiveOptions().virtualScrollRowHeight, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
+    virtualStartIndex = signal(0, ...(ngDevMode ? [{ debugName: "virtualStartIndex" }] : /* istanbul ignore next */ []));
+    virtualEndIndex = signal(0, ...(ngDevMode ? [{ debugName: "virtualEndIndex" }] : /* istanbul ignore next */ []));
+    virtualDisplayData = computed(() => {
+        if (!this.effectiveOptions().virtualScroll)
+            return this.displayData();
+        const items = this.sortedData();
+        const start = this.virtualStartIndex();
+        const end = this.virtualEndIndex();
+        if (start >= items.length)
+            return [];
+        return items.slice(start, Math.min(end, items.length));
+    }, ...(ngDevMode ? [{ debugName: "virtualDisplayData" }] : /* istanbul ignore next */ []));
+    virtualTotalHeight = computed(() => {
+        const count = this.effectiveOptions().serverSide
+            ? this.effectiveTotalItems()
+            : this.sortedData().length;
+        return count * (this.effectiveOptions().virtualScrollRowHeight ?? 48);
+    }, ...(ngDevMode ? [{ debugName: "virtualTotalHeight" }] : /* istanbul ignore next */ []));
+    virtualOffsetY = computed(() => {
+        return this.virtualStartIndex() * (this.effectiveOptions().virtualScrollRowHeight ?? 48);
+    }, ...(ngDevMode ? [{ debugName: "virtualOffsetY" }] : /* istanbul ignore next */ []));
+    pageStart = computed(() => this.effectiveTotalItems() === 0 ? 0 : this.pageIndex() * this.pageSize() + 1, ...(ngDevMode ? [{ debugName: "pageStart" }] : /* istanbul ignore next */ []));
+    pageEnd = computed(() => Math.min((this.pageIndex() + 1) * this.pageSize(), this.effectiveTotalItems()), ...(ngDevMode ? [{ debugName: "pageEnd" }] : /* istanbul ignore next */ []));
     pageRange = computed(() => {
-        const total = this.totalPages();
+        const total = this.effectiveTotalPages();
         const current = this.pageIndex();
         const range = [];
         const start = Math.max(0, current - 2);
@@ -20289,11 +20386,11 @@ class JvGridComponent {
         return range;
     }, ...(ngDevMode ? [{ debugName: "pageRange" }] : /* istanbul ignore next */ []));
     allSelected = computed(() => {
-        const rows = this.pagedData();
+        const rows = this.displayData();
         return rows.length > 0 && rows.every(r => this.selectedIdSet().has(this.getRowId(r)));
     }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
     someSelected = computed(() => {
-        const rows = this.pagedData();
+        const rows = this.displayData();
         return rows.some(r => this.selectedIdSet().has(this.getRowId(r))) && !this.allSelected();
     }, ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
     colspan = computed(() => {
@@ -20305,6 +20402,7 @@ class JvGridComponent {
         return count;
     }, ...(ngDevMode ? [{ debugName: "colspan" }] : /* istanbul ignore next */ []));
     densityClass = computed(() => `jv-grid-density--${this.resolvedOptions().density ?? 'normal'}`, ...(ngDevMode ? [{ debugName: "densityClass" }] : /* istanbul ignore next */ []));
+    editState = signal(null, ...(ngDevMode ? [{ debugName: "editState" }] : /* istanbul ignore next */ []));
     t = (key, params) => this.translationService.translate(key, params);
     getRowId(row, index) {
         const idKey = this.idKey();
@@ -20326,6 +20424,10 @@ class JvGridComponent {
     getCellValue(row, col) {
         return this.getRawCellValue(row, col);
     }
+    getEditValue(row, col) {
+        const val = this.getCellValue(row, col);
+        return val == null ? '' : String(val);
+    }
     formatValue(value, col) {
         if (value == null)
             return '';
@@ -20353,6 +20455,38 @@ class JvGridComponent {
             return `${col.header} - ${this.t('grid.sortDesc')}`;
         return `${col.header} - ${this.t('grid.sortAsc')} ${this.t('grid.sortDesc')}`;
     }
+    getColumnWidth(col) {
+        return this.columnWidths()[this.colKey(col)] ?? (col.width || undefined);
+    }
+    isStickyLeft(col) {
+        return !!(this.resolvedOptions().stickyColumns && col.sticky === 'left');
+    }
+    isStickyRight(col) {
+        return !!(this.resolvedOptions().stickyColumns && col.sticky === 'right');
+    }
+    isColumnResizable(col) {
+        return this.resolvedOptions().resizableColumns || col.resizable === true;
+    }
+    isCellEditable(col) {
+        return (this.resolvedOptions().editable || col.editable === true) && col.editable !== false;
+    }
+    groupColspan(group) {
+        return group.children?.length ?? 1;
+    }
+    isEditingCell(row, col) {
+        const es = this.editState();
+        return es !== null && es.rowId === this.getRowId(row) && es.colKey === this.colKey(col);
+    }
+    isRowEditing(row) {
+        const es = this.editState();
+        return es !== null && es.rowId === this.getRowId(row);
+    }
+    getEditOptions(col) {
+        return (col.editOptions || []).map(opt => ({
+            label: opt.label,
+            value: String(opt.value),
+        }));
+    }
     findColumn(key) {
         return this.columns().find(c => this.colKey(c) === key) ?? { key, header: key };
     }
@@ -20385,7 +20519,7 @@ class JvGridComponent {
         this.searchChange.emit(value);
     }
     goToPage(page) {
-        if (page >= 0 && page < this.totalPages()) {
+        if (page >= 0 && page < this.effectiveTotalPages()) {
             this.pageIndex.set(page);
             this.pageChange.emit({ pageIndex: page, pageSize: this.pageSize() });
         }
@@ -20408,7 +20542,7 @@ class JvGridComponent {
     toggleSelectAll(checked) {
         this.internalSelectedIds.update(ids => {
             const set = new Set(ids);
-            const rows = this.pagedData();
+            const rows = this.displayData();
             rows.forEach(r => {
                 if (checked)
                     set.add(this.getRowId(r));
@@ -20428,9 +20562,23 @@ class JvGridComponent {
             this.rowClick.emit(event);
         }
     }
+    onRowDblClick(row) {
+        if (this.resolvedOptions().rowDoubleClick) {
+            this.rowDoubleClick.emit(row);
+        }
+    }
     onActionClick(action, row) {
         this.actionClick.emit({ actionId: action.id, row });
     }
+    onColumnFilterChange(col, value) {
+        const key = this.colKey(col);
+        this.colFilters.update(f => ({
+            ...f,
+            [key]: { key, value, operator: 'contains' },
+        }));
+        this.pageIndex.set(0);
+        this.columnFilter.emit({ columnKey: key, value });
+    }
     getRowLabel(row, index) {
         const label = this.visibleColumns()
             .slice(0, 2)
@@ -20439,20 +20587,160 @@ class JvGridComponent {
             .join(' - ');
         return `${label}${this.isSelected(row) ? ` (${this.t('grid.selected')})` : ''}`;
     }
+    startEdit(row, col, event) {
+        if (!this.isCellEditable(col))
+            return;
+        if (col.type === 'boolean')
+            return;
+        event.preventDefault();
+        this.editState.set({ rowId: this.getRowId(row), colKey: this.colKey(col) });
+    }
+    commitEdit(row, col, value) {
+        const colKey = this.colKey(col);
+        if (this.editState()?.colKey === colKey) {
+            this.rowEdit.emit({ row, column: col, value });
+            this.editState.set(null);
+        }
+    }
+    cancelEdit() {
+        this.editState.set(null);
+    }
+    onEditValueChange(row, col, value) {
+        this.commitEdit(row, col, value);
+    }
+    // Column resizing
+    resizeData = null;
+    onResizeStart(event, col, _colIdx) {
+        event.preventDefault();
+        const th = event.target.closest('th');
+        const startWidth = th.offsetWidth;
+        this.resizeData = { col, startX: event.clientX, startWidth };
+        document.addEventListener('mousemove', this.onResizeMove);
+        document.addEventListener('mouseup', this.onResizeEnd);
+    }
+    onResizeMove = (event) => {
+        if (!this.resizeData)
+            return;
+        const diff = event.clientX - this.resizeData.startX;
+        const newWidth = Math.max(30, this.resizeData.startWidth + diff);
+        this.columnWidths.update(w => ({
+            ...w,
+            [this.colKey(this.resizeData.col)]: `${newWidth}px`,
+        }));
+    };
+    onResizeEnd = () => {
+        if (this.resizeData) {
+            const key = this.colKey(this.resizeData.col);
+            const w = this.columnWidths()[key];
+            this.columnResize.emit({ columnKey: key, width: w });
+        }
+        this.resizeData = null;
+        document.removeEventListener('mousemove', this.onResizeMove);
+        document.removeEventListener('mouseup', this.onResizeEnd);
+    };
+    // Column reordering
+    dragIndex = null;
+    onDragStart(event, colIdx) {
+        if (!this.resolvedOptions().reorderableColumns)
+            return;
+        this.dragIndex = colIdx;
+        event.dataTransfer.effectAllowed = 'move';
+    }
+    onDragOver(event, _colIdx) {
+        if (!this.resolvedOptions().reorderableColumns || this.dragIndex === null)
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+    }
+    onDrop(event, targetIdx) {
+        event.preventDefault();
+        if (!this.resolvedOptions().reorderableColumns || this.dragIndex === null)
+            return;
+        if (this.dragIndex === targetIdx)
+            return;
+        const cols = this.visibleColumns().map(c => this.colKey(c));
+        const [moved] = cols.splice(this.dragIndex, 1);
+        cols.splice(targetIdx, 0, moved);
+        this.columnOrder.set(cols);
+        this.columnReorder.emit({ columnKey: moved, newIndex: targetIdx });
+        this.dragIndex = null;
+    }
+    onDragEnd(_event) {
+        this.dragIndex = null;
+    }
+    // Virtual scrolling
+    onVirtualScroll(target) {
+        if (!this.effectiveOptions().virtualScroll)
+            return;
+        const rowHeight = this.effectiveOptions().virtualScrollRowHeight ?? 48;
+        const buffer = 5;
+        const scrollTop = target.scrollTop;
+        const clientHeight = target.clientHeight;
+        const start = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
+        const end = Math.min(this.sortedData().length, Math.ceil((scrollTop + clientHeight) / rowHeight) + buffer);
+        this.virtualStartIndex.set(start);
+        this.virtualEndIndex.set(end);
+    }
+    // Export
+    exportCsv() {
+        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header }));
+        const allData = this.effectiveOptions().serverSide ? this.data() : this.sortedData();
+        const headerRow = cols.map(c => `"${c.header}"`).join(',');
+        const dataRows = allData.map(row => cols.map(col => {
+            const val = row[col.key];
+            if (val == null)
+                return '';
+            return `"${String(val).replace(/"/g, '""')}"`;
+        }).join(','));
+        const csv = [headerRow, ...dataRows].join('\r\n');
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'grid-export.csv';
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    exportExcel() {
+        const cols = this.visibleColumns().map(c => ({ key: this.colKey(c), header: c.header }));
+        const allData = this.effectiveOptions().serverSide ? this.data() : this.sortedData();
+        let html = '<table>';
+        html += '<thead><tr>' + cols.map(c => `<th>${c.header}</th>`).join('') + '</tr></thead>';
+        html += '<tbody>';
+        for (const row of allData) {
+            html += '<tr>' + cols.map(col => `<td>${row[col.key] ?? ''}</td>`).join('') + '</tr>';
+        }
+        html += '</tbody></table>';
+        const blob = new Blob([html], { type: 'application/vnd.ms-excel' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'grid-export.xls';
+        a.click();
+        URL.revokeObjectURL(url);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvGridComponent, isStandalone: true, selector: "jv-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", actionClick: "actionClick", selectionChange: "selectionChange", pageChange: "pageChange", searchChange: "searchChange", sortChange: "sortChange", columnFilter: "columnFilter", columnResize: "columnResize", columnReorder: "columnReorder", rowEdit: "rowEdit" }, ngImport: i0, template: `
     <div class="jv-grid" role="region" [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()">
-      @if (resolvedOptions().searchable) {
+      @if (resolvedOptions().searchable || resolvedOptions().exportable) {
         <div class="jv-grid-toolbar">
-          <div class="jv-grid-search">
-            <jv-icon name="search" [size]="16" />
-            <jv-input
-              inputId="grid-search"
-              [placeholder]="t('grid.searchPlaceholder')"
-              [ngModel]="searchTerm()"
-              (ngModelChange)="onSearchInput($event)"
-            />
-          </div>
+          @if (resolvedOptions().searchable) {
+            <div class="jv-grid-search">
+              <jv-icon name="search" [size]="16" />
+              <jv-input
+                inputId="grid-search"
+                [placeholder]="t('grid.searchPlaceholder')"
+                [ngModel]="searchTerm()"
+                (ngModelChange)="onSearchInput($event)"
+              />
+            </div>
+          }
+          @if (resolvedOptions().exportable) {
+            <div class="jv-grid-export-actions">
+              <jv-button variant="outline" icon="download" (click)="exportCsv()">{{ t('grid.exportCsv') }}</jv-button>
+              <jv-button variant="outline" icon="file-spreadsheet" (click)="exportExcel()">{{ t('grid.exportExcel') }}</jv-button>
+            </div>
+          }
         </div>
       }
 
@@ -20462,17 +20750,67 @@ class JvGridComponent {
           <span>{{ t('grid.loading') }}</span>
         </div>
       } @else {
-        <div class="jv-grid-table-wrap">
+        <div
+          class="jv-grid-table-wrap"
+          [class.jv-grid-virtual]="resolvedOptions().virtualScroll"
+          #tableWrap
+          (scroll)="onVirtualScroll($any($event.target))"
+        >
+          @if (resolvedOptions().virtualScroll) {
+            <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
+          }
           <table
             class="jv-grid-table"
             role="grid"
             [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
+            [attr.aria-rowcount]="effectiveTotalItems()"
+            [attr.aria-colcount]="visibleColumns().length"
             [class]="densityClass()"
+            [style.position]="resolvedOptions().virtualScroll ? 'relative' : null"
+            [style.top.px]="virtualOffsetY()"
           >
             <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
+
+            @let hasGroupedHeaders = groupedHeaders().length > 0;
+
             <thead class="jv-grid-thead">
+              @if (hasGroupedHeaders) {
+                <tr>
+                  @if (resolvedOptions().selectable) {
+                    <th class="jv-grid-th jv-grid-th-select" scope="col" [attr.rowspan]="2">
+                      <input
+                        type="checkbox"
+                        class="jv-grid-checkbox"
+                        [checked]="allSelected()"
+                        (change)="toggleSelectAll($any($event.target).checked)"
+                        [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
+                        [indeterminate]="someSelected()"
+                      />
+                    </th>
+                  }
+                  @for (group of groupedHeaders(); track colKey(group)) {
+                    <th
+                      class="jv-grid-th"
+                      [class]="group.headerClass || ''"
+                      [class.jv-grid-th-sticky-left]="isStickyLeft(group)"
+                      [class.jv-grid-th-sticky-right]="isStickyRight(group)"
+                      [attr.colspan]="groupColspan(group)"
+                      scope="colgroup"
+                      [style.text-align]="group.align ?? 'start'"
+                    >
+                      <div class="jv-grid-th-content">{{ group.header }}</div>
+                    </th>
+                  }
+                  @if (actions().length > 0) {
+                    <th class="jv-grid-th jv-grid-th-actions" scope="col" [attr.rowspan]="2">
+                      <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
+                    </th>
+                  }
+                </tr>
+              }
+
               <tr>
-                @if (resolvedOptions().selectable) {
+                @if (!hasGroupedHeaders && resolvedOptions().selectable) {
                   <th class="jv-grid-th jv-grid-th-select" scope="col">
                     <input
                       type="checkbox"
@@ -20484,13 +20822,18 @@ class JvGridComponent {
                     />
                   </th>
                 }
-                @for (col of visibleColumns(); track colKey(col)) {
+                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
                   <th
                     class="jv-grid-th"
                     [class]="col.headerClass || ''"
                     [class.jv-grid-th-sortable]="col.sortable !== false && resolvedOptions().sortable"
+                    [class.jv-grid-th-sticky-left]="isStickyLeft(col)"
+                    [class.jv-grid-th-sticky-right]="isStickyRight(col)"
+                    [class.jv-grid-th-reorderable]="resolvedOptions().reorderableColumns"
                     [style.text-align]="col.align ?? 'start'"
-                    [style.width]="col.width || undefined"
+                    [style.width]="getColumnWidth(col)"
+                    [style.min-width]="col.minWidth || undefined"
+                    [style.max-width]="col.maxWidth || undefined"
                     scope="col"
                     [attr.aria-sort]="getAriaSort(col)"
                     [attr.aria-label]="getSortLabel(col)"
@@ -20498,6 +20841,11 @@ class JvGridComponent {
                     (click)="toggleSort(col)"
                     (keydown.enter)="toggleSort(col)"
                     (keydown.space)="toggleSort(col, $event)"
+                    draggable="{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}"
+                    (dragstart)="onDragStart($event, colIdx)"
+                    (dragover)="onDragOver($event, colIdx)"
+                    (drop)="onDrop($event, colIdx)"
+                    (dragend)="onDragEnd($event)"
                   >
                     <div class="jv-grid-th-content">
                       <span>{{ col.header }}</span>
@@ -20510,45 +20858,78 @@ class JvGridComponent {
                         </span>
                       }
                     </div>
+                    @if (isColumnResizable(col)) {
+                      <div
+                        class="jv-grid-resize-handle"
+                        (mousedown)="onResizeStart($event, col, colIdx)"
+                      ></div>
+                    }
                   </th>
                 }
-                @if (actions().length > 0) {
+                @if (!hasGroupedHeaders && actions().length > 0) {
                   <th class="jv-grid-th jv-grid-th-actions" scope="col">
                     <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
                   </th>
                 }
               </tr>
+
+              @if (resolvedOptions().columnFilters) {
+                <tr class="jv-grid-filter-row">
+                  @if (resolvedOptions().selectable) {
+                    <th class="jv-grid-th jv-grid-th-select"></th>
+                  }
+                  @for (col of visibleColumns(); track colKey(col)) {
+                    <th class="jv-grid-th jv-grid-th-filter">
+                      @if (col.filterable !== false) {
+                        <input
+                          class="jv-grid-filter-input"
+                          [placeholder]="t('grid.filterPlaceholder')"
+                          [attr.aria-label]="t('grid.filterForColumn', { column: col.header })"
+                          [ngModel]="colFilters()[colKey(col)]?.value ?? ''"
+                          (ngModelChange)="onColumnFilterChange(col, $event)"
+                        />
+                      }
+                    </th>
+                  }
+                  @if (actions().length > 0) {
+                    <th class="jv-grid-th jv-grid-th-actions"></th>
+                  }
+                </tr>
+              }
             </thead>
+
             <tbody class="jv-grid-tbody">
-              @if (pagedData().length === 0 && !searchTerm().trim()) {
+              @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {
                 <tr>
-                  <td
-                    class="jv-grid-empty"
-                    [attr.colspan]="colspan()"
-                  >
+                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
                     {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}
                   </td>
                 </tr>
-              } @else if (pagedData().length === 0 && searchTerm().trim()) {
+              } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {
                 <tr>
-                  <td
-                    class="jv-grid-empty"
-                    [attr.colspan]="colspan()"
-                  >
+                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
                     {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}
                   </td>
                 </tr>
               } @else {
-                @for (row of pagedData(); track getRowId(row, $index)) {
+                @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {
                   <tr
                     class="jv-grid-tr"
+                    role="row"
+                    [class.jv-grid-tr-editing]="isRowEditing(row)"
+                    [class.jv-grid-tr-selected]="isSelected(row)"
+                    [attr.aria-selected]="resolvedOptions().selectable ? isSelected(row) : null"
                     (click)="onRowClick(row)"
+                    (dblclick)="onRowDblClick(row)"
                     (keydown.enter)="onRowClick(row)"
                     (keydown.space)="onRowClick($event, row)"
-                    [tabindex]="0"
+                    [tabindex]="-1"
                   >
                     @if (resolvedOptions().selectable) {
-                      <td class="jv-grid-td jv-grid-td-select">
+                      <td
+                        class="jv-grid-td jv-grid-td-select"
+                        [class.jv-grid-td-sticky-left]="resolvedOptions().stickyColumns"
+                      >
                         <input
                           type="checkbox"
                           class="jv-grid-checkbox"
@@ -20563,24 +20944,61 @@ class JvGridComponent {
                       <td
                         class="jv-grid-td"
                         [class]="col.cellClass || ''"
+                        [class.jv-grid-td-sticky-left]="isStickyLeft(col)"
+                        [class.jv-grid-td-sticky-right]="isStickyRight(col)"
+                        [class.jv-grid-td-editable]="isCellEditable(col)"
                         [style.text-align]="col.align ?? 'start'"
+                        (dblclick)="startEdit(row, col, $event)"
+                        (keydown.enter)="startEdit(row, col, $event)"
+                        [tabindex]="isCellEditable(col) ? -1 : null"
                       >
-                        @let value = getCellValue(row, col);
-                        @if (col.type === 'boolean') {
-                          @if (value) {
-                            <span class="jv-grid-boolean jv-grid-boolean-true" aria-label="true">✓</span>
+                        @if (isEditingCell(row, col)) {
+                          @if (col.editType === 'select' && col.editOptions) {
+                            <jv-select
+                              [options]="getEditOptions(col)"
+                              [modelValue]="getEditValue(row, col)"
+                              (selectionChange)="onEditValueChange(row, col, $event)"
+                            />
+                          } @else if (col.editType === 'boolean') {
+                            <input
+                              type="checkbox"
+                              class="jv-grid-checkbox"
+                              [checked]="getCellValue(row, col) === true"
+                              (change)="commitEdit(row, col, $any($event.target).checked)"
+                              [attr.aria-label]="col.header"
+                            />
                           } @else {
-                            <span class="jv-grid-boolean jv-grid-boolean-false" aria-label="false">✗</span>
+                            <input
+                              class="jv-grid-edit-input"
+                              [type]="col.editType === 'number' ? 'number' : 'text'"
+                              [value]="getEditValue(row, col)"
+                              (blur)="commitEdit(row, col, $any($event.target).value)"
+                              (keydown.enter)="commitEdit(row, col, $any($event.target).value)"
+                              (keydown.escape)="cancelEdit()"
+                              autofocus
+                            />
                           }
-                        } @else if (col.format) {
-                          {{ col.format(value, row) }}
                         } @else {
-                          {{ formatValue(value, col) }}
+                          @let value = getCellValue(row, col);
+                          @if (col.type === 'boolean') {
+                            @if (value) {
+                              <span class="jv-grid-boolean jv-grid-boolean-true" aria-label="true">✓</span>
+                            } @else {
+                              <span class="jv-grid-boolean jv-grid-boolean-false" aria-label="false">✗</span>
+                            }
+                          } @else if (col.format) {
+                            {{ col.format(value, row) }}
+                          } @else {
+                            {{ formatValue(value, col) }}
+                          }
                         }
                       </td>
                     }
                     @if (actions().length > 0) {
-                      <td class="jv-grid-td jv-grid-td-actions">
+                      <td
+                        class="jv-grid-td jv-grid-td-actions"
+                        [class.jv-grid-td-sticky-right]="resolvedOptions().stickyColumns"
+                      >
                         <div class="jv-grid-actions-group">
                           @for (action of actions(); track action.id) {
                             <jv-button
@@ -20588,8 +21006,9 @@ class JvGridComponent {
                               [icon]="action.icon ?? null"
                               [disabled]="action.disabled?.(row) ?? false"
                               [attr.aria-label]="action.label"
+                              [title]="action.label"
                               (click)="onActionClick(action, row); $event.stopPropagation()"
-                            >{{ action.label }}</jv-button>
+                            ></jv-button>
                           }
                         </div>
                       </td>
@@ -20602,10 +21021,10 @@ class JvGridComponent {
         </div>
       }
 
-      @if (resolvedOptions().pageable && totalPages() > 1 && !resolvedOptions().loading) {
-        <nav class="jv-grid-pagination" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
-          <div class="jv-grid-pagination-info">
-            {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: totalItems() }) }}
+      @if (resolvedOptions().pageable && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
+        <nav class="jv-grid-pagination" role="navigation" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
+          <div class="jv-grid-pagination-info" aria-live="polite" aria-atomic="true">
+            {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: effectiveTotalItems() }) }}
           </div>
           <div class="jv-grid-pagination-controls">
             <jv-button
@@ -20626,45 +21045,53 @@ class JvGridComponent {
               <jv-button
                 [variant]="p === pageIndex() ? 'primary' : 'outline'"
                 [attr.aria-current]="p === pageIndex() ? 'page' : null"
-                [attr.aria-label]="t('grid.pageOfTotal', { page: p + 1, total: totalPages() })"
+                [attr.aria-label]="t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })"
                 (click)="goToPage(p)"
               >{{ p + 1 }}</jv-button>
             }
             <jv-button
               variant="outline"
               icon="chevron-right"
-              [disabled]="pageIndex() >= totalPages() - 1"
+              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
               (click)="goToPage(pageIndex() + 1)"
               [attr.aria-label]="t('grid.pageNext')"
             ></jv-button>
             <jv-button
               variant="outline"
               icon="chevrons-right"
-              [disabled]="pageIndex() >= totalPages() - 1"
-              (click)="goToPage(totalPages() - 1)"
+              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
+              (click)="goToPage(effectiveTotalPages() - 1)"
               [attr.aria-label]="t('grid.pageLast')"
             ></jv-button>
           </div>
         </nav>
       }
     </div>
-  `, isInline: true, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;gap:var(--jv-spacing-md)}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-table-wrap{overflow-x:auto;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }] });
+  `, isInline: true, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvIconComponent, selector: "jv-icon", inputs: ["name", "size", "strokeWidth", "decorative", "ariaLabel"] }, { kind: "component", type: JvInputComponent, selector: "jv-input", inputs: ["type", "placeholder", "required", "invalid", "describedBy", "inputId"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-grid', standalone: true, imports: [FormsModule, JvButtonComponent, JvIconComponent, JvInputComponent], template: `
+            args: [{ selector: 'jv-grid', standalone: true, imports: [FormsModule, JvButtonComponent, JvIconComponent, JvInputComponent, JvSelectComponent], template: `
     <div class="jv-grid" role="region" [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()">
-      @if (resolvedOptions().searchable) {
+      @if (resolvedOptions().searchable || resolvedOptions().exportable) {
         <div class="jv-grid-toolbar">
-          <div class="jv-grid-search">
-            <jv-icon name="search" [size]="16" />
-            <jv-input
-              inputId="grid-search"
-              [placeholder]="t('grid.searchPlaceholder')"
-              [ngModel]="searchTerm()"
-              (ngModelChange)="onSearchInput($event)"
-            />
-          </div>
+          @if (resolvedOptions().searchable) {
+            <div class="jv-grid-search">
+              <jv-icon name="search" [size]="16" />
+              <jv-input
+                inputId="grid-search"
+                [placeholder]="t('grid.searchPlaceholder')"
+                [ngModel]="searchTerm()"
+                (ngModelChange)="onSearchInput($event)"
+              />
+            </div>
+          }
+          @if (resolvedOptions().exportable) {
+            <div class="jv-grid-export-actions">
+              <jv-button variant="outline" icon="download" (click)="exportCsv()">{{ t('grid.exportCsv') }}</jv-button>
+              <jv-button variant="outline" icon="file-spreadsheet" (click)="exportExcel()">{{ t('grid.exportExcel') }}</jv-button>
+            </div>
+          }
         </div>
       }
 
@@ -20674,17 +21101,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           <span>{{ t('grid.loading') }}</span>
         </div>
       } @else {
-        <div class="jv-grid-table-wrap">
+        <div
+          class="jv-grid-table-wrap"
+          [class.jv-grid-virtual]="resolvedOptions().virtualScroll"
+          #tableWrap
+          (scroll)="onVirtualScroll($any($event.target))"
+        >
+          @if (resolvedOptions().virtualScroll) {
+            <div class="jv-grid-virtual-spacer" [style.height.px]="virtualTotalHeight()"></div>
+          }
           <table
             class="jv-grid-table"
             role="grid"
             [attr.aria-label]="resolvedOptions().ariaLabel || gridLabel()"
+            [attr.aria-rowcount]="effectiveTotalItems()"
+            [attr.aria-colcount]="visibleColumns().length"
             [class]="densityClass()"
+            [style.position]="resolvedOptions().virtualScroll ? 'relative' : null"
+            [style.top.px]="virtualOffsetY()"
           >
             <caption class="sr-only">{{ resolvedOptions().ariaLabel || gridLabel() }}</caption>
+
+            @let hasGroupedHeaders = groupedHeaders().length > 0;
+
             <thead class="jv-grid-thead">
+              @if (hasGroupedHeaders) {
+                <tr>
+                  @if (resolvedOptions().selectable) {
+                    <th class="jv-grid-th jv-grid-th-select" scope="col" [attr.rowspan]="2">
+                      <input
+                        type="checkbox"
+                        class="jv-grid-checkbox"
+                        [checked]="allSelected()"
+                        (change)="toggleSelectAll($any($event.target).checked)"
+                        [attr.aria-label]="allSelected() ? t('grid.deselectAll') : t('grid.selectAll')"
+                        [indeterminate]="someSelected()"
+                      />
+                    </th>
+                  }
+                  @for (group of groupedHeaders(); track colKey(group)) {
+                    <th
+                      class="jv-grid-th"
+                      [class]="group.headerClass || ''"
+                      [class.jv-grid-th-sticky-left]="isStickyLeft(group)"
+                      [class.jv-grid-th-sticky-right]="isStickyRight(group)"
+                      [attr.colspan]="groupColspan(group)"
+                      scope="colgroup"
+                      [style.text-align]="group.align ?? 'start'"
+                    >
+                      <div class="jv-grid-th-content">{{ group.header }}</div>
+                    </th>
+                  }
+                  @if (actions().length > 0) {
+                    <th class="jv-grid-th jv-grid-th-actions" scope="col" [attr.rowspan]="2">
+                      <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
+                    </th>
+                  }
+                </tr>
+              }
+
               <tr>
-                @if (resolvedOptions().selectable) {
+                @if (!hasGroupedHeaders && resolvedOptions().selectable) {
                   <th class="jv-grid-th jv-grid-th-select" scope="col">
                     <input
                       type="checkbox"
@@ -20696,13 +21173,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     />
                   </th>
                 }
-                @for (col of visibleColumns(); track colKey(col)) {
+                @for (col of visibleColumns(); track colKey(col); let colIdx = $index) {
                   <th
                     class="jv-grid-th"
                     [class]="col.headerClass || ''"
                     [class.jv-grid-th-sortable]="col.sortable !== false && resolvedOptions().sortable"
+                    [class.jv-grid-th-sticky-left]="isStickyLeft(col)"
+                    [class.jv-grid-th-sticky-right]="isStickyRight(col)"
+                    [class.jv-grid-th-reorderable]="resolvedOptions().reorderableColumns"
                     [style.text-align]="col.align ?? 'start'"
-                    [style.width]="col.width || undefined"
+                    [style.width]="getColumnWidth(col)"
+                    [style.min-width]="col.minWidth || undefined"
+                    [style.max-width]="col.maxWidth || undefined"
                     scope="col"
                     [attr.aria-sort]="getAriaSort(col)"
                     [attr.aria-label]="getSortLabel(col)"
@@ -20710,6 +21192,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     (click)="toggleSort(col)"
                     (keydown.enter)="toggleSort(col)"
                     (keydown.space)="toggleSort(col, $event)"
+                    draggable="{{ resolvedOptions().reorderableColumns ? 'true' : 'false' }}"
+                    (dragstart)="onDragStart($event, colIdx)"
+                    (dragover)="onDragOver($event, colIdx)"
+                    (drop)="onDrop($event, colIdx)"
+                    (dragend)="onDragEnd($event)"
                   >
                     <div class="jv-grid-th-content">
                       <span>{{ col.header }}</span>
@@ -20722,45 +21209,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         </span>
                       }
                     </div>
+                    @if (isColumnResizable(col)) {
+                      <div
+                        class="jv-grid-resize-handle"
+                        (mousedown)="onResizeStart($event, col, colIdx)"
+                      ></div>
+                    }
                   </th>
                 }
-                @if (actions().length > 0) {
+                @if (!hasGroupedHeaders && actions().length > 0) {
                   <th class="jv-grid-th jv-grid-th-actions" scope="col">
                     <span class="sr-only">{{ t('grid.actionsLabel', { label: '' }) }}</span>
                   </th>
                 }
               </tr>
+
+              @if (resolvedOptions().columnFilters) {
+                <tr class="jv-grid-filter-row">
+                  @if (resolvedOptions().selectable) {
+                    <th class="jv-grid-th jv-grid-th-select"></th>
+                  }
+                  @for (col of visibleColumns(); track colKey(col)) {
+                    <th class="jv-grid-th jv-grid-th-filter">
+                      @if (col.filterable !== false) {
+                        <input
+                          class="jv-grid-filter-input"
+                          [placeholder]="t('grid.filterPlaceholder')"
+                          [attr.aria-label]="t('grid.filterForColumn', { column: col.header })"
+                          [ngModel]="colFilters()[colKey(col)]?.value ?? ''"
+                          (ngModelChange)="onColumnFilterChange(col, $event)"
+                        />
+                      }
+                    </th>
+                  }
+                  @if (actions().length > 0) {
+                    <th class="jv-grid-th jv-grid-th-actions"></th>
+                  }
+                </tr>
+              }
             </thead>
+
             <tbody class="jv-grid-tbody">
-              @if (pagedData().length === 0 && !searchTerm().trim()) {
+              @if (displayData().length === 0 && !searchTerm().trim() && !hasActiveFilters()) {
                 <tr>
-                  <td
-                    class="jv-grid-empty"
-                    [attr.colspan]="colspan()"
-                  >
+                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
                     {{ resolvedOptions().emptyMessage || t('grid.emptyMessage') }}
                   </td>
                 </tr>
-              } @else if (pagedData().length === 0 && searchTerm().trim()) {
+              } @else if (displayData().length === 0 && (searchTerm().trim() || hasActiveFilters())) {
                 <tr>
-                  <td
-                    class="jv-grid-empty"
-                    [attr.colspan]="colspan()"
-                  >
+                  <td class="jv-grid-empty" [attr.colspan]="colspan()">
                     {{ resolvedOptions().noResultsMessage || t('grid.noResults') }}
                   </td>
                 </tr>
               } @else {
-                @for (row of pagedData(); track getRowId(row, $index)) {
+                @for (row of displayData(); track getRowId(row, $index); let rowIdx = $index) {
                   <tr
                     class="jv-grid-tr"
+                    role="row"
+                    [class.jv-grid-tr-editing]="isRowEditing(row)"
+                    [class.jv-grid-tr-selected]="isSelected(row)"
+                    [attr.aria-selected]="resolvedOptions().selectable ? isSelected(row) : null"
                     (click)="onRowClick(row)"
+                    (dblclick)="onRowDblClick(row)"
                     (keydown.enter)="onRowClick(row)"
                     (keydown.space)="onRowClick($event, row)"
-                    [tabindex]="0"
+                    [tabindex]="-1"
                   >
                     @if (resolvedOptions().selectable) {
-                      <td class="jv-grid-td jv-grid-td-select">
+                      <td
+                        class="jv-grid-td jv-grid-td-select"
+                        [class.jv-grid-td-sticky-left]="resolvedOptions().stickyColumns"
+                      >
                         <input
                           type="checkbox"
                           class="jv-grid-checkbox"
@@ -20775,24 +21295,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                       <td
                         class="jv-grid-td"
                         [class]="col.cellClass || ''"
+                        [class.jv-grid-td-sticky-left]="isStickyLeft(col)"
+                        [class.jv-grid-td-sticky-right]="isStickyRight(col)"
+                        [class.jv-grid-td-editable]="isCellEditable(col)"
                         [style.text-align]="col.align ?? 'start'"
+                        (dblclick)="startEdit(row, col, $event)"
+                        (keydown.enter)="startEdit(row, col, $event)"
+                        [tabindex]="isCellEditable(col) ? -1 : null"
                       >
-                        @let value = getCellValue(row, col);
-                        @if (col.type === 'boolean') {
-                          @if (value) {
-                            <span class="jv-grid-boolean jv-grid-boolean-true" aria-label="true">✓</span>
+                        @if (isEditingCell(row, col)) {
+                          @if (col.editType === 'select' && col.editOptions) {
+                            <jv-select
+                              [options]="getEditOptions(col)"
+                              [modelValue]="getEditValue(row, col)"
+                              (selectionChange)="onEditValueChange(row, col, $event)"
+                            />
+                          } @else if (col.editType === 'boolean') {
+                            <input
+                              type="checkbox"
+                              class="jv-grid-checkbox"
+                              [checked]="getCellValue(row, col) === true"
+                              (change)="commitEdit(row, col, $any($event.target).checked)"
+                              [attr.aria-label]="col.header"
+                            />
                           } @else {
-                            <span class="jv-grid-boolean jv-grid-boolean-false" aria-label="false">✗</span>
+                            <input
+                              class="jv-grid-edit-input"
+                              [type]="col.editType === 'number' ? 'number' : 'text'"
+                              [value]="getEditValue(row, col)"
+                              (blur)="commitEdit(row, col, $any($event.target).value)"
+                              (keydown.enter)="commitEdit(row, col, $any($event.target).value)"
+                              (keydown.escape)="cancelEdit()"
+                              autofocus
+                            />
                           }
-                        } @else if (col.format) {
-                          {{ col.format(value, row) }}
                         } @else {
-                          {{ formatValue(value, col) }}
+                          @let value = getCellValue(row, col);
+                          @if (col.type === 'boolean') {
+                            @if (value) {
+                              <span class="jv-grid-boolean jv-grid-boolean-true" aria-label="true">✓</span>
+                            } @else {
+                              <span class="jv-grid-boolean jv-grid-boolean-false" aria-label="false">✗</span>
+                            }
+                          } @else if (col.format) {
+                            {{ col.format(value, row) }}
+                          } @else {
+                            {{ formatValue(value, col) }}
+                          }
                         }
                       </td>
                     }
                     @if (actions().length > 0) {
-                      <td class="jv-grid-td jv-grid-td-actions">
+                      <td
+                        class="jv-grid-td jv-grid-td-actions"
+                        [class.jv-grid-td-sticky-right]="resolvedOptions().stickyColumns"
+                      >
                         <div class="jv-grid-actions-group">
                           @for (action of actions(); track action.id) {
                             <jv-button
@@ -20800,8 +21357,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                               [icon]="action.icon ?? null"
                               [disabled]="action.disabled?.(row) ?? false"
                               [attr.aria-label]="action.label"
+                              [title]="action.label"
                               (click)="onActionClick(action, row); $event.stopPropagation()"
-                            >{{ action.label }}</jv-button>
+                            ></jv-button>
                           }
                         </div>
                       </td>
@@ -20814,10 +21372,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       }
 
-      @if (resolvedOptions().pageable && totalPages() > 1 && !resolvedOptions().loading) {
-        <nav class="jv-grid-pagination" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
-          <div class="jv-grid-pagination-info">
-            {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: totalItems() }) }}
+      @if (resolvedOptions().pageable && effectiveTotalPages() > 1 && !resolvedOptions().loading) {
+        <nav class="jv-grid-pagination" role="navigation" [attr.aria-label]="t('grid.paginationLabel', { label: '' })">
+          <div class="jv-grid-pagination-info" aria-live="polite" aria-atomic="true">
+            {{ t('grid.itemsShowing', { start: pageStart(), end: pageEnd(), total: effectiveTotalItems() }) }}
           </div>
           <div class="jv-grid-pagination-controls">
             <jv-button
@@ -20838,30 +21396,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
               <jv-button
                 [variant]="p === pageIndex() ? 'primary' : 'outline'"
                 [attr.aria-current]="p === pageIndex() ? 'page' : null"
-                [attr.aria-label]="t('grid.pageOfTotal', { page: p + 1, total: totalPages() })"
+                [attr.aria-label]="t('grid.pageOfTotal', { page: p + 1, total: effectiveTotalPages() })"
                 (click)="goToPage(p)"
               >{{ p + 1 }}</jv-button>
             }
             <jv-button
               variant="outline"
               icon="chevron-right"
-              [disabled]="pageIndex() >= totalPages() - 1"
+              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
               (click)="goToPage(pageIndex() + 1)"
               [attr.aria-label]="t('grid.pageNext')"
             ></jv-button>
             <jv-button
               variant="outline"
               icon="chevrons-right"
-              [disabled]="pageIndex() >= totalPages() - 1"
-              (click)="goToPage(totalPages() - 1)"
+              [disabled]="pageIndex() >= effectiveTotalPages() - 1"
+              (click)="goToPage(effectiveTotalPages() - 1)"
               [attr.aria-label]="t('grid.pageLast')"
             ></jv-button>
           </div>
         </nav>
       }
     </div>
-  `, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;gap:var(--jv-spacing-md)}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-table-wrap{overflow-x:auto;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md)}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs)}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
+  `, styles: [".jv-grid{display:flex;flex-direction:column;gap:var(--jv-spacing-md)}.jv-grid-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-search{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-grid-export-actions{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-table-wrap{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-md);position:relative}.jv-grid-virtual{max-height:600px}.jv-grid-virtual-spacer{pointer-events:none}.jv-grid-table{width:100%;border-collapse:collapse;background:var(--jv-color-surface)}.jv-grid-thead{background:var(--jv-color-surface-muted)}.jv-grid-th{padding:var(--jv-spacing-sm) var(--jv-spacing-md);font-weight:600;font-size:.875rem;color:var(--jv-color-foreground-muted);text-align:start;white-space:nowrap;border-bottom:1px solid var(--jv-color-border);-webkit-user-select:none;user-select:none;position:relative}.jv-grid-th-sortable{cursor:pointer}.jv-grid-th-sortable:hover{background:var(--jv-color-surface)}.jv-grid-th-reorderable{cursor:grab}.jv-grid-th-reorderable:active{cursor:grabbing}.jv-grid-th-sticky-left{position:sticky;left:0;z-index:2;background:var(--jv-color-surface-muted);border-right:1px solid var(--jv-color-border)}.jv-grid-th-sticky-right{position:sticky;right:0;z-index:2;background:var(--jv-color-surface-muted);border-left:1px solid var(--jv-color-border)}.jv-grid-th-content{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-sort-icon{font-size:.75rem;line-height:1}.jv-grid-th-select,.jv-grid-td-select{width:3rem;text-align:center}.jv-grid-th-actions,.jv-grid-td-actions{width:1%;white-space:nowrap}.jv-grid-td{padding:var(--jv-spacing-sm) var(--jv-spacing-md);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);border-bottom:1px solid var(--jv-color-border)}.jv-grid-td-sticky-left{position:sticky;left:0;z-index:1;background:var(--jv-color-surface);border-right:1px solid var(--jv-color-border)}.jv-grid-td-sticky-right{position:sticky;right:0;z-index:1;background:var(--jv-color-surface);border-left:1px solid var(--jv-color-border)}.jv-grid-t:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr{transition:background-color .12s ease}.jv-grid-tr:hover{background:var(--jv-color-surface-muted)}.jv-grid-tr:focus-visible{outline:2px solid var(--jv-color-primary);outline-offset:-2px}.jv-grid-tr-editing{background:var(--jv-color-surface-highlight, rgba(59, 130, 246, .05))}.jv-grid-tr-selected{background:var(--jv-color-primary-light, rgba(59, 130, 246, .08))}.jv-grid-checkbox{width:1rem;height:1rem;accent-color:var(--jv-color-primary);cursor:pointer}.jv-grid-boolean{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:999px;font-size:.75rem;font-weight:700}.jv-grid-boolean-true{background:var(--jv-color-success);color:#fff}.jv-grid-boolean-false{background:var(--jv-color-danger);color:#fff}.jv-grid-empty{padding:var(--jv-spacing-xl) var(--jv-spacing-md);text-align:center;color:var(--jv-color-foreground-muted);font-style:italic}.jv-grid-actions-group{display:flex;align-items:center;gap:var(--jv-spacing-xs)}.jv-grid-loading{display:flex;align-items:center;justify-content:center;gap:var(--jv-spacing-md);padding:var(--jv-spacing-xl);color:var(--jv-color-foreground-muted)}.jv-grid-spinner{width:1.25rem;height:1.25rem;border:2px solid var(--jv-color-border);border-right-color:var(--jv-color-primary);border-radius:999px;animation:jv-grid-spin .8s linear infinite}@keyframes jv-grid-spin{to{transform:rotate(360deg)}}.jv-grid-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-grid-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-grid-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-xs);flex-wrap:wrap}@media(max-width:640px){.jv-grid-pagination{flex-direction:column;align-items:stretch;gap:var(--jv-spacing-sm)}.jv-grid-pagination-info{text-align:center}.jv-grid-pagination-controls{justify-content:center}.jv-grid-toolbar{flex-direction:column;align-items:stretch}.jv-grid-search{width:100%}.jv-grid-export-actions{justify-content:stretch}.jv-grid-export-actions jv-button{flex:1}}.jv-grid-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;z-index:3}.jv-grid-resize-handle:hover,.jv-grid-resize-handle:active{background:var(--jv-color-primary)}.jv-grid-filter-row .jv-grid-th{padding:var(--jv-spacing-xs) var(--jv-spacing-sm)}.jv-grid-filter-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-border);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:.8rem;box-sizing:border-box}.jv-grid-td-editable{cursor:pointer}.jv-grid-td-editable:hover{box-shadow:inset 0 0 0 1px var(--jv-color-primary)}.jv-grid-edit-input{width:100%;min-height:var(--jv-density-control-height);padding:0 var(--jv-spacing-sm);border:1px solid var(--jv-color-primary);border-radius:var(--jv-radius-sm);background:var(--jv-color-surface);color:var(--jv-color-foreground);font-size:var(--jv-density-font-size);box-sizing:border-box}.jv-grid-edit-input:focus{outline:2px solid var(--jv-color-primary);outline-offset:-1px}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], columnFilter: [{ type: i0.Output, args: ["columnFilter"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }], rowEdit: [{ type: i0.Output, args: ["rowEdit"] }] } });
 
 class JvPaginationComponent {
     translationService = inject(JvTranslationService);
@@ -20900,130 +21458,130 @@ class JvPaginationComponent {
         this.pageChange.emit({ pageIndex: 0, pageSize: Number(value) });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvPaginationComponent, isStandalone: true, selector: "jv-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
-    <nav class="jv-pagination" role="navigation" [attr.aria-label]="t('pagination.pageLabel', { page: pageIndex() + 1 })">
-      <div class="jv-pagination-info">
-        <span>{{ t('pagination.itemsShowing', { start: pageStart(), end: pageEnd(), total: totalItems() }) }}</span>
-      </div>
-
-      <div class="jv-pagination-controls">
-        <div class="jv-pagination-size">
-          <label class="jv-pagination-size-label">{{ t('pagination.itemsPerPage') }}</label>
-          <jv-select
-            [options]="pageSizeOptionsList()"
-            [modelValue]="pageSizeStr()"
-            (selectionChange)="onPageSizeChange($event)"
-          />
-        </div>
-
-        <div class="jv-pagination-buttons">
-          <jv-button
-            variant="outline"
-            icon="chevrons-left"
-            [disabled]="pageIndex() === 0"
-            (click)="goToPage(0)"
-            [attr.aria-label]="t('pagination.firstPage')"
-          />
-
-          <jv-button
-            variant="outline"
-            icon="chevron-left"
-            [disabled]="pageIndex() === 0"
-            (click)="goToPage(pageIndex() - 1)"
-            [attr.aria-label]="t('pagination.prevPage')"
-          />
-
-          @for (p of pageRange(); track p) {
-            <jv-button
-              [variant]="p === pageIndex() ? 'primary' : 'outline'"
-              [attr.aria-current]="p === pageIndex() ? 'page' : null"
-              [attr.aria-label]="t('pagination.pageLabel', { page: p + 1 })"
-              (click)="goToPage(p)"
-            >{{ p + 1 }}</jv-button>
-          }
-
-          <jv-button
-            variant="outline"
-            icon="chevron-right"
-            [disabled]="pageIndex() >= totalPages() - 1"
-            (click)="goToPage(pageIndex() + 1)"
-            [attr.aria-label]="t('pagination.nextPage')"
-          />
-
-          <jv-button
-            variant="outline"
-            icon="chevrons-right"
-            [disabled]="pageIndex() >= totalPages() - 1"
-            (click)="goToPage(totalPages() - 1)"
-            [attr.aria-label]="t('pagination.lastPage')"
-          />
-        </div>
-      </div>
-    </nav>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JvPaginationComponent, isStandalone: true, selector: "jv-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: `
+    <nav class="jv-pagination" role="navigation" [attr.aria-label]="t('pagination.pageLabel', { page: pageIndex() + 1 })">
+      <div class="jv-pagination-info">
+        <span>{{ t('pagination.itemsShowing', { start: pageStart(), end: pageEnd(), total: totalItems() }) }}</span>
+      </div>
+
+      <div class="jv-pagination-controls">
+        <div class="jv-pagination-size">
+          <label class="jv-pagination-size-label">{{ t('pagination.itemsPerPage') }}</label>
+          <jv-select
+            [options]="pageSizeOptionsList()"
+            [modelValue]="pageSizeStr()"
+            (selectionChange)="onPageSizeChange($event)"
+          />
+        </div>
+
+        <div class="jv-pagination-buttons">
+          <jv-button
+            variant="outline"
+            icon="chevrons-left"
+            [disabled]="pageIndex() === 0"
+            (click)="goToPage(0)"
+            [attr.aria-label]="t('pagination.firstPage')"
+          />
+
+          <jv-button
+            variant="outline"
+            icon="chevron-left"
+            [disabled]="pageIndex() === 0"
+            (click)="goToPage(pageIndex() - 1)"
+            [attr.aria-label]="t('pagination.prevPage')"
+          />
+
+          @for (p of pageRange(); track p) {
+            <jv-button
+              [variant]="p === pageIndex() ? 'primary' : 'outline'"
+              [attr.aria-current]="p === pageIndex() ? 'page' : null"
+              [attr.aria-label]="t('pagination.pageLabel', { page: p + 1 })"
+              (click)="goToPage(p)"
+            >{{ p + 1 }}</jv-button>
+          }
+
+          <jv-button
+            variant="outline"
+            icon="chevron-right"
+            [disabled]="pageIndex() >= totalPages() - 1"
+            (click)="goToPage(pageIndex() + 1)"
+            [attr.aria-label]="t('pagination.nextPage')"
+          />
+
+          <jv-button
+            variant="outline"
+            icon="chevrons-right"
+            [disabled]="pageIndex() >= totalPages() - 1"
+            (click)="goToPage(totalPages() - 1)"
+            [attr.aria-label]="t('pagination.lastPage')"
+          />
+        </div>
+      </div>
+    </nav>
   `, isInline: true, styles: [".jv-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-size{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-pagination-size-label{font-size:.875rem;color:var(--jv-color-foreground-muted);white-space:nowrap}.jv-pagination-size jv-select{width:auto;min-width:4.5rem}.jv-pagination-buttons{display:flex;align-items:center;gap:var(--jv-spacing-xs)}\n"], dependencies: [{ kind: "component", type: JvButtonComponent, selector: "jv-button", inputs: ["type", "variant", "icon", "iconPosition", "loading", "disabled"] }, { kind: "component", type: JvSelectComponent, selector: "jv-select", inputs: ["options", "placeholder", "required", "invalid", "describedBy", "inputId", "modelValue"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JvPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jv-pagination', standalone: true, imports: [JvButtonComponent, JvSelectComponent], template: `
-    <nav class="jv-pagination" role="navigation" [attr.aria-label]="t('pagination.pageLabel', { page: pageIndex() + 1 })">
-      <div class="jv-pagination-info">
-        <span>{{ t('pagination.itemsShowing', { start: pageStart(), end: pageEnd(), total: totalItems() }) }}</span>
-      </div>
-
-      <div class="jv-pagination-controls">
-        <div class="jv-pagination-size">
-          <label class="jv-pagination-size-label">{{ t('pagination.itemsPerPage') }}</label>
-          <jv-select
-            [options]="pageSizeOptionsList()"
-            [modelValue]="pageSizeStr()"
-            (selectionChange)="onPageSizeChange($event)"
-          />
-        </div>
-
-        <div class="jv-pagination-buttons">
-          <jv-button
-            variant="outline"
-            icon="chevrons-left"
-            [disabled]="pageIndex() === 0"
-            (click)="goToPage(0)"
-            [attr.aria-label]="t('pagination.firstPage')"
-          />
-
-          <jv-button
-            variant="outline"
-            icon="chevron-left"
-            [disabled]="pageIndex() === 0"
-            (click)="goToPage(pageIndex() - 1)"
-            [attr.aria-label]="t('pagination.prevPage')"
-          />
-
-          @for (p of pageRange(); track p) {
-            <jv-button
-              [variant]="p === pageIndex() ? 'primary' : 'outline'"
-              [attr.aria-current]="p === pageIndex() ? 'page' : null"
-              [attr.aria-label]="t('pagination.pageLabel', { page: p + 1 })"
-              (click)="goToPage(p)"
-            >{{ p + 1 }}</jv-button>
-          }
-
-          <jv-button
-            variant="outline"
-            icon="chevron-right"
-            [disabled]="pageIndex() >= totalPages() - 1"
-            (click)="goToPage(pageIndex() + 1)"
-            [attr.aria-label]="t('pagination.nextPage')"
-          />
-
-          <jv-button
-            variant="outline"
-            icon="chevrons-right"
-            [disabled]="pageIndex() >= totalPages() - 1"
-            (click)="goToPage(totalPages() - 1)"
-            [attr.aria-label]="t('pagination.lastPage')"
-          />
-        </div>
-      </div>
-    </nav>
+            args: [{ selector: 'jv-pagination', standalone: true, imports: [JvButtonComponent, JvSelectComponent], template: `
+    <nav class="jv-pagination" role="navigation" [attr.aria-label]="t('pagination.pageLabel', { page: pageIndex() + 1 })">
+      <div class="jv-pagination-info">
+        <span>{{ t('pagination.itemsShowing', { start: pageStart(), end: pageEnd(), total: totalItems() }) }}</span>
+      </div>
+
+      <div class="jv-pagination-controls">
+        <div class="jv-pagination-size">
+          <label class="jv-pagination-size-label">{{ t('pagination.itemsPerPage') }}</label>
+          <jv-select
+            [options]="pageSizeOptionsList()"
+            [modelValue]="pageSizeStr()"
+            (selectionChange)="onPageSizeChange($event)"
+          />
+        </div>
+
+        <div class="jv-pagination-buttons">
+          <jv-button
+            variant="outline"
+            icon="chevrons-left"
+            [disabled]="pageIndex() === 0"
+            (click)="goToPage(0)"
+            [attr.aria-label]="t('pagination.firstPage')"
+          />
+
+          <jv-button
+            variant="outline"
+            icon="chevron-left"
+            [disabled]="pageIndex() === 0"
+            (click)="goToPage(pageIndex() - 1)"
+            [attr.aria-label]="t('pagination.prevPage')"
+          />
+
+          @for (p of pageRange(); track p) {
+            <jv-button
+              [variant]="p === pageIndex() ? 'primary' : 'outline'"
+              [attr.aria-current]="p === pageIndex() ? 'page' : null"
+              [attr.aria-label]="t('pagination.pageLabel', { page: p + 1 })"
+              (click)="goToPage(p)"
+            >{{ p + 1 }}</jv-button>
+          }
+
+          <jv-button
+            variant="outline"
+            icon="chevron-right"
+            [disabled]="pageIndex() >= totalPages() - 1"
+            (click)="goToPage(pageIndex() + 1)"
+            [attr.aria-label]="t('pagination.nextPage')"
+          />
+
+          <jv-button
+            variant="outline"
+            icon="chevrons-right"
+            [disabled]="pageIndex() >= totalPages() - 1"
+            (click)="goToPage(totalPages() - 1)"
+            [attr.aria-label]="t('pagination.lastPage')"
+          />
+        </div>
+      </div>
+    </nav>
   `, styles: [".jv-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-info{font-size:.875rem;color:var(--jv-color-foreground-muted)}.jv-pagination-controls{display:flex;align-items:center;gap:var(--jv-spacing-md);flex-wrap:wrap}.jv-pagination-size{display:flex;align-items:center;gap:var(--jv-spacing-sm)}.jv-pagination-size-label{font-size:.875rem;color:var(--jv-color-foreground-muted);white-space:nowrap}.jv-pagination-size jv-select{width:auto;min-width:4.5rem}.jv-pagination-buttons{display:flex;align-items:center;gap:var(--jv-spacing-xs)}\n"] }]
         }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });