@rozie-ui/data-table-solid 0.1.0

package/src/DetailPanel.tsx

@@ -0,0 +1,40 @@
+import type { JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { Key } from '@solid-primitives/keyed';
+import { rozieDisplay } from '@rozie/runtime-solid';
+
+interface DetailPanelProps {
+  /**
+   * The raw row object (the `#detail` slot scope `row` = `row.original`). This drop-in walks its own enumerable keys and String-coerces each value into a key/value definition list; a null row renders an empty list.
+   */
+  row?: (unknown) | null;
+}
+
+export default function DetailPanel(_props: DetailPanelProps): JSX.Element {
+  const _merged = mergeProps({ row: null }, _props);
+  const [local, attrs] = splitProps(_merged, ['row']);
+
+  // Plain setup-once helper (NOT $computed — a $computed can't be aliased; the
+  // EditorSelect plain-function lesson). Build `[{ key, value }]` from the row's own
+  // enumerable keys, String-coercing each value. A null row yields an empty list.
+  function entries() {
+    const r = local.row;
+    if (!r) return [];
+    return Object.keys(r).map((key: any) => ({
+      key,
+      value: r[key] == null ? '' : String(r[key])
+    }));
+  }
+
+  return (
+    <>
+    <dl class={"rdt-detail-panel"} data-rozie-s-8f65bdaa="">
+      
+      <Key each={entries() as readonly any[]} by={(pair) => pair.key}>{(pair) => <div class={"rdt-detail-entry"} data-rozie-s-8f65bdaa="">
+        <dt class={"rdt-detail-key"} data-rozie-s-8f65bdaa="">{rozieDisplay(pair().key)}</dt>
+        <dd class={"rdt-detail-value"} data-rozie-s-8f65bdaa="">{rozieDisplay(pair().value)}</dd>
+      </div>}</Key>
+    </dl>
+    </>
+  );
+}

package/src/EditorCheckbox.tsx

@@ -0,0 +1,52 @@
+import type { JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+
+interface EditorCheckboxProps {
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
+   */
+  columnId?: string;
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  column?: (unknown) | null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  row?: (unknown) | null;
+  /**
+   * The current cell value — coerced to a real boolean via `!!` to seed the checkbox `checked` state.
+   */
+  value?: (unknown) | null;
+  /**
+   * `(value) => void` — commit the cell. This editor immediately commits the boolean checked state on `@change`. Null-guarded at call sites.
+   */
+  commit?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * `() => void` — revert the edit (Escape). Null-guarded at call sites.
+   */
+  cancel?: ((...args: unknown[]) => unknown) | null;
+}
+
+export default function EditorCheckbox(_props: EditorCheckboxProps): JSX.Element {
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+
+  // Immediate-commit-on-change: read .checked the global-filter way, coerce to a
+  // real boolean, and commit it directly.
+  function onChange(e: any) {
+    local.commit && local.commit(!!(e && e.target ? e.target.checked : false));
+  }
+  function onKeydown(e: any) {
+    if (e && e.key === 'Escape') {
+      e.preventDefault();
+      local.cancel && local.cancel();
+    }
+  }
+
+  return (
+    <>
+    <input type="checkbox" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} checked={!!local.value} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} data-rozie-s-3d792482="" />
+    </>
+  );
+}

package/src/EditorDate.tsx

