I am trying to get a scrolling table to work inside of another table. But when I add the scrolling table inside, I seem unable to get the scrolling table to match the width of its parent table.
What I am trying to accomplish is on the left, and what I am currently getting in on the right.
I need to keep the header row (with Field Name and DataType headers) from scrolling so I have created the below template to try achieve this:
public static createViewNodeTemplate(
onClicked: (e: go.InputEvent, obj: go.Node) => void
): go.Node {
return Make(go.Node, 'Auto',
{
name: 'entityNode',
cursor: 'pointer',
selectionAdorned: false,
zOrder: 1,
click: (e: go.InputEvent, obj: go.Node) => onClicked && onClicked(e, obj)
},
new go.Binding('location', 'location', go.Point.parse),
Make(go.Shape, 'RoundedRectangle',
{
name: 'entityShape',
stroke: Palette.unselectedColour,
strokeWidth: 0.5,
parameter1: 2,
fill: 'white',
width: 180
},
),
Make(go.Panel, go.Panel.Table,
{
name: 'viewEntityMainTable',
width: 180,
defaultRowSeparatorStroke: 'grey',
defaultRowSeparatorStrokeWidth: 0.5,
},
Make(go.Panel, go.Panel.TableRow, { row: 0 },
// NodeTemplates.createHeaderTable(undefined, undefined, false)
Make(go.Panel, go.Panel.Table,
{
name: 'headerTable',
width: 180,
background: Palette.entityHeaderColour
},
Make(go.Panel, go.Panel.TableRow, { row: 0 },
Make(go.Panel, 'Auto',
{
column: 0,
toolTip: NodeTemplates.createTextBlockTooltip('objectName', 'entityHeaderText')
},
Make(go.TextBlock,
{
name: 'entityHeaderText',
margin: new go.Margin(8, 2),
alignment: go.Spot.Center,
font: 'bold 7pt sans-serif',
textAlign: 'center',
stroke: Palette.entityTextColour,
overflow: go.TextBlock.OverflowEllipsis,
maxLines: 1,
width: 160
},
new go.Binding('text', 'objectName')
)
)
)
)
),
Make(go.Panel, go.Panel.TableRow, { row: 1 },
Make(go.Panel, go.Panel.Table,
{
defaultColumnSeparatorStroke: 'lightgray',
defaultColumnSeparatorStrokeWidth: 0.5,
defaultRowSeparatorStroke: 'lightgray',
defaultRowSeparatorStrokeWidth: 0.5
},
Make(go.RowColumnDefinition,
{ column: 0, width: 100 }
),
Make(go.RowColumnDefinition,
{ column: 1, width: 65 }
),
Make(go.RowColumnDefinition,
{ column: 2, width: 15 }
),
Make(go.Panel, go.Panel.TableRow, { row: 0 },
Make(go.TextBlock, 'FIELD NAME',
{
column: 0,
stroke: Palette.entityTextColour,
margin: new go.Margin(5, 3, 3, 8),
font: 'bold 6pt sans-serif'
}
),
Make(go.TextBlock, 'DATA TYPE',
{
column: 1,
stroke: Palette.entityTextColour,
margin: new go.Margin(5, 3, 3, 8),
font: 'bold 6pt sans-serif'
}
),
Make(go.Panel, 'Auto',
{
column: 2
}
)
),
Make(go.Panel, go.Panel.TableRow, { row: 1, columnSpan: 3 },
// NodeTemplates.createFieldTable()
Make(go.Panel, 'Auto', { column: 0, columnSpan: 3 },
Make('ScrollingTable', 'TABLE',
{
// name: 'SCROLLER',
// name: 'fieldTable',
// Create binding to determine the max/desired size, up until 10 items in the field table
// Eg:
// row = 20, rowCount = 5, totalHeight = 100
// row = 20, rowCount = 10, totalHeight = 200
// row = 20, rowCount = 15, totalHeight = 200
desiredSize: new go.Size(NaN, 80), // fixed width
stretch: go.GraphObject.Fill, // but stretches vertically
// size: new go.Size(160, 80),
// column: 2,
// width: 180,
// stretch: go.GraphObject.Fill,
// background: 'white',
// defaultAlignment: go.Spot.Left,
// defaultColumnSeparatorStroke: 'lightgrey',
// defaultColumnSeparatorStrokeWidth: 0.5,
// defaultRowSeparatorStroke: 'lightgrey',
// defaultRowSeparatorStrokeWidth: 0.5,
},
Make(go.RowColumnDefinition,
{ column: 0, width: 100 }
),
Make(go.RowColumnDefinition,
{ column: 1, width: 65 }
),
Make(go.RowColumnDefinition,
{ column: 2, width: 15 }
),
new go.Binding('TABLE.itemArray', 'properties'),
// new go.Binding('TABLE.column', '', () => 0),
{
'TABLE.itemTemplate':
Make(go.Panel, go.Panel.TableRow,
{
row: 1,
defaultStretch: go.GraphObject.Horizontal,
// fromSpot: go.Spot.LeftRightSides,
// toSpot: go.Spot.LeftRightSides,
// fromLinkable: true,
// toLinkable: true
// height: 20,
name: 'fieldTableRow',
background: 'transparent',
// click: (e: go.InputEvent, obj: go.Panel) => onFieldClicked && onFieldClicked(e, obj)
},
new go.Binding(),
Make(go.Panel, 'Auto',
{
column: 0,
// height: 20,
toolTip: NodeTemplates.createTextBlockTooltip('FieldName', 'fieldNameTextBlock')
},
Make(go.TextBlock,
{
name: 'fieldNameTextBlock',
font: '6pt sans-serif',
margin: new go.Margin(5, 3, 3, 10),
overflow: go.TextBlock.OverflowEllipsis,
maxLines: 1,
width: 100
},
new go.Binding('text', 'FieldName')
)
),
Make(go.Panel, 'Auto', { column: 1 },
Make(go.TextBlock,
{
name: 'fieldTypeTextBlock',
font: '6pt sans-serif',
margin: new go.Margin(5, 3, 3, 10),
overflow: go.TextBlock.OverflowEllipsis,
maxLines: 1,
width: 60
},
new go.Binding('text', 'DataType', (dataType: DataType) => DataType[dataType])
)
),
),
'TABLE.background': 'white',
'TABLE.defaultAlignment': go.Spot.Left,
'TABLE.defaultColumnSeparatorStroke': 'lightgrey',
'TABLE.defaultColumnSeparatorStrokeWidth': 0.5,
'TABLE.defaultRowSeparatorStroke': 'lightgrey',
'TABLE.defaultRowSeparatorStrokeWidth': 0.5,
// 'TABLE.width': 180,
// 'TABLE.columnSpan': 3,
}
)
)
)
)
)
)
) as go.Node;
}
