Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Kendo Sales Dashboard - GridComponent v3
import React from 'react';
import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import { gridData } from '../data/appData';
import { Sparkline } from '@progress/kendo-react-charts';
const SparkLineChartCell = (props) => <td><Sparkline data={props.dataItem.PriceHistory}/></td>
const processData = (data) => {
data.forEach((item) => {
item.PriceHistory = Array.from({ length: 20 }, () => Math.floor(Math.random() * 100));
return item;
return data;
export const GridContainer = () => (
<Grid style={{ height: '300px' }} data={processData(gridData)}>
<Column field="ProductID" title="ID" width="40px" />
<Column field="ProductName" title="Name" width="160px" />
<Column field="Category.CategoryName" title="Category Name" width="80px" />
<Column field="UnitPrice" title="Price" width="80px" />
<Column field="UnitsInStock" title="Stock" width="90px" />
<Column field="PriceHistory" width="130px" cell={SparkLineChartCell} title="Price history" />
<Column field="Discontinued" width="130px"
cell={(props) => (
<input className="k-checkbox" type="checkbox" disabled defaultChecked={props.dataItem[props.field]} />
<label className="k-checkbox-label"></label>
)} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.