Skip to Content
组件Table

Table

Table 是 Ansiq 里最主要的结构化数据 widget。

Table
Table 终端效果图
Table 的终端效果图

最小示例

let rows = vec![
    Row::new(["ansiq", "ready"]),
    Row::new(["monitor", "streaming"]),
];
 
let table = Table::new(rows, [Constraint::Percentage(50), Constraint::Percentage(50)])
    .header(Row::new(["Name", "Status"]))
    .selected(Some(0))
    .on_select(|index| Some(Message::SelectRow(index)))
    .build();

什么时候用

  • 数据天然就是行列结构
  • 选中态很重要
  • 列宽需要显式控制

关键 builder 方法

  • Table::new(rows, widths)
  • .header(...)、.footer(...)
  • .widths(...)、.column_spacing(...)、.flex(...)
  • .selected(...)、.state(...)
  • .highlight_symbol(...)、.row_highlight_style(...)
  • .on_select(...)

State 对象

当你要显式保留 row selection、column selection 或 offset 时，用 TableState：

let state = TableState::new()
    .with_selected(Some(0))
    .with_selected_column(Some(0))
    .with_offset(0);
 
let table = Table::new(rows, widths).state(state).build();

去哪里看真实用法

Last updated on
TabsScrollView