@svgrid/grid 2.6.21 → 2.6.23

package/src/SvGridCellEditor.svelte

@@ -26,6 +26,8 @@
     getEditableInputValue,
     getEditorClass,
     getEditorInputType,
+    getCellEditorInputType,
+    isNumericEditorInput,
     timeStringToDate,
     toValueArray,
   } from "./SvGrid.helpers";
@@ -75,6 +77,22 @@
   const focusOnMount = $derived(ctrl.focusOnMount);
   const toggleCheckboxWithKeyboard = $derived(ctrl.toggleCheckboxWithKeyboard);
 
+  /**
+   * Focus a button-based editor on mount. `focusOnMount` is for text controls -
+   * it also places the caret - and the checkbox and rating editors, being
+   * <button>s, had no equivalent and so never took focus at all. Their own key
+   * handlers therefore never fired: neither could be operated from the
+   * keyboard, and Escape never reached them, so the cell stayed stuck in edit
+   * mode until the user clicked somewhere else.
+   *
+   * `enabled` lets a group of buttons (the rating stars) pick which one holds
+   * focus, since an action cannot be applied conditionally.
+   */
+  function focusControlOnMount(node: HTMLElement, enabled: boolean = true) {
+    if (!enabled) return;
+    requestAnimationFrame(() => node.focus({ preventScroll: true }));
+  }
+
   function fullRowKeydown(e: KeyboardEvent) {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -337,6 +355,7 @@
       })}
     {:else if ctrl.editingCell?.editorType === "checkbox"}
       <button
+        use:focusControlOnMount
         type="button"
         class="sv-grid-checkbox"
         role="checkbox"
@@ -350,15 +369,23 @@
             : ctrl.editingCell;
           saveEditingCell();
         }}
-        onkeydown={(event) =>
-          toggleCheckboxWithKeyboard(event, () => {
-            event.stopPropagation();
-            const nextValue = !ctrl.editingCell?.value;
-            ctrl.editingCell = ctrl.editingCell
-              ? { ...ctrl.editingCell, value: nextValue }
-              : ctrl.editingCell;
-            saveEditingCell();
-          })}
+        onkeydown={(event) => {
+          // Enter / Space are the checkbox's own activation keys. Everything
+          // else - Escape to cancel, Tab to commit and move on - goes to the
+          // shared editor handler, which this editor used to bypass entirely.
+          if (event.key === "Enter" || event.key === " ") {
+            toggleCheckboxWithKeyboard(event, () => {
+              event.stopPropagation();
+              const nextValue = !ctrl.editingCell?.value;
+              ctrl.editingCell = ctrl.editingCell
+                ? { ...ctrl.editingCell, value: nextValue }
+                : ctrl.editingCell;
+              saveEditingCell();
+            });
+            return;
+          }
+          onEditorKeyDown(event);
+        }}
         onblur={() => saveEditingCell()}
       ></button>
     {:else if ctrl.editingCell?.editorType === "list"}
@@ -395,9 +422,15 @@
         0,
         Math.min(5, Math.round(Number(ctrl.editingCell?.value) || 0)),
       )}
+      <!-- Focus the star for the current rating (the first one when unrated),
+           the radio a radiogroup is expected to enter on. Without it nothing
+           in this editor held focus, so `onEditorKeyDown` below never ran and
+           Escape could not close the cell. -->
+      {@const focusStar = Math.min(5, Math.max(1, ratingVal))}
       <span class="sv-grid-rating-editor" role="radiogroup" aria-label="Rating">
         {#each [1, 2, 3, 4, 5] as n (n)}
           <button
+            use:focusControlOnMount={n === focusStar}
             type="button"
             role="radio"
             aria-checked={ratingVal >= n}
@@ -411,7 +444,43 @@
                 : ctrl.editingCell;
               saveEditingCell();
             }}