@@ -0,0 +1,71 @@
+import type { JSX } from 'solid-js';
+import { createSignal, mergeProps, splitProps } from 'solid-js';
+
+interface EditorDateProps {
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
+   */
+  columnId?: string;
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  column?: (unknown) | null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  row?: (unknown) | null;
+  /**
+   * The current cell value the local draft seeds from (setup-once); String-coerced to an ISO `YYYY-MM-DD` string for the native date input.
+   */
+  value?: (unknown) | null;
+  /**
+   * `(value) => void` — commit the cell with the ISO `YYYY-MM-DD` string (Enter / blur). Null-guarded at call sites.
+   */
+  commit?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * `() => void` — revert the edit (Escape). Null-guarded at call sites.
+   */
+  cancel?: ((...args: unknown[]) => unknown) | null;
+}
+
+export default function EditorDate(_props: EditorDateProps): JSX.Element {
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+
+  const [draft, setDraft] = createSignal('');
+
+  // Seed the draft once from the incoming value (setup-once). A native date input
+  // only accepts `YYYY-MM-DD`; normalize null/undefined to ''.
+  setDraft(local.value != null ? String(local.value) : '');
+  function onInput(e: any) {
+    setDraft(e && e.target ? e.target.value : '');
+  }
+  function doCommit() {
+    // commit the ISO date string the native control already produced.
+    local.commit && local.commit(draft());
+  }
+  function doCancel() {
+    local.cancel && local.cancel();
+  }
+  function onChange(e: any) {
+    setDraft(e && e.target ? e.target.value : '');
+  }
+  function onKeydown(e: any) {
+    if (e && e.key === 'Enter') {
+      e.preventDefault();
+      doCommit();
+    } else if (e && e.key === 'Escape') {
+      e.preventDefault();
+      doCancel();
+    }
+  }
+  function onBlur() {
+    doCommit();
+  }
+
+  return (
+    <>
+    <input type="date" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-7abe1a56="" />
+    </>
+  );
+}

package/src/EditorNumber.tsx

