Custom Formatter

Columns can be customized in the way in which text, date, time, numbers, and other values are displayed. This example demonstrates how you can write your own column data formatter by representing a pattern with a simple string. Common examples include formatting dates, setting decimal places, and configuring number types. You can even transform data from one character set to another.

<p>Columns can be customized in the way in which text, date, time, numbers, and other values are displayed. This example demonstrates how you can write your own column data formatter by representing a pattern with a simple string. Common examples include formatting dates, setting decimal places, and configuring number types. You can even transform data from one character set to another.</p> <p>To implement a custom formatter, reference any formatter library you like, define an object that implements the format function, and return the format string.</p> <p>This example demonstrates the power of the built-in format library. Of course, you can use any format library here. The format callback function takes a params object with the following values:</p> <ul> <li><strong>colId</strong> The id of the column to be formatted</li> <li><strong>value</strong> The underline value of that column</li> <li><strong>data</strong> The data item of that row</li> </ul>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Columns/CustomFormatter/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="columns" /> <meta name="description" content="Columns can be customized in the way in which text, date, time, numbers, and other values are displayed. This example demonstrates how you can write your own column data formatter by representing a pattern with a simple string. Common examples include formatting dates, setting decimal places, and configuring number types. You can even transform data from one character set to another." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Custom Formatter | Features | GrapeCity DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="grid" class="grid"></div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
function formatValues(args) { var rowData = args.data; var value = rowData.value; var formatString = rowData.pattern; var excelFormatter = new GC.DataViews.GeneralFormatter(formatString); return excelFormatter.format(value); } var cols = [ { id: 'value', caption: 'Value', dataField: 'value', width: '*', cssClass: 'textLeft', }, { id: 'pattern', caption: 'Format String', dataField: 'pattern', width: '*', }, { id: 'text', caption: 'Formatted Text', dataField: 'text', format: formatValues, width: '*', cssClass: 'textLeft', }, ]; new GC.DataViews.DataView(document.getElementById('grid'), data, cols, new GC.DataViews.GridLayout());
var date = '2018/04/26'; var data = [ { value: 0.33, pattern: '# ?/?', }, { value: 0.33, pattern: '# ?/2', }, { value: 12345, pattern: '[DBNum1][$-411]#,##0', }, { value: 12345, pattern: '[DBNum1][$-411]General', }, { value: 1234.012345, pattern: '0', }, { value: 1234.012345, pattern: '0.00', }, { value: 1234.012345, pattern: '$#,##0', }, { value: 1234.012345, pattern: '$#,##0.00', }, { value: 1.012345, pattern: '0%', }, { value: 0.012345, pattern: '0.00%', }, { value: 1234.012345, pattern: '0.00E+00', }, { value: date, pattern: '[$-411]dddd-mmmm;@', }, { value: date, pattern: '[$-411]ggg eee/MM/dddd', }, { value: date, pattern: 'M/d', }, { value: date, pattern: 'MM/dd/yyyy', }, { value: date, pattern: 'dd-MMM-yy', }, { value: date, pattern: 'MMMM d, yyyy', }, { value: date, pattern: 'hh:mm:ss tt', }, { value: date, pattern: 'm/d/yy hh:mm tt', }, { value: date, pattern: '@', }, ];
.textLeft { text-align: left; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0NvbHVtbnMvQ3VzdG9tRm9ybWF0dGVyL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0NvbHVtbnMvQ3VzdG9tRm9ybWF0dGVyL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsZ0JBQUE7QUNDRiIsImZpbGUiOiJGZWF0dXJlcy9Db2x1bW5zL0N1c3RvbUZvcm1hdHRlci9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi50ZXh0TGVmdCB7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG59XG4iLCIudGV4dExlZnQge1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xufSJdfQ== */