@ornery/ui-grid-vanilla 0.1.10 → 1.0.1

package/src/auto-resize.test.ts

@@ -0,0 +1,207 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+/**
+ * Unit tests for auto-height adjustment and ResizeObserver (enableAutoResize).
+ *
+ * These tests exercise the logic directly on the UiGridStandaloneElement class.
+ * Because jsdom partially supports custom elements (the class must extend
+ * HTMLElement at import time), we define a minimal mock before importing.
+ */
+
+// Provide a mock ResizeObserver before the element module loads.
+const mockResizeObserverDisconnect = vi.fn();
+let resizeObserverCallback: ResizeObserverCallback | null = null;
+class MockResizeObserver {
+  callback: ResizeObserverCallback;
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+    resizeObserverCallback = callback;
+  }
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = mockResizeObserverDisconnect;
+}
+vi.stubGlobal('ResizeObserver', MockResizeObserver);
+
+// requestAnimationFrame / cancelAnimationFrame for debounce tests.
+let rafId = 0;
+const rafCallbacks = new Map<number, FrameRequestCallback>();
+vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
+  const id = ++rafId;
+  rafCallbacks.set(id, cb);
+  return id;
+});
+vi.stubGlobal('cancelAnimationFrame', (id: number) => {
+  rafCallbacks.delete(id);
+});
+function flushRaf() {
+  for (const [id, cb] of rafCallbacks) {
+    rafCallbacks.delete(id);
+    cb(performance.now());
+  }
+}
+
+import { defineStandaloneUiGridElement, UiGridStandaloneElement } from './ui-grid-standalone.element';
+
+describe('autoAdjustHeight', () => {
+  let element: UiGridStandaloneElement;
+
+  beforeEach(async () => {
+    document.body.innerHTML = '';
+    await defineStandaloneUiGridElement('ui-grid-element-resize-test');
+    element = document.createElement('ui-grid-element-resize-test') as unknown as UiGridStandaloneElement;
+    document.body.appendChild(element);
+  });
+
+  it('sets host height to accommodate minRowsToShow + header + filter + pagination', () => {
+    element.options = {
+      id: 'test-grid',
+      data: [{ name: 'Alice' }],
+      columnDefs: [{ name: 'name' }],
+      enableFiltering: true,
+      enablePagination: true,
+      enablePaginationControls: true,
+      minRowsToShow: 5,
+    };
+
+    // After setting options, the element should have rendered and autoAdjustHeight
+    // should have set a minimum height. Since clientHeight in jsdom defaults to 0,
+    // the element's style.height should be set.
+    const height = parseInt(element.style.height, 10);
+    expect(height).toBeGreaterThan(0);
+
+    // The minimum should include header + (5 rows * rowHeight).
+    // Default rowHeight is 44 (from snapshot.rowSize), header ~50.
+    // Exact values depend on render, but it must be >= 5*44 + 50 = 270.
+    expect(height).toBeGreaterThanOrEqual(270);
+  });
+
+  it('does not set height when enableMinHeightCheck is false', () => {
+    element.options = {
+      id: 'test-grid',
+      data: [{ name: 'Alice' }],
+      columnDefs: [{ name: 'name' }],
+      enableMinHeightCheck: false,
+      minRowsToShow: 5,
+    };
+
+    // autoAdjustHeight bails when enableMinHeightCheck is false.
+    // The height should not have been imperatively set (remains '' or unset).
+    expect(element.style.height).toBe('');
+  });
+
+  it('defaults minRowsToShow to 10 when not specified', () => {
+    element.options = {
+      id: 'test-grid',
+      data: [{ name: 'Alice' }],
+      columnDefs: [{ name: 'name' }],
+    };
+
+    const height = parseInt(element.style.height, 10);
+    // Default: 10 rows * 44px + header(50) = 490 minimum
+    expect(height).toBeGreaterThanOrEqual(490);
+  });
+});
+
+describe('enableAutoResize (ResizeObserver)', () => {
+  let element: UiGridStandaloneElement;
+
+  beforeEach(async () => {
+    document.body.innerHTML = '';
+    resizeObserverCallback = null;
+    mockResizeObserverDisconnect.mockClear();
+    rafCallbacks.clear();
+
+    await defineStandaloneUiGridElement('ui-grid-element-resize-test');
+    element = document.createElement('ui-grid-element-resize-test') as unknown as UiGridStandaloneElement;
+  });
+
+  it('creates a ResizeObserver on connectedCallback', () => {
+    document.body.appendChild(element);
+    expect(element.autoResizeObserver).not.toBeNull();
+    expect(resizeObserverCallback).not.toBeNull();
+  });
+
+  it('disconnects the ResizeObserver on disconnectedCallback', () => {
+    document.body.appendChild(element);
+    expect(element.autoResizeObserver).not.toBeNull();
+
+    element.remove();
+    expect(mockResizeObserverDisconnect).toHaveBeenCalledTimes(1);
+    expect(element.autoResizeObserver).toBeNull();
+  });
+
+  it('debounces resize events via requestAnimationFrame', () => {
+    document.body.appendChild(element);
+    element.options = {
+      id: 'test-grid',
+      data: [{ name: 'Alice' }],
+      columnDefs: [{ name: 'name' }],
+      enableMinHeightCheck: false,
+    };
+
+    const renderSpy = vi.spyOn(element as any, 'render');
+    renderSpy.mockClear();
+
+    // Simulate multiple rapid resize events
+    const entries = [{ contentRect: { width: 500, height: 400 } }] as unknown as ResizeObserverEntry[];
+    resizeObserverCallback!(entries, element.autoResizeObserver as unknown as ResizeObserver);
+    resizeObserverCallback!(entries, element.autoResizeObserver as unknown as ResizeObserver);
+    resizeObserverCallback!(entries, element.autoResizeObserver as unknown as ResizeObserver);
+
+    // render should not have been called yet (debounced)
+    expect(renderSpy).not.toHaveBeenCalled();
+
+    // Flush the rAF
+    flushRaf();
+
+    // Only one render call from the debounced resize (no autoAdjustHeight
+    // re-render because enableMinHeightCheck is false)
+    expect(renderSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('still re-renders on resize even with enableAutoResize false (column widths need recalculation)', () => {
+    document.body.appendChild(element);
+    element.options = {
+      id: 'test-grid',
+      data: [{ name: 'Alice' }],
+      columnDefs: [{ name: 'name' }],
+      enableAutoResize: false,
+      enableMinHeightCheck: false,
+    };
+
+    const renderSpy = vi.spyOn(element as any, 'render');
+    renderSpy.mockClear();
+
+    const entries = [{ contentRect: { width: 500, height: 400 } }] as unknown as ResizeObserverEntry[];
+    resizeObserverCallback!(entries, element.autoResizeObserver as unknown as ResizeObserver);
+
+    flushRaf();
+
+    // Resize always triggers render for column width recalculation
+    expect(renderSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancels pending rAF on teardown', () => {
+    document.body.appendChild(element);
+    element.options = {
+      id: 'test-grid',
+      data: [{ name: 'Alice' }],
+      columnDefs: [{ name: 'name' }],
+    };
+
+    const renderSpy = vi.spyOn(element as any, 'render');
+    renderSpy.mockClear();
+
+    // Trigger resize
+    const entries = [{ contentRect: { width: 500, height: 400 } }] as unknown as ResizeObserverEntry[];
+    resizeObserverCallback!(entries, element.autoResizeObserver as unknown as ResizeObserver);
+
+    // Remove before rAF fires
+    element.remove();
+
+    // Flush — should not call render since the handle was cancelled
+    flushRaf();
+    expect(renderSpy).not.toHaveBeenCalled();
+  });
+});

package/src/cell-nav.test.ts

@@ -0,0 +1,262 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { clearRustWasmGridEngine } from '@ornery/ui-grid-core';
+
+import {
+  mountVanillaUiGrid,
+  type GridOptions,
+  type UiGridApi,
+  type VanillaUiGridElement,
+} from './index';
+
+/**
+ * cellNav public API parity tests. Validates the `gridApi.cellNav` surface
+ * ported from the old ui.grid.cellNav module — events (navigate,
+ * viewPortKeyDown, viewPortKeyPress) and methods (scrollToFocus,
+ * getFocusedCell, getCurrentSelection, rowColSelectIndex).
+ */
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 5000): Promise<T> {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) return value;
+    await new Promise((r) => window.setTimeout(r, 10));
+  }
+  throw new Error('Timed out waiting for expected state');
+}
+
+const TAG = 'ui-grid-element-vanilla-cellnav-test';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+}
+
+function baseOptions(overrides: Partial<GridOptions> = {}): GridOptions {
+  let capturedApi: UiGridApi | undefined;
+  const data: Row[] = [
+    { id: 'r1', name: 'Alpha', status: 'Active' },
+    { id: 'r2', name: 'Beta', status: 'Pilot' },
+    { id: 'r3', name: 'Gamma', status: 'Draft' },
+  ];
+  const options: GridOptions = {
+    id: 'cellnav-grid',
+    data,
+    columnDefs: [
+      { name: 'name', displayName: 'Name' },
+      { name: 'status', displayName: 'Status' },
+    ],
+    enableRowSelection: false,
+    rowIdentity: (entity) => String((entity as Row).id),
+    onRegisterApi: (api) => {
+      capturedApi = api as UiGridApi;
+    },
+    ...overrides,
+  };
+  Object.defineProperty(options, '__api', { enumerable: false, get: () => capturedApi });
+  return options;
+}
+
+function getApi(options: GridOptions): UiGridApi {
+  const api = (options as unknown as { __api: UiGridApi | undefined }).__api;
+  if (!api) throw new Error('Grid API was never registered');
+  return api;
+}
+
+async function mountGrid(options: GridOptions): Promise<{
+  grid: VanillaUiGridElement;
+  shadow: ShadowRoot;
+}> {
+  const target = document.getElementById('app')!;
+  const grid = await mountVanillaUiGrid(target, options, undefined, TAG);
+  const shadow = await waitFor(() => grid.shadowRoot);
+  await waitFor(() => shadow.querySelector('.body-cell[data-row="r1"][data-column="name"]'));
+  return { grid, shadow };
+}
+
+function cellIn(root: ShadowRoot, rowId: string, columnName: string): HTMLElement {
+  const selector = `.body-cell[data-row="${rowId}"][data-column="${columnName}"]`;
+  const el = root.querySelector<HTMLElement>(selector);
+  if (!el) throw new Error(`Cell ${rowId}/${columnName} not rendered`);
+  return el;
+}
+
+function pressKey(el: HTMLElement, key: string, opts: { ctrlKey?: boolean; shiftKey?: boolean; altKey?: boolean } = {}): KeyboardEvent {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    ctrlKey: !!opts.ctrlKey,
+    shiftKey: !!opts.shiftKey,
+    altKey: !!opts.altKey,
+  });
+  el.dispatchEvent(event);
+  return event;
+}
+
+describe('vanilla grid cellNav public API', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.innerHTML = '';
+  });
+
+  describe('getFocusedCell / navigate event', () => {
+    it('returns null before any cell has been focused', async () => {
+      const options = baseOptions();
+      await mountGrid(options);
+      const api = getApi(options);
+      expect(api.cellNav.getFocusedCell()).toBeNull();
+    });
+
+    it('click records the focused cell and fires navigate', async () => {
+      const options = baseOptions();
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const listener = vi.fn();
+      api.cellNav.on.navigate(listener);
+      cellIn(shadow, 'r2', 'status').click();
+      const focused = api.cellNav.getFocusedCell();
+      expect(focused).not.toBeNull();
+      expect(focused!.row.id).toBe('r2');
+      expect(focused!.col.name).toBe('status');
+      expect(listener).toHaveBeenCalledTimes(1);
+      // navigate(newRowCol, oldRowCol) — second arg null since this was the
+      // first focus.
+      const [newRowCol, oldRowCol] = listener.mock.calls[0]!;
+      expect(newRowCol.row.id).toBe('r2');
+      expect(newRowCol.col.name).toBe('status');
+      expect(oldRowCol).toBeNull();
+    });
+
+    it('arrow navigation updates getFocusedCell and fires navigate', async () => {
+      const options = baseOptions();
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      cellIn(shadow, 'r1', 'name').click();
+      const listener = vi.fn();
+      api.cellNav.on.navigate(listener);
+      pressKey(shadow.activeElement as HTMLElement, 'ArrowDown');
+      expect(api.cellNav.getFocusedCell()!.row.id).toBe('r2');
+      expect(listener).toHaveBeenCalledTimes(1);
+      const [newRowCol, oldRowCol] = listener.mock.calls[0]!;
+      expect(newRowCol.row.id).toBe('r2');
+      expect(oldRowCol.row.id).toBe('r1');
+    });
+  });
+
+  describe('scrollToFocus', () => {
+    it('resolves and records focus on the target cell', async () => {
+      const options = baseOptions();
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      await api.cellNav.scrollToFocus(
+        options.data[2]! as unknown as Record<string, unknown>,
+        options.columnDefs[1]!,
+      );
+      expect(api.cellNav.getFocusedCell()!.row.id).toBe('r3');
+      expect(api.cellNav.getFocusedCell()!.col.name).toBe('status');
+      // DOM focus follows.
+      await waitFor(() =>
+        shadow.activeElement === cellIn(shadow, 'r3', 'status') ? {} : null,
+      );
+    });
+
+    it('scrollToFocus(null, null) clears focus', async () => {
+      const options = baseOptions();
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      cellIn(shadow, 'r1', 'name').click();
+      expect(api.cellNav.getFocusedCell()).not.toBeNull();
+      await api.cellNav.scrollToFocus(null, null);
+      expect(api.cellNav.getFocusedCell()).toBeNull();
+    });
+  });
+
+  describe('getCurrentSelection / rowColSelectIndex', () => {
+    it('tracks the single current focus cell by default', async () => {
+      const options = baseOptions();
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      cellIn(shadow, 'r1', 'name').click();
+      expect(api.cellNav.getCurrentSelection()).toHaveLength(1);
+      cellIn(shadow, 'r2', 'status').click();
+      // Default nav replaces focus — only one cell in the selection.
+      const selection = api.cellNav.getCurrentSelection();
+      expect(selection).toHaveLength(1);
+      expect(selection[0]!.row.id).toBe('r2');
+    });
+
+    it('rowColSelectIndex returns -1 for cells not in the selection', async () => {
+      const options = baseOptions();
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      cellIn(shadow, 'r1', 'name').click();
+      const focused = api.cellNav.getFocusedCell()!;
+      expect(api.cellNav.rowColSelectIndex(focused)).toBe(0);
+      // A different cell is not in the selection.
+      const other = {
+        row: focused.row,
+        col: options.columnDefs[1]!,
+      };
+      expect(api.cellNav.rowColSelectIndex(other)).toBe(-1);
+    });
+  });
+
+  describe('viewPortKeyDown + keyDownOverrides', () => {
+    it('is NOT raised when no override matches', async () => {
+      const options = baseOptions();
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const listener = vi.fn();
+      api.cellNav.on.viewPortKeyDown(listener);
+      cellIn(shadow, 'r1', 'name').click();
+      pressKey(shadow.activeElement as HTMLElement, 'ArrowDown');
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it('is raised when a keyDownOverride matches, skipping cellnav defaults', async () => {
+      const options = baseOptions({
+        keyDownOverrides: [{ key: 'ArrowDown' }],
+      });
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const listener = vi.fn();
+      api.cellNav.on.viewPortKeyDown(listener);
+      cellIn(shadow, 'r1', 'name').click();
+      const before = api.cellNav.getFocusedCell()!;
+      pressKey(shadow.activeElement as HTMLElement, 'ArrowDown');
+      // Override swallows the key — focus should NOT move to r2.
+      expect(api.cellNav.getFocusedCell()!.row.id).toBe(before.row.id);
+      expect(listener).toHaveBeenCalledTimes(1);
+      const [event, rowCol] = listener.mock.calls[0]!;
+      expect(event).toBeInstanceOf(KeyboardEvent);
+      expect(rowCol.row.id).toBe('r1');
+    });
+
+    it('matches keyDownOverride with modifier fields', async () => {
+      const options = baseOptions({
+        keyDownOverrides: [{ key: 'ArrowDown', shiftKey: true }],
+      });
+      const { shadow } = await mountGrid(options);
+      const api = getApi(options);
+      const listener = vi.fn();
+      api.cellNav.on.viewPortKeyDown(listener);
+      cellIn(shadow, 'r1', 'name').click();
+      // Plain ArrowDown: doesn't match the override, navigates normally.
+      pressKey(shadow.activeElement as HTMLElement, 'ArrowDown');
+      expect(listener).not.toHaveBeenCalled();
+      // Shift+ArrowDown: matches the override, raises event, no nav.
+      const beforeId = api.cellNav.getFocusedCell()!.row.id;
+      pressKey(shadow.activeElement as HTMLElement, 'ArrowDown', { shiftKey: true });
+      expect(listener).toHaveBeenCalledTimes(1);
+      expect(api.cellNav.getFocusedCell()!.row.id).toBe(beforeId);
+    });
+  });
+});

