電子表格和數(shù)據(jù)網(wǎng)格：乍一看他們似乎是可互換的組件，由于兩者都是用表格顯示來(lái)格式化大量數(shù)據(jù)，因此很難知道應(yīng)該為React應(yīng)用程序選擇哪個(gè)選項(xiàng)。

盡管它們的外觀相似，但提供了非常不同的功能——選擇錯(cuò)誤的一個(gè)將對(duì)用戶體驗(yàn)產(chǎn)生負(fù)面影響，了解兩者之間的差異，以及它們最能解決哪些問(wèn)題，將幫助您為React應(yīng)用程序做出正確的選擇。

歸根結(jié)底，這取決于用戶的主要目標(biāo)是編輯還是查看數(shù)據(jù)。可以將這兩個(gè)組件想象成維恩圖的兩邊：中間的一些功能在電子表格和數(shù)據(jù)網(wǎng)格中都可用，但它們的大多數(shù)功能集都是面向?qū)崿F(xiàn)這些不同的目標(biāo)的。

Kendo UI致力于新的開發(fā)，來(lái)滿足不斷變化的需求。現(xiàn)在我們非常自豪地宣布，通過(guò)React框架的Kendo UI JavaScript封裝來(lái)支持React Javascript框架。Kendo UI for React能夠?yàn)榭蛻籼峁└玫挠脩趔w驗(yàn)，并且能夠更快地構(gòu)建更好的應(yīng)用程序。

Kendo UI R1 2023 SP1正式版下載

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論

電子表格的優(yōu)勢(shì)

電子表格（Spreadsheets）是復(fù)雜數(shù)據(jù)輸入和編輯的理想選擇，它們的功能集中于不僅能夠一次對(duì)大量數(shù)據(jù)進(jìn)行更改，而且還能在數(shù)據(jù)上運(yùn)行算術(shù)方程和其他數(shù)學(xué)/金融函數(shù)。一些電子表格還允許用戶基于數(shù)據(jù)創(chuàng)建圖表、圖形和其他數(shù)據(jù)可視化。基本上，數(shù)據(jù)是電子表格的起點(diǎn)——用戶希望能夠操作該數(shù)據(jù)，而不僅僅是查看它。

電子表格（Spreadsheets）還提供了將數(shù)據(jù)分離為多個(gè)“表”的功能，這些“表”的數(shù)據(jù)可以來(lái)自不同的來(lái)源，并可以獨(dú)立地進(jìn)行交互。雖然這些表可以共享鏈接數(shù)據(jù)，但最終它們彼此獨(dú)立操作，這種處理多個(gè)數(shù)據(jù)組的能力是一個(gè)顯著的特點(diǎn)。

Microsoft Excel是一款真正為電子表格體驗(yàn)設(shè)定的標(biāo)準(zhǔn)的軟件，即使在web應(yīng)用中，許多用戶也希望電子表格組件能夠滿足或超過(guò)他們?cè)贓xcel中已經(jīng)習(xí)慣使用的可用功能。他們還非常希望布局和一般用戶界面能夠反映Excel的體驗(yàn)，因此除了表面調(diào)整(如顏色、按鈕形狀等)之外，您真正自定義組件的能力有限。與此同時(shí)，您的組件也可以很好地與Excel合作，允許用戶上傳和/或?qū)С雠cExcel兼容文件類型的文件，以便他們可以快速輕松地在應(yīng)用程序之間來(lái)回移動(dòng)數(shù)據(jù)。

數(shù)據(jù)網(wǎng)格的優(yōu)勢(shì)

另一方面，數(shù)據(jù)網(wǎng)格最適合以多種方式查看數(shù)據(jù)，它們的功能專注于為用戶提供混合和匹配數(shù)據(jù)顯示方式所需的所有工具，是他們能找到以前可能沒有意識(shí)到的聯(lián)系。數(shù)據(jù)是最終目標(biāo)，而不是數(shù)據(jù)網(wǎng)格的起點(diǎn)。用戶希望在使用網(wǎng)格時(shí)能夠過(guò)濾、排序、分組和重新組織數(shù)據(jù)顯示的方式，大多數(shù)數(shù)據(jù)網(wǎng)格允許有限的編輯功能，但這不是組件的重點(diǎn)。

