| <!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>quickstart | react-declarative</title><meta name="description" content="Documentation for react-declarative"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">react-declarative</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">react-declarative</a></li><li><a href="quickstart.html">quickstart</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="quick-start-build-your-first-form-and-grid" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Quick start: build your first form and grid<a href="#quick-start-build-your-first-form-and-grid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p>This guide walks you through two core patterns: building a form with the <code><One /></code> component and rendering a data grid with <code><ListTyped /></code>. Both follow the same schema-first approach — you define the structure as a TypeScript array, and react-declarative handles the rest.</p> |
| <a id="define-your-data-type" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Define your data type<a href="#define-your-data-type" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Start by describing the shape of your data as a TypeScript interface. react-declarative uses this to type-check your field schema and give you IntelliSense on <code>name</code> values.</p> |
| <pre><code class="tsx"><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-7">IUserProfile</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">firstName</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">lastName</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">role</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">birthDate</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">active</span><span class="hl-1">: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <a id="write-the-field-schema" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Write the field schema<a href="#write-the-field-schema" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Create a <code>TypedField<IUserProfile>[]</code> array. Each object in the array describes one field. The <code>name</code> property maps directly to a key on your data type, and the <code>type</code> property controls which input component renders.</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">TypedField</span><span class="hl-1">, </span><span class="hl-2">FieldType</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'react-declarative'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">fields</span><span class="hl-1">: </span><span class="hl-7">TypedField</span><span class="hl-1"><</span><span class="hl-7">IUserProfile</span><span class="hl-1">>[] = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Line</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Personal details'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Group</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">desktopColumns:</span><span class="hl-1"> </span><span class="hl-3">'6'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">tabletColumns:</span><span class="hl-1"> </span><span class="hl-3">'12'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">phoneColumns:</span><span class="hl-1"> </span><span class="hl-3">'12'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">fields:</span><span class="hl-1"> [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'firstName'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'First name'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">description:</span><span class="hl-1"> </span><span class="hl-3">'Enter your given name'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'lastName'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Last name'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">description:</span><span class="hl-1"> </span><span class="hl-3">'Enter your family name'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> ],</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Combo</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'role'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Role'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">description:</span><span class="hl-1"> </span><span class="hl-3">'Select a user role'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">itemList:</span><span class="hl-1"> [</span><span class="hl-3">'admin'</span><span class="hl-1">, </span><span class="hl-3">'editor'</span><span class="hl-1">, </span><span class="hl-3">'viewer'</span><span class="hl-1">],</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Date</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'birthDate'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Date of birth'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Switch</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'active'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Account active'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <blockquote> |
| <p><strong>Tip:</strong> <code>FieldType.Group</code> is a layout container, not a data field. It has no <code>name</code> — it only controls column widths at different breakpoints. Fields nested inside it inherit the responsive grid settings.</p> |
| </blockquote> |
| <a id="render-the-form-with-one" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Render the form with One<a href="#render-the-form-with-one" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Pass your schema to <code><One /></code> along with a <code>handler</code> to supply initial data and an <code>onChange</code> callback to receive updates.</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">React</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'react'</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">One</span><span class="hl-1">, </span><span class="hl-2">TypedField</span><span class="hl-1">, </span><span class="hl-2">FieldType</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'react-declarative'</span><span class="hl-1">;</span><br/><br/><span class="hl-17">// ...fields array from Step 2...</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">initialData</span><span class="hl-1">: </span><span class="hl-7">IUserProfile</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">firstName:</span><span class="hl-1"> </span><span class="hl-3">'Jane'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">lastName:</span><span class="hl-1"> </span><span class="hl-3">'Smith'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">role:</span><span class="hl-1"> </span><span class="hl-3">'editor'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">birthDate:</span><span class="hl-1"> </span><span class="hl-3">'1990-06-15'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">active:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">UserProfileForm</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">handleChange</span><span class="hl-1"> = (</span><span class="hl-2">data</span><span class="hl-1">: </span><span class="hl-7">IUserProfile</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">console</span><span class="hl-1">.</span><span class="hl-5">log</span><span class="hl-1">(</span><span class="hl-3">'Form data:'</span><span class="hl-1">, </span><span class="hl-2">data</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-17">// data.firstName, data.role, etc. match the `name` props in your schema</span><br/><span class="hl-1"> };</span><br/><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">One</span><span class="hl-1"><</span><span class="hl-7">IUserProfile</span><span class="hl-1">></span><br/><span class="hl-1"> </span><span class="hl-8">fields</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">fields</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">handler</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-9">() </span><span class="hl-4">=></span><span class="hl-9"> </span><span class="hl-2">initialData</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">onChange</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">handleChange</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <p>The <code>handler</code> prop accepts a plain object, an async function, or a promise. When the form loads, react-declarative calls <code>handler</code> and populates each field from the returned object — matching keys to <code>name</code> values in your schema.</p> |
| <blockquote> |
| <p><strong>Note:</strong> The <code>onChange</code> callback fires with the full data object every time any field changes. The keys of that object are exactly the <code>name</code> strings you set in your schema.</p> |
| </blockquote> |
| <a id="add-a-data-grid-with-listtyped" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Add a data grid with ListTyped<a href="#add-a-data-grid-with-listtyped" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><p>For tabular data, use <code><ListTyped /></code>. Define columns and a <code>handler</code> that returns rows and a total count.</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-2">React</span><span class="hl-1"> </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'react'</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">ListTyped</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">TypedField</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">IColumn</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">ColumnType</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">useArrayPaginator</span><span class="hl-1">,</span><br/><span class="hl-1">} </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'react-declarative'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-7">IUser</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">firstName</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">lastName</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">role</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">rows</span><span class="hl-1">: </span><span class="hl-7">IUser</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">'1'</span><span class="hl-1">, </span><span class="hl-2">firstName:</span><span class="hl-1"> </span><span class="hl-3">'Jane'</span><span class="hl-1">, </span><span class="hl-2">lastName:</span><span class="hl-1"> </span><span class="hl-3">'Smith'</span><span class="hl-1">, </span><span class="hl-2">role:</span><span class="hl-1"> </span><span class="hl-3">'editor'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">'2'</span><span class="hl-1">, </span><span class="hl-2">firstName:</span><span class="hl-1"> </span><span class="hl-3">'John'</span><span class="hl-1">, </span><span class="hl-2">lastName:</span><span class="hl-1"> </span><span class="hl-3">'Doe'</span><span class="hl-1">, </span><span class="hl-2">role:</span><span class="hl-1"> </span><span class="hl-3">'admin'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">'3'</span><span class="hl-1">, </span><span class="hl-2">firstName:</span><span class="hl-1"> </span><span class="hl-3">'Alice'</span><span class="hl-1">, </span><span class="hl-2">lastName:</span><span class="hl-1"> </span><span class="hl-3">'Lee'</span><span class="hl-1">, </span><span class="hl-2">role:</span><span class="hl-1"> </span><span class="hl-3">'viewer'</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">filters</span><span class="hl-1">: </span><span class="hl-7">TypedField</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'firstName'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'First name'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">columns</span><span class="hl-1">: </span><span class="hl-7">IColumn</span><span class="hl-1"><</span><span class="hl-7">IUser</span><span class="hl-1">>[] = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">ColumnType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">field:</span><span class="hl-1"> </span><span class="hl-3">'firstName'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">headerName:</span><span class="hl-1"> </span><span class="hl-3">'First name'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">width</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-3">'200px'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">sortable:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">ColumnType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">field:</span><span class="hl-1"> </span><span class="hl-3">'lastName'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">headerName:</span><span class="hl-1"> </span><span class="hl-3">'Last name'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">width</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-3">'200px'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">sortable:</span><span class="hl-1"> </span><span class="hl-4">true</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-2">ColumnType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">field:</span><span class="hl-1"> </span><span class="hl-3">'role'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">headerName:</span><span class="hl-1"> </span><span class="hl-3">'Role'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">width</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-3">'150px'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-5">UserGrid</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">handler</span><span class="hl-1"> = </span><span class="hl-5">useArrayPaginator</span><span class="hl-1">(</span><span class="hl-2">rows</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">ListTyped</span><span class="hl-1"><</span><span class="hl-7">IUser</span><span class="hl-1">></span><br/><span class="hl-1"> </span><span class="hl-8">withSearch</span><br/><span class="hl-1"> </span><span class="hl-8">withArrowPagination</span><br/><span class="hl-1"> </span><span class="hl-8">filters</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">filters</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">columns</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">columns</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-8">handler</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">handler</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <p><code>useArrayPaginator</code> wraps a static array into the paginator interface that <code><ListTyped /></code> expects. For real APIs, replace it with an async function that receives filter values, pagination, and sort state and returns <code>{ rows, total }</code>.</p> |
| <a id="how-the-output-data-is-structured" class="tsd-anchor"></a><h2 class="tsd-anchor-link">How the output data is structured<a href="#how-the-output-data-is-structured" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Both <code><One /></code> and <code><ListTyped /></code> work with plain JavaScript objects. The keys of the object returned by <code>onChange</code> (for <code><One /></code>) or by your handler (for <code><ListTyped /></code>) correspond directly to the <code>name</code> props in your schema:</p> |
| <pre><code><span class="hl-2">schema</span><span class="hl-1"> </span><span class="hl-20">field</span><span class="hl-1">: { </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Text</span><span class="hl-1">, </span><span class="hl-20">name</span><span class="hl-1">: </span><span class="hl-3">'firstName'</span><span class="hl-1">, ... }</span><br/><span class="hl-2">data</span><span class="hl-1"> </span><span class="hl-20">object</span><span class="hl-1">: { </span><span class="hl-20">firstName</span><span class="hl-1">: </span><span class="hl-3">'Jane'</span><span class="hl-1"> }</span><br/><br/><span class="hl-2">schema</span><span class="hl-1"> </span><span class="hl-20">field</span><span class="hl-1">: { </span><span class="hl-20">type</span><span class="hl-1">: </span><span class="hl-2">FieldType</span><span class="hl-1">.</span><span class="hl-2">Combo</span><span class="hl-1">, </span><span class="hl-20">name</span><span class="hl-1">: </span><span class="hl-3">'role'</span><span class="hl-1">, ... }</span><br/><span class="hl-2">data</span><span class="hl-1"> </span><span class="hl-20">object</span><span class="hl-1">: { </span><span class="hl-20">role</span><span class="hl-1">: </span><span class="hl-3">'editor'</span><span class="hl-1"> }</span> |
| </code><button>Copy</button></pre> |
|
|
| <p>There is no separate mapping step. No reducers. No form context to configure. The library derives the data shape entirely from your schema.</p> |
| <a id="next-steps" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Next steps<a href="#next-steps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><ul> |
| <li><a href="docs_concepts_field-types.html">Field types reference</a> — See all 40+ field types: text, combo, date, rating, file, checkbox, slider, and more.</li> |
| <li><a href="docs_guides_form-validation.html">Form validation</a> — Add inline validation with <code>isInvalid</code>, <code>isDisabled</code>, and <code>isVisible</code> callbacks.</li> |
| <li><a href="docs_guides_conditional-fields.html">Conditional fields</a> — Show or hide fields dynamically based on other field values.</li> |
| <li><a href="https://react-declarative-playground.github.io/">Playground</a> — Experiment with schemas interactively in the browser.</li> |
| </ul> |
| </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#quick-start-build-your-first-form-and-grid"><span>Quick start: build your first form and grid</span></a><ul><li><ul><li><a href="#define-your-data-type"><span>Define your data type</span></a></li><li><a href="#write-the-field-schema"><span>Write the field schema</span></a></li><li><a href="#render-the-form-with-one"><span>Render the form with <wbr/>One</span></a></li><li><a href="#add-a-data-grid-with-listtyped"><span>Add a data grid with <wbr/>List<wbr/>Typed</span></a></li></ul></li><li><a href="#how-the-output-data-is-structured"><span>How the output data is structured</span></a></li><li><a href="#next-steps"><span>Next steps</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">react-declarative</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html> |
|
|
