企业官网建设流程全解析

egui TableBuilder 快速上手：3 步实现固定表头与可拖拽列宽的数据表格

【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/egui

给 Rust GUI 应用加一张表格，麻烦往往不在「画格子」，而在细节：行超过一屏怎么办？表头能不能一直钉在顶部？某列内容突然变长，整张表会不会被撑乱？这几件事在 egui 里可以交给egui_extras的TableBuilder一次搞定，适合正在用 egui / eframe 写工具、管理面板或 Web 小站，却不想手算布局的开发者。

🧭 先澄清一件事：它不是「合并单元格」式的多级表头

网上不少文章把「连续调用两次header()」说成多级表头。实际效果是两行独立的表头，各自占满全部列，并不存在跨列合并。所以如果你要的是「父列套子列」的报表样式，TableBuilder并不能直接画出这种结构。

它真正擅长的是另一件事：一行表头里混用不同的列宽策略，再配固定表头与滚动正文。每列可以独立选择：

• Column::initial(w)：固定 w 像素宽，不随内容变；
• Column::auto()：按内容自适应，长文本会把列撑宽；
• Column::remainder()：吃掉其他列分完后的剩余宽度，多列同时使用时平分剩余空间；
• Column::exact(w)：恒定为 w 像素，永不伸缩。

列宽在构建时预先算好（源码注释原话：Cell widths are precalculated），正文放在滚动区里独立滚动，表头始终停留在顶部。

📦 从安装到看到第一张表格

1. 安装。把 egui 和 egui_extras 加入依赖，版本保持一致即可：

cargo add egui egui_extras

2. 最小示例。在任意ui闭包里写下面这段，三列分别演示三种宽策略：

use egui_extras::{Column, TableBuilder}; TableBuilder::new(ui) .column(Column::auto()) .column(Column::remainder()) .column(Column::initial(80.0)) .striped(true) .header(24.0, |mut header| { header.col(|ui| ui.strong("名称")); header.col(|ui| ui.strong("备注")); header.col(|ui| ui.strong("状态")); }) .body(|mut body| { for (name, note) in [("Alpha", "备注内容"), ("Beta", "另一行数据")] { body.row(24.0, |mut row| { row.col(|ui| ui.label(name.0)); row.col(|ui| ui.label(note.0)); row.col(|ui| ui.label("OK")); }); } });

每列的内容必须写在对应的row.col(|ui| ...)闭包里，列的顺序和数量与上方column()声明一一对应。

3. 验证效果。用 eframe 跑起来后你会看到：表头钉在表格顶部；备注列随窗口拉伸变宽（remainder在吸收剩余空间）；状态列恒定 80 像素。往下加够行数，正文出现纵向滚动条，表头纹丝不动。

🗂 两种典型场景的列宽分配

场景一：库存台账。名称列内容长短不一，状态列只有几个短词：

对应写法：名称列Column::remainder()吸收剩余空间，数量和状态列各给Column::initial()。窗口拉宽时只有名称列变宽，数字列不会跟着抖动。

场景二：监控指标视图。想模拟「指标名｜当前值｜阈值｜趋势」四列，其中趋势列放长文本（比如一段变化描述）。给趋势列加clip(true)：列被挤窄时内容裁剪而不是换行撑高，行高因此始终一致，整张表看起来更整齐。

两条经验可以直接抄：列数多、每列都放不下的场景，给每列加at_least(60.0)保底线，再整体套一层ScrollArea::horizontal()兜底；行数上万时，别在循环里逐行调row()，改用body.rows(height, count, |row| ...)，它只渲染当前可见的行（官方 demo 就演示了 10 万行的滚动）。

⚙️ 进阶：拖拽列宽、滚动控制与行交互

列宽交给用户调。链上加一句.resizable(true)，列与列之间的分隔线就能按住拖动。拖过的宽度会被记住，下次打开窗口还是用户调好的状态。

滚动行为。表格默认从 200 像素起允许滚动，超过 800 像素才出现滚动条；两个值都能调：

table = table .min_scrolled_height(160.0) .max_scroll_height(600.0) .scroll_to_row(42, None);

整行可点。加.sense(egui::Sense::click())后，点任意单元格都能拿到row.response().clicked()，做行选中不用给每个格子单独挂按钮。

需要更多参数时，直接翻 核心源码 crates/egui_extras/src/table.rs（约 1300 行，方法注释齐全），或阅读 官方文档 docs/accessibility.md 了解配套的可访问性支持。

参考与入口

表格演示的完整交互代码在 crates/egui_demo_lib/src/demo/table_demo.rs，包含排序、行选中、跳转行等写法；crate 总入口见 crates/egui_extras/src/lib.rs，示例应用位于 examples/ 目录。社区讨论可在 GitHub 的 egui 仓库 Discussions 与 Rust 论坛的 egui 版块进行。

TableBuilder把表格里最容易写错的几件事——固定表头、滚动、列宽、行交互——都收敛成几行链式调用。打开你的项目，把库存、日志或配置数据填进上面那段代码，跑一遍看看效果。

【免费下载链接】eguiegui: an easy-to-use immediate mode GUI in Rust that runs on both web and native项目地址: https://gitcode.com/GitHub_Trending/eg/egui