当前位置: 首页 > news >正文

NiceGUI `ui.table` 基础

NiceGUI ui.table 基础

ui.table 是 NiceGUI 提供的一个组件,用于在页面上展示数据表格


基本概念

官方简介

A table based on Quasar’s QTable component.

参数参考
rows:list of row objects; 行对象列表
columns:list of column objects (defaults to the columns of the first row);列对象列表(默认为第一行的列)
column_defaults:optional default column properties; 可选的默认列属性
row_key:name of the column containing unique data identifying the row (default: “id”); 包含标识行的唯一数据的列的名称(默认值:“id”)
title:title of the table; 表格标题
selection:selection type (“single” or “multiple”; default: None); 选择类型(“单”或“多”;默认值:无)
pagination:a dictionary correlating to a pagination object or number of rows per page (None hides the pagination, 0 means “infinite”; default: None).; 与分页对象或每页行数相关的字典(None隐藏分页,0表示“无限”;默认值:None)
on_select:callback which is invoked when the selection changes; 当选择更改时调用的回调
on_pagination_change:callback which is invoked when the pagination changes; 当分页更改时调用的回调

If selection is ‘single’ or ‘multiple’, then a selected property is accessible containing the selected rows.

如果 selection 为 ‘single’ 或 ‘multiple’,则可访问包含所选行的所选属性。

简介

  • columns:定义表格的列,包括列标题、数据字段映射、对齐方式等。
  • rows:定义表格的数据,每行是一个字典,键需要与 columns 中的 field 值对应。

columnsrows 的关系

  • columnsfield 指定了表格从 rows 中取值的键。
  • 如果 columns 中的 field 未定义或与 rows 数据不匹配,该列的数据会显示为空白。

columns 字段说明

必须定义的字段

  1. name

    • 唯一标识列的名称,表格内部使用。
    • 必须是字符串类型。
  2. label

    • 表头中显示的列标题。
    • 如果未定义,表头中该列将显示为空白。
  3. field

    • 指定从 rows 的哪个键中取值,绑定列与行数据。
    • 如果未定义,表格无法显示该列对应的数据。

可选字段

  1. align

    • 控制列内容的对齐方式。
    • 可选值:'left', 'center', 'right'
    • 默认值:'left'
  2. sortable

    • 是否允许对该列进行排序。
    • 类型:布尔值,默认值为 False
  3. width

    • 设置列宽,可以是像素值(如 '100px')或百分比(如 '20%')。
  4. classes

    • 自定义 CSS 类,用于控制列样式。

示例代码

以下代码展示了一个完整的表格定义,包括两列:conditionval

from nicegui import ui# 定义表格的列
columns = [{'name': 'condition',     # 必须:唯一标识列'label': 'Condition',    # 必须:表头名称'field': 'condition',    # 必须:对应行数据的键'align': 'left',         # 可选:对齐方式'sortable': True,        # 可选:启用排序'width': '50%',          # 可选:列宽},{'name': 'val','label': 'Value','field': 'val','align': 'center','sortable': False,       # 可选:禁用排序},
]# 定义表格的数据行
rows = [{'condition': 'a > 10', 'val': True},{'condition': 'b > 20', 'val': True},{'condition': 'c > 30', 'val': False},
]# 创建 UI 表格ui.table(columns=columns,rows=rows
)ui.run()

运行效果

ConditionValue
a > 10True
b > 20True
c > 30False

常见问题

示例:未定义 field

field 是表格列与行数据绑定的关键字段。表格通过 fieldrows 中取值,如果未定义 field,表格无法知道该列需要显示哪些数据。

columns = [{'name': 'condition', 'label': 'Condition', 'align': 'left'},  # 缺少 field{'name': 'val', 'label': 'Value', 'align': 'center'},         # 缺少 field
]

结果:表头显示 ConditionValue,但行数据为空白。

正确方式

columns = [{'name': 'condition', 'label': 'Condition', 'field': 'condition', 'align': 'left'},{'name': 'val', 'label': 'Value', 'field': 'val', 'align': 'center'},
]

NiceGUI 官方文档:https://nicegui.io

相关文章:

NiceGUI `ui.table` 基础