-            onkeydown={onEditorKeyDown}>★</button
+            onkeydown={(event) => {
+              // Arrows move between the stars, the way a radiogroup is
+              // expected to work - without them the editor takes focus (see
+              // focusControlOnMount) but Space can only re-pick the star that
+              // already holds the value. Enter / Escape / Tab still fall
+              // through to the shared handler.
+              const key = event.key;
+              if (
+                key !== "ArrowLeft" &&
+                key !== "ArrowRight" &&
+                key !== "Home" &&
+                key !== "End"
+              ) {
+                onEditorKeyDown(event);
+                return;
+              }
+              event.preventDefault();
+              event.stopPropagation();
+              const current = Math.min(5, Math.max(1, ratingVal));
+              const next =
+                key === "Home"
+                  ? 1
+                  : key === "End"
+                    ? 5
+                    : key === "ArrowLeft"
+                      ? Math.max(1, current - 1)
+                      : Math.min(5, current + 1);
+              ctrl.editingCell = ctrl.editingCell
+                ? { ...ctrl.editingCell, value: next }
+                : ctrl.editingCell;
+              const stars = (
+                event.currentTarget as HTMLElement
+              ).parentElement?.querySelectorAll<HTMLElement>(
+                ".sv-grid-rating-star",
+              );
+              stars?.[next - 1]?.focus({ preventScroll: true });
+            }}>★</button
           >
         {/each}
         <button
@@ -643,18 +712,31 @@
       {@const CustomCellEditor = _reg.component}
       <CustomCellEditor {...resolveEditorProps(_reg, buildRegisteredEditorContext())} />
     {:else}
+      {@const editorType = ctrl.editingCell?.editorType ?? "text"}
+      {@const isNumberEditor = getCellEditorInputType(editorType) === "text" &&
+        getEditorInputType(editorType) === "number"}
       <input
         use:focusOnMount
-        class={getEditorClass(ctrl.editingCell?.editorType ?? "text")}
-        type={getEditorInputType(ctrl.editingCell?.editorType ?? "text")}
+        class={getEditorClass(editorType)}
+        type={getCellEditorInputType(editorType)}
+        inputmode={isNumberEditor ? "decimal" : undefined}
         value={getEditableInputValue(
-          ctrl.editingCell?.editorType ?? "text",
+          editorType,
           ctrl.editingCell?.value,
         )}
-        oninput={(event) =>
-          updateEditingCellValue(
-            (event.currentTarget as HTMLInputElement).value,
-          )}
+        oninput={(event) => {
+          const input = event.currentTarget as HTMLInputElement;
+          // The number editor is a TEXT input so intermediate values survive
+          // (see getCellEditorInputType). That means nothing stops a letter
+          // being typed, which type="number" used to - so reject it here and
+          // put the last good draft back, rather than letting "12x" reach the
+          // commit and coerce to null.
+          if (isNumberEditor && !isNumericEditorInput(input.value)) {
+            input.value = String(ctrl.editingCell?.value ?? "");
+            return;
+          }
+          updateEditingCellValue(input.value);
+        }}
         onblur={() => saveEditingCell()}
         onkeydown={onEditorKeyDown}
       />

package/src/SvGridSelect.svelte

@@ -21,7 +21,7 @@
 
   type Props = Pick<
     SvEditorProps,
-    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
+    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'block' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
   > & {
     columns: ReadonlyArray<GridSelectColumn>
     options: ReadonlyArray<Row>
@@ -68,6 +68,7 @@
     error,
     required = false,
     invalid = false,
+    block = false,
     size = 'md',
     id,
     name,
@@ -133,7 +134,8 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir} loading={loadingProp || loading}>
-  <div class="sv-gs sv-gs--{size}" class:is-disabled={disabled}>
+  <div class="sv-gs sv-gs--{size}"
+    class:is-block={block} class:is-disabled={disabled}>
     <button
       bind:this={triggerEl}
       type="button"
