Add horizontal freeze (#87)

Author: Evertras

examples/scrolling/README.md

@@ -3,4 +3,4 @@
 This example shows how to use scrolling to navigate particularly large tables
 that may not fit nicely onto the screen.
 
-<img width="423" alt="image" src="https://user-images.githubusercontent.com/5923958/171999237-fea16b62-c378-4996-8143-501452e3ab90.png">
+<img width="423" alt="image" src="https://user-images.githubusercontent.com/5923958/172004548-7052993e-9e60-44a4-b9b2-b49506c48fb6.png">

examples/scrolling/main.go

@@ -51,8 +51,14 @@ func NewModel() Model {
 		cols = append(cols, table.NewColumn(colKey(i), colKey(i+1), 5))
 	}
 
+	t := table.New(cols).
+		WithRows(rows).
+		WithMaxTotalWidth(30).
+		WithHorizontalFreezeColumnCount(1).
+		Focused(true)
+
 	return Model{
-		scrollableTable: table.New(cols).WithRows(rows).WithMaxTotalWidth(30).Focused(true),
+		scrollableTable: t,
 	}
 }
 

table/header.go

@@ -4,7 +4,7 @@ import "github.com/charmbracelet/lipgloss"
 
 // This is long and could use some refactoring in the future, but unsure of how
 // to pick it apart right now.
