Vaadin 网格与 Table
Vaadin Grid vs Table
Grid and Table components in Vaadin7 有什么区别？
我应该使用哪个，什么时候使用？
Grid 是一个新的更强大的组件，它应该是 Table 的继承者（参见 The Table is dead, long live the Grid）。因此，没有必要偏爱 Table 而不是 Grid。
这是 Vaadin 关于从 Table 迁移到网格的系列文章中的第一篇：
https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic
实际上，你可以用它们来实现你想要的一切。但我的经验是，网格用起来更舒服。
Table对于简单的表格来说易于理解和使用（正如您可能猜到的那样）。所以 如果你只是想很好地显示几行可视化数据 - 使用 Table。 它很稳定并且可以很好地工作。
Grid 看起来像 Table，但它有一些朝向 Table 的特征。如果您有大量数据需要渲染，网格可能会处理得更好。 "inline editing" 您的数据也有一个很好的做法。有一种方法可以广泛地自定义网格的 headers。 如果您想在 table-like 组件内进行大量自定义和交互 - 使用网格。
在此处查看功能：
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid
在这两个组件中 select rows/cells 的方式有所不同。
例如，selection 的 EventListener 在使用 return 时略有不同。
此外，向它们添加列和行的方式也有所不同，但这只是一个实现问题，所以应该无关紧要。
总结
Grid → New & Amazing
Table → Venerable & Reliable
Table 是一个非常好的 data-grid 内置于最早版本的 Vaadin 中的显示小部件。
Grid is grand rewrite from scratch, designed to supplant Table. The Vaadin team is leveraging their wisdom gained from experience, “if we knew then what we know now”, to make the very best data-grid possible given today’s Web technology. Grid is such a big deal that it gets its own vanity page. See this company blog post 快速概览。
所以，一般来说，我建议你关注网格。尝试一下，先学习一下，看看它是否满足您的需求。如果您 运行 遇到错误或问题，或者您需要 Grid 中缺少的功能，那么 回退到 Table。您可以在一个项目中 mix-and-match 这两种方式，但不同的外观和行为可能会使您的用户感到困惑。
将 Grid 视为充满希望并渴望跃入成年的早熟青少年，并且 Table作为一个成熟的成年人，在 middle-age 的黄金岁月里努力工作，同时梦想 well-earned 未来的退休航行到日落。
详情
如果在继续项目中使用 Vaadin 6，或者您需要支持非常旧的浏览器，那么 Table 是您唯一的选择。 Grid 需要 Vaadin 7 或更高版本。
以下是 Grid 当前缺少的一些主要 Table 功能。
- Drag-and-drop 特征（稍后添加）。
- 通过用户拖动列的边缘调整列大小 header。
两者有许多共同点。他们向浏览器练习 lazy-loading，仅在需要时从 server-side 自动加载数据，以免网络浏览器过载。两者都允许用户将列拖动到 re-order。两者都让用户 show/hide 列。
行选择
两者都允许 selecting 单行或多行。
网格还有一个自动功能，它添加了一列复选框。用户可以通过单击这些复选框而不是使用鼠标或鼠标+键盘来 select 多行。许多（如果不是大多数的话）用户对 mouse-driven 多行 selection 很笨拙。请参阅 this screenshot，并注意第一列。
selection 的编程支持不同。网格不扩展 AbstractSelect, instead defines its own selection API. Call addSelectionListener() and define a SelectionListener. See The Book Of Vaadin.
Headers & 页脚
两者都有 header 和页脚，但 Grid 有更多选项。网格可以放置小部件而不是文本。网格可以有多行 headers。网格可以连接 header 个单元格，就像跨越 HTML table.
In-Place 正在编辑
两者都提供 in-place 数据编辑，但方式不同。 Table 允许编辑单元格中的数据。 Grid 采用了不同的方法，通过显示 mini-window 和 data-entry 形式来编辑整行。此表单包括一对确认和取消按钮。这种形式比 Table 的 cell-editing.
灵活得多
过滤
Grid 提供 user-controlled 过滤，其中一行可输入的单元格显示在 header 下方。当用户键入时，将应用过滤器以仅显示匹配的行。参见 this screenshot。使用 Table，您需要创建某种 user-interface 并应用过滤。
由数据容器支持
更新： Vaadin 8 带来了一个利用 a newly improved and greatly simplified data model. This is a major reason to use Grid instead of Table. Note that both the original Grid as well as Table are still available in Vaadin 8 via the Vaadin 7 compatibility layer.
的新版 Grid
以下旧信息完好无损…
Table 和 Grid 都是 presentation-only 小部件，由实现 Container interface according to the Vaadin Data Model 的单独数据 object 支持。
Table class 也作为 作为 容器，这总是让我感到困惑。我很高兴看到网格保持更清晰的分离。
与 Table 一样，Grid 确实为 quick-and-dirty 情况提供了一些方便的方法，在这些情况下，您希望在不正式生成容器的情况下将一些数据扔到 Grid 本身。但是 Grid 的便捷方法使用 row 和 column 术语，与 Container 的 item 和 属性项。这些术语更清楚地表明您正在与 Grid 对话，但 Grid 代表您对其默认附加的 IndexedContainer 实例执行操作。
单元格内容
更新： 在 Vaadin 8.1 中，网格获得了在单元格中显示组件的能力。看到一个live demo of the Component Renderer.
单元格内容处理不同。 Grid 不能直接显示列图标，也不能在单元格中放置组件（widgets）。而是使用了新的 Renderer 功能。
文档和演示
两者在 The Book Of Vaadin, one for Table and one for Grid 中都有一章。
两者都有现场演示。 One for Table (and TreeTable). And a couple for Grid, one full-window and one with various aspects.
查看此 brochure page for Grid，包括嵌入式现场演示，以及 link 进一步演示。
其他差异
Grid 有一个 built-in 小部件，用于将数字显示为小型温度计小部件。请参阅最后一栏中的 this screenshot。
有关更具体的差异，请参阅部分 5.24.1 Overview – Differences To Table in The Book Of Vaadin。
Esoterica…网格是 Vaadin Components, a high quality set of Web Components built on Google Polymer that is ready to be used with any framework that supports Web Components 中的第一个组件。虽然 Vaadin 团队已承诺在未来数年内支持 Table，但不要指望它会受到如此特别的关注。
Vaadin 8
在 Vaadin 8.0 和 8.1 中，Grid 变得更好了。主要改进包括：
- 使用 Vaadin 8 中新增的更简单、更时尚的数据模型
- 传递 collection 个实体进行显示
- 使用 type-safe lambda 语法轻松定义列
grid.addColumn( Person::getFirstName ).setCaption( "First Name" );
- lazy-loading 数据现在
Container 消失了：
grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
- 显示 Vaadin 组件而不仅仅是渲染器的能力
- Drag-and-drop 通过 HTML5 定义的 drag-and-drop 支持。
- 更快的速度
Table 组件仍可通过 Vaadin 8 中的兼容层使用，以继续使用 Vaadin 7 classes.
未来
Vaadin 团队对 Grid 有很好的计划，因此您在 Whosebug 页面上阅读的很多内容都会发生变化。该团队将在未来几个月和几年内热切地添加功能、增强功能和错误修复。 Grid 在其短暂的历史中已经进行了许多增强，因此在阅读有关限制或缺少功能的旧文档时要当心 - 这些可能不再如此。
在过滤器 table 中，如果我们点击 table header，第一行将默认通过名为 setSelectable 的方法突出显示(true); 但在网格 table 中没有此类操作，
I want to apply the same action in grid table. Is there any possibilty for having that nature? Is there any method or code available?
下面是我在网格中使用的代码 table:
private void buildPagedGrid(Class<T> clazz) {
setWidth("100%");
setSelectionMode(SelectionMode.SINGLE);
setImmediate(true);
setSizeFull();
setContainerDataSource(dataSource);
setFooterVisible(true);
}
Grid and Table components in Vaadin7 有什么区别？
我应该使用哪个，什么时候使用？
Grid 是一个新的更强大的组件，它应该是 Table 的继承者（参见 The Table is dead, long live the Grid）。因此，没有必要偏爱 Table 而不是 Grid。
这是 Vaadin 关于从 Table 迁移到网格的系列文章中的第一篇： https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-basic
实际上，你可以用它们来实现你想要的一切。但我的经验是，网格用起来更舒服。
Table对于简单的表格来说易于理解和使用（正如您可能猜到的那样）。所以 如果你只是想很好地显示几行可视化数据 - 使用 Table。 它很稳定并且可以很好地工作。
Grid 看起来像 Table，但它有一些朝向 Table 的特征。如果您有大量数据需要渲染，网格可能会处理得更好。 "inline editing" 您的数据也有一个很好的做法。有一种方法可以广泛地自定义网格的 headers。 如果您想在 table-like 组件内进行大量自定义和交互 - 使用网格。
在此处查看功能：
http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid
在这两个组件中 select rows/cells 的方式有所不同。 例如，selection 的 EventListener 在使用 return 时略有不同。 此外，向它们添加列和行的方式也有所不同，但这只是一个实现问题，所以应该无关紧要。
总结
Grid → New & Amazing
Table → Venerable & Reliable
Table 是一个非常好的 data-grid 内置于最早版本的 Vaadin 中的显示小部件。
Grid is grand rewrite from scratch, designed to supplant Table. The Vaadin team is leveraging their wisdom gained from experience, “if we knew then what we know now”, to make the very best data-grid possible given today’s Web technology. Grid is such a big deal that it gets its own vanity page. See this company blog post 快速概览。
所以，一般来说，我建议你关注网格。尝试一下，先学习一下，看看它是否满足您的需求。如果您 运行 遇到错误或问题，或者您需要 Grid 中缺少的功能，那么 回退到 Table。您可以在一个项目中 mix-and-match 这两种方式，但不同的外观和行为可能会使您的用户感到困惑。
将 Grid 视为充满希望并渴望跃入成年的早熟青少年，并且 Table作为一个成熟的成年人，在 middle-age 的黄金岁月里努力工作，同时梦想 well-earned 未来的退休航行到日落。
详情
如果在继续项目中使用 Vaadin 6，或者您需要支持非常旧的浏览器，那么 Table 是您唯一的选择。 Grid 需要 Vaadin 7 或更高版本。
以下是 Grid 当前缺少的一些主要 Table 功能。
- Drag-and-drop 特征（稍后添加）。
- 通过用户拖动列的边缘调整列大小 header。
两者有许多共同点。他们向浏览器练习 lazy-loading，仅在需要时从 server-side 自动加载数据，以免网络浏览器过载。两者都允许用户将列拖动到 re-order。两者都让用户 show/hide 列。
行选择
两者都允许 selecting 单行或多行。
网格还有一个自动功能，它添加了一列复选框。用户可以通过单击这些复选框而不是使用鼠标或鼠标+键盘来 select 多行。许多（如果不是大多数的话）用户对 mouse-driven 多行 selection 很笨拙。请参阅 this screenshot，并注意第一列。
selection 的编程支持不同。网格不扩展 AbstractSelect, instead defines its own selection API. Call addSelectionListener() and define a SelectionListener. See The Book Of Vaadin.
Headers & 页脚
两者都有 header 和页脚，但 Grid 有更多选项。网格可以放置小部件而不是文本。网格可以有多行 headers。网格可以连接 header 个单元格，就像跨越 HTML table.
In-Place 正在编辑
两者都提供 in-place 数据编辑，但方式不同。 Table 允许编辑单元格中的数据。 Grid 采用了不同的方法，通过显示 mini-window 和 data-entry 形式来编辑整行。此表单包括一对确认和取消按钮。这种形式比 Table 的 cell-editing.
灵活得多过滤
Grid 提供 user-controlled 过滤，其中一行可输入的单元格显示在 header 下方。当用户键入时，将应用过滤器以仅显示匹配的行。参见 this screenshot。使用 Table，您需要创建某种 user-interface 并应用过滤。
由数据容器支持
更新： Vaadin 8 带来了一个利用 a newly improved and greatly simplified data model. This is a major reason to use Grid instead of Table. Note that both the original Grid as well as Table are still available in Vaadin 8 via the Vaadin 7 compatibility layer.
的新版 Grid以下旧信息完好无损…
Table 和 Grid 都是 presentation-only 小部件，由实现 Container interface according to the Vaadin Data Model 的单独数据 object 支持。
Table class 也作为 作为 容器，这总是让我感到困惑。我很高兴看到网格保持更清晰的分离。
与 Table 一样，Grid 确实为 quick-and-dirty 情况提供了一些方便的方法，在这些情况下，您希望在不正式生成容器的情况下将一些数据扔到 Grid 本身。但是 Grid 的便捷方法使用 row 和 column 术语，与 Container 的 item 和 属性项。这些术语更清楚地表明您正在与 Grid 对话，但 Grid 代表您对其默认附加的 IndexedContainer 实例执行操作。
单元格内容
更新： 在 Vaadin 8.1 中，网格获得了在单元格中显示组件的能力。看到一个live demo of the Component Renderer.
单元格内容处理不同。 Grid 不能直接显示列图标，也不能在单元格中放置组件（widgets）。而是使用了新的 Renderer 功能。
文档和演示
两者在 The Book Of Vaadin, one for Table and one for Grid 中都有一章。
两者都有现场演示。 One for Table (and TreeTable). And a couple for Grid, one full-window and one with various aspects.
查看此 brochure page for Grid，包括嵌入式现场演示，以及 link 进一步演示。
其他差异
Grid 有一个 built-in 小部件，用于将数字显示为小型温度计小部件。请参阅最后一栏中的 this screenshot。
有关更具体的差异，请参阅部分 5.24.1 Overview – Differences To Table in The Book Of Vaadin。
Esoterica…网格是 Vaadin Components, a high quality set of Web Components built on Google Polymer that is ready to be used with any framework that supports Web Components 中的第一个组件。虽然 Vaadin 团队已承诺在未来数年内支持 Table，但不要指望它会受到如此特别的关注。
Vaadin 8
在 Vaadin 8.0 和 8.1 中，Grid 变得更好了。主要改进包括：
- 使用 Vaadin 8 中新增的更简单、更时尚的数据模型
- 传递 collection 个实体进行显示
- 使用 type-safe lambda 语法轻松定义列
grid.addColumn( Person::getFirstName ).setCaption( "First Name" ); - lazy-loading 数据现在
Container消失了：grid.setDataProvider( ( sortorder , offset , limit) -> service.findAll( offset , limit) , () -> service.count() );
- 显示 Vaadin 组件而不仅仅是渲染器的能力
- Drag-and-drop 通过 HTML5 定义的 drag-and-drop 支持。
- 更快的速度
Table 组件仍可通过 Vaadin 8 中的兼容层使用，以继续使用 Vaadin 7 classes.
未来
Vaadin 团队对 Grid 有很好的计划，因此您在 Whosebug 页面上阅读的很多内容都会发生变化。该团队将在未来几个月和几年内热切地添加功能、增强功能和错误修复。 Grid 在其短暂的历史中已经进行了许多增强，因此在阅读有关限制或缺少功能的旧文档时要当心 - 这些可能不再如此。
在过滤器 table 中，如果我们点击 table header，第一行将默认通过名为 setSelectable 的方法突出显示(true); 但在网格 table 中没有此类操作，
I want to apply the same action in grid table. Is there any possibilty for having that nature? Is there any method or code available?
下面是我在网格中使用的代码 table:
private void buildPagedGrid(Class<T> clazz) {
setWidth("100%");
setSelectionMode(SelectionMode.SINGLE);
setImmediate(true);
setSizeFull();
setContainerDataSource(dataSource);
setFooterVisible(true);
}