I am developing a management application with React in which I mainly show reports on graphs and tables.
So I'm using MaterialTables as tables, and I added the detailPanel option to show the row detail.
Inside the detail I am going to render an accordion consisting of three elements, in which the first is populated with the additional data relating to the row of the table, while the second and third accordion must be populated through API calls when I expand the accordion section.
However, I have a problem, even if the API call is successful and therefore I am able to retrieve the data, they are not displayed in the accordion.
In the accordion Rate Associate il console.log(y.idBol) it shows the values correctly on the console, but only after opening the details for other rows.
Do you have any suggestions or advice?
MY CODE:
import MaterialTable from 'material-table';
import React, { useEffect, useState } from 'react';
import tableIcons from '../templates/TableIcons';
import getColumns from './Tbl_DocumentoColumns';
import Edit from "@material-ui/icons/Edit";
import { Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core';
import { Switch } from "@material-ui/core";
import { withRouter } from "react-router";
import { AddBox } from "@material-ui/icons";
import ArrowDownwardOutlinedIcon from '@material-ui/icons/ArrowDownwardOutlined';
import { deleteTbl_Documento, getTbl_Documento } from "../../repo/tbl_documentoRepo";
import { searchTbl_Rata } from '../../repo/tbl_rataRepo';
import { searchTbl_Dettagli_Rata } from '../../repo/tbl_dettagli_rataRepo';
import { Loading } from "../templates/Loading";
/*
Documentation on developing the Material-Table can be found at https://material-table.com/
*/
const Tbl_DocumentoTable = (props) => {
const history = props.history;
const [columns, setColumns] = useState(getColumns({}));
const [acc_rata, setAccordionRata] = useState([]);
const [acc_drata, setAccordionDetailRata] = useState([]);
const [loading, setLoading] = useState(false);
//Here we call delete
const handleRowDelete = (oldData, resolve) => {
setLoading(true);
deleteTbl_Documento(oldData.idDoc)
.then(res => {
resolve();
setLoading(false);
})
.catch(error => {
resolve();
setLoading(false);
})
}
const handleRata = (idDoc) => {
setLoading(true);
const tblr = async () => {
const res = await searchTbl_Rata(1, "", idDoc);
setAccordionRata(res.data.data.data);
console.log(res.data.data.data);
setLoading(false);
}
tblr();
}
const handleDettagliRata = (idDoc) => {
const tbldr = async () => {
const res1 = await searchTbl_Dettagli_Rata(1, "", idDoc);
setAccordionDetailRata(res1.data.data.data);
console.log(res1.data.data.data);
}
tbldr();
}
return (
<div>
<MaterialTable style={{ marginLeft: 30, responsive: true, marginTop: 50, marginRight: 30 }}
minRows={15}
title="Lista dei documenti"
columns={columns}
data={async (query) => {
setLoading(true);
const res = await getTbl_Documento(query.page, query.pageSize, query.search);
setLoading(false);
return ({
data: res.data,
page: query.page,
totalCount: parseInt(res.total)
})
}}
detailPanel={[
{
tooltip: 'Dettaglio',
icon: '+',
openIcon: '-',
render: rowData => {
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDownwardOutlinedIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
Dettaglio del documento
</AccordionSummary>
<AccordionDetails>
<div
style={{
columns: 3,
width: '100%',
responsive: true,
}}
>
<ul style={{ fontSize: '14px' }}>
<li>Catena Servizio: {rowData.idCatenaServizio}</li>
<li>Commessa: {rowData.idCommessa}</li>
<li>Spedizione Racc: {rowData.spedRacc}</li>
<li>Ricezione Sped: {rowData.spedRic}</li>
<li>Nome Documento: {rowData.DocNomeFile}</li>
<li>Nome Documento Cliente: {rowData.DocNomeFileCliente}</li>
<li>ID Cliente sul documento: {rowData.docIDCliente}</li>
<li>#Documento: {rowData.docNum}</li>
<li>Data documento: {rowData.docData}</li>
<li>Destinatario 2: {rowData.docDestinatario2}</li>
<li>Destinatario 3: {rowData.docDestinatario3}</li>
<li>Destinatario 4: {rowData.docDestinatario4}</li>
<li>Destinatario 5: {rowData.docDestinatario5}</li>
<li>Destinatario 6: {rowData.docDestinatario6}</li>
<li>Codice Avvio: {rowData.codiceAvvio}</li>
<li>Dati 1: {rowData.dati1}</li>
<li>Dati 2: {rowData.dati2}</li>
<li>Dati 3: {rowData.dati3}</li>
<li>Dati 4: {rowData.dati4}</li>
<li>Dati 5: {rowData.dati5}</li>
<li>Spedito: {rowData.spedito}</li>
<li>Nome Immagine: {rowData.nomeImmagine}</li>
<li>Pagamento abilitato: {rowData.pagamentoAbilitato}</li>
<li>UltimaModifica: {rowData.lastUpdate}</li>
</ul>
</div>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDownwardOutlinedIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
onClickCapture={() => handleRata(rowData.idDoc)}
>
Rate associate
</AccordionSummary>
<AccordionDetails data={acc_rata}>
<div
style={{
columns: 3,
width: '100%',
}}
>
<ul style={{ fontSize: '14px' }}>
{acc_rata.map(y => {
console.log(y.idBol)
return (
<li key={y.idBol}>
{y.idBol}
</li>
)
})}
</ul>
</div>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDownwardOutlinedIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
onClickCapture={() => handleDettagliRata(rowData.idDoc)}
>
Dettaglio delle rate
</AccordionSummary>
<AccordionDetails data={acc_drata}>
<div
style={{
columns: 3,
width: '100%',
}}
>
<ul style={{ fontSize: '14px' }}>
{acc_drata.map(adr => {
return (
<li key={adr.idBol} >
idBol: {adr.idBol}
</li>
)
})}
</ul>
</div>
</AccordionDetails>
</Accordion>
</div>
)
},
}]}
options={{
sorting: true,
actionsColumnIndex: -1,
pageSize: 20,
toolbar: true,
paging: true,
responsive: true,
exportButton: true,
exportAllData: true,
exportFileName: "ListaTributi",
}}
onRowClick={(event, rowData, togglePanel) => togglePanel()}
actions={[
{
icon: () => <Edit />,
tooltip: 'Edit',
onClick: (event, rowData) => {
history.push({
pathname: `/tbl_documento/update/${rowData.idDoc}`,
user: rowData
})
}
},
{
icon: () => <AddBox variant="contained" color="secondary" />,
tooltip: 'Add New',
// This makes add button to appear in table toolbar instead for each row
isFreeAction: true,
onClick: (event, rowData) => {
history.push("/tbl_documento/add")
}
}
]}
icons={tableIcons}
editable={{
onRowDelete: (oldData) =>
new Promise((resolve) => {
handleRowDelete(oldData, resolve)
}),
}}
/>
</div>);
}
export default withRouter(Tbl_DocumentoTable);