上期和大家分享了我们精心打磨的协同AI文档 JitWord：

最近一直在迭代 JitWord 协同文档和 Pxcharts 智能表格，收到了很多粉丝的反馈。为了让更多用户和开发者能了解多维表格的技术实现以及核心的一些技术架构难点，我花了两周时间，做了一款开源版的多维表格：

Pxcharts 开源版支持各种复杂表格的功能，比如列拖拽排序，拖拽调整宽度，字段管理，行排序，各种复杂筛选，多视图管理等，还能轻松集成AI功能，实现AI多维表格。

话不多说，先上开源地址：

https://github.com/MrXujiang/pxcharts

接下来就和大家详细介绍一下这款开源多维表格。

为什么要做pxcharts多维表，还开源了？

多维表格不是传统电子表格的 “升级版”，而是融合了表格的灵活、数据库的结构化、看板的可视化、表单的采集能力的一站式协作工具。它的核心价值在于打破 “数据孤岛”，让非技术人员也能快速搭建个性化业务系统，适配从个人管理到团队协作的全场景需求。

其实我在3年前就开始研究多维表格的应用场景和技术实现了，之所以要做，是因为目前市面上没有比较好的开源方案，更多的只是对基础表格的封装，并不能达到复杂的业务管理和多视图管理的能力。

所以分析了大量应用场景和目前的开源方案之后，我觉得有必要做一款拿得出手的多维表格解决方案。

pxcharts多维表格开源版的功能亮点

接下来和大家分享一下pxcharts多维表格开源版的功能亮点，让大家更好的感受它的价值。

1. 多视图支持 - 表格视图、看板视图、人员分配视图，满足不同场景需求

2.  精美UI设计 - 基于 shadcn/ui + Tailwind CSS，简洁现代的界面风格

3. 拖拽排序 - 支持任务拖拽排序、列拖拽排序，灵活自定义

4. 数据统计 - 内置任务统计看板，数据可视化展示

5. 高级筛选 - 支持条件筛选、排序、分组，快速定位目标数据

6. 数据导入导出 - 支持 JSON 格式的数据导入导出

7. 自定义字段 - 支持添加自定义字段，灵活扩展数据结构

8. 性能优化 - 基于pxcharts独有的渲染引擎，支持高性能渲染(Ultra版)

当然还有很多功能，大家可以本地体验。

技术实现

多维表格我采用了分层设计架构，分为如下几个模块：

1. 应用层

   App Router，处理路由和页面级配置

2. 视图层

   独立的视图组件，负责不同功能模块的展示

3. 业务组件层

   可复用的业务组件，封装特定业务逻辑

4. UI组件层

   通用UI组件，无业务逻辑

5. 数据层

   统一的状态管理和数据操作

6. 工具层

   公共工具函数和自定义Hooks

 所有的分层模块我都采用了企业级组件架构，下面简单给大家介绍一下：

1. 视图层

2. 业务层

3. UI层

4. 数据层

5. 工具层

这种架构设计可以适配各种企业级复杂系统，如果大家在做架构相关的功能，也可以参考一下。

接下来给大家分享一下 pxcharts 开源版的代码组织规范：

components/├── ui/              # 通用 UI 组件（无业务逻辑）├── views/           # 视图组件（页面级）├── charts/          # 图表组件├── documentation/   # 文档组件└── *.tsx           # 业务组件lib/├── types.ts        # 类型定义├── task-store.ts   # 状态管理├── data.ts         # 数据定义├── mock.ts         # Mock 数据└── utils.ts        # 工具函数hooks/├── use-*.ts        # 自定义 Hooksapp/├── layout.tsx      # 根布局├── page.tsx        # 首页└── globals.css     # 全局样式

之所以要分享这个模块，是因为我的架构专栏中很多粉丝想学习架构设计和代码规范，这里就和大家分享一下我常用工程组织规则。

快速开始（本地启动开发指南）

首先我们先在电脑里准备一下环境，环境推荐：

• Node.js 18.17 或更高版本

• pnpm 8.0 或更高版本（推荐）

然后就可以轻松安装启动啦：

# 克隆项目

git clone https://github.com/MrXujiang/pxcharts.git# 进入项目目录cd pxcharts# 安装依赖pnpm install# 启动开发服务器pnpm dev

访问 http://localhost:3000 就可以查看应用。

如果大家想部署到自己的服务器，可以参考下面的方案：

# 构建pnpm build# 启动生产服务器pnpm start

如果大家想服务器运行更稳定，可以参考我架构专栏的服务器部署相关的教程。

最后，再发一下开源地址：

https://github.com/MrXujiang/pxcharts

如果项目对大家有帮助，不妨点个 star 支持一下哦～

如果大家对多维表格，有好的建议，也欢迎留言交流～