Using table to build a dynamic grid - cells look strange sometimes

[manuel-koch]

I try to build a grid like layout where all cells are equally sized.
When keeping the available number of cells the same and varying row/column numbers, the following simple example does work in some cases, but looks strange in others.

Can anybody help to get it done right ?

main.go

package main

import (
	"fmt"

	"github.com/AllenDang/giu"
)

func onClickMe() {
	fmt.Println("Hello world!")
}

var (
	columns int32 = 3
	rows    int32 = 3
)

func loop() {
	giu.SingleWindow().Layout(
		giu.Row(
			giu.SliderInt(&columns, 1, 5).Size(50).Label("Columns"),
			giu.SliderInt(&rows, 1, 5).Size(50).Label("Rows"),
		),
		Grid(columns, rows,
			giu.Label("1"),
			giu.Label("2"),
			giu.Button("3").OnClick(onClickMe),
			giu.Label("4"),
			giu.Label("5"),
			giu.Button("6").OnClick(onClickMe),
			giu.Label("7"),
			giu.Label("8"),
			giu.Button("9").OnClick(onClickMe),
			giu.Label("10"),
			giu.Label("11"),
			giu.Label("12"),
		),
	)
}

func main() {
	wnd := giu.NewMasterWindow("Hello world", 400, 200, 0)
	wnd.Run(loop)
}

grid.go

package main

import (
	"github.com/AllenDang/giu"
)

var _ giu.Widget = &GridWidget{}

// GridWidget joins a layout into grid of same sized columns and rows
type GridWidget struct {
	columns int32
	rows    int32
	widgets giu.Layout
}

// Grid creates GridWidget.
func Grid(columns int32, rows int32, widgets ...giu.Widget) *GridWidget {
	return &GridWidget{
		columns: columns,
		rows:    rows,
		widgets: widgets,
	}
}

// Build implements Widget interface.
func (l *GridWidget) Build() {
	rows := make([]*giu.TableRowWidget, l.rows)

	i := 0
	for r := int32(0); r < l.rows; r++ {
		rowWidgets := make([]giu.Widget, l.columns)
		for c := int32(0); c < l.columns; c++ {
			if i < len(l.widgets) {
				rowWidgets[c] = l.widgets[int(r*l.columns+c)]
			} else {
				rowWidgets[c] = giu.Dummy(0, 0)
			}
			i++
		}
		rows[r] = giu.TableRow(
			rowWidgets...,
		)
	}

	giu.Table().Flags(giu.TableFlagsSizingStretchSame | giu.TableFlagsBorders).FastMode(true).Rows(rows...).Build()
}

Attached some example screenshots.

Additional questions:

• How to make table fill the whole remaining height of window ?
• How to make table rows use same height ( at best equally portion of whole table height ), even when they are empty ?
• Why do labels in a table cell appear sometimes at different y, depending on whether there is a button left of it in a cell of same row ?
• How to align cell content vertically & horizontally centered in cell ?

[AllenDang]

Looks like imgui will remember the top position of previous widget. One way to resolve this is wrap label into a custom widget which has same border of button.

[manuel-koch]

Searching thru existing giu code, I found that within a widget this call is done:
Widgets.go(41) AlignTextToFramePadding()

Could this be missing in my example in case of labels ?

[AllenDang]

You could give a try.

[manuel-koch]

@AllenDang any idea why empty cells/row has arkward height ?

[AllenDang]

Try give dummy a explicit size rather then 0.