How To Show Nested Table Using DevExtreme In React Js

In this article, we learn how to show nested tables using DevExtreme in react app.

First, need to install the dependency of DevExtreme in our react js project.

npm i devextreme devextreme-react

Now import CSS files in  App.js

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

Now import DataGrid, Column, Pager, MasterDetail, and Paging from devextreme-react.

import DataGrid, {
  Column,
  Pager,
  Paging,
  MasterDetail
} from "devextreme-react/data-grid";

Then take JSON data for the data shown in the table and what the data looks like.

{
    "$id": "1",
    "InfoPromptIDForEdit": null,
    "lstModelFormDashboardVersion": [ 
        {
            "$id": "2",
            "ID": 1,
            "FormID": 57,
            "FormName": "React Form for API",
            "IsActive": true,
            "CreatedBy": "AD",
            "CreatedOn": "14-Jun-2022",
            "Actions": "Actions",
            "Action": "Action",
            "IPFormID": null,
            "IsPublished": false,
            "lstVersions": [
                {
                    "$id": "3",
                    "FormID": 57,
                    "VersionID": 75,
                    "VersionNo": "001",
                    "StatusID": 1,
                    "startdate": "",
                    "enddate": "",
                    "Validity": false,
                    "IsActive": true,
                    "FormURL": "",
                    "FormName": "React Form for API",
                    "Password": "",
                    "FormStatus": "Draft",
                    "IPFormVersionID": null,
                    "IPFormID": null,
                    "FormType": 1,
                    "FormTypeName": "AOT/WEB"
                },
                ...
            ]
        },
        ...
   ]
}

Now import in the App.js file.

import './App.css';
import DataGrid, {
  Column,
  Pager,
  Paging,
  MasterDetail
} from "devextreme-react/data-grid";
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import data from './data/formDashboardVersion.json';
import NestedTemplate from './NestedTemplate';

function App() {
  const allowedPageSizes = [5, 10, "all"];

  return (
    <>
      <DataGrid
        id="grid-container"
        dataSource={data.lstModelFormDashboardVersion}
        keyExpr="FormID"
        showBorders={true}
      >
        <Column dataField="ID" width={50} alignment="left" />
        <Column dataField="FormID" width={70} />
        <Column dataField="FormName" />
        <Column dataField="CreatedBy" />
        <Column dataField="CreatedOn" />
        <Column dataField="IsActive" />
        <MasterDetail enabled={true} component={NestedTemplate} />
        <Paging defaultPageSize={10} />
        <Pager
          visible={true}
          allowedPageSizes={allowedPageSizes}
          displayMode="compact"
          showPageSizeSelector={true}
          showInfo={true}
          showNavigationButtons={true}
        />
      </DataGrid>
    </>
  );
}

export default App;

Here DataGrid tag is used for the which data we want to show, the Column tag is used for the which column we want to show, the Paging is used for which one is the default page size, and the Pager is used for the how many options will appear in pagination, then MasterDetail uses to show nested data inside the table.

Now create nested data, create NestedTemplate.js file, inside that we need to create nested table and write data logic.

And also import ArrayStore and DataSource from the devextreme.

import React, { useEffect, useState } from 'react';
import { DataGrid, Column } from 'devextreme-react/data-grid';
import ArrayStore from 'devextreme/data/array_store';
import DataSource from 'devextreme/data/data_source';

const NestedTemplate = (props) => {
    const [data, setdata] = useState(null)
    useEffect(() => {
        setdata(props.data.data.lstVersions)
    }, [props])

    const dataWithIndex = React.useMemo(() => {
        return (
            data &&
            data.map((row, index) => ({
                ...row,
                ID: index + 1,
            }))
        );
    }, [data]);

    function getTasks(key) {
        console.log('key', key)
        return new DataSource({
            store: new ArrayStore({
                data: dataWithIndex,
                key: 'FormID',
            }),
            filter: ['FormID', '=', key],
        });
    }

    let dataSource = getTasks(props.data.key);

    return (
        <React.Fragment>
            <DataGrid
                dataSource={dataSource}
                showBorders={true}
                columnAutoWidth={true}
                className="bgColor"
            >
                <Column dataField="ID" width={50} alignment="left" />
                <Column dataField="FormTypeName" />
                <Column dataField="VersionNo" />
                <Column dataField="startdate" />
                <Column dataField="enddate" />
                <Column dataField="Validity" dataType="boolean" />
                <Column dataField="FormStatus" />
                <Column dataField="IsActive" />
            </DataGrid>
        </React.Fragment>
    )
}

export default NestedTemplate

Output:-