bubble-table

bubble-table

为Bubble Tea框架开发的交互式表格组件

Bubble-table是为Bubble Tea框架开发的交互式表格组件。它支持自定义标题、行列、页脚和边框,提供固定和灵活宽度列,允许设置最大宽度实现水平滚动,并可冻结左侧列。该组件支持全局样式应用、边框定制、行选择、分页、过滤和排序功能。Bubble-table还集成了键盘导航和事件检测,为开发者提供了灵活的表格解决方案。

Bubble Tea表格组件Go语言开源项目自定义样式Github

Bubble-table

<p> <a href="https://github.com/Evertras/bubble-table/releases"><img src="https://yellow-cdn.veclightyear.com/835a84d5/ecfb9eda-7730-4a79-99dd-79b9730e0b03.svg" alt="最新版本"></a> <a href="https://pkg.go.dev/github.com/evertras/bubble-table/table?tab=doc"><img src="https://godoc.org/github.com/golang/gddo?status.svg" alt="GoDoc"></a> <a href='https://coveralls.io/github/Evertras/bubble-table?branch=main'><img src='https://yellow-cdn.veclightyear.com/835a84d5/bb9314e3-2293-4769-bcb6-f2fcdb960792.svg?branch=main&hash=abc' alt='覆盖率状态'/></a> <a href='https://goreportcard.com/report/github.com/evertras/bubble-table'><img src='https://goreportcard.com/badge/github.com/evertras/bubble-table' alt='Go报告卡' /></a> </p>

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

样式化表格

查看上述示例的源代码

贡献

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

特性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

定义表格数据

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

表格包含一系列Row。每个Row包含一个RowData对象,它只是一个字符串列ID到任意interface{}数据值的映射。 当表格被渲染时,每个Row都会检查每个Column键。如果键存在于RowRowData中,它会用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

编辑推荐精选

Vora

Vora

免费创建高清无水印Sora视频

Vora是一个免费创建高清无水印Sora视频的AI工具

Refly.AI

Refly.AI

最适合小白的AI自动化工作流平台

无需编码,轻松生成可复用、可变现的AI自动化工作流

酷表ChatExcel

酷表ChatExcel

大模型驱动的Excel数据处理工具

基于大模型交互的表格处理系统,允许用户通过对话方式完成数据整理和可视化分析。系统采用机器学习算法解析用户指令,自动执行排序、公式计算和数据透视等操作,支持多种文件格式导入导出。数据处理响应速度保持在0.8秒以内,支持超过100万行数据的即时分析。

AI工具酷表ChatExcelAI智能客服AI营销产品使用教程
TRAE编程

TRAE编程

AI辅助编程,代码自动修复

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
AIWritePaper论文写作

AIWritePaper论文写作

AI论文写作指导平台

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

AI辅助写作AI工具AI论文工具论文写作智能生成大纲数据安全AI助手热门
博思AIPPT

博思AIPPT

AI一键生成PPT,就用博思AIPPT!

博思AIPPT,新一代的AI生成PPT平台,支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等,内置海量精美PPT模板,涵盖商务、教育、科技等不同风格,同时针对每个页面提供多种版式,一键自适应切换,完美适配各种办公场景。

AI办公办公工具AI工具博思AIPPTAI生成PPT智能排版海量精品模板AI创作热门
潮际好麦

潮际好麦

AI赋能电商视觉革命,一站式智能商拍平台

潮际好麦深耕服装行业,是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌,以及国内10万+淘宝、天猫、京东等主流平台的品牌商家,为卖家节省将近85%的出图成本,提升约3倍出图效率,让品牌能够快速上架。

iTerms

iTerms

企业专属的AI法律顾问

iTerms是法大大集团旗下法律子品牌,基于最先进的大语言模型(LLM)、专业的法律知识库和强大的智能体架构,帮助企业扫清合规障碍,筑牢风控防线,成为您企业专属的AI法律顾问。

SimilarWeb流量提升

SimilarWeb流量提升

稳定高效的流量提升解决方案,助力品牌曝光

稳定高效的流量提升解决方案,助力品牌曝光

Sora2视频免费生成

Sora2视频免费生成

最新版Sora2模型免费使用,一键生成无水印视频

最新版Sora2模型免费使用,一键生成无水印视频

下拉加载更多