Improper rendering of lipgloss.Table

[siennathesane]

Describe the bug

The lipgloss.Table rendering provides improper rendering in a few ways:

• Headers are inconsistently rendered outside of the size of the window
• Multiple rows are rendered with the same style during an update
• The bottom of the table will scroll to the top of the window

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

• macOS Sequoia
• ZSH, default from macOS
• Observed in both rio & iterm
• No multiplexer
• en_US.UTF-8, default for macOS.

To Reproduce Steps to reproduce the behavior:

1. Render the table with more rows than the height of the window.

Unfortunately, I can't share the code that's rendering the table, only the table component itself. You can render the table as the only thing rendered and still observe this behavior

Source Code

Here is the table component I built. It's pulled from github.com/charmbracelet/bubbles.Table, but modified to use lipgloss.Table instead.

package table

import (
    "github.com/charmbracelet/bubbles/help"
    "github.com/charmbracelet/bubbles/key"
    tea "github.com/charmbracelet/bubbletea"
    "github.com/charmbracelet/lipgloss"
    "github.com/charmbracelet/lipgloss/table"
    "github.com/jamf/k8s-hermes-cli/internal/styles"
    "github.com/jamf/k8s-hermes-cli/internal/utils"
    jamfcolor "github.com/jamf/pkg/styles"
)

// table constants
const (
    headerRow int = 0
    firstRow  int = 1
)

type Data interface {
    table.Data
    Headers() []string
}

var _ tea.Model = (*Model)(nil)

// KeyMap defines keybindings for the Model.
type KeyMap struct {
    LineUp       key.Binding
    LineDown     key.Binding
    PageUp       key.Binding
    PageDown     key.Binding
    HalfPageUp   key.Binding
    HalfPageDown key.Binding
    GotoTop      key.Binding
    GotoBottom   key.Binding
}

// ShortHelp implements the KeyMap interface.
func (km KeyMap) ShortHelp() []key.Binding {
    return []key.Binding{km.LineUp, km.LineDown}
}

// FullHelp implements the KeyMap interface.
func (km KeyMap) FullHelp() [][]key.Binding {
    return [][]key.Binding{
        {km.LineUp, km.LineDown, km.GotoTop, km.GotoBottom},
        {km.PageUp, km.PageDown, km.HalfPageUp, km.HalfPageDown},
    }
}

// DefaultKeyMap returns a default set of keybindings.
func DefaultKeyMap() KeyMap {
    const spacebar = " "
    return KeyMap{
        LineUp: key.NewBinding(
            key.WithKeys("up", "k"),
            key.WithHelp("↑/k", "up"),
        ),
        LineDown: key.NewBinding(
            key.WithKeys("down", "j"),
            key.WithHelp("↓/j", "down"),
        ),
        PageUp: key.NewBinding(
            key.WithKeys("b", "pgup"),
            key.WithHelp("b/pgup", "page up"),
        ),
        PageDown: key.NewBinding(
            key.WithKeys("f", "pgdown", spacebar),
            key.WithHelp("f/pgdn", "page down"),
        ),
        HalfPageUp: key.NewBinding(
            key.WithKeys("u", "ctrl+u"),
            key.WithHelp("u", "½ page up"),
        ),
        HalfPageDown: key.NewBinding(
            key.WithKeys("d", "ctrl+d"),
            key.WithHelp("d", "½ page down"),
        ),
        GotoTop: key.NewBinding(
            key.WithKeys("home", "g"),
            key.WithHelp("g/home", "go to start"),
        ),
        GotoBottom: key.NewBinding(
            key.WithKeys("end", "G"),
            key.WithHelp("G/end", "go to end"),
        ),
    }
}

type Styles struct {
    Border       lipgloss.Border
    BorderStyle  lipgloss.Style
    BorderHeader bool
    Header       lipgloss.Style
    Cell         lipgloss.Style
    Selected     lipgloss.Style
}

func DefaultStyles() Styles {
    return Styles{
        Border:       lipgloss.RoundedBorder(),
        BorderHeader: true,
        BorderStyle:  styles.BaseStyle().BorderForeground(lipgloss.Color(jamfcolor.AthensGrey)),
        Selected:     styles.BaseStyle().Bold(true).Background(lipgloss.Color(jamfcolor.Havelock)),
        Header:       styles.BaseStyle().Bold(true).Padding(1).AlignHorizontal(lipgloss.Center),
        Cell:         styles.BaseStyle().Padding(1),
    }
}

type Option func(*Model)

type Model struct {
    KeyMap KeyMap
    Help   help.Model

    yoffset int
    height  int
    data    Data
    cursor  int
    focus   bool
    styles  Styles

    table *table.Table
    start int
    end   int
}

func New(opts ...Option) *Model {
    m := &Model{
        cursor: firstRow,
        table:  table.New(),
        KeyMap: DefaultKeyMap(),
        Help:   help.New(),
        styles: DefaultStyles(),
    }
    m.Help.ShowAll = true
    for _, o := range opts {
        o(m)
    }
    return m
}

// WithHeaders sets the headers for the table.
func WithHeaders(headers ...string) Option {
    return func(m *Model) {
        m.table.Headers(headers...)
    }
}

