Overview
DevExtreme JavaScript Data Grid is an adaptive grid available as an AngularJS directive. Data Grid supports two-way binding to scope properties and behaves like a native UI component. This demo showcases the grid's customizable layout and columns. Refer to other demos in this section for a detailed overview of other Data Grid features, like client-side exporting and printing, master-detail interface, searching with a search panel, etc.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
let collapsed = false;
$scope.dataGridOptions = {
dataSource: {
store: {
type: 'odata',
url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
key: 'Id',
beforeSend(request) {
request.params.startDate = '2020-05-10';
request.params.endDate = '2020-05-15';
},
},
},
paging: {
pageSize: 10,
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [10, 25, 50, 100],
},
remoteOperations: false,
searchPanel: {
visible: true,
highlightCaseSensitive: true,
},
groupPanel: { visible: true },
grouping: {
autoExpandAll: false,
},
allowColumnReordering: true,
rowAlternationEnabled: true,
showBorders: true,
columns: [
{
dataField: 'Product',
groupIndex: 0,
},
{
dataField: 'Amount',
caption: 'Sale Amount',
dataType: 'number',
format: 'currency',
alignment: 'right',
},
{
dataField: 'Discount',
caption: 'Discount %',
dataType: 'number',
format: 'percent',
alignment: 'right',
allowGrouping: false,
cellTemplate: 'discountCellTemplate',
cssClass: 'bullet',
},
{
dataField: 'SaleDate',
dataType: 'date',
},
{
dataField: 'Region',
dataType: 'string',
},
{
dataField: 'Sector',
dataType: 'string',
},
{
dataField: 'Channel',
dataType: 'string',
},
{
dataField: 'Customer',
dataType: 'string',
width: 150,
},
],
onContentReady(e) {
if (!collapsed) {
collapsed = true;
e.component.expandRow(['EnviroCare']);
}
},
};
$scope.customizeTooltip = function (pointsInfo) {
return { text: `${parseInt(pointsInfo.originalValue, 10)}%` };
};
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/21.2.3/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="gridContainer" dx-data-grid="dataGridOptions" dx-item-alias="discount">
<div data-options="dxTemplate:{ name:'discountCellTemplate' }">
<div class="chart-cell">
<div
dx-bullet="{
onIncidentOccurred: null,
size: {
width: 150,
height: 35
},
margin: {
top: 5,
bottom: 0,
left: 5
},
showTarget: false,
showZeroLevel: true,
value: discount.value * 100,
startScaleValue: 0,
endScaleValue: 100,
tooltip: {
enabled: true,
font: {
size: 18
},
paddingTopBottom: 2,
customizeTooltip: customizeTooltip,
zIndex: 5
}
}"
></div>
</div>
</div>
</div>
</div>
</body>
</html>
.dx-datagrid .dx-data-row > td.bullet {
padding-top: 0;
padding-bottom: 0;
}