FlexGridCellTemplateコンポーネントはFlexGrid の特定のセルタイプ用のテンプレートを定義します。 テンプレートの要素には、{@link wijmo.react.grid.CellTemplateType}を指定するcellTypeプロパティ を含める必要があります。 テンプレートのセル型に応じて、 wj-flex-grid-cell-template ディレクティブはwijmo.react.grid.FlexGrid or wijmo.react.grid.FlexGridColumnコンポーネントの子にする必要があります。

列固有のセルテンプレートは wj-flex-grid-columnコンポーネントに含める必要があり、 列固有でないセル（行ヘッダセルや左上セルなど）のテンプレートは wj-flex-grid コンポーネントに含める必要があります。

セルのコンテンツは、template render prop, を使用して定義されます。これは、セルのコンテンツを表す仮想要素ツリーを返すレンダー関数を受け取ります。 この関数には、特定の各セルのデータ コンテキストが渡されるcontextパラメーターが含まれています。これは、col, rowおよびitem プロパティを持つオブジェクトです。 これらは、セルに関連する Column, RowおよびRow.dataItem オブジェクトを参照します。

Group や CellEditなどのセル型では、書式設定されていないセル値を含む value変数も提供されます。 たとえば、以下のFlexGridコントロールには行ヘッダ用のテンプレートと Country列の通常セルおよび列ヘッダセル用のテンプレートが設定されています。

<!-- component.html -->
<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
  cellType="RowHeader"
  template={ (context) => context.row.index + 1 } />
  <wjGrid.FlexGridCellTemplate
  cellType="RowHeaderEdit"
  template={ (context) => '...' } />

  <wjGrid.FlexGridColumn header="Country" binding="country">
<wjGrid.FlexGridCellTemplate
  cellType="ColumnHeader"
  template={ (context) => {
  return <React.Fragment>
  <img src="resources/globe.png" />
  {context.col.header}
  </React.Fragment>
              }
          }
     />
<wjGrid.FlexGridCellTemplate
  cellType="Cell"
  template={ (context) => {
  return <React.Fragment>
 <img src={`resources/${context.item.country}.png`} />
 {context.item.country}
  </React.Fragment>
          } }
      />
  </wjGrid.FlexGridColumn>
  <wjGrid.FlexGridColumn header="Sales" binding="sales"></wjGrid.FlexGridColumn>
</wjGrid.FlexGrid>

FlexGridCellTemplate ディレクティブは以下の属性をサポートしています。

cellType

テンプレートを適用するセル型を定義する CellTemplateType 値。

autoSizeRows

セルテンプレートがセルのコンテンツに合わせてグリッドのデフォルトの行の高さを増やすかどうかを示します。 デフォルトはtrueです。

cellOverflow

セルの style.overflow プロパティの値を定義します。

forceFullEdit

セル編集テンプレートでは、編集がどのように開始されたかにかかわらず、 セル編集が完全編集モードで強制的に開始するかどうかを示します。 完全編集モードでは、 カーソルキーを押しても編集が終了しません。 デフォルトはtrueです。

cellType> 属性には以下のいずれかの列挙値を指定します。

Cell

通常の（データ）セル用のテンプレートを定義します。wijmo.react.grid.FlexGridColumn ディレクティブの子にする必要があります。 たとえば、以下のセルテンプレートはCountry列のセルに国旗を表示します。

<wjGrid.FlexGridColumn header="Country" binding="country">
  <wjGrid.FlexGridCellTemplate
  cellType="Cell"
  template={ (context) => {
  return <React.Fragment>
 <img src={`resources/${context.item.country}.png`} />
 {context.item.country}
  </React.Fragment>
      }
   }
  />
階層的な <a href="wijmo_react_grid.html#flexgrid">FlexGrid</a> （すなわち、<b>childItemsPath</b> プロパティ が指定されているグリッド）では、
   <b>Group</b> テンプレートが提供されていない場合、 この <a href="../classes/wijmo_grid.column.html">Column</a> のグループ行に含まれるヘッダ以外のセルにもこのテンプレートが適用されます。

