When opening modal it changes data sort from MDBDataTable


Topic: When opening modal it changes data sort from MDBDataTable

Amanda Pinto asked 2 years 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?


mlazaru staff answered 2 years 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 commented 2 years 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!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: 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