React 列スパークライン

Ignite UI for React Data Table / Data Grid は、Ignite UI for React スパークライン コンポーネントなど、他のコンポーネントを埋め込むことができるテンプレート列をサポートします。IgrGrid コンポーネントにサポートされる他の列タイプについては、列タイプ トピックを参照してください。

React 列スパークラインの例

コード スニペット

以下のコード例は、IgrGrid コンポーネントの IgrTemplateColumn に IgrSparkline を埋め込む方法を示します。

<IgrDataGrid
    height="100%"
    width="100%"
    rowHeight="70"
    autoGenerateColumns="false"
    dataSource={this.data}>
    {/* ... */}
    <IgrTemplateColumn field="OrderHistory"
    headerText="Order History"
    horizontalAlignment="center" width="*>120"
    template={this.getOrderHistoryTemplate} />
    {/* ... */}
</IgrDataGrid>

import { IgrDataGrid } from 'igniteui-react-grids';
import { IgrTemplateColumn, IIgrCellTemplateProps } from 'igniteui-react-grids';

public getOrderHistoryTemplate(props: IIgrCellTemplateProps) {
    const info = props.dataContext as IgrTemplateCellInfo;
    return (
        <div className="sparklineInGrid">
           <IgrSparkline
               height="60px" width="100%"
               displayType="Line"
               dataSource={info.rowItem.OrderHistory}
               valueMemberPath="Sold"
               labelMemberPath="Week"
               lineThickness={2}
               brush="rgb(21, 190, 6)"
               negativeBrush="rgb(211, 17, 3)" />
        </div>
    );
}

API リファレンス

• IgrGrid
• IgrSparkline