Scrolling table not sizing to parent table width

@Roland wrote:

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;
    }

Posts: 1

Participants: 1

Read full topic