WHAT - Table 表格组件系列（一）

前言

Table 可以说是很多业务系统最重要的一个开发场景。在很多组件库，对于 Table 组件的封装高度完善。

今天我们将开始通过 antd 的 Table 组件和 antd ProComponents 的 ProTable 组件来进行学习。

antd vs antd ProComponents

体验

1. antd：https://ant-design.antgroup.com/index-cn
2. @ant-design/pro-components：https://procomponents.ant.design/

在 ProComponents 简介 中我们可以认识到

1. ProComponents 理念
2. ProComponents 设计思路
   • 一个状态+一系列行为
   • 一个组件≈一个页面
   • 设计与样式

具体来说，ProComponents 高度封装了如下场景的实现：

• ProLayout + ProTable：列表页
• ProLayout + ProForm：编辑页
• ProLayout + ProDescriptions：详情页

可以看到 ProTable 赫然在列。

区别

@ant-design/pro-components 和 antd 之间的差异主要体现在它们的设计和用途上：

1. 设计定位：

• antd（Ant Design）：antd 是 Ant Design 团队提供的一个基于 React 的 UI 组件库，旨在提供一套美观、易用且功能丰富的 UI 组件，适用于各种 Web 应用开发场景。
• @ant-design/pro-components：@ant-design/pro-components 则是 Ant Design 团队推出的专门为企业级应用场景设计的高级组件库。它提供了一些功能更为复杂、面向管理后台和业务应用的组件，帮助开发者快速搭建和开发复杂的管理系统。

2. 组件范围：

• antd：antd 包含了丰富的通用 UI 组件，例如按钮、表单、表格、对话框、菜单等，覆盖了大多数常见的前端开发需求。
• @ant-design/pro-components：@ant-design/pro-components 主要集中在构建管理型后台应用时常用的高级组件，例如高级表格（ProTable）、高级表单（ProForm）、页面容器（PageContainer）、描述列表（Descriptions）、统计卡片（StatisticCard）等，这些组件通常具有更复杂的功能和更强的定制能力，适合于需要处理大量数据和复杂业务逻辑的场景。

3. 定制和扩展性：

• antd：antd 提供了丰富的定制能力，开发者可以根据需求对组件进行样式和行为上的调整。
• @ant-design/pro-components：@ant-design/pro-components 更注重在设计上满足企业级应用的需求，因此其组件往往具有更多的配置选项和扩展点，以支持更灵活和复杂的业务场景。

4. 侧重点：

• antd：侧重于通用的 UI 组件，适用于各种类型的 Web 应用开发。
• @ant-design/pro-components：侧重于企业级管理系统的需求，提供了更多针对性的高级组件和解决方案，帮助开发者提升开发效率和用户体验。

综上所述，@ant-design/pro-components 相对于 antd 更专注于复杂的企业级管理系统的需求，提供了更多高级和定制化的组件，而 antd 则更广泛地服务于通用的前端开发场景。选择使用哪个取决于你的项目需求和开发的具体场景。

antd Table

https://ant.design/components/table-cn#table

antd ProTable

https://procomponents.ant.design/components/table