表格设计以呈现大量数据 Angular

Question

我是 Angular 的新手，期待创建一个可以呈现大量数据的表格。以下是我要实现的表中的功能。有人可以指导如何解决这个问题吗？有没有实现它的开源项目？还是不错的资源

1. 通用搜索按钮可在所有列中搜索并在表格中显示结果

2. 用户可以显示和隐藏某些列

3. 选择性列上的预填充过滤下拉列表。可以在一列中选择多个选项（如在谷歌电子表格中）

4. 对选择性/所有列进行排序（一次按单个字段排序）

5. 分页，可选择一页中的结果数

6. 对每一行的编辑和删除操作

7. 可展开行以显示更多元数据

谢谢！

Answer 1

如果您能给this一点时间，您几乎可以满足您的所有要求。这个组件是高度可定制的。功能包括

• 处理大型数据集（虚拟 DOM）
• 富有表现力的标题和单元格模板
• 水平和垂直滚动
• 列重新排序和调整大小
• 客户端/服务器端分页和排序
• 智能列宽算法（强制填充和弹性增长）
• 集成寻呼机
• 单元格和行选择（单、多、键盘、复选框）
• 固定和流体高度
• 左右列固定
• 行详细视图
• 将主题与包含的 Google Material 主题分离
• 轻量级代码库/无外部依赖项
• AoT 编译支持
• 普遍支持

This也和你的需求差不多，没时间定制可以直接开始使用。

Answer 2

自从我发现 ng2-admin (http://akveo.com/ng2-admin/#/pages/dashboard) 的 Angular2 模板后，我一直在使用他们的表，该表来自另一个名为 ng2-smart-table (https://github.com/akveo/ng2-smart-table) 的存储库。

我发现这非常有效，尽管它需要一些工作才能真正实用。

我一直将这张表放在半大数据环境中，总体上我已经实现了良好的响应时间，只有几个问题，所以如果你做的正确的话，大量数据真的没有问题。

1. 过滤器和一般搜索：演示中已经有一个工作示例：https://akveo.github.io/ng2-smart-table/#/examples/using-filters。
2. 用户隐藏/显示列：它需要一些编码，但很容易实现。
3. 下拉过滤器和选项： 可作为同一链接上的示例（https://akveo.github.io/ng2-smart-table/#/examples/using-filters，在底部关于“复选框、选择和完成器过滤器类型”）。
4. 排序：可用且可定制。 (https://akveo.github.io/ng2-smart-table/#/documentation)
5. 分页：可用且可自定义。 (https://akveo.github.io/ng2-smart-table/#/documentation)
6. 对行的操作： 可用且可通过角度组件轻松自定义 (https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers)。
7. 可扩展行：我没有亲自做过，但我知道这是可行的，因为我看到其他人用这张桌子做了。据我回忆，它是为每个详细信息行使用另一个智能表完成的，但这只是假设。

我推荐这个，因为它非常原始（并且文档并不完美），这意味着可以轻松定制以满足您的需求。我已经使用这个库将近一年了，我有几种通用的智能表组件，它们非常易于设置和使用。

---

注意：如果您真的是 Angular 新手，请注意真正理解正确的概念以及如何做事，因为管理表是您可以做的最困难的工作之一，因为它非常很容易创建一些既不实用也不高效的东西，尤其是在处理大量数据时。

Answer 3

如果您正在寻找能够完成您提到的大部分（如果不是全部）事情的组件，那么绝对值得一试 ag-grid - 尽管有一些功能，例如主/详细信息，仅限企业许可证：

https://www.ag-grid.com/example.php