Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Como faz a funcionalidade de baixar o elemento/tabela [NEXTJS 14.x]

Tenho uma tabela dinâmica e quero poder baixar ela no estado atual por exemplo.

  return (
    <>
      {issues && issues.data.map(props => (
        <div key={props.id}>
          <h1>{props.summary}</h1>
        </div>
      ))}

    </>
  )
}

Como faz para poder criar ela? Tem que ta na pasta /public/?

Estou aceitando dicas e sugestões! Desde ja agradeço a atenção!

1 resposta
solução!

Olá, Samuel.

Tudo bem?

Se você deseja baixar a tabela no estado atual, você pode utilizar a biblioteca react-csv que permite exportar arrays/objetos para um arquivo CSV.

Primeiro, instale a biblioteca usando o npm ou yarn:

npm install react-csv
# ou
yarn add react-csv

Depois, você pode implementar a funcionalidade de download assim:

import { CSVLink } from "react-csv";

export default function MyComponent() {
  const data = issues && issues.data.map(props => ({
    id: props.id,
    summary: props.summary
  }));

  return (
    <>
      {issues && issues.data.map(props => (
        <div key={props.id}>
          <h1>{props.summary}</h1>
        </div>
      ))}
      <CSVLink data={data} filename={"minha-tabela.csv"}>
        Baixar CSV
      </CSVLink>
    </>
  )
}

Nesse exemplo, CSVLink é um componente que, quando clicado, inicia o download do CSV. O atributo data recebe os dados que você deseja exportar, e o filename é o nome do arquivo que será baixado.

Lembre-se de que essa é uma solução possível, mas pode haver outras dependendo do seu caso específico.

Espero ter entendido e conseguido ajudar. Qualquer coisa manda aqui. Bons estudos!