-// nolint: funlen
+// nolint: funlen, cyclop
 func (m Model) renderHeaders() string {
 	headerStrings := []string{}
 
@@ -20,22 +20,27 @@ func (m Model) renderHeaders() string {
 		return borderStyle.Render(headerSection)
 	}
 
-	if m.horizontalScrollOffsetCol > 0 {
-		borderStyle := headerStyles.left.Copy()
+	for columnIndex, column := range m.columns {
+		var borderStyle lipgloss.Style
 
-		rendered := renderHeader(genOverflowColumnLeft(1), borderStyle)
+		if m.horizontalScrollOffsetCol > 0 && columnIndex == m.horizontalScrollFreezeColumnsCount {
+			if columnIndex == 0 {
+				borderStyle = headerStyles.left.Copy()
+			} else {
+				borderStyle = headerStyles.inner.Copy()
+			}
 
-		totalRenderedWidth += lipgloss.Width(rendered)
+			rendered := renderHeader(genOverflowColumnLeft(1), borderStyle)
 
-		headerStrings = append(headerStrings, rendered)
-	}
+			totalRenderedWidth += lipgloss.Width(rendered)
 
-	for columnIndex, column := range m.columns {
-		if columnIndex < m.horizontalScrollOffsetCol {
-			continue
+			headerStrings = append(headerStrings, rendered)
 		}
 
-		var borderStyle lipgloss.Style
+		if columnIndex >= m.horizontalScrollFreezeColumnsCount &&
+			columnIndex < m.horizontalScrollOffsetCol+m.horizontalScrollFreezeColumnsCount {
+			continue
+		}
 
 		if len(headerStrings) == 0 {
 			borderStyle = headerStyles.left.Copy()

table/model.go

@@ -63,6 +63,9 @@ type Model struct {
 
 	// How far to scroll to the right, in columns
 	horizontalScrollOffsetCol int
+
+	// How many columns to freeze when scrolling horizontally
+	horizontalScrollFreezeColumnsCount int
 }
 
 // New creates a new table ready for further modifications.

table/options.go

@@ -277,3 +277,12 @@ func (m Model) WithMaxTotalWidth(maxTotalWidth int) Model {
 
 	return m
 }
+
+// WithHorizontalFreezeColumnCount freezes the given number of columns to the
+// left side.  This is useful for things like ID or Name columns that should
+// always be visible even when scrolling.
+func (m Model) WithHorizontalFreezeColumnCount(columnsToFreeze int) Model {
+	m.horizontalScrollFreezeColumnsCount = columnsToFreeze
+
+	return m
+}

table/row.go

@@ -77,7 +77,7 @@ func (m Model) renderRowColumnData(row Row, column Column, rowStyle lipgloss.Sty
 
 // This is long and could use some refactoring in the future, but not quite sure
 // how to pick it apart yet.
-// nolint: funlen, cyclop
+// nolint: funlen, cyclop, gocognit
 func (m Model) renderRow(rowIndex int, last bool) string {
 	numColumns := len(m.columns)
 	row := m.GetVisibleRows()[rowIndex]
@@ -94,35 +94,35 @@ func (m Model) renderRow(rowIndex int, last bool) string {
 
 	stylesInner, stylesLast := m.styleRows()
 
-	if m.horizontalScrollOffsetCol > 0 {
+	for columnIndex, column := range m.columns {
 		var borderStyle lipgloss.Style
+		var rowStyles borderStyleRow
 
 		if !last {
-			borderStyle = stylesInner.left.Copy()
+			rowStyles = stylesInner
 		} else {
-			borderStyle = stylesLast.left.Copy()
+			rowStyles = stylesLast
 		}
 
-		rendered := m.renderRowColumnData(row, genOverflowColumnLeft(1), rowStyle, borderStyle)
-
-		totalRenderedWidth += lipgloss.Width(rendered)
+		if m.horizontalScrollOffsetCol > 0 && columnIndex == m.horizontalScrollFreezeColumnsCount {
+			var borderStyle lipgloss.Style
 
-		columnStrings = append(columnStrings, rendered)
-	}
+			if columnIndex == 0 {
+				borderStyle = rowStyles.left.Copy()
+			} else {
+				borderStyle = rowStyles.inner.Copy()
+			}
 
-	for columnIndex, column := range m.columns {
-		if columnIndex < m.horizontalScrollOffsetCol {
-			continue
-		}
+			rendered := m.renderRowColumnData(row, genOverflowColumnLeft(1), rowStyle, borderStyle)
 
-		var borderStyle lipgloss.Style
+			totalRenderedWidth += lipgloss.Width(rendered)
 
-		var rowStyles borderStyleRow
+			columnStrings = append(columnStrings, rendered)
+		}
 
-		if !last {
-			rowStyles = stylesInner
-		} else {
-			rowStyles = stylesLast
+		if columnIndex >= m.horizontalScrollFreezeColumnsCount &&
+			columnIndex < m.horizontalScrollOffsetCol+m.horizontalScrollFreezeColumnsCount {
+			continue
 		}
 
 		if len(columnStrings) == 0 {

table/scrolling.go

@@ -1,7 +1,8 @@
 package table
 
 func (m *Model) scrollRight() {
-	if m.horizontalScrollOffsetCol < len(m.columns)-1 {
+	maxCol := len(m.columns) - 1 - m.horizontalScrollFreezeColumnsCount
+	if m.horizontalScrollOffsetCol < maxCol {
 		m.horizontalScrollOffsetCol++
 	}
 }

table/update_test.go

@@ -433,3 +433,63 @@ func TestScrollRightWithFooter(t *testing.T) {
 	hitScrollLeft()
 	assert.Equal(t, expectedTableOriginal, model.View())
 }
+
+func TestScrollRightWithFooterAndFrozenCols(t *testing.T) {
+	model := New([]Column{
+		NewColumn("Name", "Name", 4),
+		NewColumn("1", "1", 4),
+		NewColumn("2", "2", 4),
+		NewColumn("3", "3", 4),
+		NewColumn("4", "4", 4),
+	}).
+		WithRows([]Row{
+			NewRow(RowData{
+				"Name": "A",
+				"1":    "x1",
+				"2":    "x2",
+				"3":    "x3",
+				"4":    "x4",
+			}),
+		}).
+		WithStaticFooter("Footer").
+		WithMaxTotalWidth(21).
+		WithHorizontalFreezeColumnCount(1).
+		Focused(true)
+
+	const expectedTableOriginal = `┏━━━━┳━━━━┳━━━━┳━━━━┓
+┃Name┃   1┃   2┃   >┃
+┣━━━━╋━━━━╋━━━━╋━━━━┫
+┃   A┃  x1┃  x2┃   >┃
+┣━━━━┻━━━━┻━━━━┻━━━━┫
+┃             Footer┃
+┗━━━━━━━━━━━━━━━━━━━┛`
+
+	const expectedTableAfter = `┏━━━━┳━┳━━━━┳━━━━┳━━┓
+┃Name┃<┃   2┃   3┃ >┃
+┣━━━━╋━╋━━━━╋━━━━╋━━┫
+┃   A┃<┃  x2┃  x3┃ >┃
+┣━━━━┻━┻━━━━┻━━━━┻━━┫
+┃             Footer┃
+┗━━━━━━━━━━━━━━━━━━━┛`
+
+	hitScrollRight := func() {
+		model, _ = model.Update(tea.KeyMsg{Type: tea.KeyShiftRight})
+	}
+
+	hitScrollLeft := func() {
+		model, _ = model.Update(tea.KeyMsg{Type: tea.KeyShiftLeft})
+	}
+
+	assert.Equal(t, expectedTableOriginal, model.View())
+
+	hitScrollRight()
+
+	assert.Equal(t, expectedTableAfter, model.View())
+
+	hitScrollLeft()
+	assert.Equal(t, expectedTableOriginal, model.View())
+
+	// Try it again, should do nothing
+	hitScrollLeft()
+	assert.Equal(t, expectedTableOriginal, model.View())
+}