@@ -0,0 +1,77 @@
+import type { JSX } from 'solid-js';
+import { createSignal, mergeProps, splitProps } from 'solid-js';
+
+interface EditorNumberProps {
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label`.
+   */
+  columnId?: string;
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  column?: (unknown) | null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  row?: (unknown) | null;
+  /**
+   * The current cell value the local draft string seeds from (setup-once).
+   */
+  value?: (unknown) | null;
+  /**
+   * `(value) => void` — commit the cell. The draft is coerced with `Number()` at commit time; an empty/whitespace or non-numeric draft commits `null` (never `NaN`). Null-guarded at call sites.
+   */
+  commit?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * `() => void` — revert the edit (Escape). Null-guarded at call sites.
+   */
+  cancel?: ((...args: unknown[]) => unknown) | null;
+}
+
+export default function EditorNumber(_props: EditorNumberProps): JSX.Element {
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+
+  const [draft, setDraft] = createSignal('');
+
+  // Seed the draft string once from the incoming value (setup-once).
+  setDraft(local.value != null ? String(local.value) : '');
+  function onInput(e: any) {
+    setDraft(e && e.target ? e.target.value : '');
+  }
+
+  // Coerce to a Number at commit time. Defensive guard: an empty/whitespace draft
+  // commits null rather than NaN (Number('') === 0 is a silent footgun); a
+  // non-numeric draft also commits null. Otherwise commit the coerced number.
+  function doCommit() {
+    if (!local.commit) return;
+    const raw = draft();
+    if (raw == null || String(raw).trim() === '') {
+      local.commit(null);
+      return;
+    }
+    const n = Number(raw);
+    local.commit(Number.isNaN(n) ? null : n);
+  }
+  function doCancel() {
+    local.cancel && local.cancel();
+  }
+  function onKeydown(e: any) {
+    if (e && e.key === 'Enter') {
+      e.preventDefault();
+      doCommit();
+    } else if (e && e.key === 'Escape') {
+      e.preventDefault();
+      doCancel();
+    }
+  }
+  function onBlur() {
+    doCommit();
+  }
+
+  return (
+    <>
+    <input type="number" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-b2792b32="" />
+    </>
+  );
+}

package/src/EditorSelect.tsx

@@ -0,0 +1,79 @@
+import type { JSX } from 'solid-js';
+import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { Key } from '@solid-primitives/keyed';
+import { rozieAttr, rozieDisplay } from '@rozie/runtime-solid';
+
+interface EditorSelectProps {
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the select `aria-label`.
+   */
+  columnId?: string;
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  column?: (unknown) | null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  row?: (unknown) | null;
+  /**
+   * The current cell value the local draft seeds from (setup-once); String-coerced for the `<select>` binding.
+   */
+  value?: (unknown) | null;
+  /**
+   * `(value) => void` — commit the cell with the selected value (Enter / blur). Null-guarded at call sites.
+   */
+  commit?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * `() => void` — revert the edit (Escape). Null-guarded at call sites.
+   */
+  cancel?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * The select options — `[{ value, label }]`. Mirrors `<Column editorOptions>`.
+   */
+  options?: any[];
+}
+
+export default function EditorSelect(_props: EditorSelectProps): JSX.Element {
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, options: (() => [])() }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'options']);
+
+  const [draft, setDraft] = createSignal('');
+
+  // Seed the draft once from the incoming value (setup-once). Normalize null/undefined
+  // to '' so the <select> binds to a string.
+  setDraft(local.value != null ? String(local.value) : '');
+
+  // Picking/arrow-cycling an option updates the draft only — no commit.
+  function onChange(e: any) {
+    setDraft(e && e.target ? e.target.value : '');
+  }
+
+  // commit/cancel are Function props (default null) — guard before calling.
+  function doCommit() {
+    local.commit && local.commit(draft());
+  }
+  function doCancel() {
+    local.cancel && local.cancel();
+  }
+  function onKeydown(e: any) {
+    if (e && e.key === 'Enter') {
+      e.preventDefault();
+      doCommit();
+    } else if (e && e.key === 'Escape') {
+      e.preventDefault();
+      doCancel();
+    }
+  }
+  function onBlur() {
+    doCommit();
+  }
+
+  return (
+    <>
+    <select data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onChange($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onBlur(); }} data-rozie-s-117f1a16="">
+      <Key each={local.options as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-117f1a16="">{rozieDisplay(opt().label)}</option>}</Key>
+    </select>
+    </>
+  );
+}

package/src/EditorText.tsx

@@ -0,0 +1,72 @@
+import type { JSX } from 'solid-js';
+import { createSignal, mergeProps, splitProps } from 'solid-js';
+
+interface EditorTextProps {
+  /**
+   * The column id (mirrors the `#editor` slot scope). Used as the input `aria-label` fallback.
+   */
+  columnId?: string;
+  /**
+   * The table-core column object (opaque passthrough from the `#editor` slot scope).
+   */
+  column?: (unknown) | null;
+  /**
+   * The consumer's row data object (opaque passthrough from the `#editor` slot scope).
+   */
+  row?: (unknown) | null;
+  /**
+   * The current cell value the editor seeds its local draft from (setup-once).
+   */
+  value?: (unknown) | null;
+  /**
+   * `(value) => void` — commit the edited cell value (from the `#editor` slot scope). Null-guarded at call sites.
+   */
+  commit?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
+   */
+  cancel?: ((...args: unknown[]) => unknown) | null;
+}
+
+export default function EditorText(_props: EditorTextProps): JSX.Element {
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+
+  const [draft, setDraft] = createSignal('');
+
+  // Seed the draft once at setup from the incoming value (setup-once, NOT in the
+  // template). Normalize null/undefined to '' so the input value binds to a string.
+  setDraft(local.value != null ? String(local.value) : '');
+
+  // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
+  // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
+  function onInput(e: any) {
+    setDraft(e && e.target ? e.target.value : '');
+  }
+
+  // commit/cancel are Function props (default null) — guard before calling.
+  function doCommit() {
+    local.commit && local.commit(draft());
+  }
+  function doCancel() {
+    local.cancel && local.cancel();
+  }
+  function onKeydown(e: any) {
+    if (e && e.key === 'Enter') {
+      e.preventDefault();
+      doCommit();
+    } else if (e && e.key === 'Escape') {
+      e.preventDefault();
+      doCancel();
+    }
+  }
+  function onBlur() {
+    doCommit();
+  }
+
+  return (
+    <>
+    <input type="text" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-0d17f43a="" />
+    </>
+  );
+}

package/src/FilterNumberRange.tsx

