Modal within a table in MDBootstrap for reactjs

Question

I am fairly new to reactjs and material design bootstrap. I am trying to populate a set of data on to a table using a mock json file. I did manage to find some degree of success in that. I wanted to incorporate a modal in the table row. such that when I click the row a modal popups.

I will post the code I have used. any help would be greatly appreciated.

//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;

This is the mock data file I have tried to use.

//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"
    }]

I will post a picture as well

Table snapshot

Answer 1

If I understand correctly you want to know how to add a button to open a modal window in the edit cell. This can be done easily by adding the component to the edit field in your data.js:

import React from 'react';
import ModalPage from './ModalPage';

export default [
  {
    testID: 938932,
    testEntity: "employee",
    testEntityKey: 1527003,
    testBusinessDate: "6/14/2017",
    testcreatedDate: "8/7/2017",
    testScore: 115,
    testScoreNormalised: "100",
    testUnitIdentifier: "",
    testownerIdentifier: "938932",
    testState: "inprogress",
    edit: <ModalPage />
  },
  {
    testID: 927366,
    testEntity: "employee",
    testEntityKey: 1645384,
    testBusinessDate: "8/20/2017",
    testcreatedDate: "3/18/2018",
    testScore: 123,
    testScoreNormalised: "100",
    testUnitIdentifier: "",
    testownerIdentifier: "927366",
    testState: "onhold",
    edit: <ModalPage />
  }
];

The ModalPage component I've used here is the modal page example component from the mdb docs. You can reference the example I've made on Stackblitz.

More info on how to customize your data table to include different controls you can find here.