ボタン付きのセルテンプレートを作成します。

By default, the button displays the cell's bound text in it. If you want to show a fixed string, set the options.text property to the string you want to show.

For example, the code below defines a column with button elements. All buttons show the same text ('Click Me') and show an alert when clicked:

```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'My Buttons', cellTemplate: CellMaker.makeButton({ text: 'Click Me', // 連結されたテキストをオーバーライドします。 click: (e: MouseEvent, ctx: ICellTemplateContext) => { alert('Clicked Button ** ' + ctx.item.country + ' **') } }) } ] }); ```

通常のタブナビゲーションの中断を避けるには、ボタンの **tabindex**属性がデフォルトで「-1」に設定されています。

タブナビゲーションにボタンを含める場合は、**属性**オプションを使用して、ボタンの**tabindex**属性を0に設定します。 例えば：

```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'My Buttons', cellTemplate: CellMaker.makeButton({ text: 'Click Me', // 連結されたテキストをオーバーライドします。 click: (e: MouseEvent, ctx: ICellTemplateContext) => { alert('Clicked Button ** ' + ctx.item.country + ' **') }, attributes: { tabindex: 0 // ボタンをタブストップにします。 } }) } ] }); ```

リンクとボタン要素の詳細については、 https://css-tricks.com/a-complete-guide-to-links-and-buttons/ を参考してください。

画像付きのセルテンプレートを作成します。

セルは、画像のURLを含む文字列に連結する必要があります。

たとえば、以下のサンプルコードは、データ項目の「img」メンバで指定されているURLにある画像を含む列を定義します。

```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'img', header: 'Images', cssClass: 'cell-img', cellTemplate: CellMaker.makeImage({ label: 'image for ${item.country}', // アクセシビリティ click: (e, ctx) => alert('Clicked image for ' + ctx.item.country) }) } ] }); ```

ハイパーリンク付きのセルテンプレートを作成します。

By default, the link displays the cell's bound text in it. If you want to show a fixed string, set the options.text property to the string you want to show.

For example, the code below defines a column with hyperlink elements. The links show some custom text and link to a url from the cell's data item:

```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'My Links', cellTemplate: CellMaker.makeLink({ text: 'Visit ${item.country}', // 連結されたテキストをオーバーライドします。 href: '${item.url}', // 連結されたリンク先。 attributes: { tabindex: 0 // ハイパーリンクをタブストップにします。 } }) } ] }); ```

通常のタブナビゲーションの中断を避けるには、ハイパーリンクの **tabindex**属性がデフォルトで「-1」に設定されています。

タブナビゲーションにハイパーリンクを含める場合は、**属性**オプションを使用して、ボタンの**tabindex**属性を0に設定します。 例えば：

```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'My Links', cellTemplate: CellMaker.makeLink({ text: 'Visit ${item.country}', // 連結されたテキストをオーバーライドします。 href: '${item.url}', // 連結されたリンク先。 // リンクは自動的にナビゲートしますので、クリックハンドラが必要ありません。 }) } ] }); ```

リンクとボタン要素の詳細については、 https://css-tricks.com/a-complete-guide-to-links-and-buttons/ を参考してください。

評価の値を表示および編集するセルテンプレートを作成します。

セルは、評価を表す数値を含む文字列に連結する必要があります。

By default, cells show ratings as stars. You may customize the appearance of rating cells using CSS.

For example, the code below defines a column with stars that show the 'rating' member of the data items. Since the column is not read-only, users may edit the ratings using the keyboard or the mouse:

```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'rating', header: 'Rating (editable)', width: 220, align: 'center', cellTemplate: CellMaker.makeRating({ range: [0, 5], // 0?5の評価の値。 label: 'Edit Product Rating' }) } ] }); ```

スパークラインを持つセルテンプレートを作成します。

The cell should be bound to an array of numbers to be shown as a mini line chart.

For example, the code below defines a column with sparklines showing the content of the 'history' array in the cell's data item. You may customize the appearance of the sparklines using CSS:

```typescript new FlexGrid('#theGrid', { autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'history', header: 'History Sparklines', width: 175, cellTemplate: CellMaker.makeSparkline({ markers: SparklineMarkers.High | SparklineMarkers.Low, // add markers maxPoints: 25, // limit number of points label: '${item.country} sales history line chart', // accessibility }) } ] }); ```