VisActor / VisActor/VTable

[Feature] 能否为表格添加一个表头筛选功能(类似于Excel)

Open
#4,384 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feature
Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

What problem does this feature solve?

目前,无法直接在当前表格界面进行快速的数据筛选。必须:

将数据导出到 Excel 中进行筛选,然后再重新导入或查看结果,这导致了工作流程的中断和效率的低下。

此功能旨在解决数据交互性不足的核心问题。它将允许用户:

即时过滤:无需编程或外部工具,直接在 UI 上点击表头即可过滤出所需的数据子集。

快速分析:迅速聚焦于符合特定条件的数据行,进行趋势观察或问题排查。

提升用户体验:提供一种现代化数据表格应用所期望的、符合直觉的交互方式,显著降低用户的学习和使用成本。

用例、背景和理由
用例背景:
假设用户正在使用 VTable 查看一个大型销售数据报表,包含“销售员”、“地区”、“产品类别”、“销售额”等列。

典型用例:

查看特定地区的数据:市场经理只想看“华东”地区的销售情况。他应该能点击“地区”列的表头,从下拉列表中勾选“华东”,然后表格立即只显示该地区的记录。

按数值范围筛选:财务人员想找出“销售额”超过 10,000 元的订单。他应该能点击“销售额”列的表头,选择一个“大于”的条件并输入 10000 来快速筛选。

多条件组合:销售总监想查看“销售员”是“张三”或“李四”的,且“产品类别”是“电子产品”的所有订单。他应该能在两个列上分别设置筛选条件,并看到叠加后的效果。

理由:
这种交互是数据分析和业务报表领域的标准预期。缺少此功能会使 VTable 在与其他表格工具(如 Excel、Airtable、现代 BI 工具)竞争时处于劣势。实现该功能将极大增强 VTable 的实用性和吸引力。

What does the proposed API look like?

实现思路:

UI 渲染:在启用了 filter.enable: true 的表头单元格右侧渲染一个筛选图标(通常是漏斗形)。

交互:用户点击图标时,弹出下拉菜单。菜单内容根据 filter.type 变化:

list:显示唯一值列表和复选框。

number:显示数字运算符(如 >, <, =)和输入框。

text:显示文本运算符(如 包含, 开头是)和输入框。

date:显示日期选择器。

数据处理:用户确认筛选条件后,VTable 内部根据条件对数据源进行过滤,并重新渲染表格。

状态同步:更新 TableInstance 内部的筛选状态并触发 filterChange 事件。

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing how VTable renders table header cells and how the TableInstance manages its data source and state. Review the proposed filter.enable and filter.type options, including list, number, text, and date behavior, plus the filterChange event. Done means header filtering supports the described conditions, combines filters across columns, updates displayed rows, and keeps filter state synchronized.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.