<b>CellEdit</b>

編集モードのセル用のテンプレートを定義します。wijmo.react.grid.FlexGridColumnディレクティブの子にする必要があります。
このセル型では、追加の <b>context.value</b>プロパティを使用できます。 このプロパティには編集前のセル値が格納され、編集後は値が更新されます。
たとえば、 以下のテンプレートは"Sales"列のエディタとしてWijmo <a href="../classes/wijmo_input.inputnumber.html">InputNumber</a> コントロールを使用します。
```html
<wjGrid.FlexGridColumn header="Sales" binding="sales">
  <wjGrid.FlexGridCellTemplate
  cellType="CellEdit"
  template={ (context) => {
   return <wjInput.InputNumber
   step={1}
   value={context.value}
   valueChanged={(inpNum: wjcInput.InputNumber) =>
   context.value = inpNum.value
   } />
           }
      }
  />
</wjGrid.FlexGridColumn>

ColumnHeader

列ヘッダセル用のテンプレートを定義します。@link wijmo.react.grid.FlexGridColumn}コンポーネントの子にする必要があります。 たとえば、以下のテンプレートは"Country"列のヘッダに画像を追加します。

<wjGrid.FlexGridColumn header="Country" binding="country">
  <wjGrid.FlexGridCellTemplate
cellType="ColumnHeader"
template={ (context) => {
return <React.Fragment>
<img src="resources/globe.png" />
{context.col.header}
</React.Fragment>
            }
        }
  />
</wjGrid.FlexGridColumn>

RowHeader

行ヘッダセル用のテンプレートを定義します。 wijmo.react.grid.FlexGrid コンポーネントの子にする必要があります。 たとえば、以下のテンプレートは行ヘッダに行インデックスを表示します。

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
  cellType="RowHeader"
  template={ (context) => context.row.index + 1 } />
</wjGrid.FlexGrid>

このテンプレートは、編集モードにある行の行ヘッダセルにも適用されます。 編集モードの行ヘッダセルに別のコンテンツを提供するには、 RowHeaderEdit テンプレートを定義します。

RowHeaderEdit

編集モードの行ヘッダセル用のテンプレートを定義します。 wijmo.react.grid.FlexGrid コンポーネントの子にする必要があります。 たとえば、 以下のテンプレートは編集中の行のヘッダに点を表示します。

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
  cellType="RowHeaderEdit"
  template={ (context) => '...' } />
</wjGrid.FlexGrid>

RowHeader テンプレートを適用するセルに標準の編集モードインジケーターを追加するには、 以下の RowHeaderEdit テンプレートを使用します。

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
  cellType="RowHeaderEdit"
  template={ (context) => '\u270e\ufe0e' } />
</wjGrid.FlexGrid>

TopLeft

左上セル用のテンプレートを定義します。 wijmo.react.grid.FlexGridコンポーネントの子にする必要があります。 たとえば、 以下のテンプレートはグリッドの左上セルに右下向きの矢印を表示します。

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
  cellType="TopLeft"
  template={ (context) => {
  return <span class="wj-glyph-down-right"></span>
      } }
  />
</wjGrid.FlexGrid>

GroupHeader

GroupRow のグループヘッダセル用のテンプレートを定義します。wijmo.react.grid.FlexGridColumn コンポーネントの子にする必要があります。

row 変数には、 GroupRow クラスのインスタンスが格納されます。 グループ化が CollectionView に由来する場合、 item 変数は CollectionViewGroup オブジェクトを参照します。

たとえば、以下のテンプレートは展開/折りたたみ状態を切り替えるためにチェックボックス要素を使用します。

<wjGrid.FlexGridColumn header="Country" binding="country">
  <wjGrid.FlexGridCellTemplate
  cellType="GroupHeader"
  template={ (context) => {
 return <React.Fragment>
   <input type="checkbox"
   checked={context.row.isCollapsed}
   onChange={e =>
   context.row.isCollapsed = e.target.checked as boolean
   } />
   {context.item.name} ({context.item.items.length} items)
 </React.Fragment>
         }
       }
  />
</wjGrid.FlexGridColumn>

Group GroupRow の通常のセル（グループヘッダ以外のセル）用のテンプレートを定義します。 wijmo.react.grid.FlexGridColumn コンポーネントの子にする必要があります。このセルタイプでは、追加の value 変数を使用できます。 列に aggregate プロパティが指定されている場合、 value変数には書式設定されていない集計値が格納されます。

たとえば、以下のテンプレートは"Sales"列のグループ行のセルに集計値と集計の種類を表示します。

<wjGrid.FlexGridColumn header="Sales" binding="sales" aggregate="Avg">
  <wjGrid.FlexGridCellTemplate
  cellType="Group"
  template={ (context) => {
 return <React.Fragment>
   Average: {wjcCore.Globalize.formatNumber(context.value, 'N0')}
 </React.Fragment>
         }
       }
  />
</wjGrid.FlexGridColumn>
<b>ColumnFooter</b>

<b>columnFooters</b> パネル内の通常のセルのテンプレートを定義します。
wijmo.react.grid.FlexGridColumn コンポーネント の子にする必要があります。 このセルタイプでは、セル値を含むバインディン用に追加の <b>value</b>
プロパティを使用できます。

たとえば、以下のテンプレートは"Sales"列のフッターのセルに集計値と集計の種類を表示します。
```html
<wjGrid.FlexGridColumn header="Sales" binding="sales" aggregate="Avg">
  <wjGrid.FlexGridCellTemplate
  cellType="ColumnFooter"
  template={ (context) => {
 return <React.Fragment>
   Average: {wjcCore.Globalize.formatNumber(context.value, 'N0')}
 </React.Fragment>
         }
       }
  />
