Support Table for Display and Selection

[WiserSKI]

Like gum: https://github.com/charmbracelet/gum/tree/main/table

[bashbunni]

Hey @WiserSKI, thank you so much for wanting to make this project better. I've converted this to a discussion so we can talk through it and keep our backlog clear. If it does end up being something we want to add, we'll promote it back to an issue when we are ready to work on it.

If we commit to this feature, that's a feature we will need to maintain for the lifespan of this project. So, since "Yes is forever", we are carefully considering new features.

[System-Glitch]

This is something that I would use as well. One use case is to be able to select a row from a CSV file for example. Another use case would be the ability to select a struct instead of a single value.

It's relatively easy to implement. I suggested an implementation very similar to the select input in this PR: #537

[JoshWilkesQoria]

I've been using an approach like the below snippet for a few years to render a selector as a table but using the description as the header.

package selector

import (
	"fmt"

	"github.com/charmbracelet/huh"
	"github.com/charmbracelet/lipgloss"
	"github.com/mattn/go-runewidth"
)

type Column struct {
	Title string
	Width int
}

// RenderSelectTable builds a huh.Select from columns and row data.
func RenderSelectTable(columns []Column, rows [][]string, values []string, title string, selected *string) error {
	if len(rows) != len(values) {
		return fmt.Errorf("number of rows must match number of values")
	}

	// Render header
	var headerCells []string
	for _, col := range columns {
		header := lipgloss.NewStyle().
			Width(col.Width).
			MaxWidth(col.Width).
			Inline(true).
			Render(runewidth.Truncate(col.Title, col.Width, "…"))
		styledHeader := lipgloss.NewStyle().Bold(true).Padding(0, 1).Render(header)
		headerCells = append(headerCells, styledHeader)
	}
	header := lipgloss.NewStyle().PaddingLeft(2).Render(lipgloss.JoinHorizontal(lipgloss.Left, headerCells...))

	// Render options
	var options []huh.Option[string]
	for i, row := range rows {
		if len(row) != len(columns) {
			return fmt.Errorf("row %d does not match column count", i)
		}
		var cells []string
		for j, col := range columns {
			cell := lipgloss.NewStyle().
				Width(col.Width).
				MaxWidth(col.Width).
				Inline(true).
				Render(runewidth.Truncate(row[j], col.Width, "…"))
			styledCell := lipgloss.NewStyle().Padding(0, 1).Render(cell)
			cells = append(cells, styledCell)
		}
		optionText := lipgloss.JoinHorizontal(lipgloss.Left, cells...)
		options = append(options, huh.NewOption(optionText, values[i]))
	}

	// Build and run the select
	return huh.NewSelect[string]().
		Title(title).
		Description(header).
		Value(selected).
		Options(options...).
		Run()
}

Example Usage

var out string
selector.RenderSelectTable(
	[]selector.Column{{Title: "Column 1", Width: 15}, {Title: "Column 2", Width: 15}},
	[][]string{{"row 1 column 1", "row 1 column 2"}, {"row 2 column 1", "row 2 column 2"}},
	[]string{"example 1", "example 2"},
	"Example table formatted selector", &out)