Premium

React Tree Grid 列ピン固定

React Tree Grid の Ignite UI for React 列のピン固定機能を使用すると、開発者は特定の列を希望の順序でロックできるため、ユーザーが IgrTreeGrid を水平方向にスクロールしている場合でも、常に可視性を確保できます。列ピン固定用の統合 UI があり、React Tree Grid ツールバーからアクセスできます。さらに、開発者は、列のピン状態を変更するカスタムユーザーインターフェイスを柔軟に構築できます。

React Tree Grid 列ピン固定の例

以下の例は、1 つまたは複数の列を IgrTreeGrid の左側または右側にピン固定する方法を示しています。

列ピン固定の API

列のピン固定は IgrColumn.pinned の Pinned プロパティによって制御されます。デフォルトでピン固定列は IgrTreeGrid の左側に固定して描画され、IgrTreeGrid 本体のピン固定されていない列は水平スクロールされます。

<IgrTreeGrid data={nwindData} autoGenerate={false}>
    <IgrColumn field="Name" pinned={true}></IgrColumn>
    <IgrColumn field="Phone" pinned={true}></IgrColumn>
    <IgrColumn field="Title"></IgrColumn>
</IgrTreeGrid>

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

gridRef.current.pinColumn('Title');
gridRef.current.unpinColumn('Name');

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

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

<IgrTreeGrid data={nwindData} autoGenerate={false}>
    <IgrColumn field="Name" pinned={true}></IgrColumn>
    <IgrColumn field="AthleteNumber"></IgrColumn>
    <IgrColumn field="TrackProgress"></IgrColumn>
</IgrTreeGrid>

ピン固定の位置

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

const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };

<IgrTreeGrid data={nwindData} autoGenerate={true} pinning={pinningConfig}></IgrTreeGrid>

デモ

両側の列のピン固定

各列のピン固定位置を個別に指定できるため、グリッドの両側に列をピン固定して利便性を高め、データセットの最適化を容易にすることができます。詳細については、以下のデモを参照してください。列をピン固定するには、ヘッダーをクリックして列を選択し、ツールバーに追加されたピン固定ボタンを使用するか、列を別のピン固定された列にドラッグします。

デモ

You can define your custom UI and change the pin state of the columns via the related API.

Let’s say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column’s pin state.

This can be done by creating a header template for the columns with a custom icon.

<IgrTreeGrid autoGenerate={false} data= ref={grid}>
    <IgrColumn field="Name" pinned={true}></IgrColumn>

    <IgrColumn field="Title" header="Title" width="300px" pinned={true}
    headerTemplate={toggleColumnPin}></IgrColumn>

    <IgrColumn field="Phone" header="Phone" width="200px"
    headerTemplate={toggleColumnPin}> </IgrColumn>

    <IgrColumn field="Age" header="Age" width="200px"
    headerTemplate={toggleColumnPin}></IgrColumn>
</IgrTreeGrid>

const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
  const togglePin = () => {
    const col = ctx.column;
    col.pinned = !col.pinned;
  }

  const col = ctx.column;

  return(
    <div>
      <span style={{ float: 'left' }}>{col.header}</span>
      <span style={{ float: 'right' }} onClick={() => togglePin()}>📌</span>
    </div>
  );
}

On click of the custom icon the pin state of the related column can be changed using the column’s API methods.

カスタム列ピン固定 UI

デモ

Setting column widths in percentage (%) explicitly makes the IgrTreeGrid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the IgrTreeGrid.

ピン固定の制限

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

<IgrTreeGrid id="grid"></IgrTreeGrid>

Then set the related CSS properties to this class:

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

スタイル設定

API リファレンス

IgrTreeGrid
IgrColumn

カスタムテーマの定義

Our community is active and always welcoming to new ideas.

React Tree Grid 列ピン固定