@cyprnet/node-red-contrib-uibuilder-formgen 0.5.25 → 0.5.27

package/CHANGELOG.md

@@ -35,6 +35,14 @@ All notable changes to this package will be documented in this file.
 
 - Lookup/Auto-fill: allow textarea targets to accept arrays of <code>{value,label}</code> items by joining the values with newlines.
 
+## 0.5.26
+
+- UI: widen desktop portal layout (while keeping mobile-friendly behavior) and prefer horizontal scrolling over wrapping for results tables on larger screens.
+
+## 0.5.27
+
+- Results view: added column sorting (click header), search across all columns, and export of filtered results to JSON/CSV (Table/JSON views).
+
 ## 0.5.21
 
 - Legacy uibuilder 2.x: fixed vendor library paths (<code>../vendor/...</code>) in the uib2 portal template and uib2 Schema Builder so uibuilder comms work and <code>lookup:get</code> messages emit correctly.

package/docs/user-guide.html

@@ -516,7 +516,7 @@
           <pre>{
   "lookups": {
     "deviceTemplates": [
-      { "name": "Azure Device Template", "id": "tmpl_123", "desc": "..." }
+      { "name": "Template A", "id": "tmpl_123", "desc": "..." }
     ]
   },
   "sections": [{
@@ -551,12 +551,12 @@
           <p>Use this for OS profiles, templates, multi-field mappings, etc.</p>
           <pre>{
   "lookups": {
-    "osProfiles": [
+    "profiles": [
       {
-        "value": "win11",
-        "label": "Windows 11",
-        "devices": ["Dell 123", "Dell 321"],
-        "software": ["M365 Apps", "Teams"]
+        "value": "profileA",
+        "label": "Profile A",
+        "devices": ["Device 1", "Device 2"],
+        "software": ["App 1", "App 2"]
       }
     ]
   }
@@ -597,7 +597,7 @@
   "label": "Template ID",
   "autoFill": {
     "fromField": "templateName",
-    "source": { "type": "uibuilder", "lookupId": "deviceTemplates" },
+    "source": { "type": "uibuilder", "lookupId": "templates" },
     "matchKey": "name",
     "mappings": [{ "targetField": "templateId", "valueKey": "id" }]
   }
@@ -608,7 +608,7 @@
           <h5>Request message (portal → Node-RED)</h5>
           <p>When a user changes the source field, the portal sends a request to Node-RED via uibuilder (output #1):</p>
           <pre>{
-  "payload": { "type": "lookup:get", "lookupId": "deviceTemplates", "matchValue": "win11" }
+  "payload": { "type": "lookup:get", "lookupId": "templates", "matchValue": "Template A" }
 }</pre>
           <ul>
             <li><strong>lookupId</strong>: identifies which lookup list/service you want (you define this string)</li>
@@ -618,7 +618,7 @@
           <h5>Response message (Node-RED → portal)</h5>
           <p>Your flow should return the list back to the portal via the same uibuilder node’s input:</p>
           <pre>{
-  "payload": { "type": "lookup:data", "lookupId": "deviceTemplates", "matchValue": "win11", "items": [ ... ] }
+  "payload": { "type": "lookup:data", "lookupId": "templates", "matchValue": "Template A", "items": [ ... ] }
 }</pre>
           <div class="note ok">
             <strong>Important:</strong> Return <code>items</code> as an <strong>array</strong>. Each item must contain the properties your mappings reference.
@@ -631,7 +631,7 @@
           </div>
           <p>If something fails, you can return:</p>
           <pre>{
-  "payload": { "type": "lookup:error", "lookupId": "deviceTemplates", "error": "reason here" }
+  "payload": { "type": "lookup:error", "lookupId": "templates", "error": "reason here" }
 }</pre>
 
           <h4>Minimal dynamic lookup handler (Function node example)</h4>
@@ -645,15 +645,15 @@ const p = msg.payload || {};
 if (p.type !== "lookup:get") return null;
 
 // Switch on lookupId so you can serve multiple lists
-if (p.lookupId === "deviceTemplates") {
+if (p.lookupId === "templates") {
   // Optional: use p.matchValue to return only the records relevant to the current selection
   msg.payload = {
     type: "lookup:data",
     lookupId: p.lookupId,
     matchValue: p.matchValue || null,
     items: [
-      { name: "Azure Device Template", id: "tmpl_123", desc: "Example" },
-      { name: "Azure Block Template",  id: "tmpl_456", desc: "Example" }
+      { name: "Template A", id: "tmpl_123", desc: "Example" },
+      { name: "Template B", id: "tmpl_456", desc: "Example" }
     ]
   };
   return msg;
@@ -669,12 +669,104 @@ return msg;</pre>
             <li>If a mapping returns an <strong>array of strings</strong> and the target is a <code>textarea</code>, the portal joins the array into lines automatically.</li>
           </ul>
 
+          <h4>Lookup / Auto-fill cookbook (schema ↔ payload)</h4>
+          <p>
+            Use this as a “fill in the blanks” guide. Start from what you want to populate, then set your schema fields accordingly and return the matching
+            <code>lookup:data</code> shape from Node-RED.
+          </p>
+          <div class="note ok">
+            <strong>Golden rule:</strong> <code>payload.items</code> must be an <strong>array</strong> of records. Even if you only have one record to return, wrap it as <code>items: [ { ... } ]</code>.
+          </div>
+
+          <table>
+            <thead>
+              <tr>
+                <th>Goal</th>
+                <th>Schema settings (source field)</th>
+                <th>What a matched item must contain</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>Select “OS” fills 2 textareas</strong><br/><span class="pill">multi-field mapping</span></td>
+                <td>
+                  <div><strong>fromField</strong>: <code>os</code></div>
+                  <div><strong>lookupId</strong>: <code>profiles</code></div>
+                  <div><strong>matchKey</strong>: <code>value</code></div>
+                  <div><strong>mappings</strong>:
+                    <ul>
+                      <li><code>{ targetField:"devicesText", valueKey:"devices" }</code></li>
+                      <li><code>{ targetField:"softwareText", valueKey:"software" }</code></li>
+                    </ul>
+                  </div>
+                </td>
+                <td>
+                  <div><strong>value</strong> (or whatever your <code>matchKey</code> is set to)</div>
+                  <div><strong>devices</strong> and <strong>software</strong> as arrays of strings (recommended)</div>
+                </td>
+              </tr>
+              <tr>
+                <td><strong>Subnet/CIDR fills a textarea with an IP list</strong><br/><span class="pill">bulk list → textarea</span></td>
+                <td>
+                  <div><strong>fromField</strong>: <code>subnetAddress</code></div>
+                  <div><strong>lookupId</strong>: <code>ips</code></div>
+                  <div><strong>matchKey</strong>: <code>ip</code></div>
+                  <div><strong>mappings</strong>: <code>{ targetField:"iplist", valueKey:"ips" }</code></div>
+                </td>
+                <td>
+                  <div><strong>ip</strong> equals the typed subnet/CIDR (exact match)</div>
+                  <div><strong>ips</strong> is either:
+                    <ul>
+                      <li><strong>array of strings</strong>: <code>["192.168.1.0","192.168.1.1",...]</code> (best)</li>
+                      <li><strong>array of objects</strong>: <code>[{"value":"192.168.1.0","label":"..."},...]</code> (textarea will join by <code>value</code>/<code>label</code>)</li>
+                    </ul>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h5>Example: Subnet/CIDR → textarea list (dynamic lookup)</h5>
+          <p><strong>Schema (field):</strong></p>
+          <pre>{
+  "id": "subnetAddress",
+  "type": "text",
+  "label": "Subnet Address",
+  "autoFill": {
+    "fromField": "subnetAddress",
+    "source": { "type": "uibuilder", "lookupId": "ips" },
+    "matchKey": "ip",
+    "clearOnNoMatch": true,
+    "mappings": [
+      { "targetField": "iplist", "valueKey": "ips" }
+    ]
+  }
+}</pre>
+          <p><strong>Node-RED response:</strong></p>
+          <pre>{
+  "payload": {
+    "type": "lookup:data",
+    "lookupId": "ips",
+    "matchValue": "192.168.1.0/24",
+    "items": [
+      {
+        "ip": "192.168.1.0/24",
+        "ips": ["192.168.1.0", "192.168.1.1", "192.168.1.2"]
+      }
+    ]
+  }
+}</pre>
+          <div class="note">
+            <strong>Why your “items as an object” fails:</strong> if you return <code>items</code> as a single object (not an array), it is treated like a dictionary and won’t contain an <code>ip</code> property at the top level for matching.
+          </div>
+
           <h4>Common pitfalls</h4>
           <ul>
             <li><strong>Wrong lookupId</strong>: request and response lookupId must match exactly.</li>
             <li><strong>Missing matchValue in response</strong>: include it so caching works reliably.</li>
-            <li><strong>matchKey mismatch</strong>: if your select uses values like <code>win11</code>, set <code>matchKey</code> to <code>value</code> (not <code>label</code>).</li>
+            <li><strong>matchKey mismatch</strong>: if your select uses values like <code>profileA</code>, set <code>matchKey</code> to <code>value</code> (not <code>label</code>).</li>
             <li><strong>valueKey mismatch</strong>: ensure the returned item contains the properties your mappings reference.</li>
+            <li><strong>items must be an array</strong>: even for a single record, return <code>items: [ { ... } ]</code>.</li>
           </ul>
 
           <h4>Schema Builder: how to configure Lookup / Auto-fill</h4>
@@ -706,7 +798,7 @@ return msg;</pre>
             <li><strong>Unexpected clearing</strong>: check <code>clearOnNoMatch</code> and whether the source field becomes blank during edits.</li>
           </ul>
           <div class="note ok">
-            <strong>Tip (arrays are easier):</strong> For long lists, store them as <strong>arrays</strong> in your lookup items (e.g. <code>"devices": ["Dell...","HP..."]</code>)
+            <strong>Tip (arrays are easier):</strong> For long lists, store them as <strong>arrays</strong> in your lookup items (e.g. <code>"devices": ["Device 1","Device 2"]</code>)
             instead of a single string with embedded newlines. When you map an array of strings into a <code>textarea</code> (or keyvalue delimiter field),
             the generated portal will automatically join the array into lines for display.
           </div>
@@ -805,9 +897,75 @@ return msg;</pre>
           <h2>Submitting & results page</h2>
           <p>After Submit, the portal shows a Result page with:</p>
           <ul>
-            <li><strong>Table view</strong> and <strong>JSON view</strong> toggle</li>
-            <li><strong>Download JSON</strong></li>
+            <li><strong>Table</strong>, <strong>JSON</strong>, and <strong>Form</strong> view toggle</li>
+            <li><strong>Client-side pagination</strong> for large arrays (Table/JSON views)</li>
+            <li><strong>Download JSON</strong> (and <strong>Download Record JSON</strong> in Form view)</li>
           </ul>
+          <h3>Submit message contract (uibuilder mode)</h3>
+          <p>
+            When <code>submitMode</code> is <strong>uibuilder</strong>, the portal sends a submit message to Node-RED via the uibuilder node (output #1).
+            Your flow should respond back to the same uibuilder node’s input with a submit response and/or a result payload to display.
+          </p>
+
+          <h4>Submit request (portal → Node-RED)</h4>
+          <pre>{
+  "payload": {
+    "type": "submit",
+    "formId": "your_form_id",
+    "payload": { "fieldA": "value", "fieldB": 123 },
+    "meta": {
+      "timestamp": "2026-01-01T12:00:00.000Z",
+      "userAgent": "browser UA",
+      "url": "http://host/uibuilder/instance/"
+    }
+  }
+}</pre>
+
+          <h4>Submit response (Node-RED → portal)</h4>
+          <p>Respond with one of the following (these also clear the submit spinner):</p>
+          <pre>{
+  "payload": {
+    "type": "submit:ok",
+    "message": "Saved successfully",
+    "result": { "id": "123", "status": "ok" }
+  }
+}</pre>
+          <pre>{
+  "payload": {
+    "type": "submit:error",
+    "message": "Validation failed",
+    "error": { "details": "..." }
+  }
+}</pre>
+
+          <div class="note ok">
+            <strong>Result display:</strong> The portal will display <code>payload.result</code> (or, if you send a raw result message, it will display <code>payload.result</code> / <code>payload.payload.result</code> / an array payload).
+          </div>
+
+          <h3>Returning results to display (table/json/form)</h3>
+          <p>
+            To show a table with pagination, return an <strong>array of objects</strong> in <code>payload.result</code>:
+          </p>
+          <pre>{
+  "payload": {
+    "type": "submit:ok",
+    "result": [
+      { "ip": "192.168.1.0", "status": "free" },
+      { "ip": "192.168.1.1", "status": "used" }
+    ]
+  }
+}</pre>
+          <p>
+            You can also send a “generic result” message (not tied to submit), and the portal will still display it:
+          </p>
+          <pre>{
+  "payload": {
+    "result": [
+      { "ip": "192.168.1.0", "status": "free" }
+    ]
+  }
+}</pre>
+
           <p>Table view formatting:</p>
           <ul>
             <li>Top-level object keys show as rows</li>

package/nodes/uibuilder-formgen-uib2.html

@@ -297,6 +297,60 @@ It generates a portal that loads the uibuilder 2.x vendor stack (Socket.IO + Vue
 
 **Note**
 - This node does not change the behavior of `uibuilder-formgen` (Vue 2 + uibuilder v7) or `uibuilder-formgen-v3` (Vue 3 + Bootstrap 5).
+
+## Lookup / Auto-fill (static vs dynamic)
+
+PortalSmith supports “smart fields” that auto-populate other fields based on a selected/typed value.
+
+- **Static (schema.lookups)**: lookup lists live in the schema (`schema.lookups.<name>`). No Node-RED flow changes required.
+- **Dynamic (Node-RED via uibuilder)**: the portal requests data from your flow using uibuilder messages.
+
+## Dynamic lookup message contract (Node-RED source)
+
+Portal request (uibuilder output #1):
+
+```json
+{ "payload": { "type": "lookup:get", "lookupId": "ips", "matchValue": "192.168.1.0/24" } }
+```
+
+Node-RED response (uibuilder input):
+
+```json
+{
+  "payload": {
+    "type": "lookup:data",
+    "lookupId": "ips",
+    "matchValue": "192.168.1.0/24",
+    "items": [
+      { "ip": "192.168.1.0/24", "ips": ["192.168.1.0","192.168.1.1"] }
+    ]
+  }
+}
+```
+
+Notes:
+- `items` must be an **array** of records (even if returning a single record).
+- For textarea targets, `ips` can be an **array of strings** (recommended). Arrays of `{value,label}` are also accepted and will be joined into lines.
+
+## Submit + results contract (uibuilder mode)
+
+Portal submits:
+
+```json
+{ "payload": { "type": "submit", "formId": "your_form_id", "payload": { "fieldA": "value" }, "meta": { "timestamp": "...", "userAgent": "...", "url": "..." } } }
+```
+
+Return to show a result page:
+
+```json
+{ "payload": { "type": "submit:ok", "message": "OK", "result": [ { "colA": 1 }, { "colA": 2 } ] } }
+```
+
+Or return an error:
+
+```json
+{ "payload": { "type": "submit:error", "message": "Failed", "error": { "details": "..." } } }
+```
 </script>
 
 

package/nodes/uibuilder-formgen-v3.html

@@ -284,11 +284,11 @@ PortalSmith supports “smart fields” that auto-populate other fields based on
 When a field changes (e.g., OS selection), the portal sends to Node-RED (uibuilder output #1):
 
 ```json
-{ "payload": { "type": "lookup:get", "lookupId": "osProfiles", "matchValue": "win11" } }
+{ "payload": { "type": "lookup:get", "lookupId": "profiles", "matchValue": "profileA" } }
 ```
 
 - `lookupId`: identifies which lookup list/service you want (you choose this string)
-- `matchValue`: the current selected value from the source field (e.g., `win11`)
+- `matchValue`: the current selected value from the source field (e.g., `profileA`)
 
 Your flow must respond back to the same uibuilder instance (uibuilder input) with:
 
@@ -296,9 +296,9 @@ Your flow must respond back to the same uibuilder instance (uibuilder input) wit
 {
   "payload": {
     "type": "lookup:data",
-    "lookupId": "osProfiles",
-    "matchValue": "win11",
-    "items": [ { "value": "win11", "label": "Windows 11", "devices": ["..."], "software": ["..."] } ]
+    "lookupId": "profiles",
+    "matchValue": "profileA",
+    "items": [ { "value": "profileA", "label": "Profile A", "devices": ["..."], "software": ["..."] } ]
   }
 }
 ```
@@ -307,6 +307,42 @@ Notes:
 - `items` must be an **array**. Each item should contain the properties referenced by your field’s mappings.
 - Include the same `matchValue` so the portal can cache responses per selection.
 
+## Cookbook: “if schema looks like this → return payload like that”
+
+**Always** return `payload.items` as an **array** of records. Even if you only have one record, do `items: [ { ... } ]`.
+
+### Example: Subnet/CIDR → fill a textarea with an IP list
+
+Schema mapping (on the field that has `autoFill`):
+
+```json
+{
+  "fromField": "subnetAddress",
+  "source": { "type": "uibuilder", "lookupId": "ips" },
+  "matchKey": "ip",
+  "mappings": [ { "targetField": "iplist", "valueKey": "ips" } ]
+}
+```
+
+Node-RED response:
+
+```json
+{
+  "payload": {
+    "type": "lookup:data",
+    "lookupId": "ips",
+    "matchValue": "192.168.1.0/24",
+    "items": [
+      { "ip": "192.168.1.0/24", "ips": ["192.168.1.0","192.168.1.1"] }
+    ]
+  }
+}
+```
+
+Notes:
+- For textarea targets, `ips` can be an **array of strings** (recommended). Arrays of `{value,label}` are also accepted and will be joined into lines.
+- If `items` is sent as a single object (not an array), matching will fail for `matchKey` lookups.
+
 ## Typical wiring
 
 - uibuilder output #1 → Switch (`msg.payload.type == lookup:get`) → Function → uibuilder input
@@ -316,7 +352,7 @@ Example Function node skeleton:
 ```js
 const p = msg.payload || {};
 if (p.type !== "lookup:get") return null;
-if (p.lookupId !== "osProfiles") return null;
+if (p.lookupId !== "profiles") return null;
 
 msg.payload = {
   type: "lookup:data",
@@ -326,6 +362,26 @@ msg.payload = {
 };
 return msg;
 ```
+
+## Submit + results contract (uibuilder mode)
+
+Portal submits:
+
+```json
+{ "payload": { "type": "submit", "formId": "your_form_id", "payload": { "fieldA": "value" }, "meta": { "timestamp": "...", "userAgent": "...", "url": "..." } } }
+```
+
+Return to show a result page:
+
+```json
+{ "payload": { "type": "submit:ok", "message": "OK", "result": [ { "colA": 1 }, { "colA": 2 } ] } }
+```
+
+Or return an error:
+
+```json
+{ "payload": { "type": "submit:error", "message": "Failed", "error": { "details": "..." } } }
+```
 </script>
 
 

package/nodes/uibuilder-formgen-v3.js

@@ -528,7 +528,7 @@ module.exports = function(RED) {
           "src/form.schema.json": { sha256: await sha256FileHex(targetSchema) },
         };
         const runtimeData = {
-          generatorVersion: "0.5.25",
+          generatorVersion: "0.5.27",
           generatorNode: "uibuilder-formgen-v3",
           timestamp: new Date().toISOString(),
           instanceName: instanceName,

package/nodes/uibuilder-formgen.html

@@ -311,7 +311,7 @@ PortalSmith supports “smart fields” that auto-populate other fields based on
 When a field changes (e.g., OS selection), the portal sends to Node-RED (uibuilder output #1):
 
 ```json
-{ "payload": { "type": "lookup:get", "lookupId": "osProfiles", "matchValue": "win11" } }
+{ "payload": { "type": "lookup:get", "lookupId": "profiles", "matchValue": "profileA" } }
 ```
 
 Your flow must respond back to the same uibuilder instance (uibuilder input) with:
@@ -320,14 +320,70 @@ Your flow must respond back to the same uibuilder instance (uibuilder input) wit
 {
   "payload": {
     "type": "lookup:data",
-    "lookupId": "osProfiles",
-    "matchValue": "win11",
-    "items": [ { "value": "win11", "label": "Windows 11", "devices": ["..."], "software": ["..."] } ]
+    "lookupId": "profiles",
+    "matchValue": "profileA",
+    "items": [ { "value": "profileA", "label": "Profile A", "devices": ["..."], "software": ["..."] } ]
   }
 }
 ```
 
+## Cookbook: “if schema looks like this → return payload like that”
+
+**Always** return `payload.items` as an **array** of records. Even if you only have one record, do `items: [ { ... } ]`.
+
+### Example: Subnet/CIDR → fill a textarea with an IP list
+
+Schema mapping (on the field that has `autoFill`):
+
+```json
+{
+  "fromField": "subnetAddress",
+  "source": { "type": "uibuilder", "lookupId": "ips" },
+  "matchKey": "ip",
+  "mappings": [ { "targetField": "iplist", "valueKey": "ips" } ]
+}
+```
+
+Node-RED response:
+
+```json
+{
+  "payload": {
+    "type": "lookup:data",
+    "lookupId": "ips",
+    "matchValue": "192.168.1.0/24",
+    "items": [
+      { "ip": "192.168.1.0/24", "ips": ["192.168.1.0","192.168.1.1"] }
+    ]
+  }
+}
+```
+
+Notes:
+- For textarea targets, `ips` can be an **array of strings** (recommended). Arrays of `{value,label}` are also accepted and will be joined into lines.
+- If `items` is sent as a single object (not an array), matching will fail for `matchKey` lookups.
+
 ## Typical wiring
 
 - uibuilder output #1 → Switch (`msg.payload.type == lookup:get`) → Function → uibuilder input
+
+## Submit + results contract (uibuilder mode)
+
+Portal submits:
+
+```json
+{ "payload": { "type": "submit", "formId": "your_form_id", "payload": { "fieldA": "value" }, "meta": { "timestamp": "...", "userAgent": "...", "url": "..." } } }
+```
+
+Return to show a result page:
+
+```json
+{ "payload": { "type": "submit:ok", "message": "OK", "result": [ { "colA": 1 }, { "colA": 2 } ] } }
+```
+
+Or return an error:
+
+```json
+{ "payload": { "type": "submit:error", "message": "Failed", "error": { "details": "..." } } }
+```
 </script>

package/nodes/uibuilder-formgen.js

@@ -560,7 +560,7 @@ module.exports = function(RED) {
           "src/form.schema.json": { sha256: await sha256FileHex(targetSchema) },
         };
         const runtimeData = {
-          generatorVersion: "0.5.25",
+          generatorVersion: "0.5.27",
           timestamp: new Date().toISOString(),
           instanceName: instanceName,
           storageMode: storageMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyprnet/node-red-contrib-uibuilder-formgen",
-  "version": "0.5.25",
+  "version": "0.5.27",
   "description": "PortalSmith: Generate schema-driven uibuilder form portals from JSON",
   "keywords": [
     "node-red",

package/templates/index.html.mustache

@@ -181,9 +181,24 @@
       border-color: rgba(255,255,255,0.14);
     }
     .form-container {
-      max-width: 800px;
+      /* Mobile-first: keep layout fluid; constrain only on larger screens */
+      max-width: 100%;
       margin: 0 auto;
     }
+    @media (min-width: 1200px) {
+      .form-container { max-width: 1400px; }
+    }
+    @media (min-width: 1600px) {
+      .form-container { max-width: 1600px; }
+    }
+
+    /* Results tables: avoid wrapping on desktop; allow horizontal scroll instead */
+    @media (min-width: 992px) {
+      .table-responsive table td,
+      .table-responsive table th {
+        white-space: nowrap !important;
+      }
+    }
     .field-error {
       color: #dc3545;
       font-size: 0.875rem;
@@ -281,6 +296,33 @@
             </button>
           </div>
 
+          <div v-if="resultIsArrayOfObjects && resultView !== 'form'" class="d-flex flex-wrap align-items-center justify-content-between mb-2">
+            <div class="d-flex align-items-center flex-wrap">
+              <span class="text-muted small mr-2">Search</span>
+              <input
+                type="text"
+                class="form-control form-control-sm mr-2"
+                style="width:260px;max-width:100%;"
+                v-model="resultSearch"
+                placeholder="Search any column..."
+              >
+              <button type="button" class="btn btn-sm btn-outline-secondary mr-2" @click="clearResultSearch" :disabled="!resultSearch">
+                Clear
+              </button>
+              <span class="text-muted small" v-if="resultSearch">
+                {{ resultFilteredCount }} match<span v-if="resultFilteredCount !== 1">es</span>
+              </span>
+            </div>
+            <div class="btn-group btn-group-sm mt-2 mt-md-0" role="group" aria-label="Export filtered">
+              <button type="button" class="btn btn-outline-primary" @click="downloadFilteredResultJson" :disabled="resultFilteredCount === 0">
+                Export Filtered JSON
+              </button>
+              <button type="button" class="btn btn-outline-primary" @click="downloadFilteredResultCsv" :disabled="resultFilteredCount === 0">
+                Export Filtered CSV
+              </button>
+            </div>
+          </div>
+
           <div v-if="showResultPagination && resultView !== 'form'" class="d-flex flex-wrap align-items-center justify-content-between mb-2">
             <div class="d-flex align-items-center">
               <span class="text-muted small mr-2">Rows per page</span>
@@ -306,7 +348,17 @@
               <table class="table table-sm table-bordered mb-0">
                 <thead>
                   <tr>
-                    <th v-for="h in resultRecordHeaders" :key="h">{{h}}</th>
+                    <th
+                      v-for="h in resultRecordHeaders"
+                      :key="h"
+                      @click="toggleResultSort(h)"
+                      style="cursor:pointer;user-select:none;"
+                    >
+                      {{h}}
+                      <span v-if="resultSortKey === h" class="text-muted">
+                        {{ resultSortDir === 'asc' ? '▲' : '▼' }}
+                      </span>
+                    </th>
                   </tr>
                 </thead>
                 <tbody>

package/templates/index.js.mustache

@@ -761,6 +761,9 @@
         resultPageSize: 15,
         resultPageSizeOptions: [10, 15, 25, 50, 100, 1000],
         resultRecordIndex: 0,
+        resultSearch: '',
+        resultSortKey: '',
+        resultSortDir: 'asc',
         copyBlockActions: schema.actions ? schema.actions.filter(a => a.type === 'copyBlock') : [],
         exportFormats: CONFIG.exportFormats
       },
@@ -805,6 +808,40 @@
             return out;
           });
         },
+        resultFilteredRecordRows() {
+          if (!this.resultIsArrayOfObjects) return [];
+          const q = String(this.resultSearch || '').trim().toLowerCase();
+          const rows = this.resultRecordRows || [];
+          if (!q) return rows;
+          const headers = this.resultRecordHeaders || [];
+          return rows.filter(r => {
+            const hay = headers.map(h => (r && r[h] !== undefined && r[h] !== null) ? String(r[h]) : '').join(' ').toLowerCase();
+            return hay.includes(q);
+          });
+        },
+        resultSortedRecordRows() {
+          if (!this.resultIsArrayOfObjects) return [];
+          const rows = (this.resultFilteredRecordRows || []).slice();
+          const key = String(this.resultSortKey || '').trim();
+          if (!key) return rows;
+          const dir = (String(this.resultSortDir || 'asc').toLowerCase() === 'desc') ? -1 : 1;
+          const coll = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+          rows.sort((a, b) => {
+            const av = (a && a[key] !== undefined && a[key] !== null) ? a[key] : '';
+            const bv = (b && b[key] !== undefined && b[key] !== null) ? b[key] : '';
+            // Try numeric compare when both look numeric
+            const an = Number(av);
+            const bn = Number(bv);
+            const aNum = (String(av).trim() !== '' && Number.isFinite(an));
+            const bNum = (String(bv).trim() !== '' && Number.isFinite(bn));
+            if (aNum && bNum) return (an === bn ? 0 : (an < bn ? -1 : 1)) * dir;
+            return coll.compare(String(av), String(bv)) * dir;
+          });
+          return rows;
+        },
+        resultFilteredCount() {
+          return this.resultIsArrayOfObjects ? (this.resultSortedRecordRows || []).length : 0;
+        },
         resultKeyValueRows() {
           const r = this.lastResult;
           if (r === null || r === undefined) return [];
@@ -829,7 +866,7 @@
           }];
         },
         resultTotalRows() {
-          return this.resultIsArrayOfObjects ? (this.resultRecordRows || []).length : (this.resultKeyValueRows || []).length;
+          return this.resultIsArrayOfObjects ? (this.resultSortedRecordRows || []).length : (this.resultKeyValueRows || []).length;
         },
         showResultPagination() {
           return this.resultTotalRows > 10;
@@ -847,11 +884,24 @@
           return this.resultPageStart + sz;
         },
         resultPagedRows() {
-          const rows = this.resultIsArrayOfObjects ? (this.resultRecordRows || []) : (this.resultKeyValueRows || []);
+          const rows = this.resultIsArrayOfObjects ? (this.resultSortedRecordRows || []) : (this.resultKeyValueRows || []);
           if (!this.showResultPagination) return rows;
           return rows.slice(this.resultPageStart, this.resultPageEnd);
         },
         jsonResultText() {
+          // If we have an array-of-objects and search/sort is active, reflect that in JSON view too.
+          if (this.resultIsArrayOfObjects) {
+            const all = (this.resultSortedRecordRows || []).map(r => {
+              const out = {};
+              (this.resultRecordHeaders || []).forEach(h => { out[h] = r[h]; });
+              return out;
+            });
+            if (all.length > 10) {
+              const slice = all.slice(this.resultPageStart, this.resultPageEnd);
+              try { return JSON.stringify(slice, null, 2); } catch (e) { return String(slice); }
+            }
+            try { return JSON.stringify(all, null, 2); } catch (e) { return String(all); }
+          }
           if (Array.isArray(this.lastResult) && this.lastResult.length > 10) {
             const slice = this.lastResult.slice(this.resultPageStart, this.resultPageEnd);
             try { return JSON.stringify(slice, null, 2); } catch (e) { return String(slice); }
@@ -890,8 +940,9 @@
       },
       watch: {
         // Reset paging and record navigation whenever result changes
-        lastResult() { this.resultPage = 1; this.resultRecordIndex = 0; },
+        lastResult() { this.resultPage = 1; this.resultRecordIndex = 0; this.resultSearch = ''; this.resultSortKey = ''; this.resultSortDir = 'asc'; },
         resultPageSize() { this.resultPage = 1; },
+        resultSearch() { this.resultPage = 1; },
         resultView(val) {
           if (val === 'form') {
             // Clamp/reset index for form mode
@@ -901,6 +952,41 @@
         }
       },
       methods: {
+        toggleResultSort(key) {
+          const k = String(key || '').trim();
+          if (!k) return;
+          if (this.resultSortKey === k) {
+            this.resultSortDir = (this.resultSortDir === 'asc') ? 'desc' : 'asc';
+          } else {
+            this.resultSortKey = k;
+            this.resultSortDir = 'asc';
+          }
+          this.resultPage = 1;
+        },
+        clearResultSearch() {
+          this.resultSearch = '';
+          this.resultPage = 1;
+        },
+        downloadFilteredResultJson() {
+          if (!this.resultIsArrayOfObjects) return;
+          const headers = this.resultRecordHeaders || [];
+          const rows = (this.resultSortedRecordRows || []).map(r => {
+            const out = {};
+            headers.forEach(h => { out[h] = r[h]; });
+            return out;
+          });
+          const filename = `${CONFIG.formId || 'form'}-result-filtered-${timestampForFilename()}.json`;
+          downloadTextFile(filename, 'application/json;charset=utf-8', JSON.stringify(rows, null, 2));
+        },
+        downloadFilteredResultCsv() {
+          if (!this.resultIsArrayOfObjects) return;
+          const headers = this.resultRecordHeaders || [];
+          const rows = this.resultSortedRecordRows || [];
+          const headerLine = headers.map(escapeCsvCell).join(',');
+          const body = rows.map(r => headers.map(h => escapeCsvCell(r && r[h] !== undefined ? r[h] : '')).join(',')).join('\n');
+          const filename = `${CONFIG.formId || 'form'}-result-filtered-${timestampForFilename()}.csv`;
+          downloadTextFile(filename, 'text/csv;charset=utf-8', headerLine + '\n' + body + '\n');
+        },
         flushAutofill(fieldId) {
           try {
             const id = String(fieldId || '').trim();

package/templates/index.uib2.html.mustache

@@ -179,9 +179,24 @@
       border-color: rgba(255,255,255,0.14);
     }
     .form-container {
-      max-width: 800px;
+      /* Mobile-first: keep layout fluid; constrain only on larger screens */
+      max-width: 100%;
       margin: 0 auto;
     }
+    @media (min-width: 1200px) {
+      .form-container { max-width: 1400px; }
+    }
+    @media (min-width: 1600px) {
+      .form-container { max-width: 1600px; }
+    }
+
+    /* Results tables: avoid wrapping on desktop; allow horizontal scroll instead */
+    @media (min-width: 992px) {
+      .table-responsive table td,
+      .table-responsive table th {
+        white-space: nowrap !important;
+      }
+    }
     .field-error {
       color: #dc3545;
       font-size: 0.875rem;
@@ -279,6 +294,33 @@
             </button>
           </div>
 
+          <div v-if="resultIsArrayOfObjects && resultView !== 'form'" class="d-flex flex-wrap align-items-center justify-content-between mb-2">
+            <div class="d-flex align-items-center flex-wrap">
+              <span class="text-muted small mr-2">Search</span>
+              <input
+                type="text"
+                class="form-control form-control-sm mr-2"
+                style="width:260px;max-width:100%;"
+                v-model="resultSearch"
+                placeholder="Search any column..."
+              >
+              <button type="button" class="btn btn-sm btn-outline-secondary mr-2" @click="clearResultSearch" :disabled="!resultSearch">
+                Clear
+              </button>
+              <span class="text-muted small" v-if="resultSearch">
+                {{ resultFilteredCount }} match<span v-if="resultFilteredCount !== 1">es</span>
+              </span>
+            </div>
+            <div class="btn-group btn-group-sm mt-2 mt-md-0" role="group" aria-label="Export filtered">
+              <button type="button" class="btn btn-outline-primary" @click="downloadFilteredResultJson" :disabled="resultFilteredCount === 0">
+                Export Filtered JSON
+              </button>
+              <button type="button" class="btn btn-outline-primary" @click="downloadFilteredResultCsv" :disabled="resultFilteredCount === 0">
+                Export Filtered CSV
+              </button>
+            </div>
+          </div>
+
           <div v-if="showResultPagination && resultView !== 'form'" class="d-flex flex-wrap align-items-center justify-content-between mb-2">
             <div class="d-flex align-items-center">
               <span class="text-muted small mr-2">Rows per page</span>
@@ -304,7 +346,17 @@
               <table class="table table-sm table-bordered mb-0">
                 <thead>
                   <tr>
-                    <th v-for="h in resultRecordHeaders" :key="h">{{h}}</th>
+                    <th
+                      v-for="h in resultRecordHeaders"
+                      :key="h"
+                      @click="toggleResultSort(h)"
+                      style="cursor:pointer;user-select:none;"
+                    >
+                      {{h}}
+                      <span v-if="resultSortKey === h" class="text-muted">
+                        {{ resultSortDir === 'asc' ? '▲' : '▼' }}
+                      </span>
+                    </th>
                   </tr>
                 </thead>
                 <tbody>

package/templates/index.v3.html.mustache

@@ -164,9 +164,24 @@
       border-color: rgba(255,255,255,0.14);
     }
     .form-container {
-      max-width: 800px;
+      /* Mobile-first: keep layout fluid; constrain only on larger screens */
+      max-width: 100%;
       margin: 0 auto;
     }
+    @media (min-width: 1200px) {
+      .form-container { max-width: 1400px; }
+    }
+    @media (min-width: 1600px) {
+      .form-container { max-width: 1600px; }
+    }
+
+    /* Results tables: avoid wrapping on desktop; allow horizontal scroll instead */
+    @media (min-width: 992px) {
+      .table-responsive table td,
+      .table-responsive table th {
+        white-space: nowrap !important;
+      }
+    }
     .field-error {
       color: #dc3545;
       font-size: 0.875rem;
@@ -256,6 +271,33 @@
             <button type="button" class="btn btn-sm" :class="resultView === 'form' ? 'btn-primary' : 'btn-outline-primary'" @click="resultView = 'form'">Form</button>
           </div>
 
+          <div v-if="(formattedResult && formattedResult.length) && resultView !== 'form'" class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
+            <div class="d-flex align-items-center flex-wrap gap-2">
+              <span class="text-muted small">Search</span>
+              <input
+                type="text"
+                class="form-control form-control-sm"
+                style="width:260px;max-width:100%;"
+                v-model="resultSearch"
+                placeholder="Search any column..."
+              >
+              <button type="button" class="btn btn-sm btn-outline-secondary" @click="clearResultSearch" :disabled="!resultSearch">
+                Clear
+              </button>
+              <span class="text-muted small" v-if="resultSearch">
+                {{ filteredCount }} match<span v-if="filteredCount !== 1">es</span>
+              </span>
+            </div>
+            <div class="btn-group btn-group-sm" role="group" aria-label="Export filtered">
+              <button type="button" class="btn btn-outline-primary" @click="downloadFilteredResultJson" :disabled="filteredCount === 0">
+                Export Filtered JSON
+              </button>
+              <button type="button" class="btn btn-outline-primary" @click="downloadFilteredResultCsv" :disabled="filteredCount === 0">
+                Export Filtered CSV
+              </button>
+            </div>
+          </div>
+
           <div v-if="showResultPagination && resultView !== 'form'" class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
             <div class="d-flex align-items-center gap-2">
               <span class="text-muted small">Rows per page</span>
@@ -277,7 +319,17 @@
               <table class="table table-bordered table-sm">
                 <thead>
                   <tr>
-                    <th v-for="h in resultHeaders" :key="h">{{h}}</th>
+                    <th
+                      v-for="h in resultHeaders"
+                      :key="h"
+                      @click="toggleResultSort(h)"
+                      style="cursor:pointer;user-select:none;"
+                    >
+                      {{h}}
+                      <span v-if="resultSortKey === h" class="text-muted">
+                        {{ resultSortDir === 'asc' ? '▲' : '▼' }}
+                      </span>
+                    </th>
                   </tr>
                 </thead>
                 <tbody>

package/templates/index.v3.js.mustache

@@ -512,6 +512,9 @@
           resultPageSize: 15,
           resultPageSizeOptions: [10, 15, 25, 50, 100, 1000],
           resultRecordIndex: 0,
+          resultSearch: '',
+          resultSortKey: '',
+          resultSortDir: 'asc',
           copyBlockActions: schema.actions ? schema.actions.filter(a => a.type === 'copyBlock') : [],
           exportFormats: CONFIG.exportFormats
         };
@@ -549,8 +552,39 @@
           // Single object
           return [this.flattenRow(r)];
         },
+        filteredResult() {
+          const rows = this.formattedResult || [];
+          const q = String(this.resultSearch || '').trim().toLowerCase();
+          if (!q) return rows;
+          const headers = this.resultHeaders || [];
+          return rows.filter(r => {
+            const hay = headers.map(h => (r && r[h] !== undefined && r[h] !== null) ? String(r[h]) : '').join(' ').toLowerCase();
+            return hay.includes(q);
+          });
+        },
+        sortedFilteredResult() {
+          const rows = (this.filteredResult || []).slice();
+          const key = String(this.resultSortKey || '').trim();
+          if (!key) return rows;
+          const dir = (String(this.resultSortDir || 'asc').toLowerCase() === 'desc') ? -1 : 1;
+          const coll = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+          rows.sort((a, b) => {
+            const av = (a && a[key] !== undefined && a[key] !== null) ? a[key] : '';
+            const bv = (b && b[key] !== undefined && b[key] !== null) ? b[key] : '';
+            const an = Number(av);
+            const bn = Number(bv);
+            const aNum = (String(av).trim() !== '' && Number.isFinite(an));
+            const bNum = (String(bv).trim() !== '' && Number.isFinite(bn));
+            if (aNum && bNum) return (an === bn ? 0 : (an < bn ? -1 : 1)) * dir;
+            return coll.compare(String(av), String(bv)) * dir;
+          });
+          return rows;
+        },
+        filteredCount() {
+          return (this.sortedFilteredResult || []).length;
+        },
         resultTotalRows() {
-          return (this.formattedResult || []).length;
+          return (this.sortedFilteredResult || []).length;
         },
         showResultPagination() {
           // Show pager when records exceed 10
@@ -569,7 +603,7 @@
           return this.resultPageStart + sz;
         },
         pagedFormattedResult() {
-          const rows = this.formattedResult || [];
+          const rows = this.sortedFilteredResult || [];
           if (!this.showResultPagination) return rows;
           return rows.slice(this.resultPageStart, this.resultPageEnd);
         },
@@ -612,8 +646,9 @@
         }
       },
       watch: {
-        lastResult() { this.resultPage = 1; this.resultRecordIndex = 0; },
+        lastResult() { this.resultPage = 1; this.resultRecordIndex = 0; this.resultSearch = ''; this.resultSortKey = ''; this.resultSortDir = 'asc'; },
         resultPageSize() { this.resultPage = 1; },
+        resultSearch() { this.resultPage = 1; },
         resultView(val) {
           if (val === 'form') {
             const max = Math.max(0, (this.resultRecordCount || 1) - 1);
@@ -622,6 +657,34 @@
         }
       },
       methods: {
+        toggleResultSort(key) {
+          const k = String(key || '').trim();
+          if (!k) return;
+          if (this.resultSortKey === k) {
+            this.resultSortDir = (this.resultSortDir === 'asc') ? 'desc' : 'asc';
+          } else {
+            this.resultSortKey = k;
+            this.resultSortDir = 'asc';
+          }
+          this.resultPage = 1;
+        },
+        clearResultSearch() {
+          this.resultSearch = '';
+          this.resultPage = 1;
+        },
+        downloadFilteredResultJson() {
+          const rows = this.sortedFilteredResult || [];
+          const ts = timestampForFilename();
+          downloadTextFile(`${CONFIG.formId}_result_filtered_${ts}.json`, 'application/json', JSON.stringify(rows, null, 2));
+        },
+        downloadFilteredResultCsv() {
+          const rows = this.sortedFilteredResult || [];
+          const headers = this.resultHeaders || [];
+          const headerLine = headers.map(escapeCsvCell).join(',');
+          const body = rows.map(r => headers.map(h => escapeCsvCell(r && r[h] !== undefined ? r[h] : '')).join(',')).join('\n');
+          const ts = timestampForFilename();
+          downloadTextFile(`${CONFIG.formId}_result_filtered_${ts}.csv`, 'text/csv', headerLine + '\n' + body + '\n');
+        },
         flushAutofill(fieldId) {
           try {
             const id = String(fieldId || '').trim();