JavaScriptデータグリッドでそれを行うことができますか？

この記事は、Progress Kendo UIの親愛なる友人たちによって親切にサポートされました。彼らは、開発者が私たちの社会と世界を形作る技術の進化を利用して習得するために必要なツールを提供することに取り組んでいます。 ありがとう！

データテーブルとも呼ばれるデータグリッドは、大量のデータをユーザーに提示するために不可欠です。 ユーザーは、理解、分析、操作が簡単な方法でデータを表示できる必要があります。 ただし、パフォーマンス、速度、およびユーザーエクスペリエンスを念頭に置いてデータグリッドビューを構築することは、特に困難な作業になる可能性があります。 これは、それらを最初から構築する場合、または機能が制限され、パフォーマンスが標準以下のライブラリを使用する場合に特に当てはまります。

データグリッドをバンドルするライブラリに不足はありません。 ただし、ほとんどの場合、グリッド機能の限られたセットしか提供されておらず、それらの間で一般的なのは、ページネーション、フィルタリング、並べ替え、およびテーマ設定です。 他のデータグリッドライブラリは、いくつかの依存関係に依存するラッパーとして構築されています。 これらの種類のライブラリは、ネイティブのライブラリと比較して、グリッドのパフォーマンスに悪影響を及ぼします。 これらは、すべてのフレームワークまたは言語に対して新たに構築されるわけではありません。 そのため、これらの非ネイティブライブラリは低速である可能性があり、フレームワーク/言語の優れた機能を利用できない可能性があり、重要な機能が不足しており、動作させるために追加のセットアップが必要になる可能性があります。

これらのライブラリの特徴であるもう1つの点は、ユーザーエクスペリエンスが低いことです。 多くの場合、さまざまな画面サイズや向きのレスポンシブデザインを実装できず、グリッドの一部をロックしたり、スティッキーにしたり、アクセシビリティを後から考えたりすることができません。 それに加えて、グリッドとは別のフォームでの編集のみを提供します。これには、多くの場合、完了するために複数のアクションが含まれます。 これは、特に多数のデータアイテムを編集するときに、面倒で繰り返しになる可能性があります。 他の人は編集さえ提供しません。 これに加えて、データエクスポート機能が不足している傾向があり、ユーザーはエクスポートをWebページの印刷に依存することになります。

機能と機能が制限されているため、適切なグリッドを構築するには、個別のライブラリでそれらを補足する必要があります。 たとえば、データをグラフ化するには、グリッドライブラリが提供しないため、別のグラフライブラリを使用する必要があります。 さらに、これらの関連のないコンポーネントのサポートが組み込まれていないため、これらの無関係なコンポーネントをグリッドに埋め込むことはできません。

これらの問題に対処するには、ネイティブに構築されているだけでなく、さまざまな補完コンポーネントを組み込んでおり、優れたユーザーエクスペリエンスとパフォーマンスに重点を置いたライブラリを使用する必要があります。 理想的なデータグリッドの機能を示すために、例としてKendoUIデータグリッドを使用します。 これらのデータグリッドは、ProgressKendoUIと呼ばれるライブラリバンドルで利用可能な100以上のコンポーネントの1つです。 バンドルは、いくつかのフロントエンドフレームワーク用にネイティブに構築された4つのコンポーネントライブラリで構成されています。 これらは、Angular用のKendo UI、KendoReact、Vue用のKendo UI、およびjQuery用のKendoUIです。 この記事全体で示されている例では、これら4つのライブラリすべてのグリッドを取り上げます。

レスポンシブデザイン

データグリッドに関しては、ユーザーは操作しているデータの全体像を把握している必要があります。 非表示になっているデータやアクセスが難しいデータは、読み取るのにイライラし、ユーザーを完全にグリッドから外します。 多くのグリッドライブラリはグリッドをレスポンシブにしません。スタイリングといくつかのロジックを使用してグリッドを実装するのはあなた次第です。 これは、非常に多くの列を含むデータでは特に複雑になる可能性があります。 さまざまな表現ニーズを持つさまざまなタイプのデータで複数のグリッドを構築している場合、これはさらに複雑さを増します。 スクロール、メディアクエリ、フォントサイズ、スケーリング、データの一部を省略するかどうかなどを把握する必要があります。

最新のデータテーブルは、向きの変化に対応し、すべてのデータをすべての画面サイズで適切に表示できる必要があります。 たとえば、Kendo UIデータグリッドは、ビューポートのサイズとそれに対応する行数に応じてサイズを調整します。 たとえば、Angular Gridでは、高さを設定でき、コンテンツの一部が収まらない場合、グリッドはスクロール可能になります。 高さの設定には、グリッドの高さCSSプロパティの値を指定し、親要素にも高さが設定されていることを確認するだけです。 他の構成は必要ありません。 こちらのサンプル在庫表で、これがどのように行われるかを確認できます。

