ipydatagrid API速查手册:DataGrid、选择器与渲染器属性完整清单(附示例代码)
ipydatagrid API速查手册:DataGrid、选择器与渲染器属性完整清单(附示例代码)
【免费下载链接】ipydatagridFast Datagrid widget for the Jupyter Notebook and JupyterLab项目地址: https://gitcode.com/gh_mirrors/ip/ipydatagrid
ipydatagrid 是面向 Jupyter Notebook 与 JupyterLab 的高性能 DataGrid(数据网格)控件。本文把它的三大核心 API —— DataGrid 构建属性、选择器(Selections)接口、单元格渲染器(Renderers)属性 —— 整理成一份完整清单,每个属性都配默认值说明与简短示例代码,方便新手随查随用。
📦 快速开始:三步创建 DataGrid
先安装:
pip install ipydatagrid最小示例(完整演示见 examples/DataGrid.ipynb 同目录下的examples/DataGrid.ipynb):
import pandas as pd from ipydatagrid import DataGrid df = pd.DataFrame({"A": [1, 2, 3], "B": ["x", "y", "z"]}) grid = DataGrid(df) gridDataGrid的完整实现位于 ipydatagrid/datagrid.py,所有可从ipydatagrid直接导入的类在 ipydatagrid/init.py 中统一导出。
🧩 DataGrid 构建属性完整清单
| 属性 | 默认值 | 说明 |
|---|---|---|
dataframe | 必填 | 要展示的 pandas DataFrame |
index_name | "key" | 索引列显示名称(仅构造时可设) |
base_row_size | 20 | 默认行高(像素) |
base_column_size | 64 | 默认列宽(像素) |
base_row_header_size | 64 | 行头宽度 |
base_column_header_size | 20 | 列头高度 |
header_visibility | "all" | 表头显示模式:all/row/column/none |
selection_mode | "none" | 选择模式:cell/row/column/none |
editable | False | 是否允许双击单元格编辑(开启后自动切到cell模式) |
column_widths | {} | 按列名指定自定义列宽 |
auto_fit_columns | False | 是否自动按内容适配列宽 |
auto_fit_params | 见下方 | 自动适配参数:area(all/body/row-header)、padding、numCols |
grid_style | None | 全局网格样式字典,可覆盖背景色、网格线、选中框颜色等 |
horizontal_stripes | False | 启用斑马行(隔行着色) |
vertical_stripes | False | 启用隔列着色 |
renderers | {} | 按列名指定渲染器的字典 |
default_renderer | TextRenderer | 全体单元格的默认渲染器 |
header_renderer/corner_renderer | None | 列头 / 左上角单元格的渲染器 |
示例:自定义布局 + 主题条纹(参考examples/Themes.ipynb):
grid = DataGrid(df, layout={"height": "300px"}, horizontal_stripes=True) grid.auto_fit_params = {"area": "body", "padding": 60, "numCols": 1} grid.auto_fit_columns = True # 列宽自动适配,见 examples/Column Width Auto-Fit.ipynb🎯 选择器(Selections)API:编程式选区与取值
ipydatagrid的选择模型是"矩形选区"列表,内部以{r1, c1, r2, c2}(左上角到右下角,行列均从 0 开始)表示。相关实现在 ipydatagrid/datagrid.py 的SelectionHelper与SelectionIterator类中,交互演示见examples/Selections.ipynb。
| 方法 / 属性 | 说明 |
|---|---|
select(row1, column1, row2=None, column2=None, clear_mode="none") | 选中单个单元格或矩形区域;clear_mode取none/all/current |
clear_selection() | 清空全部选区 |
selections | 选区矩形列表(可双向同步) |
selected_cells | 所有选中单元格,每项为{"r": 行, "c": 列} |
selected_cell_values | 所有选中单元格的值列表 |
selected_cell_iterator | 逐个遍历选中单元格(基于完整数据) |
selected_visible_cell_iterator | 遍历当前可见(经筛选/排序后)的选中单元格 |
get_visible_data() | 返回当前视图的 DataFrame |
快速示例:
grid.select(row1=1, column1=1, row2=2, column2=2, clear_mode="all") # 矩形选区 grid.select(4, 1) # 单个单元格 print(grid.selected_cell_values) # 读取选中值 grid.clear_selection()💡 提示:按住
Ctrl/Cmd拖选可累加选区,按住Shift可在两次点击间选区。
✍️ 单元格读写与事件回调
| 方法 | 说明 |
|---|---|
get_cell_value(column, primary_key)/set_cell_value(column, primary_key, value) | 按"列名 + 主键"读写单个单元格,支持多主键 |
get_cell_value_by_index(column, row)/set_cell_value_by_index(column, row, value) | 按"列名 + 行索引"读写 |
set_row_value(primary_key, values) | 按主键整行写入 |
on_cell_change(callback) | 监听单元格变化,回调参数含row、column、value |
on_cell_click(callback) | 监听点击,回调参数含region、column、row、cell_value等 |
grid.editable = True # 开启就地编辑:双击单元格或输入新值即可修改 grid.set_cell_value("Origin", 4, "Canada") grid.on_cell_change(lambda c: print("changed:", c["row"], c["column"], c["value"]))编辑与事件回调的完整交互演示见examples/CellEditing.ipynb。
🎨 渲染器(Renderers)属性完整清单
全部渲染器定义在 ipydatagrid/cellrenderer.py,效果演示见examples/DataGrid.ipynb与examples/ConditionalFormatting.ipynb。
TextRenderer(默认渲染器,其他渲染器的基类):
| 属性 | 默认值 | 说明 |
|---|---|---|
text_value | None | 显示文本(值 / Scale / VegaExpr) |
text_wrap | False | 是否自动换行(优先于省略) |
text_elide_direction | "right" | 文本省略方向:right/left |
font | "12px sans-serif" | 字体 |
text_color/background_color | default_value | 字色 / 背景色,可传颜色、VegaExpr或ColorScale |
vertical_alignment/horizontal_alignment | center/left | 垂直 / 水平对齐 |
format/format_type | None/"number" | d3 格式串与类型(number/time) |
missing | "" | 缺失值占位文本 |
BarRenderer(继承 TextRenderer,增加):
| 属性 | 默认值 | 说明 |
|---|---|---|
bar_value | 0.0 | 条形数值或 Scale(未指定时按列数据自动推断) |
bar_color | "#4682b4" | 条形颜色,可用ColorScale做渐变 |
orientation | "horizontal" | 条形方向 |
bar_vertical_alignment/bar_horizontal_alignment | bottom/left | 条形对齐 |
show_text | True | 是否叠加显示文本 |
其余渲染器:
- HyperlinkRenderer:
url与url_name两个VegaExpr,单元格渲染为可点击链接(需按住Ctrl/Cmd点击,避免误触选择行为),演示见examples/HyperlinkRenderer.ipynb。 - HtmlRenderer:单元格内渲染 HTML 片段,常用属性与 TextRenderer 一致,演示见
examples/HtmlRenderer.ipynb。 - ImageRenderer:
placeholder(加载占位)、width/height(默认""/100%)、text_color、background_color。
按列装配渲染器:
from ipydatagrid import DataGrid, BarRenderer, TextRenderer from bqplot import ColorScale renderers = { "Horsepower": BarRenderer(bar_color=ColorScale(min=0, max=200, scheme="viridis")), "Name": TextRenderer(text_color="navy"), } grid = DataGrid(df, renderers=renderers)🌈 Vega 表达式与条件格式化
VegaExpr/Expr是渲染器属性的"瑞士军刀":传入一个 JS 风格表达式(或 Python 函数),即可让颜色、字体等随cell.value、cell.row、cell.metadata动态变化,实现跨列条件格式化(完整示例见examples/ConditionalFormatting.ipynb)。
from ipydatagrid import VegaExpr, TextRenderer renderer = TextRenderer( background_color=VegaExpr("cell.value < 100 ? 'red' : 'green'") ) grid = DataGrid(df, default_renderer=renderer)grid_style可用的样式键(优先级高于默认渲染器、低于列渲染器):background_color、row_background_color、column_background_color、grid_line_color、header_background_color、selection_fill_color、selection_border_color、cursor_fill_color、scroll_shadow等,配色示例见examples/Themes.ipynb。
⚡ StreamingDataGrid:大数据懒加载
数据量大时用 ipydatagrid/datagrid.py 中的StreamingDataGrid子类:前端只按需向后端拉取视口内的数据,内存占用更低、首屏更快(演示见examples/Streaming.ipynb)。
| 属性 / 方法 | 说明 |
|---|---|
debounce_delay | 视口请求防抖时间(默认 160ms) |
tick() | 通知底层 DataFrame 已变更并刷新(不可在循环中调用) |
from ipydatagrid import StreamingDataGrid sgrid = StreamingDataGrid(df, debounce_delay=50) df.update(new_columns) # 数据变更 sgrid.tick() # 触发前端刷新⚠️ 注意:StreamingDataGrid 依赖活动内核,导出为静态 HTML 后不可用。
📁 核心文件路径一览
| 文件 | 内容 |
|---|---|
ipydatagrid/datagrid.py | DataGrid、StreamingDataGrid、SelectionHelper实现 |
ipydatagrid/cellrenderer.py | TextRenderer、BarRenderer、HtmlRenderer、HyperlinkRenderer、ImageRenderer、VegaExpr、Expr |
ipydatagrid/__init__.py | 对外导出的全部类 |
js/core/transformStateManager.ts | 前端排序/筛选/选区状态管理 |
examples/*.ipynb | 全部功能的官方演示 Notebook |
以上属性清单覆盖了 ipydatagrid 日常开发中的全部高频 API。建议配合examples/目录下的 Notebook 逐个上手:从Selections.ipynb掌握选区,再到ConditionalFormatting.ipynb玩转 Vega 表达式,即可快速构建出专业级的 Jupyter 数据网格。
【免费下载链接】ipydatagridFast Datagrid widget for the Jupyter Notebook and JupyterLab项目地址: https://gitcode.com/gh_mirrors/ip/ipydatagrid
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
