React Grid 列ピン固定

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

React Grid 列ピン固定の例

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

列ピン固定の API

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

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

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

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

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

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

public columnPinning(event) {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}

ピン固定の位置

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

const pinningConfig = new IgrPinningConfig();
pinningConfig.columns = ColumnPinningPosition.End;

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

デモ

カスタム列ピン固定 UI

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

ツールバーの代わりに、エンドユーザーが特定の列のピンの状態を変更するためにクリックできる列ヘッダーにピンアイコンを定義するとします。

これは、カスタムアイコンを使用して列のヘッダーテンプレートを作成することで実行できます。

<IgrGrid autoGenerate="false" data={CustomersData} name="grid" ref={grid}>
    <IgrColumn field="ID" hidden="true"></IgrColumn>

    <IgrColumn field="CompanyName" header="Company" width="300px" 
    name="column1" headerTemplate={toggleColumnPin}></IgrColumn>

    <IgrColumn field="ContactName" header="Name" width="200px" pinned="true"
    name="column2" headerTemplate={toggleColumnPin}> </IgrColumn>

    <IgrColumn field="ContactTitle" header="Title" width="200px" pinned="true"
    name="column3" headerTemplate={toggleColumnPin}> </IgrColumn>
</IgrGrid>

function toggleColumnPin({ dataContext: ctx }: { dataContext: 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>
  );
}

デモ

ピン固定の制限

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

スタイル設定

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

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 リファレンス

その他のリソース

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