React Tree Grid ツールバー

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

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

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

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

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

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

    <IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate="true">
    <IgrGridToolbar key="toolbar">
        <IgrGridToolbarTitle key="toolbarTitle">
            <span key="toolbarTitleText">Tree 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>
</IgrTreeGrid>
tsx

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

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

    <IgrTreeGrid data={data} primaryKey="ID" foreignKey="ParentID" autoGenerate="true">
    <IgrGridToolbar key="toolbar">
    </IgrGridToolbar>
</IgrTreeGrid>
tsx

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

    機能

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

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

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

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Title (タイトル)

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

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

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

    操作

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

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

    </IgrGridToolbarActions>
</IgrGridToolbar>
tsx

    列のピン固定

    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>
tsx

    列の非表示

    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>
tsx

    高度なフィルタリング

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

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

    データのエクスポート

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

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

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

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

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

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

    デフォルトで 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 === 'Name';
    });
}

<IgrTreeGrid toolbarExporting={configureExport}>
</IgrTreeGrid>
tsx

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Ignite UI for React | CTA Banner

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

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

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

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    スタイル設定

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

    <IgrTreeGrid className="grid"></IgrTreeGrid>
tsx

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

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

    デモ

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    API リファレンス

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

    その他のリソース

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