Модальный внутри таблицы в MDBootstrap для reactjs

Я довольно новичок в начальной загрузке reactjs и material design. Я пытаюсь заполнить набор данных в таблице, используя файл mock json. Мне удалось найти в этом некоторую степень успеха. Я хотел включить модальное окно в строку таблицы. так что, когда я нажимаю на строку, появляются модальные всплывающие окна.

Я опубликую код, который я использовал. любая помощь будет принята с благодарностью.

//TablePage.js

import React, { Component } from "react";
import { MDBDataTable } from "mdbreact";
import testdata from "../../data.js";

class TablePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        columns: [
          {
            label: "test ID",
            field: "testID",
            sort: "asc",
            width: 50
          },
          {
            label: "test Entity",
            field: "testEntity",
            sort: "asc",
            width: 50
          },
          {
            label: "test Entity Key",
            field: "testEntityKey",
            sort: "asc",
            width: 50
          },
          {
            label: "test Business Date",
            field: "testBusinessDate",
            sort: "asc",
            width: 100
          },
          {
            label: "test created Date",
            field: "testcreatedDate",
            sort: "asc",
            width: 100
          },
          {
            label: "testScore",
            field: "test Score",
            sort: "asc",
            width: 50
          },
          {
            label: "test Score Normalised",
            field: "testScoreNormalised",
            sort: "asc",
            width: 50
          },
          ,
          {
            label: "testUnitIdentifier",
            field: "test Unit Identifier",
            sort: "asc",
            width: 50
          },
          {
            label: "testOwnerIdentifier",
            field: "testOwner Identifier",
            sort: "asc",
            width: 50
          },
          {
            label: "testState",
            field: "test State",
            sort: "asc",
            width: 50
          },
          {
            label: "edit",
            field: "Edit",
            sort: "asc",
            width: 50
          }
        ],
        rows: testdata
      }
    };

  }

  render() {

    return (
      <MDBDataTable btn striped bordered hover data = {this.state.data}>
        test
      </MDBDataTable>
    );
  }
}

export default TablePage;

Это макет файла данных, который я пытался использовать.

//data.js
const data = [
    {
        testID: 938932,
        testEntity: "employee",
        testEntityKey: 1527003,
        testBusinessDate: "6/14/2017",
        testcreatedDate: "8/7/2017",
        testScore: 115,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "938932",
        testState: "inprogress"
    },
    {
        testID: 903576,
        testEntity: "employee",
        testEntityKey: 1593873,
        testBusinessDate: "6/5/2017",
        testcreatedDate: "1/17/2018",
        testScore: 175,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "903576",
        testState: "onhold"
    },
    {
        testID: 947830,
        testEntity: "employee",
        testEntityKey: 1735438,
        testBusinessDate: "8/16/2017",
        testcreatedDate: "10/14/2017",
        testScore: 139,
        testScoreNormalised: "100",
        businessUnitIdentifier: "",
        testownerIdentifier: "947830",
        testState: "inprogress"
    },
    {
        testID: 952479,
        testEntity: "employee",
        testEntityKey: 1305158,
        testBusinessDate: "1/14/2018",
        testcreatedDate: "2/3/2018",
        testScore: 160,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "952479",
        testState: "ready"
    },
    {
        testID: 927366,
        testEntity: "employee",
        testEntityKey: 1645384,
        testBusinessDate: "8/20/2017",
        testcreatedDate: "3/18/2018",
        testScore: 123,
        testScoreNormalised: "100",
        testUnitIdentifier: "",
        testownerIdentifier: "927366",
        testState: "onhold"
    }]

выложу и фото

Снимок таблицы