charmbracelet / charmbracelet/bubbles

Table Centering

Open
#576 0 comments 0 reactions 1 assignee Claimed by @bashbunni View on GitHub
bug
Dominant language
Go
Stars
8.9k
Forks
457
Avg merge
1d 18h
Merged PRs (30d)
5

Description

**Describe the bug**
Between bubbles v1.17.1 and v1.18.0 table centering has changed. In the latter version, table contents does not line up with titles under certain conditions.

**Setup**
Please complete the following information along with version numbers, if applicable.
- OS - macOS
- Shell - zsh
- Terminal Emulator - iTerm
- Terminal Multiplexer - n/a
- Locale - en_US.UTF-8

**To Reproduce**
Steps to reproduce the behavior:
1. Create a table model from bubbles
2. Include `Align(lipgloss.Center)` in the table's style.
3. Include some other line of text that exceeds the the table's width.
4. Run

**Source Code**
The issue can be easily reproduced using the `table` examples within `bubbletea` by adding the following diff:

```
diff --git a/examples/table/main.go b/examples/table/main.go
index 76736f3..acbda6a 100644
--- a/examples/table/main.go
+++ b/examples/table/main.go
@@ -3,6 +3,7 @@ package main
import (
"fmt"
"os"
+ "strings"

"github.com/charmbracelet/bubbles/table"
tea "github.com/charmbracelet/bubbletea"
@@ -11,7 +12,8 @@ import (

var baseStyle = lipgloss.NewStyle().
BorderStyle(lipgloss.NormalBorder()).
- BorderForeground(lipgloss.Color("240"))
+ BorderForeground(lipgloss.Color("240")).
+ Align(lipgloss.Center)

type model struct {
table table.Model
@@ -43,7 +45,7 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
}

func (m model) View() string {
- return baseStyle.Render(m.table.View()) + "\n"
+ return baseStyle.Render(strings.Repeat("*", 80) + "\n" + m.table.View()) + "\n"
}

func main() {
@@ -162,6 +164,7 @@ func main() {
table.WithRows(rows),
table.WithFocused(true),
table.WithHeight(7),
+ table.WithWidth(80),
)

s := table.DefaultStyles()
```

**Expected behavior**
I expect the contents of the table to be aligned with the titles of the table.

**Screenshots**
Before:
![before](https://github.com/user-attachments/assets/b8505009-77c4-433e-8ad9-c78f128cb54b)

After:
![after](https://github.com/user-attachments/assets/ed4526c9-e652-4ea1-ab99-334503ef7b22)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.