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

编辑推荐精选

博思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模型免费使用,一键生成无水印视频

Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手,它拥有超精准的音频识别翻译能力,几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球,无论你是留学生、商务人士、韩剧美剧爱好者,还是出国游玩、多国会议、跨国追星等等,都可以满足你所有需要同传的场景需求,线上线下通用,扫除语言障碍,让全世界的语言交流不再有国界。

讯飞绘文

讯飞绘文

选题、配图、成文,一站式创作,让内容运营更高效

讯飞绘文,一个AI集成平台,支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容,加速品牌传播,提升内容营销效果。

热门AI辅助写作AI工具讯飞绘文内容运营AI创作个性化文章多平台分发AI助手
TRAE编程

TRAE编程

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

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

AI工具TraeAI IDE协作生产力转型热门
商汤小浣熊

商汤小浣熊

最强AI数据分析助手

小浣熊家族Raccoon,您的AI智能助手,致力于通过先进的人工智能技术,为用户提供高效、便捷的智能服务。无论是日常咨询还是专业问题解答,小浣熊都能以快速、准确的响应满足您的需求,让您的生活更加智能便捷。

imini AI

imini AI

像人一样思考的AI智能体

imini 是一款超级AI智能体,能根据人类指令,自主思考、自主完成、并且交付结果的AI智能体。

下拉加载更多