Angular Pivot Grid 列ピン固定

    単一または複数の列を Angular UI グリッドの左端にピン固定できます。Ignite UI for Angular の列固定は、ユーザーが特定の列順序で列をロックすることを可能にし、Pivot Grid で水平スクロール時にロックされた列が常に表示されます。Material UI Grid には組み込みの列ピン固定 UI があり、Pivot Grid のツールバーで列の表示状態を変更できます。その他、カスタム UI を定義し、Column Pinning API を介して列のピン固定状態を変更できます。

    Angular Pivot Grid 列ピン固定の例

    列固定 API

    列ピン固定は、igx-column の pinned 入力によって制御されます。ピン固定列は常に Pivot Grid の左側に描画され、Pivot Grid 本体のピン固定されていない列の水平スクロールで固定されます。

    IgxPivotGridComponent の Pivot Grid の pinColumn または unpinColumn メソッドを使用してフィールド名によって列をピン固定またはピン固定解除できます。

    両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因として列がすでにそのステートになっていることがあります。

    列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、columnPin イベントでイベント引数の insertAtIndex プロパティを適切な位置インデックスに変更します。

    ピン固定の位置

    pinning 設定オプションを使用して、列のピン固定の位置を変更できます。列の位置を Start または End のいずれかに設定できます。End に設定すると、列がピン固定されていない列の後に、グリッドの最後にレンダリングされます。 ピン固定されていない列は水平にスクロールできますが、ピン固定された列は右側に固定されます。

    public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };

    デモ

    カスタム列ピン固定 UI

    カスタム UI を定義し、関連する API を介して列のピン状態を変更できます。

    ツールバーの代わりに、エンドユーザーが特定の列のピンの状態を変更するためにクリックできる列ヘッダーにピンアイコンを定義するとします。 これは、カスタムアイコンを使用して列のヘッダーテンプレートを作成することで実行できます。

    カスタムアイコンをクリックすると、関連する列のピン状態は、列の API メソッドを使用して変更できます。

    public toggleColumn(col: ColumnType) {
    col.pinned ? col.unpin() : col.pin();
}

    デモ

    ピン固定の制限

    • 列幅をパーセンテージ (%) で設定した場合にピン固定列があると Pivot Grid 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、Pivot Grid によって自動的に割り当てる必要があります。

    API リファレンス

    その他のリソース

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