package/src/components/grid-body-cell/grid-body-cell.ts

@@ -0,0 +1,23 @@
+/**
+ * `<ui-grid-body-cell>` — Data cell element.
+ *
+ * An empty custom element. The grid shell pre-computes `class`, `style`,
+ * `tabindex`, and all `data-*` attributes directly into the emitted HTML
+ * string, so the browser parser finishes the element's visual state in one
+ * pass. No `attributeChangedCallback` work is required at upgrade time — at
+ * 1000+ cells per render, the callback storm was the single largest cost on
+ * the hot path.
+ *
+ * The class remains so the tag name resolves (`closest('ui-grid-body-cell')`
+ * still works) and so the element-specific CSS selectors target correctly.
+ * The parent is the single writer; cells are never mutated from outside.
+ */
+export class UIGridBodyCell extends HTMLElement {
+  static readonly TAG = 'ui-grid-body-cell';
+
+  static define(tagName = UIGridBodyCell.TAG): void {
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, UIGridBodyCell);
+    }
+  }
+}

package/src/components/grid-body-cell/index.ts

@@ -0,0 +1 @@
+export { UIGridBodyCell } from './grid-body-cell';

package/src/components/grid-cell-editor/grid-cell-editor.ts

@@ -0,0 +1,104 @@
+/**
+ * `<ui-grid-cell-editor>` — Single-input cell editor element.
+ *
+ * Light-DOM custom element. Mounts ONE `<input class="cell-editor">` in
+ * `connectedCallback` and reuses it across renders — every subsequent snapshot
+ * patches `value`/`type`/`disabled` in place instead of recreating the input.
+ * That keeps the keystroke path destructive-free: typing never rebuilds the
+ * focused node, so focus and caret survive the parent grid's re-renders.
+ *
+ * The inner `<input>` carries `data-role="editor"` + `data-row` + `data-column`
+ * so the parent grid's delegated `input` / `blur` handlers continue to find it
+ * via `composedPath()`/event.target unchanged.
+ *
+ * Value updates coming in from the controller (`data-value`) are only pushed
+ * into the input when the input is NOT the currently focused element — this
+ * avoids clobbering the user's in-progress edit / caret position.
+ */
+export class UIGridCellEditor extends HTMLElement {
+  static readonly TAG = 'ui-grid-cell-editor';
+
+  private mounted = false;
+  private inputEl: HTMLInputElement | null = null;
+
+  static get observedAttributes(): string[] {
+    return ['data-row', 'data-column', 'data-type', 'data-value', 'data-disabled'];
+  }
+
+  connectedCallback(): void {
+    if (!this.mounted) {
+      // Reuse a pre-existing <input> child if the element was parsed from
+      // innerHTML with one already inside (not expected, but defensive);
+      // otherwise create it fresh.
+      let input = this.querySelector<HTMLInputElement>('input.cell-editor');
+      if (!input) {
+        input = document.createElement('input');
+        input.className = 'cell-editor';
+        this.appendChild(input);
+      }
+      input.dataset['role'] = 'editor';
+      this.inputEl = input;
+      this.mounted = true;
+    }
+    this.sync(true);
+    // On first mount, place focus + select contents so the user can start
+    // typing immediately — matches the behaviour of a fresh <input> being
+    // inserted and clicked into.
+    const input = this.inputEl;
+    if (input && this.getAttribute('data-autofocus') !== 'false') {
+      try {
+        input.focus({ preventScroll: true });
+      } catch {
+        input.focus();
+      }
+      input.select();
+    }
+  }
+
+  attributeChangedCallback(): void {
+    if (this.mounted) {
+      this.sync(false);
+    }
+  }
+
+  private sync(initial: boolean): void {
+    const input = this.inputEl;
+    if (!input) return;
+
+    const rowId = this.getAttribute('data-row') ?? '';
+    const columnName = this.getAttribute('data-column') ?? '';
+    const type = this.getAttribute('data-type') || 'text';
+    const value = this.getAttribute('data-value') ?? '';
+    const disabled = this.getAttribute('data-disabled') === 'true';
+
+    if (input.dataset['row'] !== rowId) {
+      input.dataset['row'] = rowId;
+    }
+    if (input.dataset['column'] !== columnName) {
+      input.dataset['column'] = columnName;
+    }
+    if (input.type !== type) {
+      input.type = type;
+    }
+    // Only push value in from the outside when:
+    //   - initial mount (seed the input), OR
+    //   - input is NOT currently focused (external programmatic update).
+    // Skipping this during typing preserves the caret.
+    const rootNode = input.getRootNode() as Document | ShadowRoot;
+    const isFocused = (rootNode as Document | ShadowRoot).activeElement === input;
+    if (initial || !isFocused) {
+      if (input.value !== value) {
+        input.value = value;
+      }
+    }
+    if (input.disabled !== disabled) {
+      input.disabled = disabled;
+    }
+  }
+
+  static define(tagName = UIGridCellEditor.TAG): void {
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, UIGridCellEditor);
+    }
+  }
+}