@@ -0,0 +1,77 @@
+import type { JSX } from 'solid-js';
+import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { rozieAttr } from '@rozie/runtime-solid';
+
+interface FilterNumberRangeProps {
+  /**
+   * The column id (mirrors the `#filter` slot scope) — used as the filter key and the input `aria-label` base.
+   */
+  columnId?: string;
+  /**
+   * The table-core column object (opaque passthrough from the `#filter` slot scope).
+   */
+  column?: (unknown) | null;
+  /**
+   * The current column filter value (`[min, max]` tuple or null) the two inputs seed from (setup-once).
+   */
+  value?: (unknown) | null;
+  /**
+   * `(columnId, value) => void` — apply the column filter as a `[min, max]` tuple (each side coerced to a Number or `undefined`, so a one-sided range works); both empty clears the filter. Null-guarded at call sites.
+   */
+  setFilter?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * The faceted `[min, max]` bounds for this column (`[number, number]` or null) — drives the input placeholders only.
+   */
+  minMax?: (unknown) | null;
+}
+
+export default function FilterNumberRange(_props: FilterNumberRangeProps): JSX.Element {
+  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null, minMax: null }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'value', 'setFilter', 'minMax']);
+
+  const [minDraft, setMinDraft] = createSignal('');
+  const [maxDraft, setMaxDraft] = createSignal('');
+
+  // Seed both drafts once at setup from the incoming [min,max] tuple (setup-once).
+  setMinDraft(Array.isArray(local.value) && local.value[0] != null ? String(local.value[0]) : '');
+  setMaxDraft(Array.isArray(local.value) && local.value[1] != null ? String(local.value[1]) : '');
+
+  // Untyped handler params neutralize to `any` (the global-filter idiom).
+  function onMinInput(e: any) {
+    setMinDraft(e && e.target ? e.target.value : '');
+  }
+  function onMaxInput(e: any) {
+    setMaxDraft(e && e.target ? e.target.value : '');
+  }
+
+  // Plain string-coercion functions for the placeholders (NOT $computed — the
+  // EditorSelect/listbox lesson; opaque slot-scope props rejected by strict leaf tsc).
+  function minPlaceholder() {
+    return Array.isArray(local.minMax) && local.minMax[0] != null ? String(local.minMax[0]) : '';
+  }
+  function maxPlaceholder() {
+    return Array.isArray(local.minMax) && local.minMax[1] != null ? String(local.minMax[1]) : '';
+  }
+
+  // Convert a draft to a Number or undefined (empty string → undefined so a
+  // one-sided range works). Both undefined → clear the filter.
+  function applyRange() {
+    const minNum = minDraft() === '' ? undefined : Number(minDraft());
+    const maxNum = maxDraft() === '' ? undefined : Number(maxDraft());
+    if (minNum === undefined && maxNum === undefined) {
+      local.setFilter && local.setFilter(local.columnId, '');
+    } else {
+      local.setFilter && local.setFilter(local.columnId, [minNum, maxNum]);
+    }
+  }
+
+  return (
+    <>
+    <span style={{ display: "flex", "align-items": "center" }} data-rozie-s-97b2c090="">
+      <input part="col-filter" type="number" aria-label={rozieAttr(local.columnId + ' min')} class={"rdt-col-filter"} placeholder={rozieAttr(minPlaceholder())} value={minDraft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onMinInput($event); }} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { applyRange(); }} data-rozie-s-97b2c090="" />
+      <span data-rozie-s-97b2c090=""> - </span>
+      <input part="col-filter" type="number" aria-label={rozieAttr(local.columnId + ' max')} class={"rdt-col-filter"} placeholder={rozieAttr(maxPlaceholder())} value={maxDraft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onMaxInput($event); }} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { applyRange(); }} data-rozie-s-97b2c090="" />
+    </span>
+    </>
+  );
+}

package/src/FilterSelect.tsx

