How can I put the data inside the MuiDataTable with these codes?

Question

This is my code and how can I push the data inside the MuiDataTable of data={data} with my componentDidMount(). I can already fetch the data from my user collection, however, I do not know enough about mui datatable on how to pass it there. This is the one mui datatable -

https://www.material-ui-datatables.com/

import React, {Component} from 'react';
import MUIDataTable from "mui-datatables";
import {firestore} from './../../../firebase/firebase.utils';

const columns = ["Display Name","Email"];


class UserTable extends Component {
    
    state = { user : null}
    
    componentDidMount() {
        firestore.collection('users')
            .get()
            .then( snapshot => {
                const users = []
                snapshot.forEach(doc => {
                    const data = doc.data()
                    users.push(data)
                })
                this.setState({ users : users})
                // console.log(snapshot)
            })
        .catch(error => console.log(error))
    }   

    render() {
        return ( 
        
            <MUIDataTable
                    title={"Users"}
                    columns={columns}
                    data={data}
                    // options={options}
            />
         );
    }
  
}
 
export default UserTable;

Answer 1

You need to pass array of object formatted with your column names' as key like
{"Display Name": value, Email:other value}.
You need to pass the state into the constructor like:

 constructor() {
    super();
    this.state = { users: [] };
  }

And then you just have to pass this.state.usersto MUIDataTable props data, like:

 <MUIDataTable
        title={"Users"}
        columns={this.columns}
        data={this.state.users}
        // options={options}
      />

For the example I used axios ro fetch data but this work with firestore to:

import MUIDataTable from "mui-datatables";
import { Component } from "react";
import * as axios from "axios";
class UserTable extends Component {
  columns = ["Display Name", "Email"];
  constructor() {
    super();
    this.state = { users: [] };
  }

  componentDidMount() {
    axios
      .get("/users.json")

      .then((res) => {
        const userData = res.data.map((u) => {
          return {
            "Display Name": u.name,
            Email: u.email
          };
        });
        console.log(userData);
        this.setState({
          users: userData
        });
      })
      .catch((error) => console.log(error));
  }
 
  render() {
    return this.state.users ? (
      <MUIDataTable
        title={"Users"}
        columns={this.columns}
        data={this.state.users}
        // options={options}
      />
    ) : (
      <div>Loading...</div>
    );
  }
}

export default UserTable;

With your code this would like :

import MUIDataTable from "mui-datatables";
import { Component } from "react";
import * as axios from "axios";
class UserTable extends Component {
  columns = ["Display Name", "Email"];
  constructor() {
    super();
    this.state = { users: [] };
  }

  componentDidMount() {
 firestore.collection('users')
            .get()
            .then( snapshot => {
                const users = []
                snapshot.forEach(doc => {
                    const data = doc.data()
                    users.push({"Display Name":data.displayName, Email: data.email});
      
                });
                  return users;})
             .then(userList => this.setState({users:userList});
              
            })
        .catch(error => console.log(error))
   
  }

  render() {
    return this.state.users ? (
      <MUIDataTable
        title={"Users"}
        columns={this.columns}
        data={this.state.users}
        // options={options}
      />
    ) : (
      <div>Loading...</div>
    );
  }
}

export default UserTable;

UPDATE:
here you can find a working example with firestore