Auto Row Height | Features | MESCIUS DataViewsJS Demos

The row height can be automatically adjusted based on the row's content. This example demonstrates the DataViews automatic row height feature. In many cases, usually when using images, a grid row needs to be sized to accommodate its content. When you set the autoRowHeight property to true, DataViews calculates and sets the row height dynamically according to the row's content. This is useful when trying to conserve space on a page, and doesn't require manually setting the height for each row.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Rows/AutoRowHeight/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="rows, row height, rowheight, autorowheight, auto height" />
<meta
name="description"
content="The row height can be automatically adjusted based on the row&#x27;s content.  This example demonstrates the DataViews automatic row height feature."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Auto Row Height | 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&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;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 class="main-container">
<div id="grid" class="grid"></div>
<div id="total" class="product-total"></div>
</div>
<script src="locale.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var presenter =
'<div class="container">' +
'<div class="photo"><img src={{=it.photo}} /></div>' +
'<div class="name">{{=it.name}}</div>' +
'</div>';
var cols = [
{
id: 'photo',
caption: 'Photo',
dataField: 'photo',
},
{
id: 'name',
caption: 'Name',
dataField: 'name',
},
{
id: 'income',
caption: 'Income',
dataField: 'income',
format: '$#,###',
},
{
id: 'info',
dataField: 'photo,name',
presenter: presenter,
},
];
var rowTemplate =
'<div class="rowDiv" style ="width:100%;height:100%;">\n    <div class="productDiv" data-column="info"></div>\n    <div class="incomeDiv c2"> <div class="container"> <span class="incomeSpan" data-column="income"></span> </div> </div>\n  </div>';
var dataView = new GC.DataViews.DataView(
document.getElementById('grid'),
data,
cols,
new GC.DataViews.GridLayout({
autoRowHeight: true,
showColHeader: false,
showRowHeader: false,
selectionMode: 'none',
rowTemplate: rowTemplate,
})
);
calcTotals(); // focus data.view by default
document.getElementById('grid').focus();
function calcTotals() {
var sum = dataView.data.evaluate('sum([income])');
var excelFormatter = new GC.DataViews.GeneralFormatter('#,###');
sum = excelFormatter.format(sum);
var count = dataView.data.evaluate('count([income])');
var totalPriceSpan = document.getElementById('total');
totalPriceSpan.innerHTML = '<div class="product-total-inner">'
.concat(locale.total, ' (')
.concat(count, ' ')
.concat(locale.items, '): <span>$')
.concat(sum, '</span></div>');
}

var SITE_ROOT = window.process.env.SITE_ROOT;
var data = [
{
photo: SITE_ROOT + '/images/others.png',
name: 'Other Products',
income: 2641000000,
},
{
photo: SITE_ROOT + '/images/ipad.png',
name: 'iPad',
income: 4538000000,
},
{
photo: SITE_ROOT + '/images/service.png',
name: 'Services',
income: 5028000000,
},
{
photo: SITE_ROOT + '/images/mac.png',
name: 'Mac',
income: 6030000000,
},
{
photo: SITE_ROOT + '/images/iphone.png',
name: 'iPhone',
income: 31368000000,
},
];

var locale = { total: 'Total', items: 'items' };

