React Tree Grid 行のピン固定

React Tree Grid の Ignite UI for React 行ピン固定機能を使用すると、1 つまたは複数の行をグリッドの上部または下部にピン固定できます。行ピン固定を使用すると、エンドユーザーは特定の順序で行をピン固定し、IgrTreeGrid を垂直にスクロールしても常に表示される特別な領域に行を複製できます。React Tree Grid には組み込みの行ピン固定 UI が含まれており、Tree Grid のコンテキストで IgrActionStrip コンポーネントを初期化することで有効になります。その他、カスタム UI を定義し、行のピン固定 API を介して行のピン固定状態を変更できます。

React Tree Grid 行ピン固定の例

行のピン固定 UI

組み込みの行ピン固定 UI は、IgrGridPinningActions コンポーネントと IgrActionStrip コンポーネントを追加することで有効になります。アクション ストリップは、行にカーソルを合わせると自動的に表示され、表示されている行の状態に基づいてピン固定またはピン固定解除ボタンのアイコンが表示されます。ピン固定された行のコピーをビューにスクロールする追加のアクションがピン固定された行ごとに表示されます。

<IgrTreeGrid>
    <IgrColumn field="Country" header="Country"> </IgrColumn>
    <IgrActionStrip>
        <IgrGridPinningActions></IgrGridPinningActions>
        <IgrGridEditingActions></IgrGridEditingActions>
    </IgrActionStrip>
</IgrTreeGrid>

行のピン固定 API

行のピン固定は Row の Pinned 入力によって制御されます。デフォルトでピン固定行は IgrTreeGrid の上側に固定して描画され、IgrTreeGrid 本体のピン固定されていない行は垂直スクロールされます。

gridRef.current.getRowByIndex(0).pinned = true;

IgrTreeGrid の PinRow または UnpinRow メソッドを使用して ID によって行をピン固定またはピン固定解除できます。

gridRef.current.pinRow('ALFKI');
gridRef.current.unpinRow('ALFKI');

注: 行の ID は、グリッドの PrimaryKey またはレコード インスタンス自体によって定義される主キー値です。両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に行がすでにその状態になっていることがあります。

行は、最後にピンされた行の下にピン固定されます。ピン固定行の順序を変更するには、RowPinning イベントでイベント引数の InsertAtIndex プロパティを適切な位置インデックスに変更します。

const rowPinning = (event: IgrPinRowEventArgs) => {
    event.detail.insertAtIndex = 0;
}

<IgrTreeGrid autoGenerate={true} onRowPinning={rowPinning}>
</IgrTreeGrid>

ピン固定の位置

Pinning 設定オプションを使用して、行のピン固定の位置を変更できます。ピン固定の位置を Top または Bottom のいずれかに設定できます。 Bottom に設定すると、行がピン固定されていない行の後に、グリッドの一番下にレンダリングされます。ピン固定されていない行は垂直にスクロールできますが、ピン固定された行は下側に固定されます。

const pinning: IgrPinningConfig = { rows : RowPinningPosition.Bottom };

<IgrTreeGrid ref={gridRef} autoGenerate={true} pinning={pinning}>
</IgrTreeGrid>

カスタム行ピン固定 UI

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

アイコン付きの追加の列による

アクション ストリップの代わりに、すべての行にピンのアイコンを表示し、エンドユーザーが特定の行のピン状態をクリックして変更できます。 カスタム アイコンを含むセル テンプレートの列を追加することで実行できます。

const cellPinCellTemplate = (ctx: IgrCellTemplateContext) => {
    const index = ctx.cell.row.index;
    return (
        <>
            <span onPointerDown={(e: any) => toggleRowPin(index)}>📌</span>
        </>
    );
}

<IgrTreeGrid primaryKey="ID" autoGenerate={false}>
    <IgrColumn width="70px" bodyTemplate={cellPinCellTemplate}>
    </IgrColumn>
</IgrTreeGrid>

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

const toggleRowPin = (index: number) => {
  const grid = grid1Ref.current;
  grid.getRowByIndex(index).pinned = !grid.getRowByIndex(index).pinned;
}

デモ

行のドラッグによる

ピン状態を変更するために、ピン固定された行とピン固定されていない行の間に直接行をドラッグアンドドロップできるようにするとします。 これは、行のドラッグ機能を有効にし、ドロップの際に API で行をピン固定/ピン固定解除することで実現できます。

デモ

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

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

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

.grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-style: double;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

行ピン固定の制限

API リファレンス

その他のリソース

コミュニティは常に新しいアイデアを歓迎しています。

• Ignite UI for React フォーラム
• Ignite UI for React GitHub