因此網(wǎng)格通常側(cè)重于顯示來(lái)自單一數(shù)據(jù)源的數(shù)據(jù)，電子表格的標(biāo)簽“表”方法在這里無(wú)關(guān)緊要。因?yàn)橛脩舨⒉粚Ｗ⒂诰庉嫈?shù)據(jù)，所以實(shí)時(shí)更新是數(shù)據(jù)網(wǎng)格的一個(gè)顯著特征。在電子表格中，您不希望在用戶運(yùn)行函數(shù)或使用它進(jìn)行數(shù)學(xué)運(yùn)算時(shí)自動(dòng)實(shí)時(shí)更新和刷新數(shù)據(jù)——您希望用戶對(duì)手動(dòng)更新數(shù)據(jù)具有完全控制，這樣就不會(huì)中斷他們的工作。

在一天結(jié)束時(shí)，大多數(shù)用戶都希望數(shù)據(jù)網(wǎng)格像花哨的數(shù)據(jù)表一樣運(yùn)行，因?yàn)閷?duì)于表的外觀或樣式?jīng)]有嚴(yán)格的要求，所以設(shè)計(jì)人員在使用數(shù)據(jù)網(wǎng)格時(shí)有很大的回旋余地。顯然，您仍然希望用戶能夠快速輕松地使用可用的數(shù)據(jù)工具，這意味著數(shù)據(jù)網(wǎng)格通?？梢圆捎酶氐臉邮?，以便更自然地與應(yīng)用程序其余部分的外觀混合在一起。

應(yīng)該如何選擇？

從能夠滿足需求的最簡(jiǎn)單的組件開始，只有當(dāng)您知道用戶將需要它所提供的功能集時(shí)，才逐步升級(jí)到更復(fù)雜的組件。因此在這種情況下，您可以從一個(gè)簡(jiǎn)單的表開始，如果發(fā)現(xiàn)大量數(shù)據(jù)，并且您的用戶將受益于分頁(yè)、排序、過(guò)濾和分組，那么就應(yīng)該開始研究數(shù)據(jù)網(wǎng)格了。如果有一個(gè)數(shù)據(jù)網(wǎng)格，并且發(fā)現(xiàn)用戶需要在不離開React應(yīng)用程序的情況下進(jìn)行復(fù)雜的編輯、運(yùn)行函數(shù)和操作數(shù)據(jù)，那么是時(shí)候開始查看電子表格了。

最后，如果您已經(jīng)知道需要的不僅僅是默認(rèn)的基本HTML表所能提供的，那么建議使用數(shù)據(jù)網(wǎng)格，除非您確定用戶將需要對(duì)大量數(shù)據(jù)進(jìn)行復(fù)雜的編輯或執(zhí)行高級(jí)功能。電子表格提供了大量的功能，這使得它們非常強(qiáng)大，但如果用戶只是想查看數(shù)據(jù)，也會(huì)使它們難以承受。一般來(lái)說(shuō)，只提供用戶需要的是一個(gè)很好的UX技巧，而不是用大量的按鈕、功能和選項(xiàng)來(lái)復(fù)雜化UI(和代碼庫(kù))。

記住作為開發(fā)人員，傾向于高估“超級(jí)用戶”的比例，所以確保通過(guò)與用戶直接交談和收集使用數(shù)據(jù)來(lái)驗(yàn)證對(duì)用戶的需求假設(shè)。

無(wú)論作何選擇，Kendo UI都有覆蓋！

如果你正在尋找一個(gè)強(qiáng)大的、健壯的React數(shù)據(jù)網(wǎng)格組件，那么可以看看KendoReact！KendoReact數(shù)據(jù)網(wǎng)格完全是用React(和TypeScript)編寫的，它的速度非?？?、可高度定制、100%可訪問(wèn)，并且包含了許多功能，包括(但不限于)分頁(yè)，排序/過(guò)濾/分組，導(dǎo)出到Excel和PDF，以及實(shí)時(shí)數(shù)據(jù)更新。

如果電子表格確實(shí)更適合您的應(yīng)用程序，Kendo UI仍然可以提供幫助！雖然目前還沒有為KendoReact原生編寫的電子表格組件，但有一個(gè)超級(jí)強(qiáng)大的電子表格可用作Kendo UI for jQuery庫(kù)的一部分。Kendo UI電子表格提供了一系列有用的功能，包括圖像嵌入、評(píng)論、單元格格式、自定義函數(shù)、全球化等!