Overview
DevExtreme React Data Grid is a feature-rich grid control. Its main features include robust data layer, fast data processing, client-side data validation, and many more. Advanced UI customization is carried out using template components and render props. Declared PropTypes for typechecking are included. Learn more about DevExtreme React components.
To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: Getting Started with DataGrid.
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.
import React from 'react';
import ODataStore from 'devextreme/data/odata/store';
import DataGrid, {
Column,
Grouping,
GroupPanel,
Pager,
Paging,
SearchPanel,
} from 'devextreme-react/data-grid';
import DiscountCell from './DiscountCell.js';
const pageSizes = [10, 25, 50, 100];
const dataSourceOptions = {
store: new ODataStore({
url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
key: 'Id',
beforeSend(request) {
const year = new Date().getFullYear() - 1;
request.params.startDate = `${year}-05-10`;
request.params.endDate = `${year}-5-15`;
},
}),
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
collapsed: false,
};
this.onContentReady = this.onContentReady.bind(this);
}
render() {
return (
<DataGrid
dataSource={dataSourceOptions}
allowColumnReordering={true}
rowAlternationEnabled={true}
showBorders={true}
width="100%"
onContentReady={this.onContentReady}
>
<GroupPanel visible={true} />
<SearchPanel visible={true} highlightCaseSensitive={true} />
<Grouping autoExpandAll={false} />
<Column dataField="Product" groupIndex={0} />
<Column
dataField="Amount"
caption="Sale Amount"
dataType="number"
format="currency"
alignment="right"
/>
<Column
dataField="Discount"
caption="Discount %"
dataType="number"
format="percent"
alignment="right"
allowGrouping={false}
cellRender={DiscountCell}
cssClass="bullet"
/>
<Column dataField="SaleDate" dataType="date" />
<Column dataField="Region" dataType="string" />
<Column dataField="Sector" dataType="string" />
<Column dataField="Channel" dataType="string" />
<Column dataField="Customer" dataType="string" width={150} />
<Pager allowedPageSizes={pageSizes} showPageSizeSelector={true} />
<Paging defaultPageSize={10} />
</DataGrid>
);
}
onContentReady(e) {
if (!this.state.collapsed) {
e.component.expandRow(['EnviroCare']);
this.setState({
collapsed: true,
});
}
}
}
export default App;
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.1.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.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.dx-datagrid .dx-data-row > td.bullet {
padding-top: 0;
padding-bottom: 0;
}
import React from 'react';
import Bullet, {
Font, Margin, Size, Tooltip,
} from 'devextreme-react/bullet';
export default function DiscountCell(cellData) {
return (
<Bullet
showTarget={false}
showZeroLevel={true}
value={cellData.value * 100}
startScaleValue={0}
endScaleValue={100}
>
<Size width={150} height={35} />
<Margin top={5} bottom={0} left={5} />
<Tooltip
enabled={true}
paddingTopBottom={2}
zIndex={5}
customizeTooltip={customizeTooltip}
>
<Font size={18} />
</Tooltip>
</Bullet>
);
}
function customizeTooltip(data) {
return {
text: `${parseInt(data.value, 10)}%`,
};
}
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'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.1.5/cjs',
'devextreme-react': 'npm:devextreme-react@23.1.5',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'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',
// 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/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);