Using Muidatatable

Question

I made some videos on youtube lessons that earned me a small application for the company, I put a small schedule and a form of vehicle entries to run here at the company where I work, so that’s okay, the question that I saw that there’s a lot of cool stuff that we can do, Then I saw this Muidatatable, I thought it was really cool and I wanted to implement it where I list the information from these forms, but I can’t find any tutorial teaching how to do this directly from a database, only through Jason or files mounted in hand. Come on, my application runs local in the company, but the comic is in firebase, I have these two codes below that today bring me a table, which I wanted to modify, follows.

Brings the Data and lists the content.

    import React, { useEffect, useState } from 'react';
    
    import './home.css'
    import Navbar from '../Components/Navbar/navbar';
    import ListaAgenda from '../Components/ListaAgenda/listaagenda';
    import firebase from '../Config/firebase';
    import 'firebase/firestore';
    import { Link } from 'react-router-dom';
    import SweetAlert from 'react-bootstrap-sweetalert';
    
    function Home (){
    
        const [agenda, setAgenda] = useState([]);
        const [busca, setBusca] = useState('');
        const [texto, setTexto] = useState('');
        const [excluir, setExcluir] = useState('');
        const [confirmacao, setConfirmacao] = useState(false);
        const [confirmacaoId, setConfirmacaoId] = useState('');
    
        function deleteContato(id){
            firebase.firestore().collection('agenda').doc(id).delete().then(()=>{
                setExcluir(id);
                setConfirmacao(false);
            })     
        }
    
        function confirmeDelete(id) {
            setConfirmacaoId(id);
            setConfirmacao(true);
        }
    
        
    
        useEffect(function(){
            let listagenda = [];
            firebase.firestore().collection('agenda').get().then(async function(resultado){
                await resultado.docs.forEach(function(doc){
                    if (doc.data().nome.indexOf(busca) >= 0){
                    listagenda.push({
                        id: doc.id,
                        nome: doc.data().nome,
                        telefone: doc.data().telefone
                    });
                }         
            })
                setAgenda(listagenda);
            })
        }, [busca, excluir]);
    
        return <div>        
            <Navbar/>
            
            <div className=" container-fluid titulo">
                <h1> Agenda</h1>
                <div className="row">
                    <div className="col-4">
                        <Link to="/app/novocontato" className="btn btn-primary" type="button"><i className="fas fa-user-plus"></i> Novo Contato</Link>    
                    </div>
    
                    <div className="col-8">
                        <div className="input-group mb-3">
                            <input onChange={(event) => setTexto(event.target.value)} type="text" class="form-control" placeholder="Pesquisar por nome" aria-describedby="button-addon2"/>
                            <button onClick={(event) => setBusca(texto)} className="btn btn-primary" type="button" id="button-addon2"><i className="fas fa-search"></i> Pesquisar</button>
                        </div>       
                    </div>
                </div>
    
                <ListaAgenda arrayAgenda={agenda} clickDelete={confirmeDelete}/>
    
                {
                    confirmacao ? <SweetAlert
                                    warning
                                    showCancel
                                    showCloseButton
                                    confirmBtnText="Sim!"
                                    confirmBtnBsStyle="danger"
                                    cancelBtnText="Não"
                                    cancelBtnBsStyle="light"
                                    title="Exclusão"
                                    onConfirm={()=> deleteContato(confirmacaoId)}
                                    onCancel={()=>setConfirmacao(false)}
                                    reverseButtons={true}
                                    >
                                    Deseja realmente excluir este contato?
                                </SweetAlert> :null }
    
            </div>
                        
        </div>;
    }
    
    
    export default Home;

What creates the Table

import React from 'react';
import { Link } from 'react-router-dom';
import './listaagenda.css';




function ListaAgenda(props){

    return <table className="table table-hover table-bordered">
    <thead>
    <tr className="table-secondary">
    {/* <th scope="col" className="col-id">Código</th> */}
        <th scope="col" className="col-name">Nome</th>
        <th scope="col" className="col-fone">Telefone</th>
        <th scope="col" className="col-acao"></th>
    </tr>
    </thead>
    <tbody>
    {
        props.arrayAgenda.map((agenda) => {
            return <tr key={agenda.id}>
            {/* <th scope="row">{agenda.id}</th> */}
            <td>{agenda.nome}</td>
            <td>{agenda.telefone}</td>
            <td>
                <Link to={'/app/editarcontato/'+ agenda.id}><i className="fas fa-user-edit icone-acao"></i></Link>
                <Link to='/app/home' onClick={() => props.clickDelete(agenda.id)}><i className="fas fa-trash-alt icone-acao red"></i></Link>
            </td>
        </tr>
        })
    }
  
    </tbody>
</table>
}

export default ListaAgenda;