\n {(() => {\n const gridItems_cmp_mt023r5u_rb2jv = (Array.isArray(getByPath(data_source_tq_veb4m, \"\")) ? getByPath(data_source_tq_veb4m, \"\") : Array.isArray(data_source_tq_veb4m) ? data_source_tq_veb4m : null)\n // Nothing loaded yet — an endpoint still in flight, or a required filter\n // holding the request back — is an empty grid, not a binding error.\n if (gridItems_cmp_mt023r5u_rb2jv === null || gridItems_cmp_mt023r5u_rb2jv === undefined) return null\n if (!Array.isArray(gridItems_cmp_mt023r5u_rb2jv)) return
Grid items bağlantısı bir koleksiyon döndürmelidir.
\n const gridColumns_cmp_mt023r5u_rb2jv = [\"UserId\"]\n if (!gridColumns_cmp_mt023r5u_rb2jv.length) return
Preview için en az bir sütun seçin.
\n return (\n
\n
\n \n {gridColumns_cmp_mt023r5u_rb2jv.map((column) => | {column === \"value\" ? \"Value\" : column} | )}\n
\n \n {gridItems_cmp_mt023r5u_rb2jv.map((gridItem_cmp_mt023r5u_rb2jv, rowIndex) => (\n \n {gridColumns_cmp_mt023r5u_rb2jv.map((column) => {\n const cellValue_cmp_mt023r5u_rb2jv = column === \"value\" ? gridItem_cmp_mt023r5u_rb2jv : getByPath(gridItem_cmp_mt023r5u_rb2jv, column)\n const text = typeof cellValue_cmp_mt023r5u_rb2jv === \"object\" && cellValue_cmp_mt023r5u_rb2jv !== null && !(cellValue_cmp_mt023r5u_rb2jv instanceof Date) ? JSON.stringify(cellValue_cmp_mt023r5u_rb2jv) : formatLocaleValue(cellValue_cmp_mt023r5u_rb2jv) || \"—\"\n return | {text} | \n })}\n
\n ))}\n \n
\n
\n )\n })()}\n
\n {(() => {\n const gridItems_cmp_mt023r5u_rb2jv = (Array.isArray(getByPath(data_source_tq_veb4m, \"\")) ? getByPath(data_source_tq_veb4m, \"\") : Array.isArray(data_source_tq_veb4m) ? data_source_tq_veb4m : null)\n // Nothing loaded yet — an endpoint still in flight, or a required filter\n // holding the request back — is an empty grid, not a binding error.\n if (gridItems_cmp_mt023r5u_rb2jv === null || gridItems_cmp_mt023r5u_rb2jv === undefined) return null\n if (!Array.isArray(gridItems_cmp_mt023r5u_rb2jv)) return
Grid items bağlantısı bir koleksiyon döndürmelidir.
\n const gridColumns_cmp_mt023r5u_rb2jv = [\"UserId\"]\n if (!gridColumns_cmp_mt023r5u_rb2jv.length) return
Preview için en az bir sütun seçin.
\n return (\n
\n
\n \n {gridColumns_cmp_mt023r5u_rb2jv.map((column) => | {column === \"value\" ? \"Value\" : column} | )}\n
\n \n {gridItems_cmp_mt023r5u_rb2jv.map((gridItem_cmp_mt023r5u_rb2jv, rowIndex) => (\n \n {gridColumns_cmp_mt023r5u_rb2jv.map((column) => {\n const cellValue_cmp_mt023r5u_rb2jv = column === \"value\" ? gridItem_cmp_mt023r5u_rb2jv : getByPath(gridItem_cmp_mt023r5u_rb2jv, column)\n const text = typeof cellValue_cmp_mt023r5u_rb2jv === \"object\" && cellValue_cmp_mt023r5u_rb2jv !== null && !(cellValue_cmp_mt023r5u_rb2jv instanceof Date) ? JSON.stringify(cellValue_cmp_mt023r5u_rb2jv) : formatLocaleValue(cellValue_cmp_mt023r5u_rb2jv) || \"—\"\n return | {text} | \n })}\n
\n ))}\n \n
\n
\n )\n })()}\n
diff --git a/ui/src/components/visualDesigner/catalog.ts b/ui/src/components/visualDesigner/catalog.ts
index 171270a8..6d054498 100644
--- a/ui/src/components/visualDesigner/catalog.ts
+++ b/ui/src/components/visualDesigner/catalog.ts
@@ -849,6 +849,16 @@ export const SQL_DATA_SOURCE_DEFINITION: DesignerComponentDefinition = {
category: 'properties',
description: 'App.CatalogBoolean.BooleanDescription2',
},
+ // Number of columns the fields inside the container are laid out in. 1 —
+ // the default — keeps every child on its own row; a higher value places
+ // that many components side by side before wrapping to the next row.
+ {
+ name: 'columnCount',
+ type: 'number',
+ value: 1,
+ category: 'styling',
+ description: 'App.CatalogSqlDataSource.SqlDataSourceColumnCountDescription',
+ },
{
name: 'gap',
type: 'number',
diff --git a/ui/src/components/visualDesigner/codeGenerator.ts b/ui/src/components/visualDesigner/codeGenerator.ts
index 7fb73f2e..6471e5f8 100644
--- a/ui/src/components/visualDesigner/codeGenerator.ts
+++ b/ui/src/components/visualDesigner/codeGenerator.ts
@@ -5,6 +5,7 @@ import {
getDesignerTabSlotValue,
getDesignerDataSourceFilters,
getDesignerNodeFilters,
+ getSqlDataSourceColumnCount,
getSqlDataSourceEndpointId,
getSqlDataSourceKeyField,
getSqlDataSourceKeyParam,
@@ -723,11 +724,22 @@ const SQL_TOOLBAR_BUTTON_CLASS =
const sqlDataSourceToCode = (node: DesignerNode, level: number, itemVariable?: string) => {
const names = sqlIdentifiers(node)
const formScope: FormScope = { sourceId: node.id, setterName: names.setField }
+ const columnCount = getSqlDataSourceColumnCount(node)
+ const gap = Number(node.props.gap) || 0
+ // Children sit one level deeper once they are wrapped in the column grid.
const children = node.children
- .map((child) => nodeToCode(child, level + 2, itemVariable, formScope))
+ .map((child) => nodeToCode(child, level + (columnCount > 1 ? 3 : 2), itemVariable, formScope))
.join('\n')
const className = JSON.stringify(String(node.props.className || ''))
- const style = `{ display: "flex", flexDirection: "column", gap: ${Number(node.props.gap) || 0} }`
+ const style = `{ display: "flex", flexDirection: "column", gap: ${gap} }`
+ // The toolbar and the error line stay in the outer column, so only the fields
+ // are laid out side by side. A single column emits no wrapper at all, which
+ // keeps the markup of every page saved before the setting existed unchanged.
+ const gridStyle = `{ display: "grid", gridTemplateColumns: "repeat(${columnCount}, minmax(0, 1fr))", gap: ${gap}, alignItems: "start" }`
+ const content =
+ columnCount > 1
+ ? `${indent(`
`, level + 2)}\n${children}\n${indent('
', level + 2)}`
+ : children
const plainButtonClass = `${SQL_TOOLBAR_BUTTON_CLASS} border border-slate-300 text-slate-600 hover:border-sky-400 hover:text-sky-700 dark:border-slate-700 dark:text-slate-300`
// Navigation appears on its own whenever there is more than one record to walk.
const navigation = `
@@ -764,7 +776,7 @@ ${indent(`{${names.error} ?