@svgrid/grid 2.5.2 → 2.6.2

package/dist/filtering/excel-filters.js

@@ -118,60 +118,90 @@ function scanInTokens(value) {
     }
     return { tokens, trailing: take() };
 }
-export function applyExcelFilter(cellValue, filter, options) {
-    const text = String(cellValue ?? '');
-    const normalizedText = normalizeForFilter(text, options?.locale);
-    const normalizedValue = normalizeForFilter(String(filter.value ?? ''), options?.locale);
+/**
+ * Compile a filter once, then test many rows against it.
+ *
+ * Everything that depends only on the FILTER - folding the needle, splitting
+ * `in` tokens, building the regex, coercing range endpoints - happens here,
+ * so the per-row closure does the minimum. Filtering 100k rows used to redo
+ * all of it 100k times.
+ *
+ * `applyExcelFilter` is defined in terms of this, so there is exactly one
+ * copy of the operator semantics.
+ */
+export function compileExcelFilter(filter, options) {
+    const locale = options?.locale;
+    const fold = (v) => normalizeForFilter(String(v ?? ''), locale);
+    const needle = fold(filter.value);
     switch (filter.operator) {
         case 'contains':
-            return normalizedText.includes(normalizedValue);
+            return (cellValue) => fold(cellValue).includes(needle);
         case 'notContains':
             // An empty needle is no constraint (mirrors `contains` returning true),
             // so nothing is excluded until the user types something.
-            return normalizedValue === '' || !normalizedText.includes(normalizedValue);
+            if (needle === '')
+                return () => true;
+            return (cellValue) => !fold(cellValue).includes(needle);
         case 'equals':
-            return normalizedText === normalizedValue;
+            return (cellValue) => fold(cellValue) === needle;
         case 'notEquals':
-            return normalizedValue === '' || normalizedText !== normalizedValue;
+            if (needle === '')
+                return () => true;
+            return (cellValue) => fold(cellValue) !== needle;
         case 'startsWith':
-            return normalizedText.startsWith(normalizedValue);
+            return (cellValue) => fold(cellValue).startsWith(needle);
         case 'endsWith':
-            return normalizedText.endsWith(normalizedValue);
+            return (cellValue) => fold(cellValue).endsWith(needle);
         case 'regex': {
             // Case-insensitive by default (matches the accent/case-folded feel of
             // the other text operators). An invalid pattern matches nothing rather
             // than throwing, so a half-typed regex never crashes the row model.
+            // Note this tests the RAW text, not the folded text.
             const pattern = String(filter.value ?? '');
             if (!pattern)
-                return true;
+                return () => true;
+            let re;
             try {
-                return new RegExp(pattern, 'i').test(text);
+                re = new RegExp(pattern, 'i');
             }
             catch {
-                return false;
+                return () => false;
             }
+            return (cellValue) => re.test(String(cellValue ?? ''));
         }
         case 'in':
         case 'notIn': {
             const tokens = splitInTokens(filter.value);
             if (tokens.length === 0)
-                return true;
-            const hit = tokens.some((t) => normalizeForFilter(t, options?.locale) === normalizedText);
-            return filter.operator === 'in' ? hit : !hit;
+                return () => true;
+            // A Set of pre-folded tokens turns the old per-row `tokens.some(...)`
+            // (which re-folded every token for every row) into one lookup.
+            const wanted = new Set(tokens.map((t) => normalizeForFilter(t, locale)));
+            if (filter.operator === 'in')
+                return (cellValue) => wanted.has(fold(cellValue));
+            return (cellValue) => !wanted.has(fold(cellValue));
         }
         case 'greaterThan': {
-            const a = Number(cellValue);
             const b = Number(filter.value);
-            if (Number.isFinite(a) && Number.isFinite(b))
-                return a > b;
-            return String(cellValue ?? '') > String(filter.value ?? '');
+            const bFinite = Number.isFinite(b);
+            const bText = String(filter.value ?? '');
+            return (cellValue) => {
+                const a = Number(cellValue);
+                if (bFinite && Number.isFinite(a))
+                    return a > b;
+                return String(cellValue ?? '') > bText;
+            };
         }
         case 'lessThan': {
-            const a = Number(cellValue);
             const b = Number(filter.value);
-            if (Number.isFinite(a) && Number.isFinite(b))
-                return a < b;
-            return String(cellValue ?? '') < String(filter.value ?? '');
+            const bFinite = Number.isFinite(b);
+            const bText = String(filter.value ?? '');
+            return (cellValue) => {
+                const a = Number(cellValue);
+                if (bFinite && Number.isFinite(a))
+                    return a < b;
+                return String(cellValue ?? '') < bText;
+            };
         }
         case 'between': {
             // Two paths: numeric (coerce both endpoints with the historical
@@ -181,21 +211,26 @@ export function applyExcelFilter(cellValue, filter, options) {
             // see the historical inclusive-range behaviour.
             const lo = filter.value == null ? 0 : Number(filter.value);
             const hi = filter.valueTo == null ? 0 : Number(filter.valueTo);
-            const a = Number(cellValue ?? 0);
-            if (Number.isFinite(a) && Number.isFinite(lo) && Number.isFinite(hi)) {
-                return a >= lo && a <= hi;
-            }
+            const rangeFinite = Number.isFinite(lo) && Number.isFinite(hi);
             // Either endpoint is non-numeric (ISO date string, etc). Compare
             // lexicographically - YYYY-MM-DD orders chronologically so the
             // result matches user intent.
-            const s = String(cellValue ?? '');
             const sl = String(filter.value ?? '');
             const sh = String(filter.valueTo ?? '');
-            return s >= sl && s <= sh;
+            return (cellValue) => {
+                const a = Number(cellValue ?? 0);
+                if (rangeFinite && Number.isFinite(a))
+                    return a >= lo && a <= hi;
+                const s = String(cellValue ?? '');
+                return s >= sl && s <= sh;
+            };
         }
         case 'isBlank':
-            return text.trim().length === 0;
+            return (cellValue) => String(cellValue ?? '').trim().length === 0;
         case 'isNotBlank':
-            return text.trim().length > 0;
+            return (cellValue) => String(cellValue ?? '').trim().length > 0;
     }
 }
+export function applyExcelFilter(cellValue, filter, options) {
+    return compileExcelFilter(filter, options)(cellValue);
+}

package/dist/index.d.ts

@@ -214,7 +214,7 @@ export { createColumnVirtualizer } from './virtualization/column-virtualizer';
 export type { VirtualItem, VirtualizerOptions, VirtualizerState } from './virtualization/types';
 export type { SvGridApi, SvGridFilterOperator, SvGridWrapperProps } from './svgrid-wrapper.types';
 export { parseEditorValue, normalizeEditorOptions, type CellEditorType, type CellEditorOption, } from './editors/cell-editors';
-export { applyExcelFilter, normalizeForFilter, splitInTokens, joinInTokens, trailingInToken, type ExcelFilter, type ExcelFilterOperator, type ExcelFilterOptions, } from './filtering/excel-filters';
+export { applyExcelFilter, compileExcelFilter, normalizeForFilter, splitInTokens, joinInTokens, trailingInToken, type CompiledExcelFilter, type ExcelFilter, type ExcelFilterOperator, type ExcelFilterOptions, } from './filtering/excel-filters';
 export { getGridCellDomId, getGridCellA11yProps, getGridHeaderA11yProps, getGridRootA11yProps, getGridRowA11yProps, type GridCellA11yInput, type GridColumnA11yInput, type GridSortDirection, } from './a11y';
 /**
  * Compatibility alias for teams migrating from `createTable`.

package/dist/index.js

@@ -249,7 +249,7 @@ export { createVirtualizer } from './virtualization/virtualizer';
 export { createSvelteVirtualizer } from './virtualization/svelte-virtualizer.svelte';
 export { createColumnVirtualizer } from './virtualization/column-virtualizer';
 export { parseEditorValue, normalizeEditorOptions, } from './editors/cell-editors';
-export { applyExcelFilter, normalizeForFilter, splitInTokens, joinInTokens, trailingInToken, } from './filtering/excel-filters';
+export { applyExcelFilter, compileExcelFilter, normalizeForFilter, splitInTokens, joinInTokens, trailingInToken, } from './filtering/excel-filters';
 export { getGridCellDomId, getGridCellA11yProps, getGridHeaderA11yProps, getGridRootA11yProps, getGridRowA11yProps, } from './a11y';
 /**
  * Compatibility alias for teams migrating from `createTable`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "2.5.2",
+  "version": "2.6.2",
   "description": "Svelte 5-native data grid and data table. Headless-first engine with virtual scrolling for 100k+ rows, Excel-style filtering, inline editing, grouping, tree data, pivot, and server-side data. Drop-in <SvGrid> component. TypeScript, SSR-ready.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",

package/src/SvCountryInput.svelte

@@ -37,6 +37,7 @@
     name,
     size = 'md',
     ariaLabel,
+    block = false,
     invalid = false,
     required = false,
     error,
@@ -93,7 +94,7 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...ci.triggerProps()}>
+  <button bind:this={triggerEl} class="sv-country sv-country--{size}" class:is-block={block} class:is-open={ci.open} class:is-disabled={disabled} class:is-invalid={invalid} {...ci.triggerProps()}>
     {#if selected}
       <span class="sv-country__flag" aria-hidden="true">{flagEmoji(selected.code)}</span>
       <span class="sv-country__name">{selected.name}</span>
@@ -157,4 +158,6 @@
   :global(.sv-country__opt) { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
   :global(.sv-country__opt.is-active) { background: var(--sg-row-hover-bg, #f1f5f9); }
   :global(.sv-country__opt.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-country.is-block { width: 100%; max-width: 100%; }
 </style>

package/src/SvGrid.controller.svelte.ts

@@ -1,6 +1,7 @@
 import {
-    applyExcelFilter,
     applyGroupAggregate,
+    compileExcelFilter,
+    type CompiledExcelFilter,
     normalizeForFilter,
     createColumnVirtualizer,
     createCoreRowModel,
@@ -1270,15 +1271,17 @@ export function createSvGridController<
       if (op === "between") return value.trim().length > 0 && (valueTo ?? "").trim().length > 0;
       return value.trim().length > 0;
     };
-    const evalCond = (
-      cellValue: unknown,
+    // Compile a condition ONCE per filter change rather than once per row.
+    // Folding the needle, splitting `in` tokens and building a regex all
+    // depend only on the filter, so over 100k rows this used to be 100k
+    // redundant passes.
+    const compileCond = (
       columnId: string,
       op: FilterOperator,
       value: string,
       valueTo?: string,
-    ): boolean =>
-      applyExcelFilter(
-        cellValue,
+    ): CompiledExcelFilter =>
+      compileExcelFilter(
         { id: columnId, operator: op, value, valueTo: op === "between" ? valueTo : undefined },
         { locale: (props.filterLocale ?? props.localization?.locale) },
       );
@@ -1289,18 +1292,26 @@ export function createSvGridController<
       return a || b;
     });
     if (menuFilters.length) {
+      // Hoisted out of the row loop: each column's (up to two) conditions
+      // become compiled predicates before a single row is tested.
+      const compiledMenuFilters = menuFilters.map(([columnId, f]) => ({
+        columnId,
+        join: f.join,
+        a: condActive(f.operator, f.value, f.valueTo)
+          ? compileCond(columnId, f.operator, f.value, f.valueTo)
+          : null,
+        b: !!f.operator2 && condActive(f.operator2, f.value2 ?? "", f.valueTo2)
+          ? compileCond(columnId, f.operator2 as FilterOperator, f.value2 ?? "", f.valueTo2)
+          : null,
+      }));
       rows = rows.filter((row) =>
-        menuFilters.every(([columnId, f]) => {
+        compiledMenuFilters.every(({ columnId, join, a, b }) => {
           const cellValue = getRowColumnValue(row, columnId);
-          const aActive = condActive(f.operator, f.value, f.valueTo);
-          const bActive = !!f.operator2 && condActive(f.operator2, f.value2 ?? "", f.valueTo2);
-          const ra = aActive ? evalCond(cellValue, columnId, f.operator, f.value, f.valueTo) : null;
-          const rb = bActive
-            ? evalCond(cellValue, columnId, f.operator2 as FilterOperator, f.value2 ?? "", f.valueTo2)
-            : null;
+          const ra = a ? a(cellValue) : null;
+          const rb = b ? b(cellValue) : null;
           if (ra === null) return rb ?? true;
           if (rb === null) return ra;
-          return f.join === "OR" ? ra || rb : ra && rb;
+          return join === "OR" ? ra || rb : ra && rb;
         }),
       );
     }

package/src/SvSlider.svelte

@@ -44,6 +44,7 @@
     orientation = 'horizontal',
     name,
     ariaLabel,
+    block = false,
     invalid = false,
     required = false,
     error,
@@ -109,7 +110,7 @@
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
 <div
-  class="sv-slider sv-slider--{orientation} sv-slider--{size}"
+  class="sv-slider sv-slider--{orientation} sv-slider--{size}" class:is-block={block}
   class:is-disabled={disabled}
   class:is-readonly={readonly}
   dir={resolvedDir}
@@ -197,4 +198,6 @@
   .sv-slider__tick { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--sg-muted, #94a3b8); }
   .sv-slider--horizontal .sv-slider__tick { inset-inline-start: var(--p); top: 50%; transform: translate(-50%, -50%); }
   .sv-slider--vertical .sv-slider__tick { bottom: var(--p); left: 50%; transform: translate(-50%, 50%); }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-slider--horizontal.is-block { width: 100%; max-width: 100%; }
 </style>

package/src/SvTagsInput.svelte

@@ -36,6 +36,7 @@
     size = 'md',
     name,
     ariaLabel,
+    block = false,
     invalid = false,
     required = false,
     error,
@@ -69,7 +70,7 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-tags sv-tags--{size}" class:is-disabled={disabled} class:is-invalid={invalid} {...ti.rootProps()}>
+  <div class="sv-tags sv-tags--{size}" class:is-block={block} class:is-disabled={disabled} class:is-invalid={invalid} {...ti.rootProps()}>
     {#each value as tag, i (tag + i)}
       <span class="sv-tags__chip" {...ti.tagProps(i)}>
         <span class="sv-tags__label">{tag}</span>
@@ -109,4 +110,6 @@
   .sv-tags__x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0.7; }
   .sv-tags__x:hover { opacity: 1; }
   .sv-tags__input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; color: inherit; font: inherit; font-size: var(--_fs); height: 24px; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-tags.is-block { width: 100%; max-width: 100%; }
 </style>

package/src/editor-contract.ts

@@ -41,6 +41,12 @@ export type SvEditorProps = {
   required?: boolean
   /** Marks the control invalid (`aria-invalid` + error styling). */
   invalid?: boolean
+  /**
+   * Fill the container instead of the control's own default width. A default
+   * width is right for a control sitting on its own; in a form grid a row of
+   * inputs each stopping at a different width reads as broken.
+   */
+  block?: boolean
   /** Error message; when set it is announced via `aria-describedby` and shown. */
   error?: string
   /** Visible field label, rendered above the control and wired via `for`/`id`. */

package/src/filtering/excel-filters.ts

@@ -159,61 +159,89 @@ function scanInTokens(value: unknown): { tokens: string[]; trailing: string } {
   return { tokens, trailing: take() }
 }
 
-export function applyExcelFilter(
-  cellValue: unknown,
+/** A filter with its needle-side work already done. Call per row. */
+export type CompiledExcelFilter = (cellValue: unknown) => boolean
+
+/**
+ * Compile a filter once, then test many rows against it.
+ *
+ * Everything that depends only on the FILTER - folding the needle, splitting
+ * `in` tokens, building the regex, coercing range endpoints - happens here,
+ * so the per-row closure does the minimum. Filtering 100k rows used to redo
+ * all of it 100k times.
+ *
+ * `applyExcelFilter` is defined in terms of this, so there is exactly one
+ * copy of the operator semantics.
+ */
+export function compileExcelFilter(
   filter: ExcelFilter,
   options?: ExcelFilterOptions,
-) {
-  const text = String(cellValue ?? '')
-  const normalizedText = normalizeForFilter(text, options?.locale)
-  const normalizedValue = normalizeForFilter(String(filter.value ?? ''), options?.locale)
+): CompiledExcelFilter {
+  const locale = options?.locale
+  const fold = (v: unknown) => normalizeForFilter(String(v ?? ''), locale)
+  const needle = fold(filter.value)
+
   switch (filter.operator) {
     case 'contains':
-      return normalizedText.includes(normalizedValue)
+      return (cellValue) => fold(cellValue).includes(needle)
     case 'notContains':
       // An empty needle is no constraint (mirrors `contains` returning true),
       // so nothing is excluded until the user types something.
-      return normalizedValue === '' || !normalizedText.includes(normalizedValue)
+      if (needle === '') return () => true
+      return (cellValue) => !fold(cellValue).includes(needle)
     case 'equals':
-      return normalizedText === normalizedValue
+      return (cellValue) => fold(cellValue) === needle
     case 'notEquals':
-      return normalizedValue === '' || normalizedText !== normalizedValue
+      if (needle === '') return () => true
+      return (cellValue) => fold(cellValue) !== needle
     case 'startsWith':
-      return normalizedText.startsWith(normalizedValue)
+      return (cellValue) => fold(cellValue).startsWith(needle)
     case 'endsWith':
-      return normalizedText.endsWith(normalizedValue)
+      return (cellValue) => fold(cellValue).endsWith(needle)
     case 'regex': {
       // Case-insensitive by default (matches the accent/case-folded feel of
       // the other text operators). An invalid pattern matches nothing rather
       // than throwing, so a half-typed regex never crashes the row model.
+      // Note this tests the RAW text, not the folded text.
       const pattern = String(filter.value ?? '')
-      if (!pattern) return true
+      if (!pattern) return () => true
+      let re: RegExp
       try {
-        return new RegExp(pattern, 'i').test(text)
+        re = new RegExp(pattern, 'i')
       } catch {
-        return false
+        return () => false
       }
+      return (cellValue) => re.test(String(cellValue ?? ''))
     }
     case 'in':
     case 'notIn': {
       const tokens = splitInTokens(filter.value)
-      if (tokens.length === 0) return true
-      const hit = tokens.some(
-        (t) => normalizeForFilter(t, options?.locale) === normalizedText,
-      )
-      return filter.operator === 'in' ? hit : !hit
+      if (tokens.length === 0) return () => true
+      // A Set of pre-folded tokens turns the old per-row `tokens.some(...)`
+      // (which re-folded every token for every row) into one lookup.
+      const wanted = new Set(tokens.map((t) => normalizeForFilter(t, locale)))
+      if (filter.operator === 'in') return (cellValue) => wanted.has(fold(cellValue))
+      return (cellValue) => !wanted.has(fold(cellValue))
     }
     case 'greaterThan': {
-      const a = Number(cellValue)
       const b = Number(filter.value)
-      if (Number.isFinite(a) && Number.isFinite(b)) return a > b
-      return String(cellValue ?? '') > String(filter.value ?? '')
+      const bFinite = Number.isFinite(b)
+      const bText = String(filter.value ?? '')
+      return (cellValue) => {
+        const a = Number(cellValue)
+        if (bFinite && Number.isFinite(a)) return a > b
+        return String(cellValue ?? '') > bText
+      }
     }
     case 'lessThan': {
-      const a = Number(cellValue)
       const b = Number(filter.value)
-      if (Number.isFinite(a) && Number.isFinite(b)) return a < b
-      return String(cellValue ?? '') < String(filter.value ?? '')
+      const bFinite = Number.isFinite(b)
+      const bText = String(filter.value ?? '')
+      return (cellValue) => {
+        const a = Number(cellValue)
+        if (bFinite && Number.isFinite(a)) return a < b
+        return String(cellValue ?? '') < bText
+      }
     }
     case 'between': {
       // Two paths: numeric (coerce both endpoints with the historical
@@ -223,21 +251,30 @@ export function applyExcelFilter(
       // see the historical inclusive-range behaviour.
       const lo = filter.value   == null ? 0 : Number(filter.value)
       const hi = filter.valueTo == null ? 0 : Number(filter.valueTo)
-      const a  = Number(cellValue ?? 0)
-      if (Number.isFinite(a) && Number.isFinite(lo) && Number.isFinite(hi)) {
-        return a >= lo && a <= hi
-      }
+      const rangeFinite = Number.isFinite(lo) && Number.isFinite(hi)
       // Either endpoint is non-numeric (ISO date string, etc). Compare
       // lexicographically - YYYY-MM-DD orders chronologically so the
       // result matches user intent.
-      const s  = String(cellValue ?? '')
       const sl = String(filter.value ?? '')
       const sh = String(filter.valueTo ?? '')
-      return s >= sl && s <= sh
+      return (cellValue) => {
+        const a = Number(cellValue ?? 0)
+        if (rangeFinite && Number.isFinite(a)) return a >= lo && a <= hi
+        const s = String(cellValue ?? '')
+        return s >= sl && s <= sh
+      }
     }
     case 'isBlank':
-      return text.trim().length === 0
+      return (cellValue) => String(cellValue ?? '').trim().length === 0
     case 'isNotBlank':
-      return text.trim().length > 0
+      return (cellValue) => String(cellValue ?? '').trim().length > 0
   }
 }
+
+export function applyExcelFilter(
+  cellValue: unknown,
+  filter: ExcelFilter,
+  options?: ExcelFilterOptions,
+) {
+  return compileExcelFilter(filter, options)(cellValue)
+}

package/src/index.ts

@@ -699,10 +699,12 @@ export {
 } from './editors/cell-editors'
 export {
   applyExcelFilter,
+  compileExcelFilter,
   normalizeForFilter,
   splitInTokens,
   joinInTokens,
   trailingInToken,
+  type CompiledExcelFilter,
   type ExcelFilter,
   type ExcelFilterOperator,
   type ExcelFilterOptions,

package/src/svgrid.wrapper.test.ts

@@ -55,7 +55,9 @@ describe('SvGrid wrapper', () => {
     expect(source).toContain('editorType === "number"')
     expect(source).toContain('editorType === "date"')
     expect(source).toContain('editorType === "checkbox"')
-    expect(source).toContain('applyExcelFilter')
+    // The controller compiles each condition once per filter change rather
+    // than calling applyExcelFilter per row; both share one switch body.
+    expect(source).toContain('compileExcelFilter')
     expect(source).toContain('showFilterRow')
   })
 })