Expand description
Interactive data table component with navigation, selection, and scrolling capabilities.
This module provides a comprehensive table implementation for terminal user interfaces, designed for displaying structured data with keyboard navigation and visual selection. It features efficient viewport-based rendering, customizable styling, and integration with the Bubble Tea architecture.
§Core Components
Model: The main table with data, state, and navigation logicColumn: Column definitions with titles and width constraintsRow: Row data containing cell valuesStyles: Visual styling for headers, cells, and selection statesTableKeyMap: Configurable keyboard bindings for navigation
§Key Features
- Vim-Style Navigation: Familiar keyboard shortcuts for power users
- Viewport Scrolling: Efficient rendering of large datasets
- Selection Highlighting: Visual feedback for the current row
- Responsive Layout: Automatic column width and table sizing
- Help Integration: Built-in documentation of key bindings
- Customizable Styling: Full control over appearance and colors
§Navigation Controls
| Keys | Action | Description |
|---|---|---|
↑, k | Row Up | Move selection up one row |
↓, j | Row Down | Move selection down one row |
PgUp, b | Page Up | Move up one page of rows |
PgDn, f | Page Down | Move down one page of rows |
u | Half Page Up | Move up half a page |
d | Half Page Down | Move down half a page |
Home, g | Go to Start | Jump to first row |
End, G | Go to End | Jump to last row |
§Quick Start
use bubbletea_widgets::table::{Model, Column, Row};
// Define table structure
let columns = vec![
Column::new("Product", 25),
Column::new("Price", 10),
Column::new("Stock", 8),
];
// Add data rows
let rows = vec![
Row::new(vec!["MacBook Pro".into(), "$2399".into(), "5".into()]),
Row::new(vec!["iPad Air".into(), "$599".into(), "12".into()]),
Row::new(vec!["AirPods Pro".into(), "$249".into(), "23".into()]),
];
// Create and configure table
let mut table = Model::new(columns)
.with_rows(rows);
table.set_width(50);
table.set_height(10);§Integration with Bubble Tea
use bubbletea_widgets::table::{Model as TableModel, Column, Row};
use bubbletea_rs::{Model as BubbleTeaModel, Cmd, Msg, KeyMsg};
struct App {
table: TableModel,
}
impl BubbleTeaModel for App {
fn init() -> (Self, Option<Cmd>) {
let table = TableModel::new(vec![
Column::new("ID", 8),
Column::new("Name", 20),
Column::new("Status", 12),
]);
(App { table }, None)
}
fn update(&mut self, msg: Msg) -> Option<Cmd> {
// Forward navigation messages to table
self.table.update(msg)
}
fn view(&self) -> String {
format!("My Data Table:\n\n{}", self.table.view())
}
}§Styling and Customization
use bubbletea_widgets::table::{Model, Column, Row, Styles};
use lipgloss_extras::prelude::*;
let mut table = Model::new(vec![Column::new("Data", 20)]);
// Customize appearance
table.styles = Styles {
header: Style::new()
.bold(true)
.background(Color::from("#1e40af"))
.foreground(Color::from("#ffffff"))
.padding(0, 1, 0, 1),
cell: Style::new()
.padding(0, 1, 0, 1),
selected: Style::new()
.bold(true)
.background(Color::from("#10b981"))
.foreground(Color::from("#ffffff")),
};§Performance Considerations
- Uses viewport rendering for efficient display of large datasets
- Only visible rows are rendered, enabling smooth performance with thousands of rows
- Column widths should be set appropriately to avoid layout recalculation
- Selection changes trigger content rebuilding, but viewport limits render cost
Structs§
- Column
- Represents a table column with its title and display width.
- Model
- Interactive table model containing data, styling, navigation state, and a viewport for efficient rendering and scrolling.
- Row
- Represents a single row of data in the table.
- Styles
- Visual styling configuration for table rendering.
- Table
KeyMap - Keyboard binding configuration for table navigation.
Functions§
- with_
columns - Creates an option to set table columns during construction.
- with_
focused - Creates an option to set table focus state during construction.
- with_
height - Creates an option to set table height during construction.
- with_
key_ map - Creates an option to set table key map during construction.
- with_
rows - Creates an option to set table rows during construction.
- with_
styles - Creates an option to set table styles during construction.
- with_
width - Creates an option to set table width during construction.
Type Aliases§
- Table
Option - Configuration option for table construction.