Represent data using material designed table

Question

Help me to retrieve my firebase data into the material table. I need to display my data on MDBtable. But I can't find a better way to do that. If I could represent my firebase data on rows array in data function in MDB, I think this difficulty will be resolve. Here I mention the code block that I use to retrieve the data from firebase and the rest of crud operations.

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const Stable = () => {
  const data = {
 columns: [
      {
        label: 'assignid',
        field: 'assignid',
        sort: 'asc',
        width: 150
      },
      {
        label: 'customerphone',
        field: 'customerphone',
        sort: 'asc',
        width: 270
      },
      {
        label: 'driverid',
        field: 'driverid',
        sort: 'asc',
        width: 200
      },
      {
        label: 'pkgid',
        field: 'pkgid',
        sort: 'asc',
        width: 100
      },
      {
        label: 'tripstatus',
        field: 'tripstatus',
        sort: 'asc',
        width: 150
      }  
    ],
   rows: [
      {
        assignid: 'ID-123',
        customerphone: '07764259781',
        driverid: 'AA-23341',
        pkgid: '002AS',
        
      },
      {
        assignid: 'ID-123',
        customerphone: '071648755',
        driverid: 'AA-1233',
        pkgid: '612AS',
      }
   ]
  };


  return (
    <MDBDataTable
      striped
      bordered
      small
      data={data}
    />
  );
}

export default Stable;

The below code block is the way I use to retrieve data from firebase In MDBDataTable there is pagination, search, and sorting functions have already build up. https://mdbootstrap.com/docs/react/tables/search/

import React, { useState, useEffect } from "react";
import fireDB from '../../firebase';
import PkgasForm from "./PkgasForm";
const PkgAssign = ({  }) => {
          var [PkgasObjects, setPkgasObjects] = useState({});
          var [currentId, setcurrentId] = useState("");

          
        useEffect(() => {
          fireDB.database().ref().child("packageassign").on("value", (snapshot) => {
            if (snapshot.val() != null)
              setPkgasObjects({
                ...snapshot.val(),
              });
          });
        }, []);
      const addOrEdit = (obj) => {
            if (currentId == "")
              fireDB.database().ref().child("packageassign").push(obj, (err) => {
                if (err) console.log(err);
                else setcurrentId("");
              });
            else
              fireDB.database().ref().child(`packageassign/${currentId}`).set(obj, (err) => {
                if (err) {
                  console.log(err);
                } else setcurrentId("");
              });
          };

                  const onDelete = (key) => {
                    if (window.confirm("Are you sure to delete this recod ?")) {
                      fireDB.database().ref().child(`packageassign/${key}`).remove((err) => {
                        if (err) {
                          console.log(err);
                        } else setcurrentId("");
                      });
                    }
                  };
    return (
<h2>Package Assigning</h2>
        <div className="row">
          <div className="col-md-3">
            <PkgasForm {...{ addOrEdit, currentId, PkgasObjects }} /> //from to get user inserted data... 
          </div>
          <div className="col-md-9">
 <table className="table table-border table-stripped">
              <thead className="thread-light">
                <tr>
                  <th>assignid</th>
                  <th>customerphone</th>
                  <th>driverid</th>
                  <th>pkgid</th>
                  <th>tripstatus</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                {Object.keys(PkgasObjects).map((id) => {
                  return (
                    <tr key={id}>
                      <td>{PkgasObjects[id].assignid}</td>
                      <td>{PkgasObjects[id].customerphone}</td>
                      <td>{PkgasObjects[id].driverid}</td>
                      <td>{PkgasObjects[id].pkgid}</td>
                      <td>{PkgasObjects[id].tripstatus}</td>

                      <td>
                        <a
                          className="btn text-primary"
                          onClick={() => {
                            setcurrentId(id);
                          }}
                        >
                          <i className="fas fa-pencil-alt"></i>
                        </a>
                        <a
                          className="btn text-danger"
                          onClick={() => {
                            onDelete(id);
                          }}
                        >
                          <i className="far fa-trash-alt"></i>
                        </a>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>

Answer 1

This problem can simply slove by using .map() function which uses in js. fetch the data from a specific route and use .map() to assign it to the columns attribute.