デフォルトでは、ボタンにはセルのバインドされたテキストが表示されます。 固定文字列を表示する場合は、options.textプロパティを使用します。

たとえば、次のコードはボタン要素を持つ列を定義します。 すべてのボタンに同じテキスト('Click Me') が表示され、クリックするとアラートが表示されます。

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に設定されています。

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

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にある画像を含む列を定義します。

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)
            })
        }
    ]
});

デフォルトでは、リンクにはセルのバインドされたテキストが表示されます。 固定文字列を表示する場合は、options.textプロパティを表示する文字列に設定します。

たとえば、以下のコードは、 ハイパーリンク要素を持つ列を定義します。 リンクには、いくつかのカスタムテキストと、 セルのデータ項目からのURLへのリンクが表示されます。

new FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columns: [
        { binding: 'id', header: 'ID', isReadOnly: true },
        {
            binding: 'country',
            header: 'My Links',
            cellTemplate: CellMaker.makeLink({
                text: 'Visit ${item.country}', // override bound text
                href: '${item.url}', // バインドされたリンクの宛先
                attributes: {
                    tabindex: 0 // ハイパーリンクをタブストップにする
                }
            })
        }
    ]
});

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

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

new FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columns: [
        { binding: 'id', header: 'ID', isReadOnly: true },
        {
            binding: 'country',
            header: 'My Links',
            cellTemplate: CellMaker.makeLink({
                text: 'Visit ${item.country}', // override bound text
                href: '${item.url}', // バインドされたリンクの宛先
                // クリックハンドラーの必要はなく、リンクは自動的にナビゲートします
            })
        }
    ]
});

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

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

デフォルトでは、セルには評価が星で表示されます。CSSを使用して、評価のセルの外観をカスタマイズできます。

たとえば、次のコードは、データ項目の「rating」メンバーを示す星の列を定義します。 列は読み取り専用ではないため、ユーザーはキーボードまたはマウスを使用して評価を編集できます

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'
            })
       }
    ]
});

セルは、ミニ折れ線チャートとして表示される配列の数にバインドする必要があります。

たとえば、次のコードは、セルのデータ項目「history」配列の内容を示すスパークラインを持つ列を定義します。 CSSを使用してスパークラインの外観をカスタマイズできます。

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, // マーカーを追加します。
                maxPoints: 25, //ポイント数の制限。
                label: '${item.country} sales history line chart', // アクセシビリティ
            })
        }
    ]
});