React Grid 複数列ヘッダーの概要
React Grid の Ignite UI for React 複数列ヘッダー機能は、共通の複数ヘッダーの下に配置することで列をグループ化できます。IgrGrid
の各複数ヘッダー グループは、その他のグループや列を組み合わせて表示できます。この機能は、水平方向のスクロールが面倒な大規模なデータセットを扱う場合に特に役立ちます。
React Grid 複数列ヘッダーの例
複数列ヘッダーの宣言は、一連の列を IgrColumnGroup
コンポーネントにラップし、IgrHeader
タイトル情報を渡すことによって実現されます。
<IgrGrid allowFiltering="true">
<IgrColumnGroup header="Contact Information">
<IgrColumn sortable="true" resizable="true" field="Phone"></IgrColumn>
<IgrColumn sortable="true" resizable="true" field="Fax"></IgrColumn>
<IgrColumn sortable="true" resizable="true" field="PostalCode"></IgrColumn>
</IgrColumnGroup>
</IgrGrid>
ネストしたヘッダーの n-th
レベルは、上記の宣言に従います。したがって、IgrColumnGroup
をネストすることで、望ましい結果が得られます。
<IgrGrid height="600px" allowFiltering="true">
<IgrColumnGroup header="General Information">
<IgrColumn movable="true" sortable="true" resizable="true" field="CompanyName"></IgrColumn>
<IgrColumnGroup movable="true" header="Person Details">
<IgrColumn movable="true" pinned="false" sortable="true" resizable="true" field="ContactName"></IgrColumn>
<IgrColumn movable="true" sortable="true" resizable="true" field="ContactTitle"></IgrColumn>
</IgrColumnGroup>
</IgrColumnGroup>
</IgrGrid>
すべての IgrColumnGroup
は、移動、ピン固定、および非表示をサポートしています。
[!Note] 列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。具体的には、ネストされた column groups または columns ごとのピン固定は許可されていません。
columns と column groups 間の移動は、それらが階層内の同じレベルにあり、両方が同じgroup
にある場合にのみ許可されます。
columns/column-groups
が現在のgroup
によってラップされていない場合 (一番上のレベルcolumns
の場合)、表示されている列全体の間で移動が許可されます。
<IgrGrid height="600px" allowFiltering="true">
<IgrColumnGroup movable="true" pinned="true" header="General Information">
<IgrColumn movable="true" sortable="true" resizable="true" field="CompanyName"></IgrColumn>
</IgrColumnGroup>
<IgrColumn sortable="true" resizable="true" field="Phone"></IgrColumn>
<IgrColumn sortable="true" resizable="true" field="Fax"></IgrColumn>
<IgrColumn sortable="true" resizable="true" field="PostalCode"></IgrColumn>
</IgrGrid>
複数列ヘッダー テンプレート
<IgrColumnGroup header="Contact Information" headerTemplate={groupHeaderTemplate}></IgrColumnGroup>
function groupHeaderTemplate(e: { dataContext: IgrColumnTemplateContext }) {
const column = e.dataContext.column as IgrColumnGroup;
return (
<div>
<span style={{ float: "left" }}>{column.header.toUpperCase()}</span>
</div>
);
}
[!Note] ヘッダーが再テンプレート化され、対応する列グループが移動可能な場合は、テンプレート要素で draggable 属性を false に設定する必要があり、これにより適用されるイベントをすべて処理できます。
function columnHeaderTemplate(e: { dataContext: IgrColumnTemplateContext }) {
const column = e.dataContext.column as IgrColumnGroup;
return (
<span onClick={onClick}>
<IgrIcon data-draggable="false"></IgrIcon>
</span>
);
}
次のサンプルは、ヘッダー テンプレートを使用して折りたたみ可能な列グループを実装する方法を示しています。
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgrGrid className="grid"></IgrGrid>
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-header-background: #e0f3ff;
--ig-grid-header-text-color: #e41c77;
--ig-grid-header-border-width: 1px;
--ig-grid-header-border-style: solid;
--ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。