package/src/components/grid-cell-editor/index.ts

@@ -0,0 +1 @@
+export { UIGridCellEditor } from './grid-cell-editor';

package/src/components/grid-filter-cell/grid-filter-cell.scss

@@ -0,0 +1,14 @@
+// Filter cell shadow-scoped styles — composed entirely from core mixins.
+@use "@ornery/ui-grid-core/src/lib/styles/filter-cell" as fc;
+
+:host {
+  @include fc.host-shadow;
+}
+
+input {
+  @include fc.input-shadow;
+}
+
+input:focus {
+  @include fc.input-focus;
+}

package/src/components/grid-filter-cell/grid-filter-cell.template.ts

@@ -0,0 +1,20 @@
+import css from './grid-filter-cell.scss';
+import { adoptStyles } from '../../adopt-styles';
+
+const STYLE_KEY = {};
+
+interface FilterCellContext {
+  columnName: string;
+  placeholder: string;
+  value: string;
+}
+
+export function renderFilterCell(ctx: FilterCellContext, shadowRoot: ShadowRoot): void {
+  adoptStyles(shadowRoot, css, STYLE_KEY);
+  shadowRoot.innerHTML =
+    `<input class="ui-grid-filter-input"` +
+    ` data-role="filter"` +
+    ` data-column="${ctx.columnName}"` +
+    ` placeholder="${ctx.placeholder}"` +
+    ` value="${ctx.value}">`;
+}