さらに、必要なすべてのデータを表示しながら、グリッド内の列の表示を切り替えることを選択できます。 これを実現するには、画面サイズの範囲ごとに異なる列を作成し、列のmediaプロパティを使用して、それらを表示する場所を決定します。 たとえば、このAngularデータテーブルでは、画面サイズが大きい場合（ media="(min-width: 450px)" ）、列が完全に表示され、次のようになります。

ただし、中程度のディスプレイ（ media="(min-width: 680px)" ）で、価格、在庫あり、および廃止された列を非表示にすることを選択できます。 これは次のようになります。

小さいディスプレイ（ media="(max-width: 450px)" ）では、次のようなすべてのデータを表示する単一のカスタム列を作成できます。

Kendo UIデータグリッドはxs, sm, md, lg 、 xlなどのBootstrap4デバイス識別子もサポートしています。 これは使いやすいですが、含めることができるクエリの数が1つに制限されるため、それほど用途が広くありません。 たとえば、独自のブレークポイントを使用すると、 media="(min-width: 500px) and (max-width: 1200px)"になります。 Bootstrap 4デバイス識別子では、複数の識別子を組み合わせることはできません。

アクセシビリティコンプライアンス

グリッドが最新のアクセシビリティ基準を満たしていることを確認することを優先する必要があります。 これを行うことで、障害を持つ人々があなたのグリッドに関与できるようになり、ユーザー間に公平性があることが保証されます。 それでも、一部のライブラリは、グリッドにアクセスできることを確認するために何もしません。 他の人は、アクセシビリティについて評価されたときに標準以下のグリッドをもたらす最低限のことだけを行います。 これらのグリッドをアクセス可能に拡張するには、かなりの量の作業が必要です。 これは、より複雑なグリッド設計によってさらに複雑になります。 この作業は後であなたとあなたのユーザーに利益をもたらすでしょうが、これらのライブラリはアクセシビリティを彼らの製品のコア部分にするべきでした。

Kendo UI Data Gridsは、WAI-ARIA、セクション508、WCAG2.1などの主要なアクセシビリティ標準をサポートすることで優先順位を付けています。 たとえば、KendoReactは、そのコンポーネントのほとんどが完全にアクセス可能であり、キーボードナビゲーションをサポートしていることを確認することにより、セクション508標準に準拠しています。 グリッドとそのすべての組み込みコンポーネントをキーボードで操作できるようにすることで、WCAGのキーボードアクセス可能ガイドラインに従います。 その結果、ReactGridはAAAの最高のWCAG適合レベルを達成します。 KendoReact Data GridはWebコンポーネントであるため、WAI-RAI仕様を満たし、障害を持つユーザーがWebページ上で適切に対話できるようにします。 たとえば、このReactデータグリッドでは、キーボードを使用してさまざまなコンポーネントや行に移動できます。

仮想スクロール

仮想スクロールでは、データのセグメントのみがグリッド内にレンダリングされます。 これは通常、フェッチするレコードの数として設定されます。 ユーザーがこのセグメントを超えてスクロールすると、同じサイズの別のセグメントがレンダリングされます。 これは、大きなデータセットのレンダリングが大量のメモリを消費し、グリッドのパフォーマンスと速度を妨げるため、パフォーマンスに役立ちます。 仮想スクロールは、パフォーマンスに影響を与えることなく、すべてのデータをレンダリングしているような錯覚を与えます。

仮想スクロールは、グリッドライブラリではサポートされていないことがよくあります。 代わりに、大量のデータを表示するときにユーザーにとって最良のエクスペリエンスではない可能性があるページネーションを推奨します。 膨大な量のデータをレンダリングしようとすると、グリッドのパフォーマンスがさらに低下し、ひどいユーザーエクスペリエンスにつながります。 仮想スクロールをサポートするライブラリの場合、データ内のレコードにのみ適用され、レコードの特定の部分には適用されません。 これは、データに複数の列がある場合に特に制限されます。

Kendo UIは、ローカルデータとリモートデータの両方の仮想スクロールをサポートしています。 たとえば、jQueryグリッドのKendo UIでは、グリッドのscrollable.virtualプロパティをtrueに設定することで有効にします。 これを設定することにより、グリッドはグリッドデータソースのpageSizeプロパティで指定された数のアイテムのみをロードします。 ローカルデータを使用するこのjQueryデータグリッドでこれがどのように機能するかを確認できます。

 <!DOCTYPE html> <html> <head>...</head> <body> ... <div></div> <script> var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... }); </script> </body> </html>