</wjGrid.FlexGridColumn>

BottomLeft 左下のセルのテンプレートを定義します（行ヘッダーと列フッターが交差する位置にあるセル）。 wijmo.react.grid.FlexGrid コンポーネントの子にする必要があります。 たとえば、このテンプレートは、グリッドの左下のセルにシグマの矢印を表示します。

<wjGrid.FlexGrid itemsSource={this.state.data}>
  <wjGrid.FlexGridCellTemplate
  cellType="BottomLeft"
  template={(context) => <span>&#931;</span>} />
</wjGrid.FlexGrid>

NewCellTemplate

新しい行テンプレートのセルを定義します。 wijmo.react.grid.FlexGridColumn コンポーネントの子にする必要があります。 このセル型では、 cell.item プロパティはundefinedです。 たとえば、次のセルテンプレートは、「new row」項目の日付列のセルに対してプレースホルダーを示しています。

<wjGrid.FlexGridColumn header="Date" binding="date">
  <wjGrid.FlexGridCellTemplate
  cellType="NewCellTemplate"
  template={ (context) => 'ここに日付を入力してください' } />
</wjGrid.FlexGridColumn>

flex-grid-column コンポーネントは、 wijmo.react.grid.FlexGrid コンポーネントに含まれている必要があります。 flex-grid-column コンポーネントには、 wijmo.react.grid.FlexGridCellTemplate子コンポーネントが含まれる場合があります。 本コンポーネントでは、純粋なJavaScript wijmo.grid.Columnコントロールのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

flex-grid-column-group コンポーネントは、 wijmo.react.grid.FlexGrid または、 wijmo.react.grid.FlexGridColumnGroup. コンポーネントに含まれている必要があります。 flex-grid-column-groupコンポーネントには、 wijmo.react.grid.FlexGridColumnGroup とwijmo.react.grid.FlexGridCellTemplate.子コンポーネントが含まれる場合があります。 本コンポーネントでは、純粋なJavaScriptwijmo.grid.ColumnGroupコントロールのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。