React Grid 行のピン固定

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

React Grid 行ピン固定の例

行のピン固定 UI

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

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

行のピン固定 API

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

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

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

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

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

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

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

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

ピン固定の位置

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

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

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

カスタム行ピン固定 UI

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

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

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

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

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

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

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

デモ

行のドラッグによる

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

デモ

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

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

Then set the related CSS properties for that class:

.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