この同じ設定は、このjQueryデータテーブルに示されているようにリモートデータに対して機能します。 さらに、レコードに一度にすべてをレンダリングするのにコストがかかる可能性のある複数のプロパティが含まれている場合は、同様の設定を使用してグリッドの列を仮想化できます。 scrollable.virtualプロパティをtrueに設定する必要があります。 ただし、列の仮想化はpageSizeプロパティに依存しません。 この例は、この機能を示しています。

PDFとExcelのエクスポート

グリッドからデータをエクスポートする機能を持つことは極めて重要です。 ユーザーは、スプレッドシートなどのアプリケーションを使用して、配布またはさらに操作する必要がある場合があります。 ユーザーには、グリッドに制限されることなくデータを簡単に共有するオプションが必要です。 グリッドデータには、スプレッドシートやプレゼンテーションソフトウェアのように、グリッドでは提供されない追加の処理が必要になる場合もあります。

これは必須のユースケースですが、多くのライブラリでは対応されていません。 ユーザーは、PDF形式のデータにアクセスするために、Webページ全体を印刷することに頼らなければなりません。 データを外部アプリケーションに転送する場合、データを何度もコピーして貼り付ける必要があります。 これは当然のことながらかなり腹立たしいです。

Kendo UIデータグリッドは、PDFとExcelの2つの形式でグリッドからのデータエクスポートを提供します。 たとえば、Vue DataGridのKendoUIで、PDFエクスポートを処理するには、 GridPDFExportコンポーネントを使用します。 そのsaveメソッドを使用すると、PDFエクスポートに含めるデータを渡すことができます。 データはページ化されているか、完全なセットである可能性があります。

 <template> <button @click="exportPDF">Export PDF</button> <pdfexport ref="gridPdfExport"> <Grid :data-items="items"></Grid> </pdfexport> </template> <script> import { GridPdfExport } from '@progress/kendo-vue-pdf'; import { Grid } from '@progress/kendo-vue-grid'; export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ... }; </script>

GridPDFExportコンポーネントを使用すると、エクスポートのページサイズ、ページマージン、ページ上のグリッドの拡大縮小方法などを指定できます。これは、PDFページに合わせて大きなグリッドをカスタマイズする場合に役立ちます。 これらをプロパティとしてコンポーネントに渡します。 次に例を示します。

 <pdfexport ref="exportPDF" :margin="'2cm'" :paper-size="'a4'" :scale="0.5"> <Grid :data-items="products"></Grid> </pdfexport>

テンプレートを使用して、エクスポートをさらにカスタマイズすることもできます。 テンプレート内で、スタイルの追加、ヘッダーとフッターの指定、ページのレイアウトの変更、およびページへの新しい要素の追加を行うことができます。 スタイリングにはCSSを使用します。 テンプレートの構成が完了したら、GridPDFExportコンポーネントのpage-templateプロパティを使用してテンプレートを指定します。

Kendo UI VueグリッドからExcelファイルをエクスポートするには、 ExcelExportコンポーネントを使用します。 saveExcelメソッドを使用して、ファイル名、グリッドデータ、表示する列などを渡し、メソッドを呼び出してファイルを生成します。 このVueデータグリッドは、KendoUIVueグリッドを使用してExcelエクスポートを実現する方法の優れた例です。

スティッキーカラム

ユーザーがグリッドを水平方向にスクロールする場合、一部の列をフリーズするか、常に表示する必要がある場合があります。 これらの列には通常、ID、名前などの重要な情報が含まれています。フリーズ/スティッキー列は常に表示されたままですが、スクロール方向に応じてグリッドの左端または右端に移動するか、まったく移動しない場合があります。 たとえば、このVueデータグリッドのデモでは、IDが固定され、[廃止]列が固定されています。

グリッドライブラリのスティッキー列はまれに発生する可能性があります。 存在しない場合、最初から実装するのは難しい作業になる可能性があります。 達成するにはかなりのスタイリングが必要であり、多数のグリッドが必要な場合は適切にスケーリングできない可能性があります。

Kendo UIでスティッキー列を設定するには、最小限の設定で済みます。 たとえば、Kendo UI Vueグリッドでは、列のlockedたプロパティをtrueに設定して、列を固定する必要があります。 このVueデータテーブルでは、 lockedプロパティを設定することにより、ID列と廃止列が固定されています。 以下の例では、IDと年齢がロックされています。

 <template> <grid :data-items="people" :columns = "columns"> </grid> </template> <script> import { Grid } from '@progress/kendo-vue-grid'; import { people } from './people' export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } } }; </script>

編集

