UNPKG

37.4 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
6
7<link rel="stylesheet" href="../assets/css/style.css"/>
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS Table Panels -- Northwoods Software </title>
9 <link rel="stylesheet" href="../assets/css/prism.css" />
10 </head>
11 <script>
12
13 window.diagrams = [];
14 window.goCode = function(pre, w, h, parentid, animation) {
15 window.diagrams.push([pre, w, h, parentid, animation]);
16 }
17 </script>
18 <body>
19 <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
20 <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
21 <div class="md:pl-4">
22 <a class="text-white hover:text-white no-underline hover:no-underline
23 font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
24 <h1 class="mb-0 p-1 ">GoJS</h1>
25 </a>
26 </div>
27 <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
28 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
29 <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
30 <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
31 </svg>
32 </button>
33 <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
34 <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
35 <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
36 <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
37 <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
38 <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
39 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
40 <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
41 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
42 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
43 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
44 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
45 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
46 </ul>
47 </div>
48 </div>
49 <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
50 </nav>
51
52 <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
53
54 <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
55 <div class="flex-shrink-0 px-8 py-4">
56 <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
57 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
58 <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
59 <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
60 </svg>
61 </button>
62 </div>
63 <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
64 <a href="index.html">Basics</a>
65 <a href="buildingObjects.html">Building Parts</a>
66 <a href="usingModels.html">Using Models</a>
67 <a href="dataBinding.html">Data Binding</a>
68 <a href="react.html">GoJS with React</a>
69 <a href="angular.html">GoJS with Angular</a>
70 <a href="textBlocks.html">TextBlocks</a>
71 <a href="shapes.html">Shapes</a>
72 <a href="pictures.html">Pictures</a>
73 <a href="panels.html">Panels</a>
74 <a href="tablePanels.html">Table Panels</a>
75 <a href="brush.html">Brushes</a>
76 <a href="sizing.html">Sizing Objects</a>
77 <a href="itemArrays.html">Item Arrays</a>
78 <a href="changedEvents.html">Changed Events</a>
79 <a href="transactions.html">Transactions</a>
80 <a href="viewport.html">Coordinates</a>
81 <a href="initialView.html">Initial View</a>
82 <a href="collections.html">Collections</a>
83 <a href="links.html">Links</a>
84 <a href="linkLabels.html">Link Labels</a>
85 <a href="connectionPoints.html">Link Points</a>
86 <a href="ports.html">Ports</a>
87 <a href="nodes.html">Nodes</a>
88 <a href="debugging.html">Debugging</a>
89 <a href="layouts.html">Layouts</a>
90 <a href="trees.html">Trees</a>
91 <a href="subtrees.html">SubTrees</a>
92 <a href="groups.html">Groups</a>
93 <a href="subgraphs.html">SubGraphs</a>
94 <a href="sizedGroups.html">Sized Groups</a>
95 <a href="selection.html">Selection</a>
96 <a href="highlighting.html">Highlighting</a>
97 <a href="animation.html">Animation</a>
98 <a href="toolTips.html">ToolTips</a>
99 <a href="contextmenus.html">Context Menus</a>
100 <a href="events.html">Diagram Events</a>
101 <a href="tools.html">Tools</a>
102 <a href="commands.html">Commands</a>
103 <a href="permissions.html">Permissions</a>
104 <a href="validation.html">Validation</a>
105 <a href="HTMLInteraction.html">HTML Interaction</a>
106 <a href="layers.html">Layers &amp; Z-ordering</a>
107 <a href="palette.html">Palette</a>
108 <a href="overview.html">Overview</a>
109 <a href="resizing.html">Resizing Diagrams</a>
110 <a href="replacingDeleting.html">Replacing and Deleting</a>
111 <a href="buttons.html">Buttons</a>
112 <a href="templateMaps.html">Template Maps</a>
113 <a href="legends.html">Legends and Titles</a>
114 <a href="extensions.html">Extensions</a>
115 <a href="geometry.html">Geometry Strings</a>
116 <a href="grids.html">Grid Patterns</a>
117 <a href="graduatedPanels.html">Graduated Panels</a>
118 <a href="makingImages.html">Diagram Images</a>
119 <a href="makingSVG.html">Diagram SVG</a>
120 <a href="printing.html">Printing</a>
121 <a href="serverSideImages.html">Server-side Images</a>
122 <a href="nodeScript.html">GoJS in Node.js</a>
123 <a href="testing.html">Testing</a>
124 <a href="storage.html">Storage</a>
125 <a href="performance.html">Performance</a>
126 <a href="source.html">Building from Source</a>
127 <a href="platforms.html">Platforms</a>
128 <a href="deployment.html">Deployment</a>
129 </nav>
130 </div>
131 <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135
136<h1>Table Panels</h1>
137<p>
138The "Table" Panel, <a>Panel,Table</a>, arranges objects in rows and columns.
139</p>
140<p>
141See samples that make use of tables in the <a href="../samples/index.html#tables">samples index</a>.
142</p>
143
144<h2 id="SimpleTablePanels">Simple Table Panels</h2>
145<p>
146Each object in a Table Panel is put into the cell indexed by the value of <a>GraphObject.row</a> and <a>GraphObject.column</a>.
147The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have.
148</p>
149<pre class="lang-js" id="simpleTable"><code>
150 diagram.add(
151 // all Parts are Panels
152 $(go.Part, go.Panel.Table, // or "Table"
153 $(go.TextBlock, "row 0\ncol 0",
154 { row: 0, column: 0, margin: 2, background: "lightgray" }),
155 $(go.TextBlock, "row 0\ncol 1",
156 { row: 0, column: 1, margin: 2, background: "lightgray" }),
157 $(go.TextBlock, "row 1\ncol 0",
158 { row: 1, column: 0, margin: 2, background: "lightgray" }),
159 $(go.TextBlock, "row 1\ncol 2",
160 { row: 1, column: 2, margin: 2, background: "lightgray" })
161 ));
162</code></pre>
163<script>goCode("simpleTable", 600, 100)</script>
164<p>
165Note that not every "cell" of the table needs to have a <a>GraphObject</a> in it.
166</p>
167<p>
168If there are multiple objects in a cell, they will probably overlap each other in the cell.
169By default objects are center-aligned in each cell.
170</p>
171<pre class="lang-js" id="multipleInCell"><code>
172 diagram.add(
173 $(go.Part,
174 $(go.Panel, "Table",
175 $(go.TextBlock, "row 0\ncol 0",
176 { row: 0, column: 0, margin: 2, background: "lightgray" }),
177 $(go.TextBlock, "row 0 col 1\nyellow background",
178 // first object in the cell (row: 0, col: 1)
179 { row: 0, column: 1, margin: 2,
180 background: "yellow", stroke: "gray" }),
181 $(go.TextBlock, "row 0\ncol 1",
182 // second object in that cell overlaps the first one,
183 // the bigger yellow TextBlock
184 { row: 0, column: 1, margin: 2,
185 background: "transparent", stroke: "blue" }),
186 $(go.TextBlock, "row 1\ncol 0",
187 { row: 1, column: 0, margin: 2, background: "lightgray" }),
188 $(go.TextBlock, "row 1\ncol 2",
189 { row: 1, column: 2, margin: 2, background: "lightgray" })
190 )
191 ));
192</code></pre>
193<script>goCode("multipleInCell", 600, 100)</script>
194
195<p>
196If a column or a row has no objects in it, that column or row is ignored.
197</p>
198<pre class="lang-js" id="emptyColumns"><code>
199 diagram.add(
200 $(go.Part,
201 $(go.Panel, "Table",
202 $(go.TextBlock, "row 0\ncol 0",
203 { row: 0, column: 0, margin: 2, background: "lightgray" }),
204 $(go.TextBlock, "row 0\ncol 11", // column 11 -- nothing in columns 1-10
205 { row: 0, column: 11, margin: 2, background: "lightgray" }),
206 $(go.TextBlock, "row 1\ncol 0",
207 { row: 1, column: 0, margin: 2, background: "lightgray" }),
208 $(go.TextBlock, "row 1\ncol 12", // column 12
209 { row: 1, column: 12, margin: 2, background: "lightgray" })
210 )
211 ));
212</code></pre>
213<script>goCode("emptyColumns", 600, 100)</script>
214
215<h2 id="SizingOfRowsOrColumns">Sizing of Rows or Columns</h2>
216<p>
217The height of each row is normally determined by the greatest height of all of the objects in that row.
218Similarly, the width of each column is normally determined by the greatest width of all of the objects in that column.
219However you can provide row height or column width information for any row or column independent of any individual object
220by setting properties of the desired <a>RowColumnDefinition</a> of the Table panel.
221</p>
222<p>
223To fix a column width or a row height in code you can call <a>Panel.getColumnDefinition</a>
224or <a>Panel.getRowDefinition</a> and then set <a>RowColumnDefinition.width</a> or <a>RowColumnDefinition.height</a>.
225If you want to limit the width or height to certain ranges, set the <a>RowColumnDefinition.minimum</a> or <a>RowColumnDefinition.maximum</a>.
226If the maximum and the width or height conflict, the maximum takes precedence.
227For example, if the maximum is 70 but the natural value is 80, the actual value is limited to 70.
228If that value conflicts with the minimum, the minimum takes precedence.
229For example, if the minimum is 50 but the natural value is 40, the actual value is 50.
230</p>
231<p>
232This example demonstrates how the column width may be controlled.
233</p>
234<pre class="lang-js" id="columnSizes"><code>
235 diagram.add(
236 $(go.Part,
237 $(go.Panel, "Table",
238 { defaultAlignment: go.Spot.Left },
239 $(go.RowColumnDefinition, { column: 0, width: 100 }),
240 $(go.RowColumnDefinition, { column: 1, width: 100, minimum: 150 }),
241 $(go.RowColumnDefinition, { column: 2, width: 100, maximum: 50 }),
242 $(go.RowColumnDefinition, { column: 3, width: 100, minimum: 150, maximum: 50 }),
243 $(go.TextBlock, "Text Block",
244 { row: 0, column: 0, background: "green" }),
245 $(go.TextBlock, "Text Block",
246 { row: 0, column: 1, background: "red" }),
247 $(go.TextBlock, "Text Block",
248 { row: 0, column: 2, background: "yellow" }),
249 $(go.TextBlock, "Text Block",
250 { row: 0, column: 3, background: "red" }),
251 $(go.Panel, "Auto",
252 { row: 1, column: 0 },
253 $(go.Shape, "RoundedRectangle", { fill: "green" }),
254 $(go.TextBlock, "Auto Panel")
255 ),
256 $(go.Panel, "Auto",
257 { row: 1, column: 1 },
258 $(go.Shape, "RoundedRectangle", { fill: "red" }),
259 $(go.TextBlock, "Auto Panel")
260 ),
261 $(go.Panel, "Auto",
262 { row: 1, column: 2 },
263 $(go.Shape, "RoundedRectangle", { fill: "yellow" }),
264 $(go.TextBlock, "Auto Panel")
265 ),
266 $(go.Panel, "Auto",
267 { row: 1, column: 3 },
268 $(go.Shape, "RoundedRectangle", { fill: "red" }),
269 $(go.TextBlock, "Auto Panel")
270 ),
271 $(go.TextBlock, "width: 100", { row: 2, column: 0 }),
272 $(go.TextBlock, "min: 150", { row: 2, column: 1 }),
273 $(go.TextBlock, "max: 50", { row: 2, column: 2 }),
274 $(go.TextBlock, "min & max", { row: 2, column: 3 })
275 )
276 ));
277</code></pre>
278<script>goCode("columnSizes", 600, 120)</script>
279<p>
280Note how the column with a minimum of 150 has a lot of extra space in it,
281and how the column with a maximum of 50 results in its elements being clipped.
282</p>
283
284<h2 id="StretchAndAlignmente">Stretch and Alignment</h2>
285<p>
286The size of a GraphObject in a Panel is determined by many factors.
287The <a>GraphObject.stretch</a> property specifies whether the width and/or height should take up all
288of the space given to it by the Panel.
289When the width and/or height is not stretched to fill the given space,
290the <a>GraphObject.alignment</a> property controls where the object is placed if it is smaller than available space.
291One may also stretch the width while aligning vertically, just as one may also
292stretch vertically while aligning along the X axis.
293</p>
294<p>
295The alignment value for a GraphObject, if not given by the value of GraphObject.alignment, may be inherited.
296If the object is in a Table Panel, the value may inherit from the <a>RowColumnDefinition.alignment</a>s of
297the row and of the column that the object is in.
298Finally the value may be inherited from the <a>Panel.defaultAlignment</a> property.
299</p>
300<p>
301The same inheritance is true for the stretch value for a GraphObject: <a>GraphObject.stretch</a>,
302<a>RowColumnDefinition.stretch</a>, and finally <a>Panel.defaultStretch</a>.
303</p>
304
305<h3 id="AlignmentInColumns">Alignment in Columns</h3>
306<pre class="lang-js" id="columns"><code>
307 diagram.add(
308 $(go.Part,
309 $(go.Panel, "Table",
310 { defaultAlignment: go.Spot.Left },
311 $(go.RowColumnDefinition, { column: 0, width: 200 }),
312 $(go.RowColumnDefinition, { column: 1, width: 15 }),
313 $(go.Panel, "Auto",
314 { row: 0, column: 0, alignment: go.Spot.Left },
315 $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
316 $(go.TextBlock, "Auto Panel")
317 ),
318 $(go.TextBlock, "alignment: Left", { row: 0, column: 2 }),
319 $(go.Panel, "Auto",
320 { row: 1, column: 0, alignment: go.Spot.Center},
321 $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
322 $(go.TextBlock, "Auto Panel")
323 ),
324 $(go.TextBlock, "alignment: Center", { row: 1, column: 2 }),
325 $(go.Panel, "Auto",
326 { row: 2, column: 0, alignment: go.Spot.Right },
327 $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
328 $(go.TextBlock, "Auto Panel")
329 ),
330 $(go.TextBlock, "alignment: Right", { row: 2, column: 2 }),
331 $(go.Panel, "Auto",
332 { row: 3, column: 0, stretch: go.GraphObject.Horizontal },
333 $(go.Shape, "RoundedRectangle", { fill: "yellow" }),
334 $(go.TextBlock, "Auto Panel")
335 ),
336 $(go.TextBlock, "stretch: Horizontal", { row: 3, column: 2 })
337 )
338 ));
339</code></pre>
340<script>goCode("columns", 600, 120)</script>
341
342<h3 id="AlignmentInRows">Alignment in Rows</h3>
343<pre class="lang-js" id="rows"><code>
344 diagram.add(
345 $(go.Part,
346 $(go.Panel, "Table",
347 { defaultAlignment: go.Spot.Top },
348 $(go.RowColumnDefinition, { row: 0, height: 50 }),
349 $(go.RowColumnDefinition, { row: 1, height: 15 }),
350 $(go.Panel, "Auto",
351 { row: 0, column: 0, alignment: go.Spot.Top },
352 $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
353 $(go.TextBlock, "Auto Panel")
354 ),
355 $(go.TextBlock, "alignment:\nTop", { row: 2, column: 0 }),
356 $(go.Panel, "Auto",
357 { row: 0, column: 1, alignment: go.Spot.Center},
358 $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
359 $(go.TextBlock, "Auto Panel")
360 ),
361 $(go.TextBlock, "alignment:\nCenter", { row: 2, column: 1 }),
362 $(go.Panel, "Auto",
363 { row: 0, column: 2, alignment: go.Spot.Bottom },
364 $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
365 $(go.TextBlock, "Auto Panel")
366 ),
367 $(go.TextBlock, "alignment:\nBottom", { row: 2, column: 2 }),
368 $(go.Panel, "Auto",
369 { row: 0, column: 3, stretch: go.GraphObject.Vertical },
370 $(go.Shape, "RoundedRectangle", { fill: "yellow" }),
371 $(go.TextBlock, "Auto Panel")
372 ),
373 $(go.TextBlock, "stretch:\nVertical", { row: 2, column: 3 })
374 )
375 ));
376</code></pre>
377<script>goCode("rows", 600, 120)</script>
378
379<h2 id="SpanningRowsOrColumns">Spanning Rows or Columns</h2>
380<p>
381An element in a Table Panel cell can cover more than one cell if you set the <a>GraphObject.rowSpan</a>
382or <a>GraphObject.columnSpan</a> properties.
383For example, if the value of GraphObject.columnSpan is greater than one, it specifies how many columns
384that object may cover, starting with the value of <a>GraphObject.column</a>, but excluding the column
385indexed by column + columnSpan.
386</p>
387<pre class="lang-js" id="columnSpan"><code>
388 diagram.add(
389 $(go.Part,
390 $(go.Panel, "Table",
391 $(go.TextBlock, "Three Col Header", // spans all three columns
392 { row: 0, column: 0, columnSpan: 3, stretch: go.GraphObject.Horizontal,
393 margin: 2, background: "lightgray" }),
394 $(go.TextBlock, "row 1\ncol 0",
395 { row: 1, column: 0, margin: 2, background: "lightgray" }),
396 $(go.TextBlock, "row 1\ncol 1",
397 { row: 1, column: 1, margin: 2, background: "lightgray" }),
398 $(go.TextBlock, "row 2\ncol 0",
399 { row: 2, column: 0, margin: 2, background: "lightgray" }),
400 $(go.TextBlock, "row 2\ncol 2",
401 { row: 2, column: 2, margin: 2, background: "lightgray" })
402 )
403 ));
404</code></pre>
405<script>goCode("columnSpan", 600, 120)</script>
406
407<p>
408Here is an example that includes both column spanning and row spanning.
409</p>
410<pre class="lang-js" id="columnSpan2"><code>
411 diagram.add(
412 $(go.Part,
413 $(go.Panel, "Table",
414 $(go.TextBlock, "Greetings",
415 { row: 0, column: 0, columnSpan: 3, stretch: go.GraphObject.Horizontal,
416 margin: 2, background: "lightgray" }),
417 $(go.TextBlock, "numbers",
418 { row: 1, column: 0, rowSpan: 2, stretch: go.GraphObject.Vertical,
419 margin: 2, background: "lightgray", angle: 270 }),
420 $(go.TextBlock, "row 1\ncol 1",
421 { row: 1, column: 1, margin: 2, background: "lightgray" }),
422 $(go.TextBlock, "row 1\ncol 2",
423 { row: 1, column: 2, margin: 2, background: "lightgray" }),
424 $(go.TextBlock, "row 2\ncol 1",
425 { row: 2, column: 1, margin: 2, background: "lightgray" }),
426 $(go.TextBlock, "row 2\ncol 3",
427 { row: 2, column: 3, margin: 2, background: "lightgray" }),
428 $(go.TextBlock, "Signature",
429 { row: 3, column: 2, columnSpan: 2, stretch: go.GraphObject.Horizontal,
430 margin: 2, background: "lightgray" })
431 )
432 ));
433</code></pre>
434<script>goCode("columnSpan2", 600, 120)</script>
435
436<h2 id="SeparatorsAndRowColumnPadding">Separators and Row/Column Padding</h2>
437<p>
438Table Panels also support the optional drawing of lines between rows or columns.
439The <a>RowColumnDefinition.separatorStrokeWidth</a> property controls the extra space that comes before a particular row or column.
440The <a>RowColumnDefinition.separatorStroke</a> and <a>RowColumnDefinition.separatorDashArray</a> control if and how a line is drawn.
441</p>
442<p>
443For example, if you want to treat the first row and the first column as "headers",
444you can separate them from the rest of the table by drawing a black line before row 1 and column 1.
445</p>
446<pre class="lang-js" id="spacing"><code>
447 diagram.add(
448 $(go.Part, "Auto",
449 $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
450 $(go.Panel, "Table",
451 $(go.TextBlock, "Header 1",
452 { row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
453 $(go.TextBlock, "Header 2",
454 { row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
455
456 // drawn before row 1:
457 $(go.RowColumnDefinition,
458 { row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
459 // drawn before column 1:
460 $(go.RowColumnDefinition,
461 { column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
462
463 $(go.TextBlock, "One", { row: 1, column: 0, stroke: "green", margin: 2 }),
464 $(go.TextBlock, "row 1 col 1", { row: 1, column: 1, margin: 2 }),
465 $(go.TextBlock, "row 1 col 2", { row: 1, column: 2, margin: 2 }),
466 $(go.TextBlock, "Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
467 $(go.TextBlock, "row 2 col 1", { row: 2, column: 1, margin: 2 }),
468 $(go.TextBlock, "row 2 col 2", { row: 2, column: 2, margin: 2 }),
469 $(go.TextBlock, "Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
470 $(go.TextBlock, "row 3 col 1", { row: 3, column: 1, margin: 2 }),
471 $(go.TextBlock, "row 3 col 2", { row: 3, column: 2, margin: 2 })
472 )
473 ));
474</code></pre>
475<script>goCode("spacing", 600, 150)</script>
476
477<p>
478If you want to have a default separator between each row, set the default separator properties of the <a>Panel</a>. These properties are:
479</p>
480<ul>
481 <li><a>Panel.defaultSeparatorPadding</a>
482 <li><a>Panel.defaultRowSeparatorStrokeWidth</a>
483 <li><a>Panel.defaultRowSeparatorStroke</a>
484 <li><a>Panel.defaultRowSeparatorDashArray</a>
485 <li><a>Panel.defaultColumnSeparatorStrokeWidth</a>
486 <li><a>Panel.defaultColumnSeparatorStroke</a>
487 <li><a>Panel.defaultColumnSeparatorDashArray</a>
488</ul>
489<p>
490Any separator properties set on a particular RowColumnDefinition will take precedence over the default values provided on the Panel.
491This permits keeping the special black line separating the header row and header column from the rest.
492</p>
493<pre class="lang-js" id="spacing2"><code>
494 diagram.add(
495 $(go.Part, "Auto",
496 $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
497 $(go.Panel, "Table",
498 // Set defaults for all rows and columns:
499 { defaultRowSeparatorStroke: "gray",
500 defaultColumnSeparatorStroke: "gray" },
501
502 $(go.TextBlock, "Header 1",
503 { row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
504 $(go.TextBlock, "Header 2",
505 { row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
506
507 $(go.RowColumnDefinition,
508 { row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
509 $(go.RowColumnDefinition,
510 { column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
511
512 $(go.TextBlock, "One", { row: 1, column: 0, stroke: "green", margin: 2 }),
513 $(go.TextBlock, "row 1 col 1", { row: 1, column: 1, margin: 2 }),
514 $(go.TextBlock, "row 1 col 2", { row: 1, column: 2, margin: 2 }),
515 $(go.TextBlock, "Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
516 $(go.TextBlock, "row 2 col 1", { row: 2, column: 1, margin: 2 }),
517 $(go.TextBlock, "row 2 col 2", { row: 2, column: 2, margin: 2 }),
518 $(go.TextBlock, "Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
519 $(go.TextBlock, "row 3 col 1", { row: 3, column: 1, margin: 2 }),
520 $(go.TextBlock, "row 3 col 2", { row: 3, column: 2, margin: 2 })
521 )
522 ));
523</code></pre>
524<script>goCode("spacing2", 600, 150)</script>
525
526<p>
527RowColumnDefinitions also have a <a>RowColumnDefinition.separatorPadding</a> property,
528which can be used to add extra space to rows or columns.
529When a <a>RowColumnDefinition.background</a> is set, it includes the padding in its area.
530</p>
531<pre class="lang-js" id="padding"><code>
532 diagram.add(
533 $(go.Part, "Auto",
534 $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
535 $(go.Panel, "Table",
536 // Set defaults for all rows and columns:
537 { padding: 1.5,
538 defaultRowSeparatorStroke: "gray",
539 defaultColumnSeparatorStroke: "gray",
540 defaultSeparatorPadding: new go.Margin(18, 0, 8, 0) },
541
542 $(go.TextBlock, "Header 1",
543 { row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
544 $(go.TextBlock, "Header 2",
545 { row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
546
547 // Override the panel's default padding on the first row
548 $(go.RowColumnDefinition, { row: 0, separatorPadding: 0 }),
549
550 $(go.RowColumnDefinition,
551 { row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
552 $(go.RowColumnDefinition, { row: 2, background: 'lightblue' }),
553
554 $(go.RowColumnDefinition,
555 { column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
556 $(go.TextBlock, "One", { row: 1, column: 0, stroke: "green", margin: 2 }),
557 $(go.TextBlock, "row 1 col 1", { row: 1, column: 1, margin: 2 }),
558 $(go.TextBlock, "row 1 col 2", { row: 1, column: 2, margin: 2 }),
559 $(go.TextBlock, "Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
560 $(go.TextBlock, "row 2 col 1", { row: 2, column: 1, margin: 2 }),
561 $(go.TextBlock, "row 2 col 2", { row: 2, column: 2, margin: 2 }),
562 $(go.TextBlock, "Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
563 $(go.TextBlock, "row 3 col 1", { row: 3, column: 1, margin: 2 }),
564 $(go.TextBlock, "row 3 col 2", { row: 3, column: 2, margin: 2 })
565 )
566 ));
567</code></pre>
568<script>goCode("padding", 600, 200)</script>
569
570<h2 id="TableRowsAndTableColumns">TableRows and TableColumns</h2>
571<p>
572To avoid having to specify the row for each object, you can make use of a special Panel that can only be used in Table Panels,
573the <a>Panel,TableRow</a> panel type. Put all of the objects for each row into a TableRow Panel.
574You will still need to specify the column for each object in each row.
575</p>
576<pre class="lang-js" id="spacing3"><code>
577 diagram.add(
578 $(go.Part, "Auto",
579 $(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
580 $(go.Panel, "Table",
581 // Set defaults for all rows and columns:
582 { defaultRowSeparatorStroke: "gray",
583 defaultColumnSeparatorStroke: "gray" },
584 $(go.Panel, "TableRow", { row: 0 },
585 $(go.TextBlock, "Header 1",
586 { column: 1, font: "bold 10pt sans-serif", margin: 2 }),
587 $(go.TextBlock, "Header 2",
588 { column: 2, font: "bold 10pt sans-serif", margin: 2 })),
589 $(go.RowColumnDefinition,
590 { row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
591 $(go.RowColumnDefinition,
592 { column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
593 $(go.Panel, "TableRow", { row: 1 },
594 $(go.TextBlock, "One", { column: 0, stroke: "green", margin: 2 }),
595 $(go.TextBlock, "row 1 col 1", { column: 1, margin: 2 }),
596 $(go.TextBlock, "row 1 col 2", { column: 2, margin: 2 })
597 ),
598 $(go.Panel, "TableRow", { row: 2 },
599 $(go.TextBlock, "Two", { column: 0, stroke: "green", margin: 2 }),
600 $(go.TextBlock, "row 2 col 1", { column: 1, margin: 2 }),
601 $(go.TextBlock, "row 2 col 2", { column: 2, margin: 2 })
602 ),
603 $(go.Panel, "TableRow", { row: 3 },
604 $(go.TextBlock, "Three", { column: 0, stroke: "green", margin: 2 }),
605 $(go.TextBlock, "row 3 col 1", { column: 1, margin: 2 }),
606 $(go.TextBlock, "row 3 col 2", { column: 2, margin: 2 })
607 )
608 )
609 ));
610</code></pre>
611<script>goCode("spacing3", 600, 150)</script>
612<p>
613The same kind of organization is also possible with columns by using <a>Panel,TableColumn</a> Panels.
614</p>
615
616<h2 id="Examples">Examples</h2>
617<p>
618 In this example the first column spans two rows, because <a>GraphObject.rowSpan</a> is 2 on the <a>Picture</a>.
619</p>
620<p>
621 The second column (column #1) has a <a>RowColumnDefinition.minimum</a> width of 100,
622 so that column is at least that wide even if the elements in that column's cells are narrower.
623</p>
624<p>
625 The first column only takes as much width as it naturally needs and any excess width is given to the second column.
626 This occurs because the <a>RowColumnDefinition</a> for column #0 has <a>RowColumnDefinition.sizing</a> set to None.
627 The same is true for the first row -- any extra height is given to the second row.
628</p>
629<p>
630 There is a column separator line just before the second column, and there is a row separator just before
631 the second row because the respective <a>RowColumnDefinition.separatorStroke</a> properties have been set
632 to a color. But the row separator is not visible in the first column because that column's definition
633 sets <a>RowColumnDefinition.background</a> to "white" and sets <a>RowColumnDefinition.coversSeparators</a> to true.
634</p>
635<pre class="lang-js" id="example1"><code>
636 diagram.nodeTemplate =
637 $(go.Node, "Auto",
638 { resizable: true, minSize: new go.Size(162, 62) },
639 $(go.Shape, { fill: "white" }),
640 $(go.Panel, "Table",
641 { stretch: go.GraphObject.Fill, margin: 0.5 },
642
643 $(go.RowColumnDefinition,
644 { column: 0, sizing: go.RowColumnDefinition.None, background: "white", coversSeparators: true }),
645 $(go.RowColumnDefinition,
646 { column: 1, minimum: 100, background: "white", separatorStroke: "black" }),
647 $(go.RowColumnDefinition,
648 { row: 0, sizing: go.RowColumnDefinition.None }),
649 $(go.RowColumnDefinition,
650 { row: 1, separatorStroke: "black" }),
651
652 $(go.Picture,
653 { row: 0, column: 0, rowSpan: 2, width: 48, height: 48, margin: 6 },
654 new go.Binding("source", "pic")),
655 $(go.TextBlock,
656 { row: 0, column: 1, stretch: go.GraphObject.Horizontal, margin: 2, textAlign: "center" },
657 new go.Binding("text", "text1")),
658 $(go.TextBlock,
659 { row: 1, column: 1, stretch: go.GraphObject.Fill, margin: 2, textAlign: "center" },
660 new go.Binding("text", "text2"))
661 ),
662 );
663
664 diagram.model.nodeDataArray = [
665 {
666 pic: "../samples/images/hs1.jpg",
667 text1: "top",
668 text2: "bottom gets extra space"
669 },
670 {
671 pic: "../samples/images/hs2.jpg",
672 text1: "top has more description that wraps",
673 text2: "node is taller due to more text"
674 }
675 ]
676</code></pre>
677<script>goCode("example1", 600, 200)</script>
678
679
680 </div>
681 </div>
682
683 <div class="bg-nwoods-primary">
684 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
685 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
686 </section>
687 </div><footer class="bg-nwoods-primary text-white">
688 <div class="container max-w-screen-lg mx-auto px-8">
689 <div class="w-full py-6">
690
691 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
692 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
693 <li class="list-none row-span-2">
694 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
695 <ul class="list-none space-y-4 md:space-y-1 px-0">
696 <li>
697 <a href="../samples/index.html">Samples</a>
698 </li>
699 <li>
700 <a href="../learn/index.html">Learn</a>
701 </li>
702 <li>
703 <a href="../intro/index.html">Intro</a>
704 </li>
705 <li>
706 <a href="../api/index.html">API</a>
707 </li>
708 <li>
709 <a href="../changelog.html">Changelog</a>
710 </li>
711 <li>
712 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
713 </li>
714 </ul>
715 </li>
716 <li class="list-none row-span-2">
717 <h2 class="text-base font-semibold tracking-wide">Support</h2>
718 <ul class="list-none space-y-4 md:space-y-1 px-0">
719 <li>
720 <a href="https://www.nwoods.com/contact.html"
721 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
722 </li>
723 <li>
724 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
725 </li>
726 <li>
727 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
728 </li>
729 <li>
730 <a href="https://www.nwoods.com/sales/index.html"
731 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
732 </li>
733 <li>
734 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
735 </li>
736 </ul>
737 </li>
738 <li class="list-none row-span-2">
739 <h2 class="text-base font-semibold tracking-wide">Company</h2>
740 <ul class="list-none space-y-4 md:space-y-1 px-0">
741 <li>
742 <a href="https://www.nwoods.com">Northwoods</a>
743 </li>
744 <li>
745 <a href="https://www.nwoods.com/about.html">About Us</a>
746 </li>
747 <li>
748 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
749 </li>
750 <li>
751 <a href="https://twitter.com/northwoodsgo">Twitter</a>
752 </li>
753
754 </ul>
755 </li>
756 </ul>
757
758
759 <p class="text-sm text-gray-100 md:mb-6">
760 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
761 </p>
762 </div>
763 </div>
764</footer> </body>
765
766<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
767<script>
768 window.dataLayer = window.dataLayer || [];
769 function gtag(){dataLayer.push(arguments);}
770 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
771 var getOutboundLink = function(url, label) {
772 gtag('event', 'click', {
773 'event_category': 'outbound',
774 'event_label': label,
775 'transport_type': 'beacon'
776 });
777 }
778
779 // topnav
780 var topButton = document.getElementById("topnavButton");
781 var topnavList = document.getElementById("topnavList");
782 topButton.addEventListener("click", function() {
783 this.classList.toggle("active");
784 topnavList.classList.toggle("hidden");
785 document.getElementById("topnavOpen").classList.toggle("hidden");
786 document.getElementById("topnavClosed").classList.toggle("hidden");
787 });
788</script>
789 <script src="../assets/js/prism.js"></script>
790 <script src="../release/go.js"></script>
791 <script src="../assets/js/goDoc.js"></script>
792 <script>
793 document.addEventListener("DOMContentLoaded", function() {
794 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
795 if (window.goDoc) window.goDoc();
796 var d = window.diagrams;
797 for (var i = 0; i < d.length; i++) {
798 var dargs = d[i];
799 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
800 }
801 if (window.extra) window.extra();
802 });
803 </script>
804</html>