React DataGrid - Master-Detail Interface

Watch Video

NOTE
You must specify the DataGrid's keyExpr or the Store's key property to ensure that the master-detail interface works properly.
See Also

User Interaction

The master-detail interface supplies a standard data row with an expandable section that contains detail data. In master-detail terms, the data row is called "master row" and the expandable section - "detail section".

DevExtreme HTML5/JavaScript DataGrid UI component Master Detail Interface

The master-detail interface becomes available after you specify the detail sections' contents using the masterDetail.template property. You can expand and collapse detail sections programmatically or enable a user to do it by setting the masterDetail.enabled property to true. Set the masterDetail.autoExpandAll property to true to expand these sections by default.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • MasterDetail
  • } from 'devextreme-react/data-grid';
  •  
  • const DetailSection = ({ data }) => {
  • return (
  • <div class="employeeInfo">
  • <img class="employeePhoto" src={data.Picture} />
  • <p class="employeeNotes">{data.Notes}</p>
  • </div>
  • );
  • };
  •  
  • export default function App() {
  • return (
  • <DataGrid ... >
  • <MasterDetail
  • enabled={true}
  • autoExpandAll={true}
  • render={DetailSection}
  • />
  • </DataGrid>
  • );
  • }

Once loaded, a detail section's content remains cached until a user switches to another page in the DataGrid or reloads the web page.

View Demo

API

Pass -1 to the expandAll(groupIndex) or collapseAll(groupIndex) method to expand or collapse all master rows at once.

App.js
  • import React, { useRef, useCallback } from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, { ... } from 'devextreme-react/data-grid';
  •  
  • export default function App() {
  • const dataGrid = useRef(null);
  • const expandAllMasterRows = useCallback(() => {
  • dataGrid.current.instance().expandAll(-1);
  • }, []);
  • const collapseAllMasterRows = useCallback(() => {
  • dataGrid.current.instance().collapseAll(-1);
  • }, []);
  •  
  • return (
  • <DataGrid ...
  • ref={dataGrid}>
  • {/* ... */}
  • </DataGrid>
  • );
  • }

The expandRow(key) and collapseRow(key) methods expand and collapse an individual master row. You can check a row's current state by calling the isRowExpanded(key) method.

App.js
  • import React, { useRef, useCallback } from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, { ... } from 'devextreme-react/data-grid';
  •  
  • export default function App() {
  • const dataGrid = useRef(null);
  • const toggleMasterRow = useCallback((rowKey) => {
  • if (dataGrid.current.instance().isRowExpanded(rowKey)) {
  • dataGrid.current.instance().collapseRow(rowKey);
  • } else {
  • dataGrid.current.instance().expandRow(rowKey);
  • }
  • }, []);
  •  
  • return (
  • <DataGrid ...
  • ref={dataGrid}>
  • {/* ... */}
  • </DataGrid>
  • );
  • }

View Demo

Events

Events raised for a master row when a user expands or collapses it are identical to the events raised for expanding or collapsing a group. See this topic for details.