create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
926 lines (885 loc) • 41.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Table Panels" />
<meta property="og:title" content="Table Panels" />
<meta name="twitter:title" content="Table Panels" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta property="og:url" content="https://gojs.net/latest/intro/tablePanels.html" />
<meta property="twitter:url" content="https://gojs.net/latest/intro/tablePanels.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Table Panels | GoJS
</title>
<link rel="stylesheet" href="../assets/css/prism.css"/>
</head>
<script>
window.diagrams = [];
window.goCode = function (pre, w, h, parentid, animation) {
window
.diagrams
.push([pre, w, h, parentid, animation]);
}
</script>
<body>
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="sticky top-0 left-0 z-10 px-2 w-full bg-white border-b border-b-gray-200 md:hidden">
<button id="sidenavButton" class="flex p-2 text-gray-900 bg-inherit shadow-none items-center text-sm font-semibold hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block mr-2" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Menu</span>
</button>
</div>
<script>
window.addEventListener("DOMContentLoaded", function () {
// sidenav
var sideButton = document.getElementById("sidenavButton");
var sidenav = document.getElementById("sidenav");
if (sideButton && sidenav) {
sideButton.addEventListener("click", function (e) {
sidenav
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!sidenav.classList.contains("hidden") && !e.target.closest("#sidenavList")) {
sideButton.click();
}
});
}
});
</script>
<div class="flex flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<aside id="sidenav"
class="hidden fixed top-0 left-0 z-10 w-full bg-black/10 min-h-screen max-h-screen overflow-x-hidden overflow-y-auto shrink-0
md:block md:sticky md:w-52 md:min-h-0 md:bg-inherit md:border-r md:border-r-gray-200 md:overscroll-auto">
<nav id="sidenavList" class="flex flex-col bg-white w-52 min-h-screen pl-2 pt-4 pb-24 md:w-full md:min-h-0">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="svelte.html">GoJS with Svelte</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="typings.html">Typings</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="routers.html">Routers</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="theming.html">Theming</a>
<a href="tooltips.html">ToolTips</a>
<a href="contextMenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="accessibility.html">Accessibility</a>
<a href="buttons.html">Buttons</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="animation.html">Animation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers & Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="SVGContext.html">Rendering to SVG</a>
<a href="makingSVG.html">Snapshot to SVG</a>
<a href="makingImages.html">Diagram Images</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="performance.html">Performance</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
</nav>
</aside>
<script>
var navList = document.getElementById('sidenavList');
if (navList !== null) {
var url = window.location.href;
var lindex = url.lastIndexOf('/');
url = url
.slice(lindex + 1)
.toLowerCase();
var aTags = navList.getElementsByTagName('a');
var currentindex = -1;
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.indexOf('/' + url) !== -1) {
currentindex = i;
aTags[i]
.classList
.add('active');
break;
}
}
}
</script>
<div class="px-4 pb-16 w-full overflow-hidden prose">
<h1>Table Panels</h1>
<p>The "Table" Panel, <a>Panel.Table</a>, arranges objects in rows and columns.</p>
<p>See samples that make use of tables in the <a href="../samples/index.html#tables">samples index</a>.</p>
<p>
In these simplistic demonstrations, the code programmatically creates a Part and adds it to the Diagram.
Once you learn about models and data binding you will generally not create parts (nodes or links) programmatically.
</p>
<h2 id="SimpleTablePanels">Simple Table Panels</h2>
<p>
Each object in a Table Panel is put into the cell indexed by the value of <a>GraphObject.row</a> and <a>GraphObject.column</a>. The 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.
</p>
<pre class="lang-js" id="simpleTable"><code>
diagram.add(
// all Parts are Panels
new go.Part(go.Panel.Table) // or "Table"
.add(
new go.TextBlock("row 0\ncol 0",
{ row: 0, column: 0, margin: 2, background: "lightgray" }),
new go.TextBlock("row 0\ncol 1",
{ row: 0, column: 1, margin: 2, background: "lightgray" }),
new go.TextBlock("row 1\ncol 0",
{ row: 1, column: 0, margin: 2, background: "lightgray" }),
new go.TextBlock("row 1\ncol 2",
{ row: 1, column: 2, margin: 2, background: "lightgray" })
));
</code></pre>
<script>
goCode('simpleTable', 600, 100);
</script>
<p>Note that not every "cell" of the table needs to have a <a>GraphObject</a> in it.</p>
<p>If there are multiple objects in a cell, they will probably overlap each other in the cell. By default objects are center-aligned in each cell.</p>
<pre class="lang-js" id="multipleInCell"><code>
diagram.add(
new go.Part("Table")
.add(
new go.TextBlock("row 0\ncol 0",
{ row: 0, column: 0, margin: 2, background: "lightgray" }),
new go.TextBlock("row 0 col 1\nyellow background",
// first object in the cell (row: 0, col: 1)
{ row: 0, column: 1, margin: 2,
background: "yellow", stroke: "orange" }),
new go.TextBlock("row 0\ncol 1",
// second object in that cell overlaps the first one,
// the bigger yellow TextBlock
{ row: 0, column: 1, margin: 2,
background: "transparent", stroke: "blue" }),
new go.TextBlock("row 1\ncol 0",
{ row: 1, column: 0, margin: 2, background: "lightgray" }),
new go.TextBlock("row 1\ncol 2",
{ row: 1, column: 2, margin: 2, background: "lightgray" })
));
</code></pre>
<script>
goCode('multipleInCell', 600, 100);
</script>
<p>If a column or a row has no objects in it, that column or row is ignored.</p>
<pre class="lang-js" id="emptyColumns"><code>
diagram.add(
new go.Part("Table")
.add(
new go.TextBlock("row 0\ncol 0",
{ row: 0, column: 0, margin: 2, background: "lightgray" }),
new go.TextBlock("row 0\ncol 11", // column 11 -- nothing in columns 1-10
{ row: 0, column: 11, margin: 2, background: "lightgray" }),
new go.TextBlock("row 1\ncol 0",
{ row: 1, column: 0, margin: 2, background: "lightgray" }),
new go.TextBlock("row 1\ncol 12", // column 12
{ row: 1, column: 12, margin: 2, background: "lightgray" })
));
</code></pre>
<script>
goCode('emptyColumns', 600, 100);
</script>
<h2 id="SizingOfRowsOrColumns">Sizing of Rows or Columns</h2>
<p>
The height of each row is normally determined by the greatest height of all of the objects in that row. Similarly, the width of each column is normally
determined by the greatest width of all of the objects in that column. However you can provide row height or column width information for any row or column
independent of any individual object by setting properties of the desired <a>RowColumnDefinition</a> of the Table panel.
</p>
<p>
To fix a column width or a row height in code you can call <a>Panel.getColumnDefinition</a> or <a>Panel.getRowDefinition</a> and then set
<a>RowColumnDefinition.width</a> or <a>RowColumnDefinition.height</a>. If you want to limit the width or height to certain ranges, set the
<a>RowColumnDefinition.minimum</a> or <a>RowColumnDefinition.maximum</a>. If the maximum and the width or height conflict, the maximum takes precedence. For
example, if the maximum is 70 but the natural value is 80, the actual value is limited to 70. If that value conflicts with the minimum, the minimum takes
precedence. For example, if the minimum is 50 but the natural value is 40, the actual value is 50.
</p>
<p>This example demonstrates how the column width may be controlled.</p>
<pre class="lang-js" id="columnSizes"><code>
diagram.add(
new go.Part("Table", { defaultAlignment: go.Spot.Left })
.addColumnDefinition(0, { width: 100 })
.addColumnDefinition(1, { width: 100, minimum: 150 })
.addColumnDefinition(2, { width: 100, maximum: 50 })
.addColumnDefinition(3, { width: 100, minimum: 150, maximum: 50 })
.add(
new go.TextBlock("Text Block",
{ row: 0, column: 0, background: "green" }),
new go.TextBlock("Text Block",
{ row: 0, column: 1, background: "red" }),
new go.TextBlock("Text Block",
{ row: 0, column: 2, background: "yellow" }),
new go.TextBlock("Text Block",
{ row: 0, column: 3, background: "red" }),
new go.Panel("Auto", { row: 1, column: 0 })
.add(
new go.Shape("RoundedRectangle", { fill: "green" }),
new go.TextBlock("Auto Panel")
),
new go.Panel("Auto", { row: 1, column: 1 })
.add(
new go.Shape("RoundedRectangle", { fill: "red" }),
new go.TextBlock("Auto Panel")
),
new go.Panel("Auto", { row: 1, column: 2 })
.add(
new go.Shape("RoundedRectangle", { fill: "yellow" }),
new go.TextBlock("Auto Panel")
),
new go.Panel("Auto", { row: 1, column: 3 })
.add(
new go.Shape("RoundedRectangle", { fill: "red" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("width: 100", { row: 2, column: 0 }),
new go.TextBlock("min: 150", { row: 2, column: 1 }),
new go.TextBlock("max: 50", { row: 2, column: 2 }),
new go.TextBlock("min & max", { row: 2, column: 3 })
));
</code></pre>
<script>
goCode('columnSizes', 600, 120);
</script>
<p>Note how the column with a minimum of 150 has a lot of extra space in it, and how the column with a maximum of 50 results in its elements being clipped.</p>
<h2 id="StretchAndAlignmente">Stretch and Alignment</h2>
<p>
The size of a GraphObject in a Panel is determined by many factors. The <a>GraphObject.stretch</a> property specifies whether the width and/or height should
take up all of the space given to it by the Panel. When the width and/or height is not stretched to fill the given space, the
<a>GraphObject.alignment</a> property controls where the object is placed if it is smaller than available space. One may also stretch the width while aligning
vertically, just as one may also stretch vertically while aligning along the X axis.
</p>
<p>
The alignment value for a GraphObject, if not given by the value of GraphObject.alignment, may be inherited. If the object is in a Table Panel, the value may
inherit from the <a>RowColumnDefinition.alignment</a>s of the row and of the column that the object is in. Finally the value may be inherited from the
<a>Panel.defaultAlignment</a> property.
</p>
<p>
The same inheritance is true for the stretch value for a GraphObject: <a>GraphObject.stretch</a>, <a>RowColumnDefinition.stretch</a>, and finally
<a>Panel.defaultStretch</a>.
</p>
<h3 id="AlignmentInColumns">Alignment in Columns</h3>
<pre class="lang-js" id="columns"><code>
diagram.add(
new go.Part("Table", { defaultAlignment: go.Spot.Left })
.addColumnDefinition(0, { width: 200 })
.addColumnDefinition(1, { width: 15 })
.add(
new go.Panel("Auto",
{ row: 0, column: 0, alignment: go.Spot.Left })
.add(
new go.Shape("RoundedRectangle", { fill: "lightblue" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("alignment: Left", { row: 0, column: 2 }),
new go.Panel("Auto",
{ row: 1, column: 0, alignment: go.Spot.Center})
.add(
new go.Shape("RoundedRectangle", { fill: "lightblue" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("alignment: Center", { row: 1, column: 2 }),
new go.Panel("Auto",
{ row: 2, column: 0, alignment: go.Spot.Right })
.add(
new go.Shape("RoundedRectangle", { fill: "lightblue" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("alignment: Right", { row: 2, column: 2 }),
new go.Panel("Auto",
{ row: 3, column: 0, stretch: go.Stretch.Horizontal })
.add(
new go.Shape("RoundedRectangle", { fill: "yellow" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("stretch: Horizontal", { row: 3, column: 2 })
));
</code></pre>
<script>
goCode('columns', 600, 120);
</script>
<h3 id="AlignmentInRows">Alignment in Rows</h3>
<pre class="lang-js" id="rows"><code>
diagram.add(
new go.Part("Table", { defaultAlignment: go.Spot.Top })
.addRowDefinition(0, { height: 50 })
.addRowDefinition(1, { height: 15 })
.add(
new go.Panel("Auto",
{ row: 0, column: 0, alignment: go.Spot.Top })
.add(
new go.Shape("RoundedRectangle", { fill: "lightblue" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("alignment:\nTop", { row: 2, column: 0 }),
new go.Panel("Auto",
{ row: 0, column: 1, alignment: go.Spot.Center})
.add(
new go.Shape("RoundedRectangle", { fill: "lightblue" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("alignment:\nCenter", { row: 2, column: 1 }),
new go.Panel("Auto",
{ row: 0, column: 2, alignment: go.Spot.Bottom })
.add(
new go.Shape("RoundedRectangle", { fill: "lightblue" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("alignment:\nBottom", { row: 2, column: 2 }),
new go.Panel("Auto",
{ row: 0, column: 3, stretch: go.Stretch.Vertical })
.add(
new go.Shape("RoundedRectangle", { fill: "yellow" }),
new go.TextBlock("Auto Panel")
),
new go.TextBlock("stretch:\nVertical", { row: 2, column: 3 })
));
</code></pre>
<script>
goCode('rows', 600, 120);
</script>
<h2 id="SpanningRowsOrColumns">Spanning Rows or Columns</h2>
<p>
An element in a Table Panel cell can cover more than one cell if you set the <a>GraphObject.rowSpan</a> or <a>GraphObject.columnSpan</a> properties. For
example, if the value of GraphObject.columnSpan is greater than one, it specifies how many columns that object may cover, starting with the value of
<a>GraphObject.column</a>, but excluding the column indexed by column + columnSpan.
</p>
<pre class="lang-js" id="columnSpan"><code>
diagram.add(
new go.Part("Table")
.add(
new go.TextBlock("Three Col Header", // spans all three columns
{ row: 0, column: 0, columnSpan: 3, stretch: go.Stretch.Horizontal,
margin: 2, background: "lightgray" }),
new go.TextBlock("row 1\ncol 0",
{ row: 1, column: 0, margin: 2, background: "lightgray" }),
new go.TextBlock("row 1\ncol 1",
{ row: 1, column: 1, margin: 2, background: "lightgray" }),
new go.TextBlock("row 2\ncol 0",
{ row: 2, column: 0, margin: 2, background: "lightgray" }),
new go.TextBlock("row 2\ncol 2",
{ row: 2, column: 2, margin: 2, background: "lightgray" })
));
</code></pre>
<script>
goCode('columnSpan', 600, 120);
</script>
<p>Here is an example that includes both column spanning and row spanning.</p>
<pre class="lang-js" id="columnSpan2"><code>
diagram.add(
new go.Part("Table")
.add(
new go.TextBlock("Greetings",
{ row: 0, column: 0, columnSpan: 3, stretch: go.Stretch.Horizontal,
margin: 2, background: "lightgray" }),
new go.TextBlock("numbers",
{ row: 1, column: 0, rowSpan: 2, stretch: go.Stretch.Vertical,
margin: 2, background: "lightgray", angle: 270 }),
new go.TextBlock("row 1\ncol 1",
{ row: 1, column: 1, margin: 2, background: "lightgray" }),
new go.TextBlock("row 1\ncol 2",
{ row: 1, column: 2, margin: 2, background: "lightgray" }),
new go.TextBlock("row 2\ncol 1",
{ row: 2, column: 1, margin: 2, background: "lightgray" }),
new go.TextBlock("row 2\ncol 3",
{ row: 2, column: 3, margin: 2, background: "lightgray" }),
new go.TextBlock("Signature",
{ row: 3, column: 2, columnSpan: 2, stretch: go.Stretch.Horizontal,
margin: 2, background: "lightgray" })
));
</code></pre>
<script>
goCode('columnSpan2', 600, 120);
</script>
<h2 id="SeparatorsAndRowColumnPadding">Separators and Row/Column Padding</h2>
<p>
Table Panels also support the optional drawing of lines between rows or columns. The <a>RowColumnDefinition.separatorStrokeWidth</a> property controls the
extra space that comes before a particular row or column. The <a>RowColumnDefinition.separatorStroke</a> and
<a>RowColumnDefinition.separatorDashArray</a> control if and how a line is drawn.
</p>
<p>
For example, if you want to treat the first row and the first column as "headers", you can separate them from the rest of the table by drawing a black line
before row 1 and column 1.
</p>
<pre class="lang-js" id="spacing"><code>
diagram.add(
new go.Part("Auto")
.add(
new go.Shape({ fill: "white", stroke: "gray", strokeWidth: 3 }),
new go.Panel("Table")
// drawn before row 1:
.addRowDefinition(1, { separatorStrokeWidth: 1.5, separatorStroke: "black" })
// drawn before column 1:
.addColumnDefinition(1, { separatorStrokeWidth: 1.5, separatorStroke: "black" })
.add(
new go.TextBlock("Header 1",
{ row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
new go.TextBlock("Header 2",
{ row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
new go.TextBlock("One", { row: 1, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 1 col 1", { row: 1, column: 1, margin: 2 }),
new go.TextBlock("row 1 col 2", { row: 1, column: 2, margin: 2 }),
new go.TextBlock("Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 2 col 1", { row: 2, column: 1, margin: 2 }),
new go.TextBlock("row 2 col 2", { row: 2, column: 2, margin: 2 }),
new go.TextBlock("Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 3 col 1", { row: 3, column: 1, margin: 2 }),
new go.TextBlock("row 3 col 2", { row: 3, column: 2, margin: 2 })
)
));
</code></pre>
<script>
goCode('spacing', 600, 150);
</script>
<p>If you want to have a default separator between each row, set the default separator properties of the <a>Panel</a>. These properties are:</p>
<ul>
<li><a>Panel.defaultSeparatorPadding</a></li>
<li><a>Panel.defaultRowSeparatorStrokeWidth</a></li>
<li><a>Panel.defaultRowSeparatorStroke</a></li>
<li><a>Panel.defaultRowSeparatorDashArray</a></li>
<li><a>Panel.defaultColumnSeparatorStrokeWidth</a></li>
<li><a>Panel.defaultColumnSeparatorStroke</a></li>
<li><a>Panel.defaultColumnSeparatorDashArray</a></li>
</ul>
<p>
Any separator properties set on a particular RowColumnDefinition will take precedence over the default values provided on the Panel. This permits keeping the
special black line separating the header row and header column from the rest.
</p>
<pre class="lang-js" id="spacing2"><code>
diagram.add(
new go.Part("Auto")
.add(
new go.Shape({ fill: "white", stroke: "gray", strokeWidth: 3 }),
new go.Panel("Table",
// Set defaults for all rows and columns:
{ defaultRowSeparatorStroke: "gray",
defaultColumnSeparatorStroke: "gray" })
// specify separator before first row and first column
.addRowDefinition(1, { separatorStrokeWidth: 1.5, separatorStroke: "black" })
.addColumnDefinition(1, { separatorStrokeWidth: 1.5, separatorStroke: "black" })
.add(
new go.TextBlock("Header 1",
{ row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
new go.TextBlock("Header 2",
{ row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
new go.TextBlock("One", { row: 1, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 1 col 1", { row: 1, column: 1, margin: 2 }),
new go.TextBlock("row 1 col 2", { row: 1, column: 2, margin: 2 }),
new go.TextBlock("Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 2 col 1", { row: 2, column: 1, margin: 2 }),
new go.TextBlock("row 2 col 2", { row: 2, column: 2, margin: 2 }),
new go.TextBlock("Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 3 col 1", { row: 3, column: 1, margin: 2 }),
new go.TextBlock("row 3 col 2", { row: 3, column: 2, margin: 2 })
)
));
</code></pre>
<script>
goCode('spacing2', 600, 150);
</script>
<p>
RowColumnDefinitions also have a <a>RowColumnDefinition.separatorPadding</a> property, which can be used to add extra space to rows or columns. When a
<a>RowColumnDefinition.background</a> is set, it includes the padding in its area.
</p>
<pre class="lang-js" id="padding"><code>
diagram.add(
new go.Part("Auto")
.add(
new go.Shape({ fill: "white", stroke: "gray", strokeWidth: 3 }),
new go.Panel("Table",
// Set defaults for all rows and columns:
{ padding: 1.5,
defaultRowSeparatorStroke: "gray",
defaultColumnSeparatorStroke: "gray",
defaultSeparatorPadding: new go.Margin(18, 0, 8, 0) })
// Override the panel's default padding on the first row
.addRowDefinition(0, { separatorPadding: 0 })
.addRowDefinition(1, { separatorStrokeWidth: 1.5, separatorStroke: "black" })
.addRowDefinition(2, { background: 'lightblue' })
.addColumnDefinition(1, { separatorStrokeWidth: 1.5, separatorStroke: "black" })
.add(
new go.TextBlock("Header 1",
{ row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
new go.TextBlock("Header 2",
{ row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
new go.TextBlock("One", { row: 1, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 1 col 1", { row: 1, column: 1, margin: 2 }),
new go.TextBlock("row 1 col 2", { row: 1, column: 2, margin: 2 }),
new go.TextBlock("Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 2 col 1", { row: 2, column: 1, margin: 2 }),
new go.TextBlock("row 2 col 2", { row: 2, column: 2, margin: 2 }),
new go.TextBlock("Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 3 col 1", { row: 3, column: 1, margin: 2 }),
new go.TextBlock("row 3 col 2", { row: 3, column: 2, margin: 2 })
)
));
</code></pre>
<script>
goCode('padding', 600, 200);
</script>
<h2 id="TableRowsAndTableColumns">TableRows and TableColumns</h2>
<p>
To 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, the <a>Panel.TableRow</a> panel
type. Put all of the objects for each row into a TableRow Panel. You will still need to specify the column for each object in each row.
</p>
<pre class="lang-js" id="spacing3"><code>
diagram.add(
new go.Part("Auto")
.add(
new go.Shape({ fill: "white", stroke: "gray", strokeWidth: 3 }),
new go.Panel("Table",
// Set defaults for all rows and columns:
{ defaultRowSeparatorStroke: "gray",
defaultColumnSeparatorStroke: "gray" })
.addRowDefinition(1, { separatorStrokeWidth: 1.5, separatorStroke: "black" })
.addColumnDefinition(1, { separatorStrokeWidth: 1.5, separatorStroke: "black" })
.add(
new go.Panel("TableRow", { row: 0 })
.add(
new go.TextBlock("Header 1",
{ column: 1, font: "bold 10pt sans-serif", margin: 2 }),
new go.TextBlock("Header 2",
{ column: 2, font: "bold 10pt sans-serif", margin: 2 })
),
new go.Panel("TableRow", { row: 1 })
.add(
new go.TextBlock("One", { column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 1 col 1", { column: 1, margin: 2 }),
new go.TextBlock("row 1 col 2", { column: 2, margin: 2 })
),
new go.Panel("TableRow", { row: 2 })
.add(
new go.TextBlock("Two", { column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 2 col 1", { column: 1, margin: 2 }),
new go.TextBlock("row 2 col 2", { column: 2, margin: 2 })
),
new go.Panel("TableRow", { row: 3 })
.add(
new go.TextBlock("Three", { column: 0, stroke: "green", margin: 2 }),
new go.TextBlock("row 3 col 1", { column: 1, margin: 2 }),
new go.TextBlock("row 3 col 2", { column: 2, margin: 2 })
)
)
));
</code></pre>
<script>
goCode('spacing3', 600, 150);
</script>
<p>
TableRow panels are particularly useful when used as an <a>Panel.itemTemplate</a>.
Read more about Table Panels and item Arrays at <a href="itemArrays.html#DifferentPanelTypes">Item Arrays and Panels</a>.
</p>
<p>
The same kind of organization is also possible with columns by using <a>Panel.TableColumn</a> Panels.
</p>
<h2 id="Examples">Examples</h2>
<p>
In this example the Picture spans two rows, because <a>GraphObject.rowSpan</a> is 2 on the <a>Picture</a>.
</p>
<p>
The first column only takes as much width as it naturally needs and any excess width is given to the second column. This occurs because the
<a>RowColumnDefinition</a> for column #0 has <a>RowColumnDefinition.sizing</a> set to None. The same is true for the first row -- any extra height is given to
the second row.
</p>
<p>
There is a column separator line just before the second column, and there is a row separator just before the second row because the respective
<a>RowColumnDefinition.separatorStroke</a> properties have been set to a color. But the row separator is not visible in the first column because that column's
definition sets <a>RowColumnDefinition.background</a> to "white" and sets <a>RowColumnDefinition.coversSeparators</a> to true.
</p>
<pre class="lang-js" id="example1"><code>
diagram.nodeTemplate =
new go.Node("Auto", { resizable: true, width: 150 })
.bindTwoWay("desiredSize", "size", go.Size.parse, go.Size.stringify)
.add(
new go.Shape({ fill: "white" }),
new go.Panel("Table", { stretch: go.Stretch.Fill })
.addColumnDefinition(0, { sizing: go.Sizing.None, background: "white", coversSeparators: true })
.addColumnDefinition(1, { separatorStroke: "black", background: "white" })
.addRowDefinition(0, { sizing: go.Sizing.None })
.addRowDefinition(1, { separatorStroke: "black" })
.add( // these three elements are the content of the Table Panel
new go.Picture({ row: 0, column: 0,
rowSpan: 2, width: 48, height: 48, margin: 6 })
.bind("source", "pic"),
new go.TextBlock({ row: 0, column: 1,
stretch: go.Stretch.Horizontal, margin: 2, textAlign: "center", overflow: go.TextOverflow.Ellipsis })
.bind("text", "text1"),
new go.TextBlock({ row: 1, column: 1,
stretch: go.Stretch.Fill, margin: 2, textAlign: "center", overflow: go.TextOverflow.Ellipsis })
.bind("text", "text2")
),
);
diagram.model.nodeDataArray = [
{
pic: "../samples/images/hs1.jpg",
text1: "top",
text2: "bottom gets extra space"
},
{
size: "160 100",
pic: "../samples/images/hs2.jpg",
text1: "top has more description that wraps",
text2: "node is taller due to more text"
}
]
</code></pre>
<script>
goCode('example1', 600, 200);
</script>
<p>
Try resizing a node.
</p>
<p>
Because the Table Panel and its TextBlocks are stretched, when they do not have enough room to render all of the text,
the <a>TextBlock.overflow</a> value of <a>TextOverflow.Ellipsis</a> causes "..." to be shown.
</p>
</div>
</div>
<footer class="bg-white text-gray-900 border-t border-t-gray-200">
<div class="w-full max-w-screen-lg mx-auto px-4 py-6">
<p id="version" class="text-xs text-gray-900 m-0"></p>
<div class="text-sm px-0 mb-4 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
<div>
<h2 class="text-base font-semibold text-nwoods-primary">GoJS</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="../samples/index.html">Samples</a>
</li>
<li>
<a href="../learn/index.html">Learn</a>
</li>
<li>
<a href="../intro/index.html">Intro</a>
</li>
<li>
<a href="../api/index.html">API</a>
</li>
<li>
<a href="../changelog.html">Changelog</a>
</li>
<li>
<a href="https://github.com/NorthwoodsSoftware/GoJS" target="_blank" rel="noopener">GitHub</a>
</li>
</ul>
</div>
<div>
<h2 class="text-base font-semibold text-nwoods-primary">Support</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
</li>
<li>
<a href="https://forum.nwoods.com/c/gojs" target="_blank" rel="noopener">Forum</a>
</li>
<li>
<a href="https://nwoods.com/app/activate.aspx?sku=gojs" target="_blank" rel="noopener">Activate</a>
</li>
<li>
<a href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</li>
<li>
<a href="https://nwoods.com/register.html" target="_blank" rel="noopener">Register</a>
</li>
</ul>
</div>
<div>
<h2 class="text-base font-semibold text-nwoods-primary">Company</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a target="_blank" href="https://nwoods.com" target="_blank" rel="noopener">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/about.html" target="_blank" rel="noopener">About Us</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/contact.html" target="_blank" rel="noopener">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/consulting.html" target="_blank" rel="noopener">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo" target="_blank" rel="noopener">Twitter</a>
</li>
</ul>
</div>
</div>
<p class="text-sm text-gray-900 md:mb-6">
Copyright 1998-2025 <a href="https://nwoods.com">Northwoods Software</a>
</p>
</div>
</footer>
</body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function (url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
const params = new URL(document.location).searchParams
let a = params.get('a');
if (a) localStorage.setItem('a', a);
a = localStorage.getItem('a');
if (a) {
const links = [...document.body.getElementsByTagName("a")].filter((l) => l.href.includes('nwoods.com'));
for (const l of links) {
const url = new URL(l.href);
url.searchParams.set('a', a);
l.href = url;
}
}
</script>
<script src="../assets/js/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (window.go)
document
.getElementById('version')
.textContent = "GoJS version " + go.version;
if (window.goDoc)
window.goDoc();
var d = window.diagrams;
for (var i = 0; i < d.length; i++) {
var dargs = d[i];
goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
}
if (window.extra)
window.extra();
}
);
</script>
</html>