React Grid ツールバー

Ignite UI for React ツールバーは、React Grid の UI 操作用のコンテナーです。React ツールバーは React コンポーネントの一番上、つまり IgrGrid にあり、水平方向のサイズと一致します。ツールバー コンテナーは、任意のカスタム コンテンツまたは事前定義された UI コントロールのセットをホストできます。React Grid のデフォルト セットには次のものが含まれます。

• 列の非表示
• 列のピン固定
• Excel エクスポート
• 高度なフィルタリング

ツールバーと事前定義された UI コンポーネントは、React イベントをサポートし、開発者向けに API を公開します。

React ツールバー グリッドの例

事前定義された Actions および title UI コンポーネントが IgrGridToolbar 内に追加されます。これはすべて、対応するグリッド機能とのデフォルトのインタラクションを提供するツールバーを持つために必要です。

<IgrGrid>
    <IgrGridToolbar key="toolbar">
        <IgrGridToolbarTitle key="toolbarTitle">
            <span key="toolbarTitleText">Grid Toolbar<span>
        </IgrGridToolbarTitle>
        <IgrGridToolbarActions key="toolbarActions">
            <IgrGridToolbarAdvancedFiltering key="advancedFiltering"></IgrGridToolbarAdvancedFiltering>
            <IgrGridToolbarPinning key="pinning"></IgrGridToolbarPinning>
            <IgrGridToolbarHiding key="hiding"></IgrGridToolbarHiding>
            <IgrGridToolbarExporter key="export"></IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrGrid>

[!Note] 上記のコード スニペットに示されているように、事前定義された Actions UI コンポーネントは IgrGridToolbarActions にラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。

これらの UI はそれぞれ独立して追加することも、まったく追加しないこともできます。このようにして、ツールバー コンテナは空になります。

<IgrGrid>
    <IgrGridToolbar key="toolbar">
    </IgrGridToolbar>
</IgrGrid>

デフォルトの各 UI コンポーネントの詳細については、以下の機能セクションを読み続けてください。

機能

ツールバーは、グリッド全体に影響を与えるロジック/インタラクションを分離するのに最適です。

上記のように、制御、列の非表示、列のピン固定、高度なフィルタリング、およびグリッドからのデータのエクスポートのためのデフォルトのコンポーネントを提供するように構成できます。

これらの機能は、Ignite UI for React のカード コンポーネントと同様のパターンに従うことで、互いに独立して有効にできます。

以下にリストされているのは、ツールバーの主な機能と、それぞれのサンプル コードです。

Title (タイトル)

グリッドのツールバーのタイトルを設定するには、IgrGridToolbarTitle を使用します。

ユーザーは、単純なテキストからより複雑なテンプレートまで、どんなものでも提供できます。

<IgrGridToolbar key="toolbar">
    <IgrGridToolbarTitle key="toolbarTitle">
        <span key="toolbarTitleText">Grid toolbar title<span>
    </IgrGridToolbarTitle>
</IgrGridToolbar>

操作

IgrGridToolbarActions は、ユーザーが親グリッドに関連して操作 / インタラクションを配置できる特定のコンテナを公開します。 ツールバーのタイトル部分と同様に、ユーザーは、デフォルトのツールバー インタラクション コンポーネントを含め、そのテンプレート部分内にどんなものでも提供できます。

<IgrGridToolbar key="toolbar">
    <IgrGridToolbarActions key="toolbarActions">

    </IgrGridToolbarActions>
</IgrGridToolbar>

列のピン固定

IgrGridToolbarPinning は、グリッド内の列のピン固定を操作するためのデフォルトの UI を提供します。

コンポーネントは、ツールバーを含む親グリッドと、コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするためのいくつかの入力プロパティを使用して、そのまま動作します。

<IgrGridToolbar key="toolbar">
    <IgrGridToolbarActions key="toolbarActions">
        <IgrGridToolbarPinning key="pinning" title="Grid pinned columns" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarPinning>
    </IgrGridToolbarActions>
</IgrGridToolbar>

列の非表示

IgrGridToolbarHiding は、列非表示を操作するためのデフォルトの UI を提供します。コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするための同じ入力プロパティを公開します。

