DevExtreme v23.2 is now available.

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

Your search did not match any results.

Formatting

Use the format property to specify the integer, currency, accounting, percent, and other formats of the NumberBox value.

The format property can accept the following value types:

  • Predefined format
    See the type property description for a list of accepted values.

  • Custom format string
    Use a LDML pattern to specify a custom format. Refer to the following article for more information: Custom Format String.

  • Function
    A function should apply a custom format to a value and return the formatted value as a string. Functions are useful for advanced formatting.

  • Object
    Full format configuration. The object structure is shown in the format API section.

Backend API
import React from 'react'; import NumberBox from 'devextreme-react/number-box'; const integerFormatLabel = { 'aria-label': 'Integer Format' }; const currencyFormatLabel = { 'aria-label': 'Currency Format' }; const accountingFormatLabel = { 'aria-label': 'Accounting Format' }; const percentFormatLabel = { 'aria-label': 'Percent Format' }; const fixedPointFormatLabel = { 'aria-label': 'Fixed Poing Format' }; const weightFormatLabel = { 'aria-label': 'Weight Format' }; function App() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Integer format</div> <div className="dx-field-value"> <NumberBox format="#" inputAttr={integerFormatLabel} defaultValue={14500} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Currency format</div> <div className="dx-field-value"> <NumberBox format="$ #,##0.##" inputAttr={currencyFormatLabel} defaultValue={14500.55} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Accounting format</div> <div className="dx-field-value"> <NumberBox format="$ #,##0.##;($ #,##0.##)" inputAttr={accountingFormatLabel} defaultValue={-2314.12} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Percent format</div> <div className="dx-field-value"> <NumberBox format="#0%" inputAttr={percentFormatLabel} defaultValue={0.15} step={0.01} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Fixed point format</div> <div className="dx-field-value"> <NumberBox format="#,##0.00" inputAttr={fixedPointFormatLabel} defaultValue={13415.24} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Weight format</div> <div className="dx-field-value"> <NumberBox format="#0.## kg" inputAttr={weightFormatLabel} defaultValue={3.14} /> </div> </div> </div> </div> ); } export default App;
import React from 'react'; import NumberBox from 'devextreme-react/number-box'; const integerFormatLabel = { 'aria-label': 'Integer Format' }; const currencyFormatLabel = { 'aria-label': 'Currency Format' }; const accountingFormatLabel = { 'aria-label': 'Accounting Format' }; const percentFormatLabel = { 'aria-label': 'Percent Format' }; const fixedPointFormatLabel = { 'aria-label': 'Fixed Poing Format' }; const weightFormatLabel = { 'aria-label': 'Weight Format' }; function App() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Integer format</div> <div className="dx-field-value"> <NumberBox format="#" inputAttr={integerFormatLabel} defaultValue={14500} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Currency format</div> <div className="dx-field-value"> <NumberBox format="$ #,##0.##" inputAttr={currencyFormatLabel} defaultValue={14500.55} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Accounting format</div> <div className="dx-field-value"> <NumberBox format="$ #,##0.##;($ #,##0.##)" inputAttr={accountingFormatLabel} defaultValue={-2314.12} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Percent format</div> <div className="dx-field-value"> <NumberBox format="#0%" inputAttr={percentFormatLabel} defaultValue={0.15} step={0.01} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Fixed point format</div> <div className="dx-field-value"> <NumberBox format="#,##0.00" inputAttr={fixedPointFormatLabel} defaultValue={13415.24} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Weight format</div> <div className="dx-field-value"> <NumberBox format="#0.## kg" inputAttr={weightFormatLabel} defaultValue={3.14} /> </div> </div> </div> </div> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render(<App />, document.getElementById('app'));
window.exports = window.exports || {}; window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, jsx: 'react', }, meta: { 'react': { 'esModule': true, }, 'typescript': { 'exports': 'ts', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.8.1/prop-types.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@23.2.5/cjs', 'devextreme-react': 'npm:devextreme-react@23.2.5/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.51/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12', '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', 'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3', // SystemJS plugins '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.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme': { defaultExtension: 'js', }, 'devextreme-react': { main: 'index.js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/localization/messages': { format: 'json', defaultExtension: '', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.12/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
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.2.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.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.dx-field { margin-bottom: 20px; }