Your search did not match any results.
DataGrid

Overview

DevExtreme HTML5 JavaScript Data Grid is a feature-rich grid control that can be used as a React component. 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. Data Grid can operate in controlled or uncontrolled state mode and can be used with Redux. Declared PropTypes for typechecking are included. Learn more about DevExtreme React components on GitHub.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import ODataStore from 'devextreme/data/odata/store'; import DataGrid, { Column, Grouping, GroupPanel, Pager, Paging, SearchPanel, Selection } 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', beforeSend: function(request) { request.params.startDate = '2018-05-10'; request.params.endDate = '2018-05-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} showBorders={true} onContentReady={this.onContentReady} > <GroupPanel visible={true} /> <SearchPanel visible={true} highlightCaseSensitive={true} /> <Grouping autoExpandAll={false} /> <Selection mode={'multiple'} /> <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} cellComponent={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 Bullet, { Font, Margin, Size, Tooltip } from 'devextreme-react/bullet'; const customizeTooltip = function(data) { return { text: `${parseInt(data.value)}%` }; }; 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> ); }
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/18.2.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.3/css/dx.light.css" /> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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; }
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@18.2', 'devextreme-react': 'npm:devextreme-react@18.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'quill-delta-to-html': 'npm:quill-delta-to-html@0.10.4/dist/browser/QuillDeltaToHtmlConverter.bundle.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });