数据表格
数据表格是重要的数据可视化组件,它不仅能展示数据,还自带行复制、单元格内联编辑、树形数据展平、列拖拽、Excel 导出等复杂交互功能。
数据表格示例
Section titled “数据表格示例”工具栏位于表格的顶部,一些简单的表格可能没有此栏。
- :搜索输入框,也叫过滤输入框,用于按条件筛选数据,查看过滤语法
- :列管理工具,用于显示或隐藏列
- :重新获取数据
- :设置表格样式、重置
数据行是表格的重要信息载体,用于展示表格数据。选中后一列数据后,可以复制数据,部分表格允许复制整行数据。
状态栏用于显示当前表格的一些状态,例如选中的行数、分页信息、分页操作。
为了让系统按指定的过滤条件筛选数据,可以使用数据过滤来完成这项任务,这是一种强大的功能,可以帮助快速锁定目标数据。TooMaker 使用领域特定查询语言(Domain-Specific Query Language,简称 Query DSL),相比一些使用操作面板式(利用 UI 构建的,由下拉框+预设过滤组成的面板)的过滤器,我们更偏向于结构化语义过滤,键盘输入的效率原高于鼠标点击。当一个表格的列超过5个以后,您很难在下拉框中一眼锁定需要的过滤的列。
<field>:[operator]<value> [logical]类型:列字段
必填
需要进行过滤的字段,这部分字段来自数据表格中的列标题,输入框会辅助提示相应的字段。对于跨模型的字段,需要使用 . 做分隔符,例如:model.field。
operator
Section titled “operator”类型:= | ! | > | >= | < | <= | ~ | ^ | $ | * | [
默认值:=
比较或匹配方式,操作符含义:
=:等于,区分大小写。>:大于。>=:大于等于。<:小于。<=:小于等于。~:包含/模糊匹配,忽略大小写。^:以…开头,忽略大小写。$:以…结尾,忽略大小写。*:正则匹配,由正则语法决定是否区分大小写。[:在数据组内,必须使用]结尾。!:否定,与其他操作符组合使用,组合方式有:!=:不等于,区分大小写。!~:不包含,忽略大小写。!^:不以…开头,忽略大小写。!$:不以…结尾,忽略大小写。![:不在数据组中,必须使用]结尾
类型:任意,字符串、数值、布尔值、日期、日期+时间
必填
匹配值,也称之为目标值。数据列中使用到的数据都可以作为匹配值使用,其中日期、时间需要使用 ISO 8601 格式,例如:2025-09-01,2025-09-01T00:00:00,2025-09-01T08:00:00+08:00。
一些固定目标值:
null:表示本应有数据但未被定义,表现为缺少状态,例如一个布尔值类型的数据列,通常应该只有true | false,如果数据未定义,则表现为null。只能与= | !=操作符使用。empty:表示数据为空,字符类数据可以使用。只能与= | !=操作符使用。
logical
Section titled “logical”类型:' ' | AND | OR | XOR
默认值:' '(空格)
多条件组合逻辑,空格等同于 AND。可以使用 () 构建嵌套式条件组合,例如:
nickname:~Jake (age:>20 OR age:<50):昵称包含 Jake 且年龄在 (20,50) 之间的用户。
我们定义了一些语法糖用于简化表达,这些语法糖通常包含了 operator 和 value 两部分,使用时不能重复指定操作符。
@today
Section titled “@today”用于筛选时间大于等于今天零点的数据,常见于筛选今天创建的数据,用例:
createdAt:@today:等效于createdAt:>=2025-09-10T00:00:00+08:00
@today-<数字><单位>
Section titled “@today-<数字><单位>”单位:d | m | y(天、月、年)
用于快速计算早于今天的日期,常见于筛选距离今天某一段时间内的数据,用例:
createdAt:@today-1d:昨天,等效于createdAt:>=2025-09-09T00:00:00+08:00createdAt:@today-2m:2个月以前,等效于createdAt:>=2025-07-10T00:00:00+08:00createdAt:@today-3y:3年以前,等效于createdAt:>=2022-09-10T00:00:00+08:00
用于快速设定在 x 到 y 之间的闭合范围,不支持半开半闭的范围,可以和 @today 语法一起使用,用例:
age:20..50:age:>=20 AND age:<=50age:..50:age:<=50createdAt:@today-1m..@today:createdAt:>=2025-08-10T00:00:00+08:00 AND createdAt:<=2025-09-10T00:00:00+08:00
可选值:deleted | all
用于筛选数据模型是否被归档,默认情况隐藏已归档数据。用例:
is:deleted:显示已归档数据。is:all:显示所有数据,含已归档。contact.is:deleted:显示已归档的联系人。