React Column Sparkline

    The Ignite UI for React Data Table / Data Grid supports a Template Column which provides you to a way to embed other components such as Ignite UI for React sparkline component. Refer to the Column Types topic for other types of columns supported in the IgrDataGrid component.

    React Column Sparkline Example

    Code Snippet

    The following code example shows how to embed IgrSparkline component in IgrTemplateColumn of the IgrDataGrid component :

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