charmbracelet / bubbles

TUI components for Bubble Tea 🫧
MIT License
5.24k stars 247 forks source link

table: SelectedStyle is not inherited for `StyleFunc` #538

Closed gabrielfu closed 2 months ago

gabrielfu commented 2 months ago

Describe the bug

When using StyleFunc, seems like the selected style is not inherited into the stylefunc due to Line 434 below, where cellStyle is not re-assigned to the returned value

https://github.com/charmbracelet/bubbles/blob/0b15a9fad1b094dab1bec5924eb204f2ef10551c/table/table.go#L430-L438

Proposed fix:

cellStyle = cellStyle.Inherit(m.styles.Selected) 

Setup Please complete the following information along with version numbers, if applicable.

To Reproduce Run the source code attached below:

Source Code

Below is a modified version of the official table example.

I simply added random color to the cells in "City" column.

Code ```go package main import ( "crypto/md5" "encoding/hex" "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("240")) 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": if m.table.Focused() { m.table.Blur() } else { m.table.Focus() } case "q", "ctrl+c": return m, tea.Quit case "enter": return m, tea.Batch( tea.Printf("Let's go to %s!", m.table.SelectedRow()[1]), ) } } m.table, cmd = m.table.Update(msg) return m, cmd } func (m model) View() string { return baseStyle.Render(m.table.View()) + "\n" } func randomColor(text string) string { hash := md5.Sum([]byte(text)) return "#" + hex.EncodeToString(hash[:])[:6] } func main() { columns := []table.Column{ {Title: "Rank", Width: 4}, {Title: "City", Width: 10}, {Title: "Country", Width: 10}, {Title: "Population", Width: 10}, } rows := []table.Row{ {"1", "Tokyo", "Japan", "37,274,000"}, {"2", "Delhi", "India", "32,065,760"}, {"3", "Shanghai", "China", "28,516,904"}, {"4", "Dhaka", "Bangladesh", "22,478,116"}, {"5", "São Paulo", "Brazil", "22,429,800"}, {"6", "Mexico City", "Mexico", "22,085,140"}, {"7", "Cairo", "Egypt", "21,750,020"}, {"8", "Beijing", "China", "21,333,332"}, {"9", "Mumbai", "India", "20,961,472"}, {"10", "Osaka", "Japan", "19,059,856"}, {"11", "Chongqing", "China", "16,874,740"}, {"12", "Karachi", "Pakistan", "16,839,950"}, {"13", "Istanbul", "Turkey", "15,636,243"}, {"14", "Kinshasa", "DR Congo", "15,628,085"}, {"15", "Lagos", "Nigeria", "15,387,639"}, {"16", "Buenos Aires", "Argentina", "15,369,919"}, {"17", "Kolkata", "India", "15,133,888"}, {"18", "Manila", "Philippines", "14,406,059"}, {"19", "Tianjin", "China", "14,011,828"}, {"20", "Guangzhou", "China", "13,964,637"}, } 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 := table.New( table.WithColumns(columns), table.WithRows(rows), table.WithFocused(true), table.WithHeight(7), table.WithStyleFunc(func(row, col int, value string) lipgloss.Style { // if is city column if col == 1 { color := randomColor(value) return s.Cell.Foreground(lipgloss.Color(color)) } return s.Cell }), ) t.SetStyles(s) m := model{t} if _, err := tea.NewProgram(m).Run(); err != nil { fmt.Println("Error running program:", err) os.Exit(1) } } ```

Expected behavior The "Country" and "Population" columns of the selected row should be in blue background

Screenshots

image