How to center horizontally and vertically a table

[developer1105]

I would like to center the table in this snippet, just like the example in terminal-wizard:

// file main.go

package main

import (
    "strings"
    "fmt"
    "os"

     "github.com/charmbracelet/bubbles/table"
     tea "github.com/charmbracelet/bubbletea"
     "github.com/charmbracelet/lipgloss"
)

var baseStyle = lipgloss.NewStyle().
     BorderStyle(lipgloss.NormalBorder()).
     BorderForeground(lipgloss.Color("56"))

var repo string = ""

type model struct {
     table table.Model
}

func (m model) Init() tea.Cmd { return nil }

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    var cmd tea.Cmd
    switch msg := msg.(type) {
    case tea.KeyMsg:
        switch msg.String() {
	    case "esc", "q":
		return m, tea.Quit
	    case "enter":
		repo = m.table.SelectedRow()[0]
		return m, tea.Quit
        }
    }
    m.table, cmd = m.table.Update(msg)
    return m, cmd
}

func (m model) View() string {
    return baseStyle.Render(m.table.View()) + "\n"
}

func center(s string, w int) string {
    if len(s) >= w {
         return s
    }
    n := w - len(s)
    div := n / 2
    return strings.Repeat(" ", div) + s + strings.Repeat(" ", div)
}
 
func main() {
    centeredTitle := center("Press [ENTER] to choose repository or [ESC]/[Q] to quit", 71)
    
    columns := []table.Column{
        {Title: centeredTitle, Width: 71},
    }

    rows := []table.Row{
	{"                    Brazil  devuan.c3sl.ufpr.br"},
	{"                     Chile  devuan.dcc.uchile.cl"},
        {"                   Denmark  mirrors.dotsrc.org/devuan"},
	{"                    France  pkgmaster.devuan.org"},
        {"                   Germany  dist-mirror.fem.tu-ilmenau.de/devuan"},
        {"               Netherlands  mirror.koddos.net/devuan"},
        {"               New Zealand  deb.devuan.nz"},
        {"               Switzerland  mirror.ungleich.ch/mirror/packages/devuan"},
        {"  United States of America  mirrors.ocf.berkeley.edu/devuan"},
    }

    t := table.New(
        table.WithColumns(columns),
	table.WithRows(rows),
	table.WithFocused(true),
        table.WithHeight(20),
    )

    s := table.DefaultStyles()
    s.Header = s.Header.
         BorderStyle(lipgloss.DoubleBorder()).
         BorderForeground(lipgloss.Color("56")).
         BorderBottom(true).
	 Bold(true)
    s.Selected = s.Selected.
	 Foreground(lipgloss.Color("229")).
	 Background(lipgloss.Color("13")).
	 Bold(false)
    t.SetStyles(s)

    m := model{t}
    if _, err := tea.NewProgram(m, tea.WithAltScreen()).Run(); err != nil {
        fmt.Println("Error running program:", err)
	os.Exit(1)
    }

    fmt.Printf("%s\n", repo)	
}

[developer1105]

The wizard-tutorial I am referring to is this one, located in this Youtube video:
https://www.youtube.com/watch?v=Gl31diSVP8M

[meowgorithm]

Hi! So the main things you'll want to do are:

1. Listen for tea.WindowSizeMsg to get the terminal dimensions. It gets sent on start and then again on resize (note, however, that resize events are not available on Windows).
2. Save those values on your model.
3. Use lipgloss.Place to center the table in whitespace.

Here's the diff:

diff --git a/main.go b/main.go
index 70a2b86..99ab1ca 100644
--- a/main.go
+++ b/main.go
@@ -17,7 +17,9 @@ var baseStyle = lipgloss.NewStyle().
 var repo string = ""
 
 type model struct {
-	table table.Model
+	table  table.Model
+	width  int
+	height int
 }
 
 func (m model) Init() tea.Cmd { return nil }
