DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Cell Customization

The DataGrid comes with vast capabilities for setting up custom templates for grid cells. In this demo, you can see how the grid’s onCellPrepared property is used to provide a custom template for those cells that have the diff value specified in the data source. In addition, the cellTemplate property of the Dynamics column is specified to present data using the Sparkline component.

Backend API
<template> <div> <DxDataGrid id="gridContainer" :data-source="weekData" key-expr="date" :show-row-lines="true" :show-column-lines="false" :show-borders="true" > <DxSorting mode="none"/> <DxPaging :page-size="10"/> <DxColumn :width="110" data-field="date" data-type="date" /> <DxColumn caption="Open" cell-template="diff-cell-template" /> <DxColumn caption="Close" cell-template="diff-cell-template" /> <DxColumn :min-width="320" caption="Dynamics" cell-template="chart-cell-template" /> <DxColumn caption="High" cell-template="diff-cell-template" /> <DxColumn caption="Low" cell-template="diff-cell-template" /> <template #chart-cell-template="{ data: templateOptions }"> <ChartCell :day-close="templateOptions.data.dayClose"/> </template> <template #diff-cell-template="{ data: templateOptions }"> <DiffCell :column="templateOptions.column" :row-data="templateOptions.data" /> </template> </DxDataGrid> </div> </template> <script setup lang="ts"> import { DxDataGrid, DxColumn, DxSorting, DxPaging, } from 'devextreme-vue/data-grid'; import DiffCell from './DiffCell.vue'; import ChartCell from './ChartCell.vue'; import { weekData } from './data.ts'; </script> <style scoped> #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='); } </style>
<template> <div class="chart-cell"> <DxSparkline :data-source="dayClose" :show-min-max="true" :point-size="6" argument-field="date" value-field="close" type="line" min-color="#f00" max-color="#2ab71b" > <DxSize :width="290" :height="40" /> <DxTooltip :enabled="false"/> </DxSparkline> </div> </template> <script setup lang="ts"> import { DxSparkline, DxSize, DxTooltip, } from 'devextreme-vue/sparkline'; import { DayClose } from './data.ts'; defineProps<{ dayClose: DayClose[] }>(); </script>
<template> <div :class="className"> <div class="current-value">{{ currencyFormat }}</div> <div class="diff">{{ difference }}</div> </div> </template> <script setup lang="ts"> import { formatNumber } from 'devextreme/localization'; import { DxDataGridTypes } from 'devextreme-vue/data-grid'; import { WeekData, DiffValueProperties } from './data.ts'; const props = defineProps<{ column: DxDataGridTypes.Column, rowData: WeekData, }>(); const getCellData = () => { const property = props.column.caption!.toLowerCase() as DiffValueProperties; return props.rowData![property]; }; const cellData = getCellData(); const className = cellData.diff > 0 ? 'inc' : 'dec'; const currencyFormat = formatNumber(cellData.value, { type: 'currency', currency: 'USD', precision: 2 }); const difference = Math.abs(cellData.diff).toFixed(2); </script>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'globalize': 'npm:globalize@1.7.0/dist/globalize', 'json': 'npm:systemjs-plugin-json@0.3.0/json.js', 'cldr': 'npm:cldrjs@0.5.5/dist/cldr', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.3/cjs', 'devextreme-vue': 'npm:devextreme-vue@24.1.3/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'globalize': { main: '../globalize.js', defaultExtension: 'js', }, 'cldr': { main: '../cldr.js', defaultExtension: 'js', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
export type DiffValue = { value: number; diff: number; }; export type DayClose = { close: number; date: Date; }; export type WeekData = { date: Date; open: DiffValue; high: DiffValue; low: DiffValue; close: DiffValue; volume: number; adjClose: number; dayClose: DayClose[]; }; export type DiffValueProperties = 'open' | 'high' | 'low' | 'close'; export const weekData = [{ date: new Date('2013/12/23'), open: { value: 3563.19, diff: 92.76, }, high: { value: 3591.31, diff: 50.34, }, low: { value: 3552.3, diff: 129.44, }, close: { value: 3574.02, diff: 42.83, }, volume: 1254340000, adjClose: 3574.02, dayClose: [{ close: 3569.4, date: new Date('2013/12/23'), }, { close: 3572.8, date: new Date('2013/12/24'), }, { close: 3584.58, date: new Date('2013/12/26'), }, { close: 3574.02, date: new Date('2013/12/27'), }], }, { date: new Date('2013/12/16'), open: { value: 3470.43, diff: -45.24, }, high: { value: 3540.97, diff: 16.96, }, low: { value: 3422.86, diff: -26.88, }, close: { value: 3531.19, diff: 74.79, }, volume: 2261352000, adjClose: 3531.19, dayClose: [{ close: 3475.79, date: new Date('2013/12/16'), }, { close: 3469.32, date: new Date('2013/12/17'), }, { close: 3509.63, date: new Date('2013/12/18'), }, { close: 3498.63, date: new Date('2013/12/19'), }, { close: 3531.19, date: new Date('2013/12/20'), }], }, { date: new Date('2013/12/09'), open: { value: 3515.67, diff: 19.48, }, high: { value: 3524.01, diff: 12.91, }, low: { value: 3449.74, diff: -3.48, }, close: { value: 3456.4, diff: -47.86, }, volume: 1802822000, adjClose: 3456.4, dayClose: [{ close: 3516.17, date: new Date('2013/12/09'), }, { close: 3514.2, date: new Date('2013/12/10'), }, { close: 3468.99, date: new Date('2013/12/11'), }, { close: 3460.29, date: new Date('2013/12/12'), }, { close: 3456.4, date: new Date('2013/12/13'), }], }, { date: new Date('2013/12/02'), open: { value: 3496.19, diff: 62.27, }, high: { value: 3511.1, diff: 15.13, }, low: { value: 3453.22, diff: 32.86, }, close: { value: 3504.26, diff: 16.44, }, volume: 1810088000, adjClose: 3504.26, dayClose: [{ close: 3481.15, date: new Date('2013/12/02'), }, { close: 3479.34, date: new Date('2013/12/03'), }, { close: 3483.01, date: new Date('2013/12/04'), }, { close: 3477.73, date: new Date('2013/12/05'), }, { close: 3504.26, date: new Date('2013/12/06'), }], }, { date: new Date('2013/11/25'), open: { value: 3433.92, diff: 10.45, }, high: { value: 3495.97, diff: 66.77, }, low: { value: 3420.36, diff: 61.05, }, close: { value: 3487.82, diff: 65.8, }, volume: 1508490000, adjClose: 3487.82, dayClose: [{ close: 3427.49, date: new Date('2013/11/25'), }, { close: 3445.76, date: new Date('2013/11/26'), }, { close: 3470.48, date: new Date('2013/11/27'), }, { close: 3487.82, date: new Date('2013/11/29'), }], }, { date: new Date('2013/11/18'), open: { value: 3423.47, diff: 63.64, }, high: { value: 3429.2, diff: 6.62, }, low: { value: 3359.31, diff: 12.9, }, close: { value: 3422.02, diff: -0.56, }, volume: 1742680000, adjClose: 3422.02, dayClose: [{ close: 3388.87, date: new Date('2013/11/18'), }, { close: 3378.13, date: new Date('2013/11/19'), }, { close: 3367.17, date: new Date('2013/11/20'), }, { close: 3402.74, date: new Date('2013/11/21'), }, { close: 3422.02, date: new Date('2013/11/22'), }], }, { date: new Date('2013/11/11'), open: { value: 3359.83, diff: -28.87, }, high: { value: 3422.58, diff: 21.31, }, low: { value: 3346.41, diff: 28.01, }, close: { value: 3422.58, diff: 55.74, }, volume: 1812784000, adjClose: 3422.58, dayClose: [{ close: 3362.98, date: new Date('2013/11/11'), }, { close: 3365.23, date: new Date('2013/11/12'), }, { close: 3405.56, date: new Date('2013/11/13'), }, { close: 3415.14, date: new Date('2013/11/14'), }, { close: 3422.58, date: new Date('2013/11/15'), }], }, { date: new Date('2013/11/04'), open: { value: 3388.7, diff: 6.52, }, high: { value: 3401.27, diff: -7.01, }, low: { value: 3318.4, diff: -46.25, }, close: { value: 3366.84, diff: -12.92, }, volume: 2011546000, adjClose: 3366.84, dayClose: [{ close: 3384.75, date: new Date('2013/11/04'), }, { close: 3388.82, date: new Date('2013/11/05'), }, { close: 3385.38, date: new Date('2013/11/06'), }, { close: 3321.41, date: new Date('2013/11/07'), }, { close: 3366.84, date: new Date('2013/11/08'), }], }, { date: new Date('2013/10/28'), open: { value: 3382.18, diff: 20.42, }, high: { value: 3408.28, diff: 8.24, }, low: { value: 3364.65, diff: 34.45, }, close: { value: 3379.76, diff: -4.07, }, volume: 1962860000, adjClose: 3379.76, dayClose: [{ close: 3382.68, date: new Date('2013/10/28'), }, { close: 3391.75, date: new Date('2013/10/29'), }, { close: 3385.38, date: new Date('2013/10/30'), }, { close: 3377.73, date: new Date('2013/10/31'), }, { close: 3379.76, date: new Date('2013/11/01'), }], }, { date: new Date('2013/10/21'), open: { value: 3361.76, diff: 148.38, }, high: { value: 3400.04, diff: 44.41, }, low: { value: 3330.2, diff: 118.15, }, close: { value: 3383.83, diff: 29.95, }, volume: 1952026000, adjClose: 3383.83, dayClose: [{ close: 3361.18, date: new Date('2013/10/21'), }, { close: 3366.93, date: new Date('2013/10/22'), }, { close: 3346.05, date: new Date('2013/10/23'), }, { close: 3362.38, date: new Date('2013/10/24'), }, { close: 3383.83, date: new Date('2013/10/25'), }], }, { date: new Date('2013/10/14'), open: { value: 3213.38, diff: -2.39, }, high: { value: 3355.63, diff: 115.52, }, low: { value: 3212.05, diff: 94.36, }, close: { value: 3353.88, diff: 120.05, }, volume: 1772590000, adjClose: 3353.88, dayClose: [{ close: 3256.02, date: new Date('2013/10/14'), }, { close: 3244.66, date: new Date('2013/10/15'), }, { close: 3281.67, date: new Date('2013/10/16'), }, { close: 3301.28, date: new Date('2013/10/17'), }, { close: 3353.88, date: new Date('2013/10/18'), }], }, { date: new Date('2013/10/07'), open: { value: 3215.77, diff: 25.37, }, high: { value: 3240.11, diff: -16.6, }, low: { value: 3117.69, diff: -69.17, }, close: { value: 3233.83, diff: -8.74, }, volume: 1891806000, adjClose: 3233.83, dayClose: [{ close: 3215.69, date: new Date('2013/10/07'), }, { close: 3153.87, date: new Date('2013/10/08'), }, { close: 3142.54, date: new Date('2013/10/09'), }, { close: 3210.84, date: new Date('2013/10/10'), }, { close: 3233.83, date: new Date('2013/10/11'), }], }, { date: new Date('2013/09/30'), open: { value: 3190.4, diff: -51.92, }, high: { value: 3256.71, diff: 13.28, }, low: { value: 3186.86, diff: -15.89, }, close: { value: 3242.57, diff: 12.27, }, volume: 1793200000, adjClose: 3242.57, dayClose: [{ close: 3218.2, date: new Date('2013/09/30'), }, { close: 3253.05, date: new Date('2013/10/01'), }, { close: 3253.26, date: new Date('2013/10/02'), }, { close: 3213.83, date: new Date('2013/10/03'), }, { close: 3242.57, date: new Date('2013/10/04'), }], }, { date: new Date('2013/09/23'), open: { value: 3242.32, diff: 39.13, }, high: { value: 3243.43, diff: -5.09, }, low: { value: 3202.75, diff: 39.62, }, close: { value: 3230.3, diff: 5.57, }, volume: 1775808000, adjClose: 3230.3, dayClose: [{ close: 3219.34, date: new Date('2013/09/23'), }, { close: 3218.66, date: new Date('2013/09/24'), }, { close: 3208.55, date: new Date('2013/09/25'), }, { close: 3234.04, date: new Date('2013/09/26'), }, { close: 3230.3, date: new Date('2013/09/27'), }], }, { date: new Date('2013/09/16'), open: { value: 3203.19, diff: 57.17, }, high: { value: 3248.52, diff: 59.28, }, low: { value: 3163.13, diff: 17.11, }, close: { value: 3224.73, diff: 46.45, }, volume: 1839474000, adjClose: 3224.73, dayClose: [{ close: 3168.69, date: new Date('2013/09/16'), }, { close: 3190.83, date: new Date('2013/09/17'), }, { close: 3231.31, date: new Date('2013/09/18'), }, { close: 3237.61, date: new Date('2013/09/19'), }, { close: 3224.73, date: new Date('2013/09/20'), }], }, { date: new Date('2013/09/09'), open: { value: 3146.02, diff: 48.37, }, high: { value: 3189.24, diff: 40.25, }, low: { value: 3146.02, diff: 68.89, }, close: { value: 3178.28, diff: 44.9, }, volume: 1668658000, adjClose: 3178.28, dayClose: [{ close: 3169.93, date: new Date('2013/09/09'), }, { close: 3185.07, date: new Date('2013/09/10'), }, { close: 3179.86, date: new Date('2013/09/11'), }, { close: 3175.57, date: new Date('2013/09/12'), }, { close: 3178.28, date: new Date('2013/09/13'), }], }, { date: new Date('2013/09/03'), open: { value: 3097.65, diff: -29.36, }, high: { value: 3148.99, diff: 1.12, }, low: { value: 3077.13, diff: 23.87, }, close: { value: 3133.38, diff: 59.57, }, volume: 1670570000, adjClose: 3133.38, dayClose: [{ close: 3091.76, date: new Date('2013/09/03'), }, { close: 3124.54, date: new Date('2013/09/04'), }, { close: 3129.94, date: new Date('2013/09/05'), }, { close: 3133.38, date: new Date('2013/09/06'), }], }, { date: new Date('2013/08/26'), open: { value: 3127.01, diff: 52.63, }, high: { value: 3147.87, diff: 20.82, }, low: { value: 3053.26, diff: -8.16, }, close: { value: 3073.81, diff: -50.46, }, volume: 1417628000, adjClose: 3073.81, dayClose: [{ close: 3122.67, date: new Date('2013/08/26'), }, { close: 3059.58, date: new Date('2013/08/27'), }, { close: 3072.17, date: new Date('2013/08/28'), }, { close: 3093.36, date: new Date('2013/08/29'), }, { close: 3073.81, date: new Date('2013/08/30'), }], }, { date: new Date('2013/08/19'), open: { value: 3074.38, diff: -32.68, }, high: { value: 3127.05, diff: -22.19, }, low: { value: 3061.42, diff: -6.65, }, close: { value: 3124.27, diff: 50.36, }, volume: 1305026000, adjClose: 3124.27, dayClose: [{ close: 3069.76, date: new Date('2013/08/19'), }, { close: 3082.17, date: new Date('2013/08/20'), }, { close: 3071.47, date: new Date('2013/08/21'), }, { close: 3101.82, date: new Date('2013/08/22'), }, { close: 3124.27, date: new Date('2013/08/23'), }], }, { date: new Date('2013/08/12'), open: { value: 3107.06, diff: -29.71, }, high: { value: 3149.24, diff: 3.99, }, low: { value: 3068.07, diff: -28.34, }, close: { value: 3073.91, diff: -44.66, }, volume: 1563892000, adjClose: 3073.91, dayClose: [{ close: 3125.93, date: new Date('2013/08/12'), }, { close: 3141.06, date: new Date('2013/08/13'), }, { close: 3129.45, date: new Date('2013/08/14'), }, { close: 3076.23, date: new Date('2013/08/15'), }, { close: 3073.91, date: new Date('2013/08/16'), }], }, { date: new Date('2013/08/05'), open: { value: 3136.77, diff: 69.29, }, high: { value: 3145.25, diff: 1.73, }, low: { value: 3096.41, diff: 33.5, }, close: { value: 3118.57, diff: -24.95, }, volume: 1565072000, adjClose: 3118.57, dayClose: [{ close: 3143.19, date: new Date('2013/08/05'), }, { close: 3122.2, date: new Date('2013/08/06'), }, { close: 3118.69, date: new Date('2013/08/07'), }, { close: 3130.13, date: new Date('2013/08/08'), }, { close: 3118.57, date: new Date('2013/08/09'), }], }, { date: new Date('2013/07/29'), open: { value: 3067.48, diff: 5.98, }, high: { value: 3143.52, diff: 67.29, }, low: { value: 3062.91, diff: 33.84, }, close: { value: 3143.52, diff: 67.29, }, volume: 1759648000, adjClose: 3143.52, dayClose: [{ close: 3068.95, date: new Date('2013/07/29'), }, { close: 3085.33, date: new Date('2013/07/30'), }, { close: 3090.19, date: new Date('2013/07/31'), }, { close: 3126.3, date: new Date('2013/08/01'), }, { close: 3143.52, date: new Date('2013/08/02'), }], }, { date: new Date('2013/07/22'), open: { value: 3061.5, diff: -15.52, }, high: { value: 3076.23, diff: -14.98, }, low: { value: 3029.07, diff: -6.92, }, close: { value: 3076.23, diff: 31.3, }, volume: 1796810000, adjClose: 3076.23, dayClose: [{ close: 3055.23, date: new Date('2013/07/22'), }, { close: 3031.4, date: new Date('2013/07/23'), }, { close: 3041.16, date: new Date('2013/07/24'), }, { close: 3061.67, date: new Date('2013/07/25'), }, { close: 3076.23, date: new Date('2013/07/26'), }], }, { date: new Date('2013/07/15'), open: { value: 3077.02, diff: 100.41, }, high: { value: 3091.21, diff: 12.14, }, low: { value: 3035.99, diff: 80.62, }, close: { value: 3044.93, diff: -34.14, }, volume: 1621772000, adjClose: 3044.93, dayClose: [{ close: 3079.85, date: new Date('2013/07/15'), }, { close: 3077.47, date: new Date('2013/07/16'), }, { close: 3085.28, date: new Date('2013/07/17'), }, { close: 3077.82, date: new Date('2013/07/18'), }, { close: 3044.93, date: new Date('2013/07/19'), }], }, { date: new Date('2013/07/08'), open: { value: 2976.61, diff: 43.13, }, high: { value: 3079.07, diff: 115.25, }, low: { value: 2955.37, diff: 41.89, }, close: { value: 3079.07, diff: 115.85, }, volume: 1616522000, adjClose: 3079.07, dayClose: [{ close: 2966.13, date: new Date('2013/07/08'), }, { close: 2984.32, date: new Date('2013/07/09'), }, { close: 3000.66, date: new Date('2013/07/10'), }, { close: 3059.46, date: new Date('2013/07/11'), }, { close: 3079.07, date: new Date('2013/07/12'), }], }, { date: new Date('2013/07/01'), open: { value: 2933.48, diff: 80.83, }, high: { value: 2963.82, diff: 36.33, }, low: { value: 2913.48, diff: 88.3, }, close: { value: 2963.22, diff: 53.62, }, volume: 1365580000, adjClose: 2963.22, dayClose: [{ close: 2927.35, date: new Date('2013/07/01'), }, { close: 2929.63, date: new Date('2013/07/02'), }, { close: 2941.41, date: new Date('2013/07/03'), }, { close: 2963.22, date: new Date('2013/07/05'), }], }, { date: new Date('2013/06/24'), open: { value: 2852.65, diff: -114.68, }, high: { value: 2927.49, diff: -74.4, }, low: { value: 2825.18, diff: -28.51, }, close: { value: 2909.6, diff: 31.66, }, volume: 2135946000, adjClose: 2909.6, dayClose: [{ close: 2848.2, date: new Date('2013/06/24'), }, { close: 2866.5, date: new Date('2013/06/25'), }, { close: 2893.85, date: new Date('2013/06/26'), }, { close: 2906.84, date: new Date('2013/06/27'), }, { close: 2909.6, date: new Date('2013/06/28'), }], }, { date: new Date('2013/06/17'), open: { value: 2967.33, diff: -27.7, }, high: { value: 3001.89, diff: -2.78, }, low: { value: 2853.69, diff: -60.51, }, close: { value: 2877.94, diff: -65.92, }, volume: 1973904000, adjClose: 2877.94, dayClose: [{ close: 2971.26, date: new Date('2013/06/17'), }, { close: 2996.09, date: new Date('2013/06/18'), }, { close: 2959.5, date: new Date('2013/06/19'), }, { close: 2890.33, date: new Date('2013/06/20'), }, { close: 2877.94, date: new Date('2013/06/21'), }], }, { date: new Date('2013/06/10'), open: { value: 2995.03, diff: 10.44, }, high: { value: 3004.67, diff: -2.63, }, low: { value: 2914.2, diff: 2.26, }, close: { value: 2943.86, diff: -47.01, }, volume: 1557972000, adjClose: 2943.86, dayClose: [{ close: 2990.49, date: new Date('2013/06/10'), }, { close: 2959.84, date: new Date('2013/06/11'), }, { close: 2926.14, date: new Date('2013/06/12'), }, { close: 2962.9, date: new Date('2013/06/13'), }, { close: 2943.86, date: new Date('2013/06/14'), }], }, { date: new Date('2013/06/03'), open: { value: 2984.59, diff: -39.79, }, high: { value: 3007.3, diff: -29.7, }, low: { value: 2911.94, diff: -67.96, }, close: { value: 2990.87, diff: 9.11, }, volume: 1837828000, adjClose: 2990.87, dayClose: [{ close: 2990.79, date: new Date('2013/06/03'), }, { close: 2973.69, date: new Date('2013/06/04'), }, { close: 2937.14, date: new Date('2013/06/05'), }, { close: 2950.3, date: new Date('2013/06/06'), }, { close: 2990.87, date: new Date('2013/06/07'), }], }, { date: new Date('2013/05/28'), open: { value: 3024.38, diff: 5.1, }, high: { value: 3037, diff: -16.51, }, low: { value: 2979.9, diff: 14.6, }, close: { value: 2981.76, diff: -9.26, }, volume: 1812077500, adjClose: 2981.76, dayClose: [{ close: 3011.94, date: new Date('2013/05/28'), }, { close: 2994.82, date: new Date('2013/05/29'), }, { close: 3011.83, date: new Date('2013/05/30'), }, { close: 2981.76, date: new Date('2013/05/31'), }], }, { date: new Date('2013/05/20'), open: { value: 3019.28, diff: 46.32, }, high: { value: 3053.51, diff: 24.55, }, low: { value: 2965.3, diff: -6.43, }, close: { value: 2991.02, diff: -37.94, }, volume: 1794250000, adjClose: 2991.02, dayClose: [{ close: 3020.97, date: new Date('2013/05/20'), }, { close: 3026.45, date: new Date('2013/05/21'), }, { close: 2999.13, date: new Date('2013/05/22'), }, { close: 2991.45, date: new Date('2013/05/23'), }, { close: 2991.02, date: new Date('2013/05/24'), }], }, { date: new Date('2013/05/13'), open: { value: 2972.96, diff: 24.06, }, high: { value: 3028.96, diff: 47.94, }, low: { value: 2971.73, diff: 29.48, }, close: { value: 3028.96, diff: 47.94, }, volume: 1810862000, adjClose: 3028.96, dayClose: [{ close: 2982.09, date: new Date('2013/05/13'), }, { close: 2996.05, date: new Date('2013/05/14'), }, { close: 3002.62, date: new Date('2013/05/15'), }, { close: 2999.34, date: new Date('2013/05/16'), }, { close: 3028.96, date: new Date('2013/05/17'), }], }, { date: new Date('2013/05/06'), open: { value: 2948.9, diff: 99.36, }, high: { value: 2981.02, diff: 28.8, }, low: { value: 2942.25, diff: 93.21, }, close: { value: 2981.02, diff: 36.43, }, volume: 1696512000, adjClose: 2981.02, dayClose: [{ close: 2955.36, date: new Date('2013/05/06'), }, { close: 2952.88, date: new Date('2013/05/07'), }, { close: 2968.24, date: new Date('2013/05/08'), }, { close: 2961.12, date: new Date('2013/05/09'), }, { close: 2981.02, date: new Date('2013/05/10'), }], }, { date: new Date('2013/04/29'), open: { value: 2849.54, diff: 57.77, }, high: { value: 2952.22, diff: 91.53, }, low: { value: 2849.04, diff: 68.22, }, close: { value: 2944.59, diff: 104.04, }, volume: 1793206000, adjClose: 2944.59, dayClose: [{ close: 2866.95, date: new Date('2013/04/29'), }, { close: 2887.44, date: new Date('2013/04/30'), }, { close: 2873.35, date: new Date('2013/05/01'), }, { close: 2911.14, date: new Date('2013/05/02'), }, { close: 2944.59, date: new Date('2013/05/03'), }], }, { date: new Date('2013/04/22'), open: { value: 2791.77, diff: -49.49, }, high: { value: 2860.69, diff: 11.53, }, low: { value: 2780.82, diff: 49.85, }, close: { value: 2840.55, diff: 60.09, }, volume: 1757180000, adjClose: 2840.55, dayClose: [{ close: 2810.07, date: new Date('2013/04/22'), }, { close: 2835.37, date: new Date('2013/04/23'), }, { close: 2834.12, date: new Date('2013/04/24'), }, { close: 2848.66, date: new Date('2013/04/25'), }, { close: 2840.55, date: new Date('2013/04/26'), }], }, { date: new Date('2013/04/15'), open: { value: 2841.26, diff: 68.96, }, high: { value: 2849.16, diff: -14.5, }, low: { value: 2730.97, diff: -33.37, }, close: { value: 2780.46, diff: -76.02, }, volume: 1740460000, adjClose: 2780.46, dayClose: [{ close: 2797.47, date: new Date('2013/04/15'), }, { close: 2838.41, date: new Date('2013/04/16'), }, { close: 2781.98, date: new Date('2013/04/17'), }, { close: 2741.95, date: new Date('2013/04/18'), }, { close: 2780.46, date: new Date('2013/04/19'), }], }, { date: new Date('2013/04/08'), open: { value: 2772.3, diff: -47.48, }, high: { value: 2863.66, diff: 35.02, }, low: { value: 2764.34, diff: 20.08, }, close: { value: 2856.48, diff: 84.73, }, volume: 1578374000, adjClose: 2856.48, dayClose: [{ close: 2786.13, date: new Date('2013/04/08'), }, { close: 2804.67, date: new Date('2013/04/09'), }, { close: 2859.21, date: new Date('2013/04/10'), }, { close: 2859.07, date: new Date('2013/04/11'), }, { close: 2856.48, date: new Date('2013/04/12'), }], }, { date: new Date('2013/04/01'), open: { value: 2819.78, diff: 9.03, }, high: { value: 2828.64, diff: 7.97, }, low: { value: 2744.26, diff: -34.52, }, close: { value: 2771.75, diff: -46.94, }, volume: 1589176000, adjClose: 2771.75, dayClose: [{ close: 2797.07, date: new Date('2013/04/01'), }, { close: 2820.62, date: new Date('2013/04/02'), }, { close: 2795.04, date: new Date('2013/04/03'), }, { close: 2794.92, date: new Date('2013/04/04'), }, { close: 2771.75, date: new Date('2013/04/05'), }], }, { date: new Date('2013/03/25'), open: { value: 2810.75, diff: 39.22, }, high: { value: 2820.67, diff: 9.19, }, low: { value: 2778.78, diff: 15.66, }, close: { value: 2818.69, diff: 17.88, }, volume: 1541860000, adjClose: 2818.69, dayClose: [{ close: 2789.45, date: new Date('2013/03/25'), }, { close: 2806.5, date: new Date('2013/03/26'), }, { close: 2809.98, date: new Date('2013/03/27'), }, { close: 2818.69, date: new Date('2013/03/28'), }], }, { date: new Date('2013/03/18'), open: { value: 2771.53, diff: -26.6, }, high: { value: 2811.48, diff: -0.81, }, low: { value: 2763.12, diff: -24.6, }, close: { value: 2800.81, diff: 1.4, }, volume: 1642786000, adjClose: 2800.81, dayClose: [{ close: 2792.3, date: new Date('2013/03/18'), }, { close: 2787.27, date: new Date('2013/03/19'), }, { close: 2805.91, date: new Date('2013/03/20'), }, { close: 2774.85, date: new Date('2013/03/21'), }, { close: 2800.81, date: new Date('2013/03/22'), }], }, { date: new Date('2013/03/11'), open: { value: 2798.13, diff: 59.92, }, high: { value: 2812.29, diff: -0.44, }, low: { value: 2787.72, diff: 52.8, }, close: { value: 2799.41, diff: -4.7, }, volume: 1767280000, adjClose: 2799.41, dayClose: [{ close: 2811.86, date: new Date('2013/03/11'), }, { close: 2800.81, date: new Date('2013/03/12'), }, { close: 2798.68, date: new Date('2013/03/13'), }, { close: 2807.3, date: new Date('2013/03/14'), }, { close: 2799.41, date: new Date('2013/03/15'), }], }, { date: new Date('2013/03/04'), open: { value: 2738.21, diff: -17.98, }, high: { value: 2812.73, diff: 48.77, }, low: { value: 2734.92, diff: 45.09, }, close: { value: 2804.11, diff: 56.36, }, volume: 1732232000, adjClose: 2804.11, dayClose: [{ close: 2759.53, date: new Date('2013/03/04'), }, { close: 2799.25, date: new Date('2013/03/05'), }, { close: 2792.56, date: new Date('2013/03/06'), }, { close: 2799.49, date: new Date('2013/03/07'), }, { close: 2804.11, date: new Date('2013/03/08'), }], }, { date: new Date('2013/02/25'), open: { value: 2756.19, diff: -14.51, }, high: { value: 2763.96, diff: -18.9, }, low: { value: 2689.83, diff: -10.49, }, close: { value: 2747.75, diff: 10.47, }, volume: 1879756000, adjClose: 2747.75, dayClose: [{ close: 2700.97, date: new Date('2013/02/25'), }, { close: 2713.02, date: new Date('2013/02/26'), }, { close: 2741.26, date: new Date('2013/02/27'), }, { close: 2738.58, date: new Date('2013/02/28'), }, { close: 2747.75, date: new Date('2013/03/01'), }], }, { date: new Date('2013/02/19'), open: { value: 2770.7, diff: -3.74, }, high: { value: 2782.86, diff: -0.33, }, low: { value: 2700.32, diff: -56.11, }, close: { value: 2737.28, diff: -27.39, }, volume: 1869942500, adjClose: 2737.28, dayClose: [{ close: 2782.86, date: new Date('2013/02/19'), }, { close: 2739.99, date: new Date('2013/02/20'), }, { close: 2711.51, date: new Date('2013/02/21'), }, { close: 2737.28, date: new Date('2013/02/22'), }], }, { date: new Date('2013/02/11'), open: { value: 2774.44, diff: 25.04, }, high: { value: 2783.19, diff: 3.06, }, low: { value: 2756.43, diff: 40.92, }, close: { value: 2764.67, diff: -10.89, }, volume: 1788838000, adjClose: 2764.67, dayClose: [{ close: 2774.64, date: new Date('2013/02/11'), }, { close: 2762.62, date: new Date('2013/02/12'), }, { close: 2773.77, date: new Date('2013/02/13'), }, { close: 2771.43, date: new Date('2013/02/14'), }, { close: 2764.67, date: new Date('2013/02/15'), }], }, { date: new Date('2013/02/04'), open: { value: 2749.4, diff: 11.78, }, high: { value: 2780.13, diff: 11.5, }, low: { value: 2715.51, diff: -7.01, }, close: { value: 2775.56, diff: 11.6, }, volume: 1960002000, adjClose: 2775.56, dayClose: [{ close: 2715.68, date: new Date('2013/02/04'), }, { close: 2754.99, date: new Date('2013/02/05'), }, { close: 2746.35, date: new Date('2013/02/06'), }, { close: 2746.5, date: new Date('2013/02/07'), }, { close: 2775.56, date: new Date('2013/02/08'), }], }, { date: new Date('2013/01/28'), open: { value: 2737.62, diff: -6.65, }, high: { value: 2768.63, diff: -0.68, }, low: { value: 2722.52, diff: 2.69, }, close: { value: 2763.96, diff: 27.23, }, volume: 2040876000, adjClose: 2763.96, dayClose: [{ close: 2742.43, date: new Date('2013/01/28'), }, { close: 2743.58, date: new Date('2013/01/29'), }, { close: 2738.71, date: new Date('2013/01/30'), }, { close: 2731.53, date: new Date('2013/01/31'), }, { close: 2763.96, date: new Date('2013/02/01'), }], }, { date: new Date('2013/01/22'), open: { value: 2744.27, diff: 10.81, }, high: { value: 2769.31, diff: 12.63, }, low: { value: 2719.83, diff: 9.03, }, close: { value: 2736.73, diff: -6.51, }, volume: 1864040000, adjClose: 2736.73, dayClose: [{ close: 2746.19, date: new Date('2013/01/22'), }, { close: 2762.17, date: new Date('2013/01/23'), }, { close: 2723.53, date: new Date('2013/01/24'), }, { close: 2736.73, date: new Date('2013/01/25'), }], }, { date: new Date('2013/01/14'), open: { value: 2733.46, diff: 20.02, }, high: { value: 2756.68, diff: 7.32, }, low: { value: 2710.8, diff: 7.05, }, close: { value: 2743.24, diff: -5.02, }, volume: 1809576000, adjClose: 2743.24, dayClose: [{ close: 2735.7, date: new Date('2013/01/14'), }, { close: 2722.98, date: new Date('2013/01/15'), }, { close: 2734.73, date: new Date('2013/01/16'), }, { close: 2747.15, date: new Date('2013/01/17'), }, { close: 2743.24, date: new Date('2013/01/18'), }], }, { date: new Date('2013/01/07'), open: { value: 2713.44, diff: -14.23, }, high: { value: 2749.36, diff: -1.46, }, low: { value: 2703.75, diff: -12.29, }, close: { value: 2748.26, diff: 23.77, }, volume: 1741254000, adjClose: 2748.26, dayClose: [{ close: 2724.22, date: new Date('2013/01/07'), }, { close: 2718.72, date: new Date('2013/01/08'), }, { close: 2727.65, date: new Date('2013/01/09'), }, { close: 2744.18, date: new Date('2013/01/10'), }, { close: 2748.26, date: new Date('2013/01/11'), }], }];
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.3/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>