公共表格组件

公共表格组件

表格原型图

设计目标：

1. 筛选区、搜索区（可选）
2. 列设置区（可选）
3. 表格区
4. 筛选区（已有组件，可直接使用）
5. 表格区支持表头筛选（支持传入筛选项）
6. 表格区API参考ant-design Table组件（可简化，但需实现核心功能） ant.design/components/…

3. 筛选条件设置组件

设计目标：

1. 支持用户添加筛选条件
2. 筛选条件根据字段类型进行不同交互的渲染
3. 支持用户保存筛选条件（保存时，使用localStorage前端本地缓存，不用区分用户，根据筛选条件组件id直接做覆盖即可）
4. 保存之后在添加条件下拉框中点击后进行回显
5. 支持 onChange 方法，当条件完成变更时才触发

公共表格组件、

技术栈：react19、 ts、tailwindcss、tailwindcss-animate、tw-animate-css

核心功能需求

1. 基础表格渲染

   • 支持动态列配置
   • 行数据展示
   • 自定义单元格渲染

2. 分页功能

   • 客户端分页
   • 服务器端分页
   • 自定义分页器

3. 排序功能

   • 单列排序
   • 多列排序
   • 自定义排序逻辑

4. 筛选功能

   • 列筛选
   • 全局搜索
   • 自定义筛选器
   • 组合筛选

5. 选择功能

   • 单选/多选
   • 跨页选择
   • 行选择状态管理

6. 可扩展性

   • 自定义操作列
   • 行展开/详情
   • 虚拟滚动（大数据量）

   ....