表设计用于呈现大量数据Angular

Question

我是角色的新手，期待创建一个能够渲染大量数据的表格。以下是我正在努力实现的表格中的功能。有人可以指导如何处理这个问题吗？有没有实现它的开源项目？或者是好的资源

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

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

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

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

5. 分页以及在一页中选择结果数量的选项

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

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

谢谢！

Answer 1

如果您正在寻找能够完成大部分（如果不是全部）事情的组件，那么它绝对值得检查ag-grid - 尽管有些功能，例如： master / detail，仅限企业许可证：

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

Answer 2

如果您可以给this一点时间，您几乎可以满足所有要求。该组件可高度自定义。功能包括

  

  
• 处理大型数据集（Virtual DOM）
  
• 富有表现力的标题和单元格模板
  
• 横向＆amp;垂直滚动
  
• 列重新排序＆amp;调整大小
  
• 客户端/服务器端分页＆amp;排序
  
• 智能列宽算法（强制填充和弹性增长）
  
• 综合寻呼机
  
• Cell＆amp;行选择（单，多，键盘，复选框）
  
• 固定和流体高度
  
• 左右列固定
  
• 行明细视图
  
• 将主题与已包含的Google素材主题分开
  
• 轻型代码库/无外部依赖
  
• AoT编译支持
  
• 通用支持
  

This也类似于您的要求，如果您没有时间自定义，可以直接使用。

Answer 3

由于我发现了ng2-admin（http://akveo.com/ng2-admin/#/pages/dashboard）的Angular2模板，我一直在使用他们的表来自另一个名为ng2-smart-table的仓库（{{3 }}）。

我觉得这很有效率，即使它需要一些工作才能真正实用。

我一直把这个表放在一个半大数据环境中，我只用了一些问题就达到了很好的响应时间，所以如果你正确地做事，很多数据都没有问题

1. 过滤和常规搜索：演示中已有一个有效的示例：https://github.com/akveo/ng2-smart-table。
2. 用户隐藏/显示列：它需要一些编码，但很容易实现。
3. 下拉过滤器和选项：在同一链接上提供示例https://akveo.github.io/ng2-smart-table/#/examples/using-filters，在底部关于＆＃34; Checkbox，Select和Completer过滤器类型＆＃34;）
4. 排序：可用且可自定义。 （https://akveo.github.io/ng2-smart-table/#/examples/using-filters）
5. 分页：可用且可自定义。 （https://akveo.github.io/ng2-smart-table/#/documentation）
6. 对行的操作：可用且可使用角度组件轻松自定义（https://akveo.github.io/ng2-smart-table/#/documentation）。
7. 可展开的行：我还没有这样做，但我知道它可行，因为我看到其他人用这张表做了。根据我的记忆，它为每个细节行使用另一个智能表完成，但这只是假设。

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

NB ：如果你真的是Angular的新手，请注意正确理解概念和如何做事，因为管理表是你可以做的最难的工作之一＆＃ 39;很容易创建一些不是真正有效的东西，特别是如果你处理大量的数据。