@@ -0,0 +1,60 @@
+import type { JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { Key } from '@solid-primitives/keyed';
+import { rozieAttr, rozieDisplay } from '@rozie/runtime-solid';
+
+interface FilterSelectProps {
+  /**
+   * The column id (mirrors the `#filter` slot scope) — used as the filter key and the select `aria-label`.
+   */
+  columnId?: string;
+  /**
+   * The table-core column object (opaque passthrough from the `#filter` slot scope).
+   */
+  column?: (unknown) | null;
+  /**
+   * The current column filter value the select seeds from (String-coerced).
+   */
+  value?: (unknown) | null;
+  /**
+   * `(columnId, value) => void` — apply the column filter on change; the leading empty "All" option clears it. Null-guarded at call sites.
+   */
+  setFilter?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * The faceted distinct keys for this column (cross-filtered, keys only — no occurrence counts) used to build the `<option>` list.
+   */
+  uniqueValues?: any[];
+}
+
+export default function FilterSelect(_props: FilterSelectProps): JSX.Element {
+  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null, uniqueValues: (() => [])() }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'value', 'setFilter', 'uniqueValues']);
+
+  // The <select> value binding coerced to a string. $props.value is typed `unknown`
+  // (opaque slot-scope), which the strict bundled-leaf tsc rejects against the native
+  // select `value` type on React/Solid — the fix is a plain function returning a
+  // string (uniform ×6, NOT a $computed; the EditorSelect/listbox value lesson).
+  function selectValue() {
+    return local.value != null ? String(local.value) : '';
+  }
+
+  // Immediate-apply-on-change: read the selected value the global-filter way. An
+  // empty value (the leading "All" option) clears the column filter.
+  function onChange(e: any) {
+    const v = e && e.target ? e.target.value : '';
+    if (v === '') {
+      local.setFilter && local.setFilter(local.columnId, '');
+    } else {
+      local.setFilter && local.setFilter(local.columnId, v);
+    }
+  }
+
+  return (
+    <>
+    <select part="col-filter" aria-label={local.columnId} class={"rdt-col-filter"} value={selectValue()} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onChange($event); }} data-rozie-s-d75b42b2="">
+      <option value="" data-rozie-s-d75b42b2="">All</option>
+      <Key each={local.uniqueValues as readonly any[]} by={(opt) => opt}>{(opt) => <option value={rozieAttr(opt())} data-rozie-s-d75b42b2="">{rozieDisplay(opt())}</option>}</Key>
+    </select>
+    </>
+  );
+}

package/src/FilterText.tsx

@@ -0,0 +1,65 @@
+import type { JSX } from 'solid-js';
+import { createSignal, mergeProps, splitProps } from 'solid-js';
+
+interface FilterTextProps {
+  /**
+   * The column id (mirrors the `#filter` slot scope) — used as the filter key and the input `aria-label`.
+   */
+  columnId?: string;
+  /**
+   * The table-core column object (opaque passthrough from the `#filter` slot scope).
+   */
+  column?: (unknown) | null;
+  /**
+   * The current column filter value the local draft seeds from (setup-once).
+   */
+  value?: (unknown) | null;
+  /**
+   * `(columnId, value) => void` — apply the column filter (Enter / blur applies, Escape clears). Null-guarded at call sites.
+   */
+  setFilter?: ((...args: unknown[]) => unknown) | null;
+}
+
+export default function FilterText(_props: FilterTextProps): JSX.Element {
+  const _merged = mergeProps({ columnId: '', column: null, value: null, setFilter: null }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'value', 'setFilter']);
+
+  const [draft, setDraft] = createSignal('');
+
+  // Seed the draft once at setup from the incoming value (setup-once, NOT in the
+  // template). Normalize null/undefined to '' so the input value binds to a string.
+  setDraft(local.value != null ? String(local.value) : '');
+
+  // Untyped handler param neutralizes to `any`, so reading e.target.value typechecks
+  // ×6 (the global-filter idiom). Never inline `$data.x = $event.target.value`.
+  function onInput(e: any) {
+    setDraft(e && e.target ? e.target.value : '');
+  }
+
+  // setFilter is a Function prop (default null) — guard before calling.
+  function applyFilter() {
+    local.setFilter && local.setFilter(local.columnId, draft());
+  }
+  function clearFilter() {
+    setDraft('');
+    local.setFilter && local.setFilter(local.columnId, '');
+  }
+  function onKeydown(e: any) {
+    if (e && e.key === 'Enter') {
+      e.preventDefault();
+      applyFilter();
+    } else if (e && e.key === 'Escape') {
+      e.preventDefault();
+      clearFilter();
+    }
+  }
+  function onBlur() {
+    applyFilter();
+  }
+
+  return (
+    <>
+    <input part="col-filter" type="text" aria-label={local.columnId} class={"rdt-col-filter"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-18cbb44e="" />
+    </>
+  );
+}