グリッドの主な使用例は、大量のデータを表示することです。 一部のライブラリはこれに固執し、編集が必要になる可能性を考慮していません。 編集は非常に便利な機能であるため、これはユーザーにとって不利です。 ユーザーが要求すると、開発者は個々のエントリを編集するための別のページを作成する必要があります。 これに追加するために、ユーザーは1つのフォームで次々にエントリを編集することしかできません。 これは面倒で、特に大量のデータを処理するときにユーザーエクスペリエンスが低下します。

グリッド編集の重要なユースケースの1つは、バッチ編集を容易にすることです。 大量のデータを一度に変更する場合に便利です。 これには、データの削除、作成、および更新が含まれる場合があります。

Kendo UI Data Gridsを使用すると、インラインとポップアップの使用という2つの形式で編集できます。 インライン編集では、すべてのデータがグリッド内で編集されます。 セルをクリックすると、編集可能になります。 ポップアップでは、ポップアップフォームを使用して各エントリを個別に編集します。 このKendoUIfor jQueryテーブルの例では、グリッドを編集可能にするために、グリッドの編集可能な構成の設定、データソースの確立、およびデータソースでのCRUD操作の構成の3つのステップが含まれます。 これらのいくつかの手順により、バッチ編集の設定に伴う複雑さが軽減されます。 ポップアップ編集の構成は同じ手順に従いますが、開始時にオプションが異なります。

編集のサポートに加えて、jQueryGridのKendoUIは入力検証を可能にします。 たとえば、入力を必須にしたり、最小の長さを強制したりできます。 さらに、カスタム入力コントロールを作成できます。 入力コントロールは、テキストフィールドだけに限定されません。 ドロップダウン、チェックボックス、日付ピッカー、範囲スライダーなどを使用できます。これらは、インラインとポップアップの両方にすることができます。 このjQueryデータテーブルでは、Categoryフィールドはドロップダウンです。 検証も同じ例で示されています。 単価フィールドには検証が課されており、最小値が1であることを確認します。

補足コンポーネント

ほとんどのグリッドライブラリには、グリッドを提供するという唯一の目的があります。 それらは他のものと一緒に出荷されず、グリッドのみが出荷されます。 あなたはそれが提供する機能に制限されています。 グリッドを補足する必要がある場合、他のライブラリがグリッドと互換性がない可能性があるため、注意が必要な場合があります。 したがって、グリッドを構築するときは、ライブラリの境界内にとどまる必要があります。

Kendo UIは、その作成者のアプローチが、単一のコンポーネントではなく、互いに簡単に統合できるコンポーネントの包括的なライブラリを提供することであるため、これを解決します。 グリッドは、データ管理、ナビゲーション、グラフ作成、編集、メディアプレゼンテーション、チャットの円滑化など、あらゆることを実行できる多数のコンポーネントのライブラリの一部です。 複雑なセットアップを実行したり、場合によっては壊したりすることなく、これらのコンポーネントをグリッド内に埋め込むことを選択できます。 それらの統合はシームレスであり、最小限の構成で済みます。 このAngularデータテーブルを例にとると、その1日列には、各行の完全にインタラクティブなグラフがシームレスに埋め込まれています。 グリッド内に任意の数のコンポーネントを埋め込んで、グリッドが機能し、すべての機能が期待どおりに機能することを信頼できます。

結論

データグリッドは、理解しやすく、魅力的で、応答性が高く、アクセスしやすいものである必要があります。 彼らはうまく機能し、データを高速にロードする必要があります。 ただし、これらの基準を満たすデータグリッドを最初から構築するには、長い時間がかかり、多大な労力を要する可能性があります。 データグリッドライブラリを使用することもできますが、多くの場合、これらはパフォーマンスが最適化されておらず、アクセスできず、単一のグリッドコンポーネントのみが付属しています。

使いやすい魅力的なデータグリッドを作成するには、パフォーマンスに重点を置いたライブラリが必要です。 これは、ネイティブに構築し、仮想スクロールをサポートすることで実現できます。 それが提供するデータグリッドは、応答性が高く、スティッキー列を使用する必要があります。 これは、ユーザーが画面サイズや向きに関係なくデータを簡単に表示できるようにするためです。 アクセシビリティは、グリッドの中心的な関心事である必要があります。 これにより、すべてのユーザーが同等の使用体験を得ることができます。

データテーブルは、ユーザーがデータを使用して実行できることを拡張する必要があります。 これは、複数の形式でのエクスポートを編集および促進することで実現できます。 さらに、これらのライブラリには、グリッドを補完する他のコンポーネントが付属している必要があります。 1つのライブラリに互換性のあるコンポーネントがあると、1つのアプリケーションで複数の異なる競合するライブラリを使用する必要がなくなります。 これらの機能を提供するデータグリッドライブラリは、それほど複雑にすることなく、ユーザーにとって優れた製品を作成するのに役立ちます。