React Grid の列非表示

Ignite UI for React には組み込み列非表示 UI があり、これを React Grid のツールバーから使用して列の表示状態を変更できます。開発者は、必要に応じてページ内の任意の場所に列非表示 UI を柔軟に定義できます。React Grid 列の非表示機能は、グリッドのサイズを小さくし、冗長なフィールドをタブで移動する必要をなくしたい場合に特に便利です。

React Grid 列非表示の例

Grid のセットアップ

IgrGrid を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。

<IgrGrid autoGenerate="false" width="100%" height="560px" allowFiltering="true">
    <IgrColumn field="ID" dataType="string" sortable="true" hidden="true"></IgrColumn>
    <IgrColumn field="ContactName" dataType="String" sortable="true" hidden="true"></IgrColumn>
    <IgrColumn field="ContactTitle" dataType="string" sortable="true"></IgrColumn>
    <IgrColumn field="City" dataType="string" sortable="true"></IgrColumn>
    <IgrColumn field="CompanyName" dataType="string" sortable="true"></IgrColumn>
    <IgrColumn field="Fax" dataType="string" sortable="true"></IgrColumn>
    <IgrColumn field="Address" dataType="string" sortable="true"></IgrColumn>
    <IgrColumn field="PostalCode" dataType="string" sortable="true"></IgrColumn>
    <IgrColumn field="Country" dataType="string" sortable="true"></IgrColumn>
    <IgrColumn field="Phone" dataType="string" sortable="true"></IgrColumn>
</IgrGrid>

ツールバーの列非表示 UI

定義済みの列非表示 UI は、IgrGrid のツールバーの DropDown 内に配置されます。列非表示の UI をこのドロップダウンを使用して表示/非表示にできます。

これには、IgrGrid 内に IgrGridToolbarActions と IgrGridToolbarHiding の両方を設定することだけです。ツールバーにタイトルを追加するには、IgrGridToolbarTitle を設定し、Grid のラッパーにカスタムスタイルを設定します。

<IgrGrid>
    <IgrGridToolbar key="toolbar">
        <IgrGridToolbarActions key="toolbarActions">
            <IgrGridToolbarHiding key="toolbarHiding"></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrGrid>

IgrGrid にはツールバーの列非表示 UI に便利なプロパティがあります。

title プロパティを使用して、ツールバーのドロップダウンボタンに表示されるタイトルを設定します。

<IgrGrid>
    <IgrGridToolbar key="toolbar">
        <IgrGridToolbarActions key="toolbarActions">
            <IgrGridToolbarHiding key="toolbarHiding" title="Column Hiding"></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrGrid>

このトピックのはじめにあるコードの結果は React 列非表示の例のセクションで確認できます。

列の非表示の無効化

列の disableHiding プロパティを true に設定すると、ユーザーが列非表示 UI によって列を非表示にできません。

<IgrGrid>
    <IgrColumn field="ContactName" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
    <IgrColumn field="ContactTitle" dataType="string" sortable="true" disableHiding="true"></IgrColumn>
</IgrGrid>

スタイル設定

グリッドは、利用可能な CSS 変数の一部を設定することでさらにカスタマイズできます。これを実現するために、最初にグリッドに割り当てるクラスを使用します。

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

次に、関連するコンポーネントに関連する CSS 変数を設定します。スタイルも igx-column-actions にのみ適用するので、グリッドの残りの部分は影響を受けません。

.grid  igx-column-actions {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}

デモ

API リファレンス

このトピックでは、IgrGrid のツールバーの定義済みの列非表示 UI の使用方法について学びました。以下は、列非表示 UI のその他の API です。

ColumnActionsComponent

その他のコンポーネント (またはそのいずれか) で使用した API:

IgrColumn プロパティ:

disableHiding

IgrGridToolbar プロパティ:

showProgress

IgrGridToolbar メソッド:

IgrGrid イベント:

ColumnVisibilityChanged

その他のリソース

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