NiceGUI ui.table 基础 ui.table 是 NiceGUI 提供的一个组件,用于在页面上展示数据表格 基本概念 官方简介 A table based on Quasar’s QTable component. 参数参考rows:list of row objects; 行对象列表columns:list of column objects (defaults to the colu…...

分布式 Raft算法 总结

前言 相关系列 《分布式 & 目录》《分布式 & Raft算法 & 总结》《分布式 & Raft算法 & 问题》 参考文献 《Raft一致性算法论文译文》《深入剖析共识性算法 Raft》 简介 Raft 木筏是一种基于日志复制实现的分布式容错&一致性算法。在Raft算法…...

C++ 中面向对象编程如何实现动态绑定?

在 C 中,动态绑定(Dynamic Binding)是通过 虚函数(virtual function) 和 多态性(polymorphism) 来实现的。这是面向对象编程的重要特性之一,它允许程序在运行时根据对象的实际类型调…...

微服务-01

1.认识微服务 1.1 单体架构 单体架构(monolithic structure):顾名思义,整个项目中所有功能模块都在一个工程中开发;项目部署时需要对所有模块一起编译、打包;项目的架构设计、开发模式都非常简单。 当项目…...

这是一个vue3 + scss的数字滚动效果

介绍: 当数字变化时&#xff0c;只改变变化的数字位&#xff0c;其余的不变&#xff0c;可以递增、递减、骤变、负数也可以&#xff0c;但是样式要根据具体的项目需求去改&#xff1b; 效果1、增加数字&#xff1a; 效果2、减少数字&#xff1a; 使用方法&#xff1a; <te…...

数字证书管理工具 openssl keytool

OPENSSL 命令 openssl command [ command_opts ] [ command_args ] 常用command: version 用于查看版本信息 enc 用于加解密 ciphers 列出加密套件 genrsa 用于生成私钥 -des|-des3|-idea&#xff1a;用来加密私钥文件的三种对称加密算法。 rsa …...

Polars数据聚合与旋转实战教程

在这篇博文中&#xff0c;我们的目标是解决数据爱好者提出的一个常见问题&#xff1a;如何有效地从Polars DataFrame中创建汇总视图&#xff0c;以便在不同时间段或类别之间轻松进行比较。我们将使用一个实际的数据集示例来探索实现这一目标的各种方法。 Polars简介 Polars 是…...

引用类型集合的深拷贝,无需手动写循环:Apache Commons Lang (SerializationUtils)

在java中&#xff0c;我们如果想要对引用类型的集合进行深拷贝。有一种方式&#xff0c;就是调用SerializationUtils Apache Commons Lang (SerializationUtils) Apache Commons Lang 提供了 SerializationUtils 类&#xff0c;可以利用 Java 的序列化机制来进行集合及其元素…...

HTML、CSS表格的斜表头样式设置title 画对角线

我里面有用到layui框架的影响&#xff0c;实际根据你自己的框架来小调下就可以 效果如下 上代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…...

docker 安装mysql 5.7 详细保姆级教程

1. 安装mysql(5.7) docker pull mysql:5.7 若是拉取不了&#xff0c;可以配置下 docker 源 2. 查看是否安装成功 docker images 下图就是成功了 3.创建mysql专用目录、数据挂载目录、配置文件目录 &#xff0c;演示目录在于/home/下 //命令逐条执行cd /home/ mkdir mysql …...

Kioptrix level3

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…...

UE5 Lyra项目源码分析-关卡配置加载

最近刚学完一套教程&#xff0c;准备研究研究官方的源码&#xff0c;看看自己能不能看懂。 当前分析只在本人能力之下能够分析的内容&#xff0c;如果有一些问题&#xff0c;还请大家指出。 开始 如果你打开一个别人的项目&#xff0c;你会从哪里看起&#xff0c;如果是我&am…...

Cursor重置机器码-解决Too many free trials.

参考文章&#xff1a;如何绕过Cursor的机器绑定限制 前言 在前面这篇文章无限使用Cursor指南中&#xff0c;我提到使用 无限邮箱 或者 删除账号并重新注册 的方法&#xff0c;来无限使用Cursor免费版。但是当在本机登录过3个账号后&#xff0c;就会报这个“Too many free tria…...

transformer学习笔记-自注意力机制(2)

经过上一篇transformer学习笔记-自注意力机制&#xff08;1&#xff09;原理学习&#xff0c;这一篇对其中的几个关键知识点代码演示&#xff1a; 1、整体qkv注意力计算 先来个最简单未经变换的QKV处理&#xff1a; import torch Q torch.tensor([[3.0, 3.0,0.0],[0.5, 4…...

呼叫中心呼入大模型如何对接传统呼叫中心系统?

呼叫中心呼入大模型如何对接传统呼叫中心系统&#xff1f; 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 呼叫中心呼入大模型与传统呼叫中心系统的对接是一个复杂而细致的过程&#xff0c;涉及技术实现、流程…...

[Unity] Text文本首行缩进两个字符

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 比如&#xff1a; 效果&#xff1a; 代码&#xff1a; TMPtext1.text "\u3000\u3000" "选择动作类型&#xff1a;";...

最新版Chrome浏览器加载ActiveX控件之Adobe PDF阅读器控件

背景 Adobe PDF阅读器控件是一个ActiveX控件&#xff0c;用于在Windows平台上显示和操作PDF文件。它提供了一系列方法和属性&#xff0c;可以实现对PDF文件的加载、显示、搜索、打印、保存等操作。 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件…...

springboot 对接 ollama

spring ai 对接 ollama 引入依赖 <dependency><groupId>io.springboot.ai</groupId><artifactId>spring-ai-ollama-spring-boot-starter</artifactId><version>1.0.0</version> </dependency>这里因为使用的是快照版本所以需…...

【数据库】选择题+填空+简答

1.关于冗余数据的叙述中&#xff0c;不正确的是&#xff08;&#xff09; A.冗余的存在容易破坏数据库的完整新 B.冗余的存在给数据库的维护增加困难 C.不应该在数据库中存储任何冗余数据 D.冗余数据是指由基本数据导出的数据 C 2.最终用户使用的数据视图称为&#xff08;&…...

从0开始写android 之xwindow

模拟实现android的窗口系统本质上还是在ubuntu 上实现自己的窗口系统&#xff0c; xwindow是一套成熟的解决方案。在ubuntu上使用xwindow的好处之一 是ubuntu自带xwindow的库&#xff0c; 直接引用头文件和库文件。下面来了解下 xwindow的基本函数接口。 参考 https://tronche…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...