Components List

高速 Web Components データグリッド

Ignite UI for Web Components は、世界最速の仮想化された Web Components データグリッドを含む、Web Components ネイティブのマテリアルベースの UI コンポーネントの完全なライブラリを提供します。

Web Components Grid の例

この Web Components グリッドの例では、データの検索とフィルタリング、列のソート、サイズ変更、ピン固定と非表示、行の選択、Excel と csv へのエクスポート、水平および垂直スクロールなど、グリッドに組み込まれているさまざまな機能を利用してユーザーがデータビューをカスタマイズする方法を確認できます。Linear Progress Bar Indicator やスパークラインなどのコンポーネントを含むセルテンプレートの例を提供しました。その他の機能については、こちらをご覧ください。

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import NwindData from './NwindData.json';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private column1: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;

        this._bind = () => {
            grid.data = this.nwindData;
            column1.bodyTemplate = this.webGridBooleanCellTemplate;
        }
        this._bind();
    }

    private _nwindData: any[] = NwindData;
    public get nwindData(): any[] {
        return this._nwindData;
    }

        public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
            if (ctx.cell.value) {
                return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
            } else {
                return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
            }
    }

}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        id="grid"
        name="grid"
        id="grid"
        primary-key="ProductID"
        allow-filtering="true"
        filter-mode="excelStyleFilter">
            <igc-paginator
            per-page="10">
            </igc-paginator>
            <igc-column
            field="ProductName"
            header="Product Name"
            data-type="string"
            sortable="true"
            has-summary="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price"
            data-type="number"
            sortable="true"
            has-summary="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="UnitsInStock"
            header="Units in Stock"
            data-type="number"
            sortable="true"
            has-summary="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="OrderDate"
            header="Order Date"
            data-type="date"
            sortable="true"
            has-summary="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Discontinued"
            header="Discontinued"
            data-type="boolean"
            sortable="true"
            has-summary="true"
            editable="true"
            name="column1"
            id="column1">
            </igc-column>
            <igc-column
            field="ReorderLevel"
            header="Reorder Level"
            data-type="number"
            sortable="true"
            has-summary="true"
            editable="true"
            filterable="true">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

    #grid {
        --ig-size: var(--ig-size-medium);
    }

css

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Web Components Grid の概要

Web Components データグリッドは、一連の行と列で表データを表示するために使用されるコンポーネントです。テーブルとも呼ばれるデータグリッドは、Microsoft Excel などの一般的なソフトウェアでデスクトップの世界でよく知られています。グリッドはデスクトッププラットフォームで長い間利用されてきますが、最近 Web Components UI などの Web アプリ UI の一部になりました。最新のグリッドは複雑で、データバインディング、編集、Excel のようなフィルタリング、カスタムソート、グループ化、行の並べ替え、行と列の固定、行の集計、Excel、CSV、PDF 形式のエクスポートなど、さまざまな機能が含まれる場合があります。

Web Components Grid の利点

Web Components データグリッドは、大量のデータをすばやく保存してソートする必要がある場合に重要です。これには、大量の高速データを頻繁に使用する金融や保険などの業界が含まれます。これらの企業の成功は、データグリッドの機能とパフォーマンスに依存します。たとえば、在庫をマイクロ秒単位で決定する場合、データグリッドが遅延時間やちらつきのない状態で実行する必要があります。

主要機能

Ignite UI for Web Components のデータグリッドは、大量のリアルタイムデータのみにとどまるものではありません。これは機能豊富な Web Components グリッドであり、ごくわずかなコードだけでは実現できない機能を提供します。

以下は、データグリッドの主な機能のいくつかを示しています:

数百万のレコードをロードできる仮想化された行と列
セルおよび行オプションを使用したインライン編集
セルを使用したインライン編集
Excel スタイルフィルタリングと Excel キーボードナビゲーション機能
インタラクティブな Outlook スタイルのようなグループ化
グリッドセルまたは列のデータに基づいた列集計
Excel へのエクスポート
行の高さとサイズ変更を調整するサイズ

データの仮想化とパフォーマンス

データグリッドの列と行レベルの仮想化により、Web Components グリッド内の無制限の行と列をシームレスにスクロールします。ローカルまたはリモートのデータソースのサポートにより、データがどこにあっても最高のパフォーマンスを得ることができます。ユーザーは Excel のようなスクロールを体験し、エンタープライズスピード (ラグ、画面のちらつき、視覚的な遅延) なしで、パフォーマンスを損なうことなく最高のユーザーエクスペリエンス (UX) を提供します。

すばやく簡単にカスタマイズ、構築および実装

Ignite UI Web Components データグリッドは、データの無制限の行と列を処理できると同時に、カスタムテンプレートとリアルタイムのデータ更新へのアクセスを提供します。簡単なテーマ設定とブランディングのための直感的な API を備えており、最小限のコードでデータにすばやくバインドできます。

サンプルの表示

Web Components グリッドのページング、ソート、フィルタリング & 検索

Web Components Data Grid 内のフィルタリング機能のアニメーション

ユーザーがデフォルトの[ページャー](grid/paging.md)を使用してデータセットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページングエクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](grid/search.md)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](grid/excel-style-filtering.md)を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。

インライン Web Components グリッド編集