<IgrGridToolbar key="toolbar">
    <IgrGridToolbarActions key="toolbarActions">
        <IgrGridToolbarHiding key="hiding" title="Grid column hiding" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarHiding>
    </IgrGridToolbarActions>
</IgrGridToolbar>

高度なフィルタリング

ツールバーの高度なフィルタリング コンポーネントは、高度なフィルタリング機能のデフォルトの UI を提供します。コンポーネントは、ボタンのデフォルトのテキストを変更する方法を公開します。

<IgrGridToolbar key="toolbar">
    <IgrGridToolbarActions key="toolbarActions">
        <IgrGridToolbarAdvancedFiltering key="advancedFiltering"></IgrGridToolbarAdvancedFiltering>
    </IgrGridToolbarActions>
</IgrGridToolbar>

データのエクスポート

残りのツールバー操作と同様に、エクスポートは、すぐに使用できる IgrGridToolbarExporter を介して提供されます。

ツールバー エクスポーター コンポーネントは、UI とエクスポート エクスペリエンスの両方をカスタマイズするためのいくつかの入力プロパティを公開します。

これらは、表示テキストの変更から、ドロップダウンのオプションの有効化/無効化、生成されたファイルの名前のカスタマイズまで多岐にわたります。完全なリファレンスについては、ToolbarExporter の API ヘルプを参照してください。

これは、React テンプレートを介してカスタマイズできるいくつかのオプションを示すスニペットです。

<IgrGridToolbar key="toolbar">
    <IgrGridToolbarActions key="toolbarActions">
        <IgrGridToolbarExporter key="export" exportCSV="true" exportExcel="true" filename="exported_data"></IgrGridToolbarExporter>
    </IgrGridToolbarActions>
</IgrGridToolbar>

エクスポートされたファイル名を変更することに加えて、ユーザーは ToolbarExporting イベントを待機し、イベント プロパティのオプション エントリをカスタマイズすることで、エクスポーター オプションをさらに構成できます。

[!Note] デフォルトで CSV にエクスポートした際にエクスポーターがカンマ区切りセパレーターを使用してエクスポートし、出力ファイルに .csv 拡張しを使用します。 エクスポーターのイベントにサブスクライブまたはエクスポーター オプション フィールドの値を変更して、エクスポート パラメーターをカスタマイズできます。 またイベント引数のキャンセル フィールドを true に設定してエクスポートをキャンセルすることもできます。

次のコード スニペットは、ツールバーのエクスポート イベントのサブスクライブとエクスポーター オプションの構成を示しています。

function configureExport(evt: IgrGridToolbarExportEventArgs) {
    const args = evt.detail;
    const options: IgrExporterOptionsBase = args.options;

    options.fileName = `Report_${new Date().toDateString()}`;
    (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
            columnArgs.cancel = columnArgs.header === 'Athlete' || columnArgs.header === 'Country';
    });
}

<IgrGrid toolbarExporting={configureExport}>
</IgrGrid>

以下のサンプルは、エクスポート ファイルをカスタマイズする方法を示します。

エクスポート インジケーター

デフォルトのツールバー エクスポーター コンポーネントを使用する場合、エクスポート操作が行われると、操作の進行中にツールバーに進行状況インジケーターが表示されます。

さらに、ユーザーはツールバーの ShowProgress プロパティを設定して、自分の長時間実行操作に使用するか、グリッドで実行されている操作を示す別の方法として使用できます。

以下のサンプルでは、プログレス バーが表示されるようにデータのエクスポートに必要な時間を増やすために、大量のデータを使用しています。さらに、グリッドで長時間実行される操作をシミュレートする別のボタンがあります。

スタイル設定

定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

<IgrGrid className="grid"></IgrGrid>

次に、そのクラスに関連する CSS プロパティを設定します。

.grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}

デモ

API リファレンス

以下は、Grid Toolbar サービスのその他の API です。

• IgrGridToolbarAdvancedFiltering

• IgrGridToolbar

• IgrGridToolbarExporter

• IgrGridToolbarHiding

• IgrGridToolbarPinning

• IgrGridToolbarTitle

• IgrGrid イベント:

• ToolbarExporting

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)