Premium

React Hierarchical Grid 複数列ヘッダーの概要

React Hierarchical Grid の Ignite UI for React 複数列ヘッダー機能は、共通の複数ヘッダーの下に配置することで列をグループ化できます。IgrHierarchicalGrid の各複数ヘッダーグループは、その他のグループや列を組み合わせて表示できます。この機能は、水平方向のスクロールが面倒な大規模なデータセットを扱う場合に特に役立ちます。

React Hierarchical Grid 複数列ヘッダーの例

複数列ヘッダーの宣言は、一連の列を IgrColumnGroup コンポーネントにラップし、Header タイトル情報を渡すことによって実現されます。

<IgrHierarchicalGrid autoGenerate={false} data={hierarchicalCustomers} ref={hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID" moving={true} allowFiltering={true}>
    <IgrColumn sortable={true} resizable={true} field="CustomerID" dataType="string"></IgrColumn>
    <IgrColumnGroup header="Address Information">
        <IgrColumnGroup header="Location">
            <IgrColumn sortable={true} resizable={true} field="Address" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="City" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="PostalCode" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="Country" dataType="string"></IgrColumn>
        </IgrColumnGroup>
        <IgrColumnGroup header="Contact Information">
            <IgrColumn sortable={true} resizable={true} field="Phone" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="Fax" dataType="string"></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrHierarchicalGrid>

ネストしたヘッダーの n-th レベルは、上記の宣言に従います。したがって、IgrColumnGroup をネストすることで、望ましい結果が得られます。

<IgrHierarchicalGrid autoGenerate={false} data={hierarchicalCustomers} ref={hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID" moving={true} allowFiltering={true}>
    <IgrColumn sortable={true} resizable={true} field="CustomerID" dataType="string"></IgrColumn>
    <IgrColumnGroup header="General Information">
        <IgrColumn sortable={true} resizable={true} field="CompanyName" dataType="string"></IgrColumn>
        <IgrColumnGroup header="Person Details">
            <IgrColumn sortable={true} resizable={true} field="ContactName" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="ContactTitle" dataType="string"></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrHierarchicalGrid>

すべての IgrColumnGroup は、移動、ピン固定、および非表示をサポートしています。

列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。具体的には、ネストされた column groups または columns ごとのピン固定は許可されていません。
columns と column groups 間の移動は、それらが階層内の同じレベルにあり、両方が同じ group にある場合にのみ許可されます。
columns/column-groups が現在の group によってラップされていない場合 (一番上のレベル columns の場合)、表示されている列全体の間で移動が許可されます。

<IgrHierarchicalGrid autoGenerate={false} data={hierarchicalCustomers} ref={hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID" moving={true} allowFiltering={true}>
    <IgrColumn sortable={true} resizable={true} movable={true} pinned={true} field="CustomerID" dataType="string"></IgrColumn>
    <IgrColumnGroup movable={true} pinned={true} header="General Information">
        <IgrColumn sortable={true} resizable={true} field="CompanyName" dataType="string"></IgrColumn>
        <IgrColumnGroup header="Person Details">
            <IgrColumn sortable={true} resizable={true} field="ContactName" dataType="string"></IgrColumn>
            <IgrColumn sortable={true} resizable={true} field="ContactTitle" dataType="string"></IgrColumn>
        </IgrColumnGroup>
    </IgrColumnGroup>
</IgrHierarchicalGrid>

複数列ヘッダーテンプレート

<IgrColumnGroup header="Contact Information" headerTemplate={groupHeaderTemplate}></IgrColumnGroup>

const groupHeaderTemplate = (e: IgrColumnTemplateContext) => {
  const column = e.column as IgrColumnGroup;
    return (
      <div>
        <span style={{ float: "left" }}>{column.header.toUpperCase()}</span>
      </div>
    );
}

ヘッダーが再テンプレート化され、対応する列グループが移動可能な場合は、テンプレート要素で draggable 属性を false に設定する必要があり、これにより適用されるイベントをすべて処理できます。

const columnHeaderTemplate = (e: IgrColumnTemplateContext ) => {
  const column = e.column as IgrColumnGroup;
    return (
      <span onClick={onClick}>
        <IgrIcon data-draggable="false"></IgrIcon>
      </span>
    );
}

次のサンプルは、ヘッダーテンプレートを使用して折りたたみ可能な列グループを実装する方法を示しています。

スタイル設定

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

<IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>

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

<IgrHierarchicalGrid class="grid"></IgrHierarchicalGrid>

デモ

API リファレンス

IgrHierarchicalGrid
IgrColumn
IgrColumnGroup

その他のリソース

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