Datatable only shows one entry

I am building a web app with firestore as its database. Currently, I am retrieving all documents from a collection then injecting those documents into a datatable using an array. The problem is, only one document is shown and the collection has 10 documents within it. What could be the problem? Below is the code:

html:![](https://datatables.net/forums/uploads/editor/mj/o83ctkt7bqwy.png "")
![](https://datatables.net/forums/uploads/editor/l2/eolop8dcsc5n.png "")


  <table class="table table-striped table-bordered" style="width:fit-content; " id="mydatatable">


      <thead>
        <tr>
          <th scope="col">Document id</th>
          <th scope="col">title</th>
          <th scope="col">details</th>
          <th scope="col">timestamp</th>
          <th scope="col">name</th>
        

        </tr>
      </thead>

      <tfoot>

        <tr>
          <th scope="col">Document id</th>
          <th scope="col">title</th>
          <th scope="col">details</th>
          <th scope="col">timestamp</th>
          <th scope="col">name</th>
         

        </tr>

      </tfoot>
    </table>

javascript:

db.collection("Emergency_Feeds").orderBy("timestamp","desc").get().then(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
      // doc.data() is never undefined for query doc snapshots
      console.log(doc.id, " => ", doc.data());
      var documentId = doc.id;
      var username = doc.data().name;
      var emTitle = doc.data().title;
      var emDets = doc.data().details;
      var emTimeDate = doc.data().timestamp.toDate();

      tableData =[
        
        [
  
           documentId,
           emTitle, 
           emDets,
           emTimeDate,
           username  
      ]
  
      ]

      
      console.log('Data:'+tableData);


  $('#mydatatable').DataTable( {
        retrieve: true,
        data:tableData
    } );
  
  });
});