列のデータ型に基づくデフォルトの[編集可能な列のセルテンプレート](grid/overview.md#セル編集テンプレート)を提供します。編集可能な列にカスタムテンプレートを定義し、セル値のコミットや変更の破棄でデフォルト動作をオーバーライドできます。

キーボードナビゲーションと行/セルの選択

Web Components Data Grid のキーボードナビゲーション機能のアニメーション

上、下、右、左、タブ、および Enter キーを使用して、Web Components データグリッドで Excel のような[キーボードナビゲーション](grid/keyboard-navigation.md)を有効にして、アクセシビリティコンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して Web Components グリッドで単一または複数の行選択を切り替えて完全な行を選択または選択解除するか、グリッドツールバーの組み込みの [すべて選択] または [すべて選択解除] チェックボックスを使用して行選択を操作できます。この機能強化の詳細については、こちらをご覧ください。

Web Components グリッドのアクセシビリティと ARIA のサポート

Angular Data Grid コンポーネントの ARIA サポートのアイコン表示

Ignite UI for Web Components の各 Web Components コンポーネントは、最新のアクセシビリティガイドラインと仕様に従って実装されています。当社の Web Components コンポーネントは、OS またはブラウザーが提供するアクセシビリティ技術 (読み上げソフトウェア) を使用してテストされています。当社のチームは、ガイドラインが実装されていることを確認するだけでなく、視覚障害者に配信される実際のコンテンツが消費可能でユーザーフレンドリーであることを保証します。Ignite UI for Web Components データグリッドはキーボードアクセシビリティ、ARIA、明瞭なカラーパレットを提供します。詳しくについては、こちらをご覧ください。

列のグループ化、ピン固定、集計

Web Components Data Grid コンポーネントで列のグループ化、ピン固定、および集計機能が有効になっているデータのグリッド

組み込みの列[集計](grid/summaries.md)またはカスタム集計テンプレートをサポートし、マウス操作、タッチ、または API を介して列またはグループ列をグループ化します。インタラクティブな[列のピン固定](grid/column-pinning.md)、移動、ドラッグ、ソート操作に列をインタラクティブに[非表示](grid/column-hiding.md)または[移動](grid/column-moving.md)できます。

複数列ヘッダー

[複数列ヘッダー](grid/multi-column-headers.md)を有効にし、共通ヘッダーで列をグループ化できます。各列グループは、その他のグループや列と組み合わせることができ、ピン固定、グループ内でインタラクティブに列移動、グループのソートや非表示など多数の機能が使用できます。

Web Components Grid の機能

高速 Web Components Grid のダウンロード

ダウンロード
30 日間無償お試し版。クレジットカードは不要です。

Ignite UI for Web Components でサポートされているブラウザー

Web Components Data Grid は、すべての最新の Web ブラウザーでサポートされます。

Chrome
Edge / Edge Chromium
Firefox
Safari
ポリフィルを使用した Internet Explorer 11

Ignite UI for Web Components サポートオプション

Infragistics の Web Components 製品の受賞歴のあるサポートにアクセスするための複数のオプションがあります。

Web Components サポートホームページをご覧ください。
Web Components ドキュメントを読み、Web Components サンプルを試してください。
最新の情報は、Web Components ブログをご覧ください。
サポートケースの送信
Web Components 参照アプリケーションを試してください。

Ignite UI for Web Components 試用ライセンスおよび商用

Ignite UI for Web Components は、サブスクリプションモデルで利用可能な商用ライセンス製品です。Ignite UI for Web Components 製品は、30 日間トライアル版を無料でお試しいただけます。試用期間が終了したら、弊社 Web サイトからライセンスを購入するか、お住まいの地域の営業担当者にお問い合わせください。

FAQ

Infragistics Ignite UI for Web Components Data Grid を選択する理由とはなんですか？

数百万のレコードをロードできる仮想化された行と列
セル、行、および一括更新オプションを使用したインライン編集
Excel スタイルフィルタリングと Excel キーボードナビゲーション機能
インタラクティブな Outlook スタイルのようなグループ化
グリッドセルまたは列のデータに基づいた列集計
Excel へのエクスポート
行の高さとサイズ変更を調整するサイズ

Infragistics Ignite UI for Web Components Data Grid の価格について教えてください。

Web Components コンポーネントは、Ignite UI バンドルの一部として含まれています。価格の詳細については、価格ページを参照してください。

複数のプラットフォームでアプリケーションを開発する場合、WPF や Windows Forms などのデスクトッププラットフォーム、Web Components、Web コンポーネント、ASP.NET MVC、ASP.NET Core のすべての最新 Web ツールセットを含む完全なアプリ開発パッケージ Infragistics Ultimate を検討してください。

Infragistics Ignite UI for Web Components Data Grid コントロールを個別に購入できますか？

Web Components Data Grid を個別に購入することはできません。これは Ignite UI 製品バンドルの一部です。Ignite UI 製品バンドルは、Web Components、ASP.NET MVC、Web コンポーネント、ASP.NET Blazor などのすべての Web プラットフォームに対して、何百ものコントロール、コンポーネント、およびデータの視覚化を提供します。

Web Components と Infragistics Ignite UI for Web Components Data Grid コントロールのインストール方法を教えてください。

Web Components Data Grid の使用を開始するには、作業の開始ガイドの手順を実行してください。サンプルアプリケーションのライブラリも用意しています。サンプルライブラリは、Web Components 開発のベストプラクティスガイドです。

高速 Web Components データ グリッド