Master-Detail View

Documentation

The DataGrid UI component supports the master-detail interface. This interface supplies a standard data row with an expandable section that contains detail data rows. Master-detail data representation is configured using the masterDetail object. In this example, each data row is supplied with a detail section that contains another DataGrid UI component.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Copy to CodeSandBox

Apply

Reset

import React from 'react'; import DataGrid, { Column, MasterDetail } from 'devextreme-react/data-grid'; import DetailTemplate from './DetailTemplate.js'; import service from './data.js'; const employees = service.getEmployees(); class App extends React.Component { render() { return ( <DataGrid id="grid-container" dataSource={employees} keyExpr="ID" showBorders={true} > <Column dataField="Prefix" width={70} caption="Title" /> <Column dataField="FirstName" /> <Column dataField="LastName" /> <Column dataField="Position" width={170} /> <Column dataField="State" width={125} /> <Column dataField="BirthDate" dataType="date" /> <MasterDetail enabled={true} component={DetailTemplate} /> </DataGrid> ); } } export default App;

import React from 'react'; import { DataGrid, Column } from 'devextreme-react/data-grid'; import ArrayStore from 'devextreme/data/array_store'; import DataSource from 'devextreme/data/data_source'; import service from './data.js'; const tasks = service.getTasks(); class DetailTemplate extends React.Component { constructor(props) { super(props); this.dataSource = getTasks(props.data.key); } render() { let { FirstName, LastName } = this.props.data.data; return ( <React.Fragment> <div className="master-detail-caption"> {`${FirstName} ${LastName}'s Tasks`} </div> <DataGrid dataSource={this.dataSource} showBorders={true} columnAutoWidth={true} > <Column dataField="Subject" /> <Column dataField="StartDate" dataType="date" /> <Column dataField="DueDate" dataType="date" /> <Column dataField="Priority" /> <Column caption="Completed" dataType="boolean" calculateCellValue={this.completedValue} /> </DataGrid> </React.Fragment> ); } completedValue(rowData) { return rowData.Status === 'Completed'; } } function getTasks(key) { return new DataSource({ store: new ArrayStore({ data: tasks, key: 'ID' }), filter: ['EmployeeID', '=', key] }); } export default DetailTemplate;

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/20.2.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.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> <link rel="stylesheet" type="text/css" href="styles.css" /> <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>

#grid-container { height: 440px; } .master-detail-caption { padding: 0 0 5px 10px; font-size: 14px; font-weight: bold; }

System.config({ transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.5', 'devextreme-react': 'npm:devextreme-react@20.2.5', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.8/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.11/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.18/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.11/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.11/hooks/dist/hooks.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' }, 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' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });