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

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