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.
To implement a custom formatter, reference any formatter library you like, define an object that implements the format function, and return the format string.
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:
colId The id of the column to be formatted
value The underlying value of that column
data The data item of that row
<!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 | MESCIUS 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" />
<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:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</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">
<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== */
