Skip to content

docs(v2): update v2 table bubble example #1380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: v2-exp
Choose a base branch
from
Open

docs(v2): update v2 table bubble example #1380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
caf0a92
refactor(examples): use updated table.Model API
bashbunni Apr 2, 2025
bec315c
refactor(example): add Selected style with background colour
bashbunni Apr 2, 2025
545b3bb
WIP
andreynering May 30, 2025
82727d9
refactor(table): remove unused variable
andreynering May 30, 2025
7fd51e7
chore(table): pin table branches, make example runnable
andreynering May 30, 2025
ab558b6
Merge branch 'v2-exp' into v2-table
andreynering Jun 3, 2025
8376963
chore(deps): update lipgloss and bubbles from the right branches
andreynering Jun 3, 2025
932fe8a
Merge branch 'v2-exp' into v2-table
andreynering Jun 3, 2025
6b074b6
Merge branch 'v2-exp' into v2-table
andreynering Jun 3, 2025
27ee87e
Merge branch 'v2-exp' into v2-table
andreynering Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 11 additions & 21 deletions examples/_1248/main.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,25 @@ import (
"github.com/charmbracelet/lipgloss/v2"
)

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

func NewTable() table.Model {
rows := []table.Row{
rows := [][]string{
{"1", "issue", "v1.2.3", "24/11/22", "EnterAltScreen"},
}
columns := []table.Column{
{Title: "ID", Width: 4},
{Title: "NAME", Width: 28},
{Title: "VERSION", Width: 18},
{Title: "DATE", Width: 15},
{Title: "REMARK", Width: 4},
}
headers := []string{"ID", "NAME", "VERSION", "DATE", "REMARK"}
t := table.New(
table.WithColumns(columns),
table.WithRows(rows),
table.WithHeaders(headers...),
table.WithRows(rows...),
table.WithFocused(true),
table.WithHeight(7),
table.WithHeight(10),
)
s := table.DefaultStyles()
s.Header = s.Header.
BorderStyle(lipgloss.NormalBorder()).
BorderForeground(lipgloss.Color("240")).
BorderBottom(true).
Bold(false)
s.Selected = s.Selected.
Foreground(lipgloss.Color("229")).
Background(lipgloss.Color("57")).
Bold(false)
t.SetStyles(s)
return t
return *t
}

type Model struct {
Expand Down Expand Up @@ -79,7 +65,11 @@ func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
}

func (m Model) View() string {
return baseStyle.Render(m.currentModel.View()) + "\n" + m.currentModel.HelpView() + "\n"
return lipgloss.JoinVertical(
lipgloss.Left,
m.currentModel.View(),
m.currentModel.HelpView(),
)
}

func NewModel() (model Model, err error) {
Expand Down
4 changes: 2 additions & 2 deletions examples/go.mod
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ go 1.23.1
replace github.com/charmbracelet/bubbletea/v2 => ../

require (
github.com/charmbracelet/bubbles/v2 v2.0.0-beta.1.0.20250526131538-b3f0c9e42318
github.com/charmbracelet/bubbles/v2 v2.0.0-beta.1.0.20250603141547-8b46d0b4e219
github.com/charmbracelet/bubbletea/v2 v2.0.0-beta.1.0.20250420102230-7ecd51915026
github.com/charmbracelet/colorprofile v0.3.1
github.com/charmbracelet/glamour/v2 v2.0.0-20250513163904-eeeced3bb3c6
github.com/charmbracelet/harmonica v0.2.0
github.com/charmbracelet/lipgloss/v2 v2.0.0-beta.1.0.20250513162854-28902d027c40
github.com/charmbracelet/lipgloss/v2 v2.0.0-beta.1.0.20250603140710-946081c6f1a5
github.com/charmbracelet/x/ansi v0.9.3-0.20250602153603-fb931ed90413
github.com/charmbracelet/x/exp/charmtone v0.0.0-20250514204301-7f4ee4d0d5fe
github.com/charmbracelet/x/exp/teatest/v2 v2.0.0-20250324105510-c72bdbf70572
Expand Down
10 changes: 4 additions & 6 deletions examples/go.sum
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,16 @@ github.com/aymanbagabas/go-udiff v0.2.0 h1:TK0fH4MteXUDspT88n8CKzvK0X9O2xu9yQjWp
github.com/aymanbagabas/go-udiff v0.2.0/go.mod h1:RE4Ex0qsGkTAJoQdQQCA0uG+nAzJO/pI/QwceO5fgrA=
github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
github.com/charmbracelet/bubbles/v2 v2.0.0-beta.1.0.20250526131538-b3f0c9e42318 h1:f8Q0ybZGxT+St1JfPM7yoz/XFpbmtodcIehaom/9XT8=
github.com/charmbracelet/bubbles/v2 v2.0.0-beta.1.0.20250526131538-b3f0c9e42318/go.mod h1:6HamsBKWqEC/FVHuQMHgQL+knPyvHH55HwJDHl/adMw=
github.com/charmbracelet/bubbles/v2 v2.0.0-beta.1.0.20250603141547-8b46d0b4e219 h1:5lzG1M/SNTItaKYbzfrS57/JR4YcHu3ZviUYd4Nj/jI=
github.com/charmbracelet/bubbles/v2 v2.0.0-beta.1.0.20250603141547-8b46d0b4e219/go.mod h1:yeCn/feXmWXU7QmJPVI9JpPdQGmv2xadb3qjXmbZqWI=
github.com/charmbracelet/colorprofile v0.3.1 h1:k8dTHMd7fgw4bnFd7jXTLZrSU/CQrKnL3m+AxCzDz40=
github.com/charmbracelet/colorprofile v0.3.1/go.mod h1:/GkGusxNs8VB/RSOh3fu0TJmQ4ICMMPApIIVn0KszZ0=
github.com/charmbracelet/glamour/v2 v2.0.0-20250513163904-eeeced3bb3c6 h1:AKhOV8dSRU3KpqMgpGME9JU7ouumB2S6hMmD6PRJeTc=
github.com/charmbracelet/glamour/v2 v2.0.0-20250513163904-eeeced3bb3c6/go.mod h1:7xBAUTCSADx9mHG0uBf4NDoVpYxMzIQ2j/NMLGdFsFM=
github.com/charmbracelet/harmonica v0.2.0 h1:8NxJWRWg/bzKqqEaaeFNipOu77YR5t8aSwG4pgaUBiQ=
github.com/charmbracelet/harmonica v0.2.0/go.mod h1:KSri/1RMQOZLbw7AHqgcBycp8pgJnQMYYT8QZRqZ1Ao=
github.com/charmbracelet/lipgloss/v2 v2.0.0-beta.1.0.20250513162854-28902d027c40 h1:SxOUomYAVo5zh+6WCH1bGshlAnSKP0ZeovI0FHAl9kg=
github.com/charmbracelet/lipgloss/v2 v2.0.0-beta.1.0.20250513162854-28902d027c40/go.mod h1:tRlx/Hu0lo/j9viunCN2H+Ze6JrmdjQlXUQvvArgaOc=
github.com/charmbracelet/x/ansi v0.9.3-0.20250516160309-24eee56f89fa h1:JU05TLAB6nOEL46bxHDV/+e8umBX32ODsGbVkc7o7bk=
github.com/charmbracelet/x/ansi v0.9.3-0.20250516160309-24eee56f89fa/go.mod h1:3RQDQ6lDnROptfpWuUVIUG64bD2g2BgntdxH0Ya5TeE=
github.com/charmbracelet/lipgloss/v2 v2.0.0-beta.1.0.20250603140710-946081c6f1a5 h1:vq3WdrGHQ6T0ZBYdRhn2toyQXDD+uneu3IdcMni7J5g=
github.com/charmbracelet/lipgloss/v2 v2.0.0-beta.1.0.20250603140710-946081c6f1a5/go.mod h1:EJWvaCrhOhNGVZMvcjc0yVryl4qqpMs8tz0r9WyEkdQ=
github.com/charmbracelet/x/ansi v0.9.3-0.20250602153603-fb931ed90413 h1:L07QkDqRF274IZ2UJ/mCTL8DR95efU9BNWLYCDXEjvQ=
github.com/charmbracelet/x/ansi v0.9.3-0.20250602153603-fb931ed90413/go.mod h1:3RQDQ6lDnROptfpWuUVIUG64bD2g2BgntdxH0Ya5TeE=
github.com/charmbracelet/x/cellbuf v0.0.14-0.20250516160309-24eee56f89fa h1:lphz0Z3rsiOtMYiz8axkT24i9yFiueDhJbzyNUADmME=
Expand Down
35 changes: 19 additions & 16 deletions examples/table/main.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@ import (
"github.com/charmbracelet/lipgloss/v2"
)

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

type model struct {
table table.Model
}
Expand Down Expand Up @@ -43,18 +39,17 @@ func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
}

func (m model) View() string {
return baseStyle.Render(m.table.View()) + "\n " + m.table.HelpView() + "\n"
return lipgloss.JoinVertical(
lipgloss.Left,
m.table.View(),
m.table.HelpView(),
)
}

func main() {
columns := []table.Column{
{Title: "Rank", Width: 4},
{Title: "City", Width: 10},
{Title: "Country", Width: 10},
{Title: "Population", Width: 10},
}
headers := []string{"Rank", "City", "Country", "Population"}

rows := []table.Row{
rows := [][]string{
{"1", "Tokyo", "Japan", "37,274,000"},
{"2", "Delhi", "India", "32,065,760"},
{"3", "Shanghai", "China", "28,516,904"},
Expand Down Expand Up @@ -158,12 +153,19 @@ func main() {
}

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

// This is another way to initialize the same table.
// t := table.New().
// SetHeaders(headers...).
// SetRows(rows...).
// SetFocused(true).
// SetHeight(20)

s := table.DefaultStyles()
s.Header = s.Header.
BorderStyle(lipgloss.NormalBorder()).
Expand All @@ -174,9 +176,10 @@ func main() {
Foreground(lipgloss.Color("229")).
Background(lipgloss.Color("57")).
Bold(false)

t.SetStyles(s)

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