Complex table

GoJS
1

Hello

I try to make a table with 3 cols and 6 rows, with :

  • 1 cell for the first column / rowspan 6
  • 2 cell for the 2nb column / rowspan 3
  • 3 cell for the 3rd column / rowspan 2

So a 3 cols x 6 rows table.
But i want a horizontal separator between the 2 middle cells (danger and 0,51) (2nd col) and … impossible.

diagram.add(
$(go.Part, “Auto”,
$(go.Shape, { fill: “white”, stroke: “black”, strokeWidth: 1 }),
$(go.Panel, “Table”,
{
defaultRowSeparatorStroke: “black”,
defaultColumnSeparatorStroke: “black”
},

    $(go.RowColumnDefinition, { column: 0, separatorStroke: "black", background: "white", coversSeparators: true }),
    $(go.RowColumnDefinition, { column: 1, separatorStroke: "black", background: "white", coversSeparators: true }), // 2 bordures apparaissent
    $(go.RowColumnDefinition, { column: 2, separatorStroke: "black", background: "white" }),

    $(go.RowColumnDefinition, { row: 0, separatorStroke: "black" }),
    $(go.RowColumnDefinition, { row: 1, separatorStroke: "black" }),
    $(go.RowColumnDefinition, { row: 2, separatorStroke: "black" }),
    $(go.RowColumnDefinition, { row: 3, separatorStroke: "black" }),
    $(go.RowColumnDefinition, { row: 4, separatorStroke: "black" }),
    $(go.RowColumnDefinition, { row: 5, separatorStroke: "black" }),

    // 1ere colonne 
    $(go.TextBlock, "0,324", {row: 0, column: 0, rowSpan: 6, margin: 5, textAlign: "center", font: "bold 14px sans-serif" }),

    // 2eme colonne
    $(go.TextBlock, "Danger", {row: 1, column: 1, rowSpan: 3, margin: 5, textAlign: "center", font: "bold 14px sans-serif" }),
    $(go.TextBlock, "0,51", {row: 3, column: 1, rowSpan: 3, margin: 5, textAlign: "center", font: "bold 14px sans-serif" }),

    // 3eme colonne
    $(go.TextBlock, "3", {row: 0, column: 2, rowSpan: 2, margin: 5, textAlign: "center", font: "bold 14px sans-serif" }),
    $(go.TextBlock, "0,47", {row: 2, column: 2, rowSpan: 2, margin: 5, textAlign: "center", font: "bold 14px sans-serif" }),
    $(go.TextBlock, "1,58", {row: 4, column: 2, rowSpan: 2, margin: 5, textAlign: "center", font: "bold 14px sans-serif" })
  )
));
Any help very appreciated ! Thanks
2

This should be fairly easy to do by making a table of tables. In other words, each column of your main table will be a table.


The big plus is that no RowColumnDefinitions will be needed, because you can reply on default…separatorStroke.


Give this a try:


diagram.add(
$(go.Part, “Auto”,
$(go.Shape, { fill: “white”, stroke: “black”, strokeWidth: 1 }),
$(go.Panel, “Table”,
{
defaultColumnSeparatorStroke: “black”
},


// 1ere colonne
$(go.Panel, “Table”, { column: 0 },
$(go.TextBlock, “0,324”, {row: 0, column: 0, rowSpan: 6, margin: 5, textAlign: “center”, font: “bold 14px sans-serif” })
),


// 2eme colonne
$(go.Panel, “Table”, { column: 1, defaultRowSeparatorStroke: “black” },
$(go.TextBlock, “Danger”, {row: 0, rowSpan: 1, margin: 5, textAlign: “center”, font: “bold 14px sans-serif” }),
$(go.TextBlock, “0,51”, {row: 1, rowSpan: 1, margin: 5, textAlign: “center”, font: “bold 14px sans-serif” })
),


// 3eme colonne
$(go.Panel, “Table”, { column: 2, defaultRowSeparatorStroke: “black” },
$(go.TextBlock, “3”, {row: 0, margin: 5, textAlign: “center”, font: “bold 14px sans-serif” }),
$(go.TextBlock, “0,47”, {row: 1, margin: 5, textAlign: “center”, font: “bold 14px sans-serif” }),
$(go.TextBlock, “1,58”, {row: 2, margin: 5, textAlign: “center”, font: “bold 14px sans-serif” })
)
)
));

3

Exactly what I wanted to do. Multi table solution is the best.
Many thanks :-)