Columns seem to ignore lipgloss padding about bubble-table HOT 7 OPEN

What I found so far is this line. cellStyle is built by coping rowStyle  and inherit a column.style

func (m Model) renderRowColumnData(row Row, column Column, rowStyle lipgloss.Style, borderStyle lipgloss.Style) string {
	cellStyle := rowStyle.Copy().Inherit(column.style).Inherit(m.baseStyle)

In its implementation in the lipgloss package, we can see that margins and padding properties are skipped

func (s Style) Inherit(i Style) Style {
	s.init()

	for k, v := range i.rules {
		switch k {
		case marginTopKey, marginRightKey, marginBottomKey, marginLeftKey:
			// Margins are not inherited
			continue
		case paddingTopKey, paddingRightKey, paddingBottomKey, paddingLeftKey:
			// Padding is not inherited
			continue
		case backgroundKey:
			s.rules[k] = v

			// The margins also inherit the background color
			if !s.isSet(marginBackgroundKey) && !i.isSet(marginBackgroundKey) {
				s.rules[marginBackgroundKey] = v
			}
		}

		if _, exists := s.rules[k]; exists {
			continue
		}
		s.rules[k] = v
	}
	return s
}

With that knowledge, I created a column with left padding

	columns := []table.Column{
		table.NewColumn(columnKeyName, "Name", 10).WithStyle(
			lipgloss.NewStyle().
				Foreground(lipgloss.Color("#88f")),
		),
		table.NewColumn(columnKeyCountry, "Country", 20).WithStyle(
			lipgloss.NewStyle().
				Foreground(lipgloss.Color("#f88")).
				PaddingLeft(5),
		),
		table.NewColumn(columnKeyCurrency, "Currency", 10),

and change the renderRowColumnData a little bit

func (m Model) renderRowColumnData(row Row, column Column, rowStyle lipgloss.Style, borderStyle lipgloss.Style) string {
	cellStyle := rowStyle.Copy().Inherit(column.style).Inherit(m.baseStyle)

	_, _, _, colPadLeft := column.style.GetPadding()
	if colPadLeft > 0 {
		cellStyle = cellStyle.PaddingLeft(colPadLeft)
	}

Which results in the desired state:

What we can do is:

• modify the Inherit method or create a custom one overriding all values from the incoming style - this will be impossible to make in a finite period since contributions to charm are hella slow (or they do not like me dunno)
• append that logic into renderRowColumnData (for paddings and margins)

I have some free time now, I can go with the second solution. cc. @Evertras

from bubble-table.

charmbracelet/lipgloss#71 😆

from bubble-table.

PR: #160

from bubble-table.

Interesting result: I can get closer to the format I want with table.NewStyledCell

package main

import (
	"fmt"

	"github.com/charmbracelet/lipgloss"
	"github.com/evertras/bubble-table/table"
)

func main() {

	cols := []table.Column{
		table.NewColumn("a", "A", 10),
	}

	paddedCell := lipgloss.NewStyle().Padding(0, 1) // for our own safety
	rows := []table.Row{
		table.NewRow(table.RowData{"a": table.NewStyledCell("hello", paddedCell)}),
		table.NewRow(table.RowData{"a": table.NewStyledCell("very long text", paddedCell)}),
	}

	t := table.New(cols).WithRows(rows)
	fmt.Println(t.View())
}

Output

┏━━━━━━━━━━┓
┃         A┃
┣━━━━━━━━━━┫
┃    hello ┃
┃     very ┃
┃    long… ┃
┗━━━━━━━━━━┛

from bubble-table.

Apologies for the late reply on this, it slipped through my email and I haven't checked here for a little bit. I think the StyledCell approach is probably going to be the way to go here, but it does feel a bit rough that your original attempt didn't work. I'm going to leave this open for now, but I'm not entirely sure what the obvious fix will be and there is a workaround. 🤔

from bubble-table.

Okay, it may be tricky because GetPadding and GetMargins return values or 0 if a property is not set. Creating a simple if statement as I did may result in a situation when a rowStyle sets padding to >0 value and the user wants to have a column with padding ==0 and it will not be overridden.

Without access lipgloss.Style.rules it may be hard to implement simply. We can cover the override margins/paddings with a next column flag but I do not if it is a best approach here

from bubble-table.

It came out that we cannot set paddings and margins in base style because it breaks the layout

PaddingRight(10)

MarginRight()

So my objects are invalid now, I am going to create a PR with that

from bubble-table.