// WithRows sets the rows for the table.
func WithRows(rows ...[]string) Option {
    return func(m *Model) {
        m.table.Rows(rows...)
    }
}

// WithData sets the table data.
func WithData(data table.Data) Option {
    return func(m *Model) {
        m.table = m.table.Data(data)
    }
}

func WithFocus() Option {
    return func(m *Model) {
        m.focus = true
    }
}

func WithStyles(styles Styles) Option {
    return func(m *Model) {
        m.styles = styles
    }
}

func WithKeyMap(km KeyMap) Option {
    return func(m *Model) {
        m.KeyMap = km
    }
}

func WithHeight(h int) Option {
    return func(m *Model) {
        m.height = h
        m.table.Height(h)
    }
}

func WithWidth(w int) Option {
    return func(m *Model) {
        m.table.Width(w)
    }
}

// SetData sets the table data.
func (m *Model) SetData(data Data) {
    m.data = data
    m.table = m.table.Data(data)
}

// SetHeaders sets the table headers.
func (m *Model) SetHeaders(headers ...string) {
    m.table = m.table.Headers(headers...)
}

func (m *Model) Cursor() int {
    return m.cursor
}

func (m *Model) SetCursor(n int) {
    m.cursor = utils.Clamp(n, 0, m.data.Rows())
}

// MoveUp moves the cursor up n rows, up to the first row.
func (m *Model) MoveUp(n int) {
    m.SetCursor(m.cursor - n)

    m.setYOffset(m.yoffset - n)
    m.table.Offset(m.yoffset)
}

// MoveDown moves the cursor down n rows, up to the last row.
func (m *Model) MoveDown(n int) {
    m.SetCursor(m.cursor + n)

    m.setYOffset(m.yoffset + n)
    m.table.Offset(m.yoffset)
}

func (m *Model) GoToBottom() {
    m.MoveDown(m.data.Rows())
}

func (m *Model) GoToTop() {
    // todo (sienna): this feels buggy
    m.MoveUp(firstRow)
}

func (m *Model) Height() int {
    return m.height
}

func (m *Model) SetHeight(h int) {
    m.height = h
    m.table = m.table.Height(h)
}

// SetWidth sets the width of the table.
func (m *Model) SetWidth(w int) {
    m.table = m.table.Width(w)
}

// Focused returns true if the table is focused.
func (m *Model) Focused() bool {
    return m.focus
}

// Focus focuses the table, allowing the user to move around the rows and
// interact.
func (m *Model) Focus() {
    m.focus = true
}

// Blur blurs the table, preventing selection or movement.
func (m *Model) Blur() {
    m.focus = false
}

func (m *Model) HelpView() string {
    return m.Help.View(m.KeyMap)
}

func (m *Model) setYOffset(n int) {
    m.yoffset = utils.Clamp(n, 0, m.data.Rows())
}

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

func (m *Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    if !m.focus {
        return m, nil
    }

    switch msg := msg.(type) {
    case tea.KeyMsg:
        switch {
        case key.Matches(msg, m.KeyMap.LineUp):
            m.MoveUp(1)
        case key.Matches(msg, m.KeyMap.LineDown):
            m.MoveDown(1)
        case key.Matches(msg, m.KeyMap.PageUp):
            m.MoveUp(m.height)
        case key.Matches(msg, m.KeyMap.PageDown):
            m.MoveDown(m.height)
        case key.Matches(msg, m.KeyMap.HalfPageUp):
            m.MoveUp(m.height / 2)
        case key.Matches(msg, m.KeyMap.HalfPageDown):
            m.MoveDown(m.height / 2)
        case key.Matches(msg, m.KeyMap.LineDown):
            m.MoveDown(1)
        case key.Matches(msg, m.KeyMap.GotoTop):
            m.GoToTop()
        case key.Matches(msg, m.KeyMap.GotoBottom):
            m.GoToBottom()
        }
    case tea.MouseMsg:
        if msg.Button == tea.MouseButtonWheelUp {
            m.MoveUp(1)
        }
        if msg.Button == tea.MouseButtonWheelDown {
            m.MoveDown(1)
        }
    }

    return m, nil
}

func (m *Model) View() string {
    m.table.StyleFunc(func(row int, col int) lipgloss.Style {
        if row == headerRow {
            return m.styles.Header
        }
        if row == m.cursor {
            return m.styles.Selected
        }
        return m.styles.Cell
    })

    return m.table.String()
}

Expected behavior

• Headers should render at the top of the window.
• StyleFunc should consistently highlight rows
• The table should not scroll up to the top of the window but remain locked to the bottom.

Screenshots

https://github.com/user-attachments/assets/19d90fc2-0047-4935-87e1-ae44b7897944

Additional context

I've tested several different iterations and still end up with the same generalized results.

[bashbunni]

Hey, I think this should be fixed by https://github.com/charmbracelet/lipgloss/pull/373 We have an open PR in bubbles as well to make it render using Lip Gloss table as well if that's of interest! https://github.com/charmbracelet/bubbles/pull/617

If you have any feedback on that one, please don't hesitate to let us know