Cell Customization - React Data Grid - DevExtreme React Example

import React from 'react'; import DataGrid, { Column, Sorting, Paging, } from 'devextreme-react/data-grid'; import service from './data.js'; import DiffCell from './DiffCell.js'; import ChartCell from './ChartCell.js'; class App extends React.Component { constructor(props) { super(props); this.dataSource = service.getWeekData(); } render() { return ( <DataGrid id="gridContainer" dataSource={this.dataSource} keyExpr="date" showRowLines={true} showColumnLines={false} showBorders={true}> <Sorting mode="none" /> <Paging defaultPageSize={10} /> <Column dataField="date" width={110} dataType="date" /> <Column caption="Open" cellRender={DiffCell} /> <Column caption="Close" cellRender={DiffCell} /> <Column caption="Dynamics" minWidth={320} cellRender={ChartCell} /> <Column caption="High" cellRender={DiffCell} /> <Column caption="Low" cellRender={DiffCell} /> </DataGrid> ); } } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app'), );

<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#gridContainer td { vertical-align: middle; } #gridContainer .chart-cell { overflow: visible; } #gridContainer .current-value { display: inline-block; } #gridContainer .diff { position: relative; display: table-cell; font-size: 16px; } #gridContainer .inc .diff { color: #2ab71b; } #gridContainer .inc .diff::before { content: '+'; } #gridContainer .dec .diff::before { content: '-'; } #gridContainer .dec .diff { color: #f00; } #gridContainer .inc .diff::after, #gridContainer .dec .diff::after { content: ''; display: block; height: 10px; width: 10px; position: absolute; right: -12px; top: 6px; background-repeat: no-repeat; background-size: 10px 10px; } #gridContainer .inc .diff::after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADKSURBVHjaYtTaLs1ABEiG0nPRJa56PEHhsxBhmCUQT4OyrwHxcXyKmQgYJgHE64CYDYrXQcXIMhCbAcgWkGzgNKh38QUB0QamIUUErkhKI9ZAGyCeTERkTYaqxWsgKA2txhdG6GGsvUNGGpeBRMUiGhCFGsqGzUBQQJsxkA5AemaiG5hDIBIIgQSgK0FmMDACs549kN5FZLjhA7+A2A2U9YSAOBeLAk4gnoBDczoOcSFGPIUDPxB/wCHHiKtwYGKgMhg1cBAaCBBgAJTUIL3ToPZfAAAAAElFTkSuQmCC'); } #gridContainer .dec .diff::after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAADJSURBVHjaYvzPgBfgkhYA4o8QFahKmBioDEYNHIQGsgBxIBCLkqgvAYi/g1mMjMjir0EJzR6If/6HpChKMMgMe3DKBeIcKhiY8x/MYoDj+RQYNgdkGLqBbEB8kgzDToL1YjEQhKWB+BUJhj0H64Eahs1AELYhMpJ+gtUiGYbLQBBOI8LANLBaIg1kAAc0vkiAqSPBQFAkHcNi2DGoHMkGgrAENOCRI0ECRQ2JBoKwJTQCfkLZDPgMZPxPXN5NhtJzMSsJVBMAAgwAyWSY2svfmrwAAAAASUVORK5CYII='); }

import React from 'react'; import Sparkline, { Size, Tooltip } from 'devextreme-react/sparkline'; export default function ChartCell(cellData) { return ( <div className="chart-cell"> <Sparkline dataSource={cellData.data.dayClose} argumentField="date" valueField="close" type="line" showMinMax={true} minColor="#f00" maxColor="#2ab71b" pointSize={6}> <Size width={290} height={40} /> <Tooltip enabled={false} /> </Sparkline> </div> ); }

import React from 'react'; import 'devextreme/localization/globalize/currency'; import { formatNumber } from 'devextreme/localization'; function gridCellData(gridData) { return gridData.data[gridData.column.caption.toLowerCase()]; } export default function DiffCell(cellData) { return ( <div className={gridCellData(cellData).diff > 0 ? 'inc' : 'dec'}> <div className="current-value">{formatNumber(gridCellData(cellData).value, { type: 'currency', currency: 'USD', precision: 2 })}</div> <div className="diff">{Math.abs(gridCellData(cellData).diff).toFixed(2)}</div> </div> ); }