Topic: When opening modal it changes data sort from MDBDataTable
Amanda Pinto free asked 1 year ago
Expected Behavior the data keeps the same after opening the modal;
Actual Behavior If the datatable is sorted, when I open an ANTD Modal the data sort changes to the initial;
this is my parent TableTurma.jsx
const dadosDaTabela = {
columns: colunas,
rows: organizarRegistro(dadosTurma).map((registro) => ({ ...registro, clickEvent: () => { handleClick({ ...registro }, true) } })),
};
const handleClick = useCallback((params, visibility) => {
setCurrent(params);
setVisible(visibility)
},[]);
return (
registros &&
<>
<Estilos>
<ContainerTabela>
<Titulo texto="Alunos com baixo rendimento" />
<Tabela dadosDaTabela={dadosDaTabela} />
</ContainerTabela>
</Estilos>
<ModalDetalhes visible={visible} setVisible={handleClick} current={current} data={data} bim={bim} tipop={tipop} tipom={tipom} />
</>
)
}
TableTurma.propTypes = {
registros: PropTypes.array,
};
export default TableTurma;
this is my Tabela.jsx
const Tabela = ({dadosDaTabela}) => {
const refDataTable = useRef(null);
return (
<Table
striped={dadosDaTabela.rows.length > 0 ? true : false}
hover={dadosDaTabela.rows.length > 0 ? true : false}
autoWidth={true}
small
noBottomColumns
displayEntries={false}
entries={20}
infoLabel={['Mostrando', 'a', 'de', 'registros']}
paginationLabel={["<", ">"]}
paging={true}
pagesAmount={5}
searchLabel=" "
responsive
disableRetreatAfterSorting={true}
data={dadosDaTabela}
ref={refDataTable}
/>
)
}
export default memo(Tabela)
this is my ModalDetalhes.jsx
const ModalDetalhes = ({ visible, setVisible, current, data, bim, tipop, tipom }) => {
return (
<Modal
open={visible}
destroyOnClose={true}
closable={true}
maskClosable={true}
keyboard={false}
width={600}
onCancel={() => setVisible('', false)}
footer={''}
height={200}
>
<HeaderModal current={current} data={data}/>
<TableDetalhes dados={data.filter(x => x.ra == current?.ra)}/>
</Modal>
)
}
export default memo(ModalDetalhes)
please, what am i doing wrong?
Mateusz Lazaru staff answered 1 year ago
dadosDaTabela
is recreated on every component's reevaluation, which means Tabela's prop is also changed every time.
This code should fix it:
const dadosDaTabela = React.useMemo(() => {
return {
columns: colunas,
rows: organizarRegistro(dadosTurma).map((registro) => ({
...registro,
clickEvent: () => { handleClick({ ...registro }, true) }
}))
};
}, [colunas, dadosTurma, handleClick]);
You could also try to remove dependendies from this memo if it doesn't work - for testing purposes.
Amanda Pinto free commented 1 year ago
It didn't work at first, so I put all the code about the table, such as columns, dadosTabela, and so on in the Table.jsx file and it did work. Thank you!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 6.0.0
- Device: Web
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No