@@ -25,6 +27,9 @@ func (m model) Init() tea.Cmd { return nil }
 func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	var cmd tea.Cmd
 	switch msg := msg.(type) {
+	case tea.WindowSizeMsg:
+		m.width = msg.Width
+		m.height = msg.Height
 	case tea.KeyMsg:
 		switch msg.String() {
 		case "esc", "q":
@@ -39,7 +44,12 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (m model) View() string {
-	return baseStyle.Render(m.table.View()) + "\n"
+	if m.width == 0 {
+		return ""
+	}
+
+	table := baseStyle.Render(m.table.View())
+	return lipgloss.Place(m.width, m.height, lipgloss.Center, lipgloss.Center, table)
 }
 
 func center(s string, w int) string {
@@ -89,7 +99,7 @@ func main() {
 		Bold(false)
 	t.SetStyles(s)
 
-	m := model{t}
+	m := model{t, 0, 0}
 	if _, err := tea.NewProgram(m, tea.WithAltScreen()).Run(); err != nil {
 		fmt.Println("Error running program:", err)
 		os.Exit(1)

Here's what it looks like:

And here's the full source:

package main

import (
	"fmt"
	"os"
	"strings"

	"github.com/charmbracelet/bubbles/table"
	tea "github.com/charmbracelet/bubbletea"
	"github.com/charmbracelet/lipgloss"
)

var baseStyle = lipgloss.NewStyle().
	BorderStyle(lipgloss.NormalBorder()).
	BorderForeground(lipgloss.Color("56"))

var repo string = ""

type model struct {
	table  table.Model
	width  int
	height int
}

func (m model) Init() tea.Cmd { return nil }

func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	var cmd tea.Cmd
	switch msg := msg.(type) {
	case tea.WindowSizeMsg:
		m.width = msg.Width
		m.height = msg.Height
	case tea.KeyMsg:
		switch msg.String() {
		case "esc", "q":
			return m, tea.Quit
		case "enter":
			repo = m.table.SelectedRow()[0]
			return m, tea.Quit
		}
	}
	m.table, cmd = m.table.Update(msg)
	return m, cmd
}

func (m model) View() string {
	if m.width == 0 {
		return ""
	}

	table := baseStyle.Render(m.table.View())
	return lipgloss.Place(m.width, m.height, lipgloss.Center, lipgloss.Center, table)
}

func center(s string, w int) string {
	if len(s) >= w {
		return s
	}
	n := w - len(s)
	div := n / 2
	return strings.Repeat(" ", div) + s + strings.Repeat(" ", div)
}

func main() {
	centeredTitle := center("Press [ENTER] to choose repository or [ESC]/[Q] to quit", 71)

	columns := []table.Column{
		{Title: centeredTitle, Width: 71},
	}

	rows := []table.Row{
		{"                    Brazil  devuan.c3sl.ufpr.br"},
		{"                     Chile  devuan.dcc.uchile.cl"},
		{"                   Denmark  mirrors.dotsrc.org/devuan"},
		{"                    France  pkgmaster.devuan.org"},
		{"                   Germany  dist-mirror.fem.tu-ilmenau.de/devuan"},
		{"               Netherlands  mirror.koddos.net/devuan"},
		{"               New Zealand  deb.devuan.nz"},
		{"               Switzerland  mirror.ungleich.ch/mirror/packages/devuan"},
		{"  United States of America  mirrors.ocf.berkeley.edu/devuan"},
	}

	t := table.New(
		table.WithColumns(columns),
		table.WithRows(rows),
		table.WithFocused(true),
		table.WithHeight(20),
	)

	s := table.DefaultStyles()
	s.Header = s.Header.
		BorderStyle(lipgloss.DoubleBorder()).
		BorderForeground(lipgloss.Color("56")).
		BorderBottom(true).
		Bold(true)
	s.Selected = s.Selected.
		Foreground(lipgloss.Color("229")).
		Background(lipgloss.Color("13")).
		Bold(false)
	t.SetStyles(s)

	m := model{t, 0, 0}
	if _, err := tea.NewProgram(m, tea.WithAltScreen()).Run(); err != nil {
		fmt.Println("Error running program:", err)
		os.Exit(1)
	}

	fmt.Printf("%s\n", repo)
}

[developer1105]

Thanks a lot!
I just would like to know how to convert an array of strings into an array of table.Row
I just cannot do this:

var a [] string
a := [3]string{"Japan", "Australia", "Germany"}
var b [] table.Row

and then b = a