一个可主题化的 React 数据网格，具有出色的以用户体验为中心的特性

KendoReact 可以为你节省大量时间，因为它提供了预构建的组件，你可以立即在你的应用程序中使用。它们看起来很漂亮，但更重要的是，它们很容易主题化，所以它们可以根据你的需要进行调整。我认为外观甚至不是最重要的部分。市面上有很多组件库专注于视觉效果。这些组件解决了 UI/UX 中最困难的交互问题，并且在优雅、速度和可访问性方面都做得很好。

让我们看看他们的 React 数据网格 组件。

传统的 <table> 元素 是数据网格的最佳工具，但表格并不提供大多数有助于提供良好数据浏览体验的功能。如果我们使用 KendoReact <Grid /> 组件（以及其他组件），我们会获得大量额外的功能，任何一项都不容易实现，而所有这些功能加起来构成了一个非常引人注目的解决方案。让我们列举一下你将获得的功能。

可排序的列

你一定会为你的数据选择一个默认排序方式，但如果任何给定的数据行包含诸如 ID、日期或名称之类的信息，用户很可能想要按该数据对列进行排序。也许他们想查看最旧的订单，或者总价值最高的订单。HTML 无法帮助对表格进行排序，因此对于数据网格的 JavaScript 库来说，这是基本功能（明白了吗？），在这里它得到了完美的处理。

分页和限制

当你拥有超过几十行数据时，通常需要对其进行分页。这样用户就不必滚动太多，更重要的是，它通过避免 DOM 过大来保持页面速度。然而，分页的一个问题是它使得排序等操作变得更加困难！你不能只对可见的 20 行进行排序，预期的是对整个数据集进行排序。当然，这在 KendoReact 的数据网格组件中得到了处理。

或者，如果分页不适合你，数据网格提供虚拟滚动 - 在列和行方向上。这是一个不错的功能，因为数据加载速度很快，可以实现流畅、自然的滚动。

可扩展行

数据网格可能在行本身显示了许多数据，但可能还有更多数据，用户在找到条目后可能想要从条目中提取出来。也许这些数据不需要像列数据那样进行交叉引用。这可能很难实现，因为表格单元格的布局方式。数据仍然与单行相关联，但你通常需要比一个单元格的宽度更多的空间。使用 KendoReact 数据网格组件，你可以传递一个包含任意 React 组件的 detail 道具，该组件将在行展开时显示。非常灵活！

响应式设计

也许使用 <table> 设计最难做到的就是如何在小屏幕上显示它们。缩小不太好，将表格折叠成非表格的形式也不好。数据网格的特点是它们各不相同，你最了解哪些数据对用户最重要。KendoReact 数据网格组件通过使你的数据网格可滚动/可滑动，以及能够锁定列以确保它们易于查找和交叉引用，来帮助解决这个问题。

筛选数据

也许我最喜欢的功能就是因为它非常以用户体验为中心。想象一下，你正在查看一个大型订单数据网格，并且你想要“让我看看所有来自 White Clover Markets 的订单”。使用筛选功能，你可以快速在筛选输入框中输入“clover”，然后神奇的事情发生了，所有这些订单都在那里。当你同时支持排序和分页时，这会更加棘手 - 所以所有这些功能协同工作真是太好了。

分组数据

现在，这个功能真的让我有点震惊 🤯。筛选和排序都非常有用，但在某些情况下，它们还略有不足。例如，很容易过度筛选，导致你查看的数据非常有限。而对于排序，你可能也想查看数据的子集，但需要你的大脑来确定该数据在何处开始和结束。使用分组，你可以告诉数据网格将对你最重要的东西进行强分组，但仍然可以在此基础上使用筛选和排序。它可以立即让你的数据探索变得更容易、更有用。

本地化

在这里，你可以真正感受到 KendoReact 的完整性。选择一种组件库，然后发现你需要本地化，但它并没有被设计为一等公民，这将非常不幸。使用 KendoReact，你可以避免所有这些问题，你可以从这个数据网格组件中看到这一点。在演示中，你可以使用一个简单的下拉菜单将英语切换为西班牙语，并查看所有日期的本地化。你可以使用 <LocalizationProvider> 和 <IntlProvider> 完成任何类型的翻译和本地化，这两种都是舒适的 React 概念。

导出为 PDF 或 Excel

这是一个该功能的实时演示

太棒了！这真是太酷了。

这还不是全部...

去查看 React 数据网格的文档。 这里还有许多我们甚至没有提到的功能（行固定！单元格编辑！）。这里还有一个让你放心的消息：这个组件以及所有 KendoReact 组件都是键盘友好的，并符合 Section 508 可访问性标准。这可不是一件容易的事。当组件如此复杂并包含如此多的交互性时，要做到可访问性很难。因此，你不仅获得了外观漂亮且在任何地方都能运行的组件，还获得了交互丰富的组件，它们提供的用户体验超出了你的想象，这一切都以快速和可访问的方式完成。这真是太不可思议了。