Bubble-table

一个可定制的、交互式的表格组件，适用于Bubble Tea框架。

样式化表格

查看上述示例的源代码

贡献

欢迎贡献，请查看贡献文档获取一些有用的提示！

特性

有关大多数可用特性的代码参考，请查看完整特性示例。如果你想从一个简单的默认表格开始，请查看最简单的示例。

显示一个带有表头、行、页脚和边框的表格。表头可以隐藏，页脚可以设置为自动显示页面信息、使用自定义文本，或默认隐藏。

列可以是固定宽度或灵活宽度。可以指定最大宽度，从而启用水平滚动，最左侧的列可以冻结以便于参考。

边框形状可以自定义，默认为基本的粗方形。可以通过应用基本样式来修改颜色，如lipgloss.NewStyle().BorderForeground(...)。

样式可以全局应用，也可以应用于列、行和单个单元格。在确定覆盖时，首先应用基本样式，然后是列样式，然后是行样式，最后是单元格样式。默认的基本样式是基本的右对齐。查看主要特性示例以了解样式及其如何相互覆盖。

样式也可以通过样式函数应用，这可以用于应用斑马条纹、特定数据的格式化等。

可以聚焦以高亮显示一行，并使用上/下（和j/k）导航。这些键可以通过KeyMap自定义。

可以使行可选择，并获取当前选择。

可以检查事件以了解用户交互。

可以设置分页，指定每页大小，这会自动生成一个简单的页脚来显示当前页和总页数。

通过将任何列设置为可过滤，可以启用内置过滤功能，在页脚使用文本框，并使用/（可通过键绑定自定义）开始过滤。

可以提供缺失指示器来显示行中缺失的数据。

列可以按升序或降序排序。可以指定多个列进行排序。如果指定了多个列，首先按第一个指定的列对表格进行排序，然后在该列内的每个组内进行更小范围的排序。查看排序示例以获取更多信息。如果列包含数字（整数或浮点数），将按数值排序。否则，将比较渲染后的字符串值。

如果某个特性使用起来令人困惑或需要更好的示例，请随时提出问题。

定义表格数据

表格由一系列Column值定义，这些值定义了表格中的列。每个Column都与一个唯一的字符串键相关联。

表格包含一系列Row。每个Row包含一个RowData对象，它只是一个字符串列ID到任意interface{}数据值的映射。当表格被渲染时，每个Row都会检查每个Column键。如果键存在于Row的RowData中，它会用fmt.Sprintf("%v")渲染。如果不存在，则不会渲染任何内容。

RowData对象中的额外数据会被忽略。这对于简单地将数据转储到RowData中并创建选择感兴趣内容的列非常有用，或者可以根据视图选项即时生成不同的列（参见元数据示例了解使用此功能的示例）。

下面给出了一个示例。有关更详细的示例，请参见examples目录。

// 这使得与值匹配更容易/安全，但不是必需的
const (
  // 这个值在任何地方都不可见，所以简单的小写就可以了
  columnKeyID = "id"

  // 它只是一个字符串，所以真的可以是任何东西！它们只需要是唯一的
  columnKeyName = "何?!"
)

// 注意，"ID"或"Name"没有什么特别之处，这些完全是任意的列
columns := []table.Column{
  table.NewColumn(columnKeyID, "ID", 5),
  table.NewColumn(columnKeyName, "Name", 10),
}

rows := []table.Row{
  // 这一行同时包含ID和名称
  table.NewRow(table.RowData{
    columnKeyID:          "abc",
    columnKeyName:        "Hello",
  }),

  table.NewRow(table.RowData{
    columnKeyID:          "123",
    columnKeyName:        "Oh no",
    // 这个字段存在于行数据中，但不会可见
    "somethingelse": "Super bold!",
  }),

  table.NewRow(table.RowData{
    columnKeyID:          "def",
    // 这一行缺少Name列，所以如果在创建表格时提供了缺失数据指示器，
    // 将使用所提供的指示器，使用以下选项：
    // .WithMissingDataIndicator("<ない>") (或 .WithMissingDataIndicatorStyled!)
  }),

  // 我们还可以对行或单个单元格应用样式

  // 这一行有单独的样式使其变粗
  table.NewRow(table.RowData{
    columnKeyID:          "bold",
    columnKeyName:        "Bolded",
  }).WithStyle(lipgloss.NewStyle().Bold(true)),

  // 这一行也有单独的样式使其变粗
  table.NewRow(table.RowData{
    columnKeyID:          "alert",
    // 这个单元格在粗体的基础上应用了样式
    columnKeyName:        table.NewStyledCell("Alert", lipgloss.NewStyle().Foreground(lipgloss.Color("#f88"))),
  }).WithStyle(lipgloss.NewStyle().Bold(true)),
}

关于"元数据"的说明

在某些情况下，你可能希望在表格中引用某种数据对象。例如，用户表可能显示用户名、ID等，当选择行时，你可能希望检索有关该用户的数据。这可以通过以与任何其他数据相同的方式将隐藏的"元数据"附加到行来实现。

const (
  columnKeyID = "id"
  columnKeyName = "名前"
  columnKeyUserData = "userstuff"
)

// 注意这里没有"userstuff"列，所以它不会被显示
columns := []table.Column{
  table.NewColumn(columnKeyID, "ID", 5),
  table.NewColumn(columnKeyName, "Name", 10),
}

// 这个简短的代码片段只有一个用户，请查看完整示例以了解更多
user := &SomeUser{
  ID:   3,
  Name: "Evertras",
}

rows := []table.Row{
  // 这一行同时包含ID和名称
  table.NewRow(table.RowData{
    columnKeyID:       user.ID,
    columnKeyName:     user.Name,

    // 这不会被显示，但它仍然附加在行上
    columnKeyUserData: user,
  }),
}

有关这个想法的更详细演示，请参见元数据示例。

演示

代码示例位于examples目录中。为方便起见，运行命令已添加到Makefile中，但它们应该像go run ./examples/features/main.go这样简单。你也可以通过查看这里GitHub上每个示例目录中的README来了解它们的外观。

要运行这些示例，克隆这个仓库并运行：

# 运行pokemon演示以了解常用功能的大致感觉
make

# 运行dimensions示例以查看多种尺寸的简单表格
make example-dimensions

# 或者直接运行任何一个
go run ./examples/pagination/main.go

bubble-table

Bubble-table

贡献

特性

定义表格数据

关于"元数据"的说明

演示