.main-container {
height: 380px;
width: 100%;
}
.grid {
height: 100%;
width: 100%;
}
.gc-grid {
border: 0;
}
.c2,
.c3 {
color: #fff;
font-size: 22px;
}
.r0 .c2 {
background-color: #603e50;
}
.r1 .c2 {
background-color: #695877;
}
.r2 .c2 {
background-color: #73738e;
}
.r3 .c2 {
background-color: #7c9eaa;
}
.r4 .c2 {
background-color: #8fc8c9;
}
.r0 .c3 {
background-color: #533747;
}
.r1 .c3 {
background-color: #5f506b;
}
.r2 .c3 {
background-color: #6a6b83;
}
.r3 .c3 {
background-color: #76949f;
}
.r4 .c3 {
background-color: #86bbbd;
}
.rowDiv {
display: table;
table-layout: fixed;
width: 100%;
}
.productDiv,
.incomeDiv {
border: 0;
display: table-cell;
height: 100%;
padding: 0.4em 1em;
vertical-align: middle;
}
.incomeSpan {
border: 0;
display: block;
padding: 0;
}
.photo,
.name {
display: inline-block;
vertical-align: middle;
}
.photo {
margin-right: 1em;
position: relative;
text-align: center;
top: 4px;
width: 100px;
}
.product-total {
font-size: 1.2rem;
margin-top: 1em;
text-align: right;
}
.product-total .product-total-inner {
background: #f1f1f1;
border-radius: 24px;
color: #333;
display: inline-block;
padding: 0.4em 1em;
}
.product-total .product-total-inner span {
font-weight: 700;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL1Jvd3MvQXV0b1Jvd0hlaWdodC9wdXJlanMvc3R5bGVzLnNjc3MiLCJGZWF0dXJlcy9Sb3dzL0F1dG9Sb3dIZWlnaHQvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtFQUNBLFdBQUE7QUNDRjs7QURFQTtFQUNFLFNBQUE7QUNDRjs7QURFQTs7RUFFRSxXQUFBO0VBQ0EsZUFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLHlCQUFBO0FDQ0Y7O0FERUE7RUFDRSx5QkFBQTtBQ0NGOztBREVBO0VBQ0UseUJBQUE7QUNDRjs7QURFQTtFQUNFLGNBQUE7RUFDQSxtQkFBQTtFQUNBLFdBQUE7QUNDRjs7QURFQTs7RUFFRSxTQUFBO0VBQ0EsbUJBQUE7RUFDQSxZQUFBO0VBQ0Esa0JBQUE7RUFDQSxzQkFBQTtBQ0NGOztBREVBO0VBQ0UsU0FBQTtFQUNBLGNBQUE7RUFDQSxVQUFBO0FDQ0Y7O0FERUE7O0VBRUUscUJBQUE7RUFDQSxzQkFBQTtBQ0NGOztBREVBO0VBQ0UsaUJBQUE7RUFDQSxrQkFBQTtFQUNBLGtCQUFBO0VBQ0EsUUFBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLGlCQUFBO0VBQ0EsZUFBQTtFQUNBLGlCQUFBO0FDQ0Y7QURDRTtFQUNFLG1CQUFBO0VBQ0EsbUJBQUE7RUFDQSxXQUFBO0VBQ0EscUJBQUE7RUFDQSxrQkFBQTtBQ0NKO0FEQ0k7RUFDRSxnQkFBQTtBQ0NOIiwiZmlsZSI6IkZlYXR1cmVzL1Jvd3MvQXV0b1Jvd0hlaWdodC9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMzgwcHg7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAwO1xufVxuXG4uYzIsXG4uYzMge1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAyMnB4O1xufVxuXG4ucjAgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzYwM2U1MDtcbn1cblxuLnIxIC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2OTU4Nzc7XG59XG5cbi5yMiAuYzIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzM3MzhlO1xufVxuXG4ucjMgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzdjOWVhYTtcbn1cblxuLnI0IC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM4ZmM4Yzk7XG59XG5cbi5yMCAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTMzNzQ3O1xufVxuXG4ucjEgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzVmNTA2Yjtcbn1cblxuLnIyIC5jMyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2YTZiODM7XG59XG5cbi5yMyAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzY5NDlmO1xufVxuXG4ucjQgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzg2YmJiZDtcbn1cblxuLnJvd0RpdiB7XG4gIGRpc3BsYXk6IHRhYmxlO1xuICB0YWJsZS1sYXlvdXQ6IGZpeGVkO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnByb2R1Y3REaXYsXG4uaW5jb21lRGl2IHtcbiAgYm9yZGVyOiAwO1xuICBkaXNwbGF5OiB0YWJsZS1jZWxsO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAuNGVtIDFlbTtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLmluY29tZVNwYW4ge1xuICBib3JkZXI6IDA7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwYWRkaW5nOiAwO1xufVxuXG4ucGhvdG8sXG4ubmFtZSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLnBob3RvIHtcbiAgbWFyZ2luLXJpZ2h0OiAxZW07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB0b3A6IDRweDtcbiAgd2lkdGg6IDEwMHB4O1xufVxuXG4ucHJvZHVjdC10b3RhbCB7XG4gIGZvbnQtc2l6ZTogMS4ycmVtO1xuICBtYXJnaW4tdG9wOiAxZW07XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xuXG4gIC5wcm9kdWN0LXRvdGFsLWlubmVyIHtcbiAgICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xuICAgIGJvcmRlci1yYWRpdXM6IDI0cHg7XG4gICAgY29sb3I6ICMzMzM7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIHBhZGRpbmc6IDAuNGVtIDFlbTtcblxuICAgIHNwYW4ge1xuICAgICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICB9XG4gIH1cbn1cbiIsIi5tYWluLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMzgwcHg7XG4gIHdpZHRoOiAxMDAlO1xufVxuXG4uZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbiAgd2lkdGg6IDEwMCU7XG59XG5cbi5nYy1ncmlkIHtcbiAgYm9yZGVyOiAwO1xufVxuXG4uYzIsXG4uYzMge1xuICBjb2xvcjogI2ZmZjtcbiAgZm9udC1zaXplOiAyMnB4O1xufVxuXG4ucjAgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzYwM2U1MDtcbn1cblxuLnIxIC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2OTU4Nzc7XG59XG5cbi5yMiAuYzIge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzM3MzhlO1xufVxuXG4ucjMgLmMyIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzdjOWVhYTtcbn1cblxuLnI0IC5jMiB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM4ZmM4Yzk7XG59XG5cbi5yMCAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTMzNzQ3O1xufVxuXG4ucjEgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzVmNTA2Yjtcbn1cblxuLnIyIC5jMyB7XG4gIGJhY2tncm91bmQtY29sb3I6ICM2YTZiODM7XG59XG5cbi5yMyAuYzMge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjNzY5NDlmO1xufVxuXG4ucjQgLmMzIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogIzg2YmJiZDtcbn1cblxuLnJvd0RpdiB7XG4gIGRpc3BsYXk6IHRhYmxlO1xuICB0YWJsZS1sYXlvdXQ6IGZpeGVkO1xuICB3aWR0aDogMTAwJTtcbn1cblxuLnByb2R1Y3REaXYsXG4uaW5jb21lRGl2IHtcbiAgYm9yZGVyOiAwO1xuICBkaXNwbGF5OiB0YWJsZS1jZWxsO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAuNGVtIDFlbTtcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLmluY29tZVNwYW4ge1xuICBib3JkZXI6IDA7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwYWRkaW5nOiAwO1xufVxuXG4ucGhvdG8sXG4ubmFtZSB7XG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbn1cblxuLnBob3RvIHtcbiAgbWFyZ2luLXJpZ2h0OiAxZW07XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICB0b3A6IDRweDtcbiAgd2lkdGg6IDEwMHB4O1xufVxuXG4ucHJvZHVjdC10b3RhbCB7XG4gIGZvbnQtc2l6ZTogMS4ycmVtO1xuICBtYXJnaW4tdG9wOiAxZW07XG4gIHRleHQtYWxpZ246IHJpZ2h0O1xufVxuLnByb2R1Y3QtdG90YWwgLnByb2R1Y3QtdG90YWwtaW5uZXIge1xuICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xuICBib3JkZXItcmFkaXVzOiAyNHB4O1xuICBjb2xvcjogIzMzMztcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICBwYWRkaW5nOiAwLjRlbSAxZW07XG59XG4ucHJvZHVjdC10b3RhbCAucHJvZHVjdC10b3RhbC1pbm5lciBzcGFuIHtcbiAgZm9udC13ZWlnaHQ6IDcwMDtcbn0iXX0= */