React Minigráfico de columna

La Tabla de Datos Ignite UI for React / Red de Datos soporta una Columna de Plantilla que te proporciona una forma de incrustar otros componentes como Ignite UI for React componente de Sparkline. Consulte el tema Tipos de Columna para otros tipos de columnas soportados en elIgrDataGrid componente.

React Column Sparkline Example

Code Snippet

El siguiente ejemplo de código muestra cómo incrustarIgrSparkline un componente enIgrTemplateColumn de elIgrDataGrid componente:

<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-data-grids';
import { IgrTemplateColumn, IIgrCellTemplateProps } from 'igniteui-react-data-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 References

• IgrDataGrid
• IgrSparkline