gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
499 lines (475 loc) • 22.4 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS Table Panels -- Northwoods Software</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<script src="../release/go.js"></script>
<script src="goIntro.js"></script>
</head>
<body onload="goIntro()">
<div id="container" class="container-fluid">
<div id="content">
<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>
<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">
diagram.add(
// all Parts are Panels
$(go.Part, go.Panel.Table, // or "Table"
$(go.TextBlock, "row 0\ncol 0",
{ row: 0, column: 0, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 0\ncol 1",
{ row: 0, column: 1, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 1\ncol 0",
{ row: 1, column: 0, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 1\ncol 2",
{ row: 1, column: 2, margin: 2, background: "lightgray" })
));
</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">
diagram.add(
$(go.Part,
$(go.Panel, "Table",
$(go.TextBlock, "row 0\ncol 0",
{ row: 0, column: 0, margin: 2, background: "lightgray" }),
$(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: "gray" }),
$(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" }),
$(go.TextBlock, "row 1\ncol 0",
{ row: 1, column: 0, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 1\ncol 2",
{ row: 1, column: 2, margin: 2, background: "lightgray" })
)
));
</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">
diagram.add(
$(go.Part,
$(go.Panel, "Table",
$(go.TextBlock, "row 0\ncol 0",
{ row: 0, column: 0, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 0\ncol 11", // column 11 -- nothing in columns 1-10
{ row: 0, column: 11, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 1\ncol 0",
{ row: 1, column: 0, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 1\ncol 12", // column 12
{ row: 1, column: 12, margin: 2, background: "lightgray" })
)
));
</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">
diagram.add(
$(go.Part,
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left },
$(go.RowColumnDefinition, { column: 0, width: 100 }),
$(go.RowColumnDefinition, { column: 1, width: 100, minimum: 150 }),
$(go.RowColumnDefinition, { column: 2, width: 100, maximum: 50 }),
$(go.RowColumnDefinition, { column: 3, width: 100, minimum: 150, maximum: 50 }),
$(go.TextBlock, "Text Block",
{ row: 0, column: 0, background: "green" }),
$(go.TextBlock, "Text Block",
{ row: 0, column: 1, background: "red" }),
$(go.TextBlock, "Text Block",
{ row: 0, column: 2, background: "yellow" }),
$(go.TextBlock, "Text Block",
{ row: 0, column: 3, background: "red" }),
$(go.Panel, "Auto",
{ row: 1, column: 0 },
$(go.Shape, "RoundedRectangle", { fill: "green" }),
$(go.TextBlock, "Auto Panel")
),
$(go.Panel, "Auto",
{ row: 1, column: 1 },
$(go.Shape, "RoundedRectangle", { fill: "red" }),
$(go.TextBlock, "Auto Panel")
),
$(go.Panel, "Auto",
{ row: 1, column: 2 },
$(go.Shape, "RoundedRectangle", { fill: "yellow" }),
$(go.TextBlock, "Auto Panel")
),
$(go.Panel, "Auto",
{ row: 1, column: 3 },
$(go.Shape, "RoundedRectangle", { fill: "red" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "width: 100", { row: 2, column: 0 }),
$(go.TextBlock, "min: 150", { row: 2, column: 1 }),
$(go.TextBlock, "max: 50", { row: 2, column: 2 }),
$(go.TextBlock, "min & max", { row: 2, column: 3 })
)
));
</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">
diagram.add(
$(go.Part,
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Left },
$(go.RowColumnDefinition, { column: 0, width: 200 }),
$(go.RowColumnDefinition, { column: 1, width: 15 }),
$(go.Panel, "Auto",
{ row: 0, column: 0, alignment: go.Spot.Left },
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "alignment: Left", { row: 0, column: 2 }),
$(go.Panel, "Auto",
{ row: 1, column: 0, alignment: go.Spot.Center},
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "alignment: Center", { row: 1, column: 2 }),
$(go.Panel, "Auto",
{ row: 2, column: 0, alignment: go.Spot.Right },
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "alignment: Right", { row: 2, column: 2 }),
$(go.Panel, "Auto",
{ row: 3, column: 0, stretch: go.GraphObject.Horizontal },
$(go.Shape, "RoundedRectangle", { fill: "yellow" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "stretch: Horizontal", { row: 3, column: 2 })
)
));
</pre>
<script>goCode("columns", 600, 120)</script>
<h3 id="AlignmentInRows">Alignment in Rows</h3>
<pre class="lang-js" id="rows">
diagram.add(
$(go.Part,
$(go.Panel, "Table",
{ defaultAlignment: go.Spot.Top },
$(go.RowColumnDefinition, { row: 0, height: 50 }),
$(go.RowColumnDefinition, { row: 1, height: 15 }),
$(go.Panel, "Auto",
{ row: 0, column: 0, alignment: go.Spot.Top },
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "alignment:\nTop", { row: 2, column: 0 }),
$(go.Panel, "Auto",
{ row: 0, column: 1, alignment: go.Spot.Center},
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "alignment:\nCenter", { row: 2, column: 1 }),
$(go.Panel, "Auto",
{ row: 0, column: 2, alignment: go.Spot.Bottom },
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "alignment:\nBottom", { row: 2, column: 2 }),
$(go.Panel, "Auto",
{ row: 0, column: 3, stretch: go.GraphObject.Vertical },
$(go.Shape, "RoundedRectangle", { fill: "yellow" }),
$(go.TextBlock, "Auto Panel")
),
$(go.TextBlock, "stretch:\nVertical", { row: 2, column: 3 })
)
));
</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">
diagram.add(
$(go.Part,
$(go.Panel, "Table",
$(go.TextBlock, "Three Col Header", // spans all three columns
{ row: 0, column: 0, columnSpan: 3, stretch: go.GraphObject.Horizontal,
margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 1\ncol 0",
{ row: 1, column: 0, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 1\ncol 1",
{ row: 1, column: 1, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 2\ncol 0",
{ row: 2, column: 0, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 2\ncol 2",
{ row: 2, column: 2, margin: 2, background: "lightgray" })
)
));
</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">
diagram.add(
$(go.Part,
$(go.Panel, "Table",
$(go.TextBlock, "Greetings",
{ row: 0, column: 0, columnSpan: 3, stretch: go.GraphObject.Horizontal,
margin: 2, background: "lightgray" }),
$(go.TextBlock, "numbers",
{ row: 1, column: 0, rowSpan: 2, stretch: go.GraphObject.Vertical,
margin: 2, background: "lightgray", angle: 270 }),
$(go.TextBlock, "row 1\ncol 1",
{ row: 1, column: 1, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 1\ncol 2",
{ row: 1, column: 2, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 2\ncol 1",
{ row: 2, column: 1, margin: 2, background: "lightgray" }),
$(go.TextBlock, "row 2\ncol 3",
{ row: 2, column: 3, margin: 2, background: "lightgray" }),
$(go.TextBlock, "Signature",
{ row: 3, column: 2, columnSpan: 2, stretch: go.GraphObject.Horizontal,
margin: 2, background: "lightgray" })
)
));
</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">
diagram.add(
$(go.Part, "Auto",
$(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
$(go.Panel, "Table",
$(go.TextBlock, "Header 1",
{ row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
$(go.TextBlock, "Header 2",
{ row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
// drawn before row 1:
$(go.RowColumnDefinition,
{ row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
// drawn before column 1:
$(go.RowColumnDefinition,
{ column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
$(go.TextBlock, "One", { row: 1, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 1 col 1", { row: 1, column: 1, margin: 2 }),
$(go.TextBlock, "row 1 col 2", { row: 1, column: 2, margin: 2 }),
$(go.TextBlock, "Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 2 col 1", { row: 2, column: 1, margin: 2 }),
$(go.TextBlock, "row 2 col 2", { row: 2, column: 2, margin: 2 }),
$(go.TextBlock, "Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 3 col 1", { row: 3, column: 1, margin: 2 }),
$(go.TextBlock, "row 3 col 2", { row: 3, column: 2, margin: 2 })
)
));
</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><a>Panel.defaultRowSeparatorStrokeWidth</a>
<li><a>Panel.defaultRowSeparatorStroke</a>
<li><a>Panel.defaultRowSeparatorDashArray</a>
<li><a>Panel.defaultColumnSeparatorStrokeWidth</a>
<li><a>Panel.defaultColumnSeparatorStroke</a>
<li><a>Panel.defaultColumnSeparatorDashArray</a>
</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">
diagram.add(
$(go.Part, "Auto",
$(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
$(go.Panel, "Table",
// Set defaults for all rows and columns:
{ defaultRowSeparatorStroke: "gray",
defaultColumnSeparatorStroke: "gray" },
$(go.TextBlock, "Header 1",
{ row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
$(go.TextBlock, "Header 2",
{ row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
$(go.RowColumnDefinition,
{ row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
$(go.RowColumnDefinition,
{ column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
$(go.TextBlock, "One", { row: 1, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 1 col 1", { row: 1, column: 1, margin: 2 }),
$(go.TextBlock, "row 1 col 2", { row: 1, column: 2, margin: 2 }),
$(go.TextBlock, "Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 2 col 1", { row: 2, column: 1, margin: 2 }),
$(go.TextBlock, "row 2 col 2", { row: 2, column: 2, margin: 2 }),
$(go.TextBlock, "Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 3 col 1", { row: 3, column: 1, margin: 2 }),
$(go.TextBlock, "row 3 col 2", { row: 3, column: 2, margin: 2 })
)
));
</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">
diagram.add(
$(go.Part, "Auto",
$(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
$(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) },
$(go.TextBlock, "Header 1",
{ row: 0, column: 1, font: "bold 10pt sans-serif", margin: 2 }),
$(go.TextBlock, "Header 2",
{ row: 0, column: 2, font: "bold 10pt sans-serif", margin: 2 }),
// Override the panel's default padding on the first row
$(go.RowColumnDefinition, { row: 0, separatorPadding: 0 }),
$(go.RowColumnDefinition,
{ row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
$(go.RowColumnDefinition, { row: 2, background: 'lightblue' }),
$(go.RowColumnDefinition,
{ column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
$(go.TextBlock, "One", { row: 1, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 1 col 1", { row: 1, column: 1, margin: 2 }),
$(go.TextBlock, "row 1 col 2", { row: 1, column: 2, margin: 2 }),
$(go.TextBlock, "Two", { row: 2, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 2 col 1", { row: 2, column: 1, margin: 2 }),
$(go.TextBlock, "row 2 col 2", { row: 2, column: 2, margin: 2 }),
$(go.TextBlock, "Three", { row: 3, column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 3 col 1", { row: 3, column: 1, margin: 2 }),
$(go.TextBlock, "row 3 col 2", { row: 3, column: 2, margin: 2 })
)
));
</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">
diagram.add(
$(go.Part, "Auto",
$(go.Shape, { fill: "white", stroke: "gray", strokeWidth: 3 }),
$(go.Panel, "Table",
// Set defaults for all rows and columns:
{ defaultRowSeparatorStroke: "gray",
defaultColumnSeparatorStroke: "gray" },
$(go.Panel, "TableRow", { row: 0 },
$(go.TextBlock, "Header 1",
{ column: 1, font: "bold 10pt sans-serif", margin: 2 }),
$(go.TextBlock, "Header 2",
{ column: 2, font: "bold 10pt sans-serif", margin: 2 })),
$(go.RowColumnDefinition,
{ row: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
$(go.RowColumnDefinition,
{ column: 1, separatorStrokeWidth: 1.5, separatorStroke: "black" }),
$(go.Panel, "TableRow", { row: 1 },
$(go.TextBlock, "One", { column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 1 col 1", { column: 1, margin: 2 }),
$(go.TextBlock, "row 1 col 2", { column: 2, margin: 2 })
),
$(go.Panel, "TableRow", { row: 2 },
$(go.TextBlock, "Two", { column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 2 col 1", { column: 1, margin: 2 }),
$(go.TextBlock, "row 2 col 2", { column: 2, margin: 2 })
),
$(go.Panel, "TableRow", { row: 3 },
$(go.TextBlock, "Three", { column: 0, stroke: "green", margin: 2 }),
$(go.TextBlock, "row 3 col 1", { column: 1, margin: 2 }),
$(go.TextBlock, "row 3 col 2", { column: 2, margin: 2 })
)
)
));
</pre>
<script>goCode("spacing3", 600, 150)</script>
<p>
The same kind of organization is also possible with columns by using <a>Panel,TableColumn</a> Panels.
</p>
</div>
</div>
</body>
</html>