@@ -263,4 +265,6 @@
   :global(.sv-gs__row.is-selected) { color: var(--sg-accent, #2563eb); font-weight: 600; }
   :global(.sv-gs__cell) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   :global(.sv-gs__empty) { padding: 12px; text-align: center; color: var(--sg-muted, #94a3b8); }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-gs.is-block { width: 100%; max-width: 100%; }
 </style>

package/src/SvListBox.svelte

@@ -230,6 +230,7 @@
     <span class="sv-listbox__check" aria-hidden="true">{isSel(opt) ? '✓' : ''}</span>
   {/if}
   {#if item ?? itemTemplate}{@render (item ?? itemTemplate)!(opt)}{:else}<span class="sv-listbox__label">{opt.label}</span>{/if}
+  {#if opt.hint && !(item ?? itemTemplate)}<span class="sv-listbox__hint" aria-hidden="true">{opt.hint}</span>{/if}
 {/snippet}
 
 {#snippet optionRow(opt: IndexedOption, index: number, h?: number, top?: number)}
@@ -302,6 +303,13 @@
   }
   .sv-listbox__check { width: 14px; text-align: center; color: var(--_accent); }
   .sv-listbox__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* Trailing muted text (a count, a unit). `flex: none` so it never gives up
+     width - the label ellipsises instead, which is the half you can guess. */
+  .sv-listbox__hint {
+    flex: none; margin-inline-start: 8px;
+    color: var(--sg-muted, #64748b); font-variant-numeric: tabular-nums;
+    font-size: 0.9em;
+  }
 
   /* ---- Checklist variant ---- */
   .sv-listbox__box {

package/src/SvMultiSelect.svelte

@@ -20,7 +20,7 @@
 
   type Props = Pick<
     SvEditorProps,
-    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
+    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'block' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
   > & {
     options: ReadonlyArray<MultiSelectOption>
     value?: ReadonlyArray<string | number>
@@ -67,6 +67,7 @@
     error,
     required = false,
     invalid = false,
+    block = false,
     size = 'md',
     id,
     name,
@@ -143,7 +144,8 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir} loading={loadingProp || loading}>
-  <div class="sv-ms sv-ms--{size}" class:is-disabled={disabled}>
+  <div class="sv-ms sv-ms--{size}"
+    class:is-block={block} class:is-disabled={disabled}>
     <button
       bind:this={triggerEl}
       type="button"
@@ -286,4 +288,6 @@
   :global(.sv-ms__loading) { padding: 8px 10px; color: var(--sg-muted, #94a3b8); font-size: 12px; text-align: center; }
   :global(.sv-ms__footer) { display: flex; justify-content: flex-end; padding: 6px 8px; border-top: 1px solid var(--sg-border, #e2e8f0); }
   :global(.sv-ms__done) { font: inherit; font-size: 12.5px; padding: 4px 12px; border: 0; border-radius: 6px; background: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); cursor: pointer; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-ms.is-block { width: 100%; max-width: 100%; }
 </style>

package/src/SvNumberInput.svelte

@@ -161,6 +161,10 @@
 
 <style>
   .sv-num__input { text-align: end; }
+  /* Digits line up on the right; a placeholder is prose, and right-aligning
+     it puts one field out of step with every other label-above-control row
+     in a form. */
+  .sv-num__input:placeholder-shown { text-align: start; }
   .sv-num__clear { display: grid; place-items: center; width: 20px; align-self: center; flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; border-radius: 4px; }
   .sv-num__clear:hover { color: var(--sg-danger, #dc2626); }
   .sv-num__spin { display: flex; flex-direction: column; margin-inline-start: 2px; }

package/src/SvRichCell.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  /**
+   * SvRichCell - render rich text inside a grid cell, safely.
+   *
+   * Pair it with `editorType: 'richtext'` (or feed it Markdown) to get a column
+   * whose values carry formatting. The value is always run through
+   * `sanitizeHtml` before it is painted, so markup that arrived from a user
+   * cannot execute in the host page - see sanitize-html.ts for the allowlist.
+   *
+   * ```svelte
+   * <script>
+   *   import { SvRichCell } from '@svgrid/grid'
+   * <\/script>
+   *
+   * {#snippet notesCell({ getValue })}
+   *   <SvRichCell value={getValue()} />
+   * {/snippet}
+   * ```
+   *
+   * A grid row is one line tall by default, so the content is clamped to
+   * `clamp` lines with an ellipsis and the full text goes on the `title`
+   * attribute. Set `clamp={0}` in a master/detail panel or a tall row where the
+   * whole value should show.
+   */
+  import { sanitizeHtml, renderMarkdown, htmlToText } from './sanitize-html'
+
+  type Props = {
+    /** The cell value: an HTML string, or Markdown when `format="markdown"`. */
+    value?: unknown
+    /** How to read `value`. Markdown is converted first, then sanitized. */
+    format?: 'html' | 'markdown'
+    /** Lines to clamp to. 0 removes the clamp and lets the content wrap. */
+    clamp?: number
+    /** Native tooltip carrying the flattened text. Off when the grid already
+     *  supplies its own cell tooltip. */
+    title?: boolean
+    class?: string
+  }
+
+  let { value = '', format = 'html', clamp = 1, title = true, class: className = '' }: Props = $props()
+
+  const source = $derived(value == null ? '' : String(value))
+  const html = $derived(format === 'markdown' ? renderMarkdown(source) : sanitizeHtml(source))
+  // The flattened text doubles as the tooltip and as the accessible name when
+  // the markup collapses to something a screen reader would read as noise.
+  const text = $derived(title ? htmlToText(html) : '')
+</script>
+
+<div
+  class="sv-rich-cell {className}"
+  class:is-clamped={clamp > 0}
+  style={clamp > 0 ? `--sv-rich-cell-lines: ${clamp}` : undefined}
+  title={text || undefined}
+>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html html}
+</div>
+
+<style>
+  .sv-rich-cell {
+    min-width: 0;
+    color: var(--sg-fg, #0f172a);
+    font: inherit;
+  }
+  /* Clamp to N lines. The grid row is a single line tall by default, so
+     unclamped rich text would push the row open and break virtualization's
+     fixed-height assumption. */
+  .sv-rich-cell.is-clamped {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--sv-rich-cell-lines, 1);
+    line-clamp: var(--sv-rich-cell-lines, 1);
+    overflow: hidden;
+  }
+  /* Block elements inside a cell must not carry their document margins, or a
+     single <p> pushes the text out of the row box. */
+  .sv-rich-cell :global(p),
+  .sv-rich-cell :global(h1),
+  .sv-rich-cell :global(h2),
+  .sv-rich-cell :global(h3),
+  .sv-rich-cell :global(h4),
+  .sv-rich-cell :global(h5),
+  .sv-rich-cell :global(h6),
+  .sv-rich-cell :global(ul),
+  .sv-rich-cell :global(ol),
+  .sv-rich-cell :global(blockquote),
+  .sv-rich-cell :global(pre) {
+    margin: 0;
+    padding: 0;
+  }
+  .sv-rich-cell.is-clamped :global(ul),
+  .sv-rich-cell.is-clamped :global(ol) {
+    list-style-position: inside;
+  }
+  /* Headings keep their weight but drop to cell size: a real <h1> inside a row
+     would dwarf every neighbouring cell. */
+  .sv-rich-cell :global(h1),
+  .sv-rich-cell :global(h2),
+  .sv-rich-cell :global(h3),
+  .sv-rich-cell :global(h4),
+  .sv-rich-cell :global(h5),
+  .sv-rich-cell :global(h6) {
+    font-size: inherit;
+    font-weight: 650;
+  }
+  .sv-rich-cell :global(a) {
+    color: var(--sg-accent, #2563eb);
+  }
+  .sv-rich-cell :global(code) {
+    font-family: var(--sg-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+    font-size: 0.92em;
+    background: var(--sg-code-bg, color-mix(in srgb, var(--sg-fg, #0f172a) 8%, transparent));
+    border-radius: var(--sg-radius-sm, 4px);
+    padding: 0 4px;
+  }
+  .sv-rich-cell :global(blockquote) {
+    border-inline-start: 2px solid var(--sg-border, #cbd5e1);
+    padding-inline-start: 8px;
+    color: var(--sg-muted, #64748b);
+  }
+  .sv-rich-cell :global(img) {
+    max-height: 1.4em;
+    vertical-align: text-bottom;
+  }
+</style>

package/src/SvTextArea.svelte

@@ -39,6 +39,7 @@
     size = 'md',
     ariaLabel,
     invalid = false,
+    block = false,
     required = false,
     error,
     label,
@@ -73,7 +74,8 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <div class="sv-ta sv-ta--{size}" class:is-disabled={disabled}>
+  <div class="sv-ta sv-ta--{size}"
+    class:is-block={block} class:is-disabled={disabled}>
     <textarea
       use:grow
       use:mountFocus
@@ -110,4 +112,6 @@
   .sv-ta__input:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
   .sv-ta__input.is-invalid { border-color: var(--sg-danger, #dc2626); }
   .sv-ta__count { align-self: flex-end; font-size: 11px; color: var(--sg-muted, #64748b); }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-ta.is-block { width: 100%; max-width: 100%; }
 </style>

package/src/SvTreeSelect.svelte

@@ -20,7 +20,7 @@
 
   type Props = Pick<
     SvEditorProps,
-    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
+    'disabled' | 'readonly' | 'label' | 'hint' | 'error' | 'required' | 'invalid' | 'block' | 'size' | 'id' | 'name' | 'dir' | 'ariaLabel' | 'loading'
   > & {
     nodes: ReadonlyArray<TreeSelectNode>
     value?: string | number | null
@@ -46,6 +46,7 @@
     error,
     required = false,
     invalid = false,
+    block = false,
     size = 'md',
     id,
     name,
@@ -129,7 +130,8 @@
 </script>
 
 <SvField id={uid} {label} {hint} {error} {required} {dir} {loading}>
-  <div class="sv-ts sv-ts--{size}" class:is-disabled={disabled}>
+  <div class="sv-ts sv-ts--{size}"
+    class:is-block={block} class:is-disabled={disabled}>
     <button
       bind:this={triggerEl}
       type="button"
@@ -232,4 +234,6 @@
   :global(.sv-ts__chev.is-open) { transform: rotate(90deg); }
   :global(.sv-ts__chev--leaf) { visibility: hidden; }
   :global(.sv-ts__label) { flex: 1; white-space: nowrap; }
+  /* Fill the container - see `block` in SvEditorProps. */
+  .sv-ts.is-block { width: 100%; max-width: 100%; }
 </style>

package/src/builtin-editors.test.ts

@@ -30,9 +30,26 @@ afterEach(() => {
 describe('registerBuiltinEditors', () => {
   it('registers the config-free editor types', () => {
     const types = registerBuiltinEditors()
-    expect(types).toEqual(['otp', 'duration'])
+    expect(types).toEqual(['otp', 'duration', 'richtext'])
     expect(hasCellEditor('otp')).toBe(true)
     expect(hasCellEditor('duration')).toBe(true)
+    expect(hasCellEditor('richtext')).toBe(true)
+  })
+
+  it('sanitizes the rich-text value on the way in and on the way out', () => {
+    registerBuiltinEditors()
+    const onChange = vi.fn()
+    // Markup already sitting in the row data is cleaned before the editor sees
+    // it, so opening a poisoned cell cannot execute anything either.
+    const props = resolveEditorProps(
+      getCellEditor('richtext')!,
+      ctx({ value: '<p onclick="alert(1)">hi</p><script>alert(2)</script>', onChange }),
+    )
+    expect(props.value).toBe('<p>hi</p>')
+    ;(props.onChange as (v: string) => void)('<b>ok</b><img src=x onerror="alert(3)">')
+    const stored = onChange.mock.calls[0]![0] as string
+    expect(stored).toContain('<b>ok</b>')
+    expect(stored).not.toContain('onerror')
   })
 
   it("maps the OTP editor's onComplete to commit", () => {

package/src/builtin-editors.ts

@@ -25,10 +25,12 @@
 import { registerCellEditor } from './editor-registry'
 import SvOtpInput from './SvOtpInput.svelte'
 import SvDurationInput from './SvDurationInput.svelte'
+import SvRichText from './SvRichText.svelte'
+import { sanitizeHtml } from './sanitize-html'
 
 /**
- * Register the config-free UI-kit editors (`otp`, `duration`) as grid cell
- * editors. Idempotent. Returns the list of type names it registered.
+ * Register the config-free UI-kit editors (`otp`, `duration`, `richtext`) as
+ * grid cell editors. Idempotent. Returns the list of type names it registered.
  */
 export function registerBuiltinEditors(): string[] {
   registerCellEditor('otp', {
@@ -52,5 +54,19 @@ export function registerBuiltinEditors(): string[] {
       onCancel: () => ctx.onCancel(),
     }),
   })
-  return ['otp', 'duration']
+  // Rich text carries a toolbar, so give the column a taller row (or edit it
+  // from a detail panel) - it does not fit a default single-line row.
+  //
+  // Both the value handed to the editor and the value coming back are
+  // sanitized. The stored string is the one SvRichCell later paints, so
+  // cleaning it on the way in means a pasted payload never reaches row data.
+  registerCellEditor('richtext', {
+    component: SvRichText,
+    props: (ctx) => ({
+      value: sanitizeHtml((ctx.value ?? '') as string),
+      autofocus: true,
+      onChange: (html: string) => ctx.onChange(sanitizeHtml(html)),
+    }),
+  })
+  return ['otp', 'duration', 'richtext']
 }

package/src/cell-values.ts

@@ -18,6 +18,36 @@ export function getColumnBaseValue<TData extends RowData>(row: Row<TData>, colum
   return row.getCellValueByColumnId(column.id);
 }
 
+/**
+ * Map a visible row back to its slot in the data array.
+ *
+ * The bulk writers (paste, clear) rebuild `internalData` immutably, so unlike
+ * the inline editor - which mutates `row.original` in place and never needs an
+ * index - they have to locate the slot first. They used to read it as
+ * `Number(row.id)`, which is only the array index under the DEFAULT `getRowId`.
+ * A grid with `getRowId={(t) => String(t.id)}` over 1-based ids wrote one row
+ * BELOW the selection on every paste, and one with non-numeric ids ('PLAT-412')
+ * parsed to NaN and dropped the write silently.
+ *
+ * Identity is the reliable key: the row model's `original` IS the object in
+ * `data`. Returns a lookup rather than a per-row scan so a multi-row paste
+ * stays O(n) instead of O(n * rows).
+ */
+export function createDataIndexLookup<TData extends RowData>(
+  data: ReadonlyArray<TData>,
+): (row: Row<TData>) => number {
+  const byRef = new Map<unknown, number>();
+  for (let i = 0; i < data.length; i += 1) {
+    // First slot wins: with a duplicated object reference in `data`, writing
+    // the earlier one matches what the row model itself resolves to.
+    if (!byRef.has(data[i])) byRef.set(data[i], i);
+  }
+  return (row) => {
+    const hit = byRef.get(row?.original);
+    return hit === undefined ? -1 : hit;
+  };
+}
+
 export function isGroupRow<TData extends RowData>(row: Row<TData>) {
   // Tree rows are expandable too, but they are real data rows - rendering one as
   // a full-width banner would swallow its cells. Only grouping's synthetic rows