Build a React.js CSV File Generator From Tablular Data Using react-csv Library

App.jsx

import React from 'react';
import { Button, Container, Row, Col, Table } from 'react-bootstrap';
import { CSVLink } from 'react-csv';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  // Sample JSON data to be converted to CSV
  const data = [
    { id: 1, name: 'John Doe', age: 28, email: 'john@example.com' },
    { id: 2, name: 'Jane Smith', age: 34, email: 'jane@example.com' },
    { id: 3, name: 'Michael Johnson', age: 45, email: 'michael@example.com' },
    { id: 4, name: 'Emily Davis', age: 23, email: 'emily@example.com' },
  ];

  // Define headers for the CSV
  const headers = [
    { label: 'ID', key: 'id' },
    { label: 'Name', key: 'name' },
    { label: 'Age', key: 'age' },
    { label: 'Email', key: 'email' },
  ];

  return (
    <Container className="mt-5">
      <Row className="justify-content-center">
        <Col md={8} className="text-center">
          <h1 className="mb-4">Download CSV Example</h1>
          
          {/* Table to display data */}
          <Table striped bordered hover>
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              {data.map((row) => (
                <tr key={row.id}>
                  <td>{row.id}</td>
                  <td>{row.name}</td>
                  <td>{row.age}</td>
                  <td>{row.email}</td>
                </tr>
              ))}
            </tbody>
          </Table>
          
          {/* Button to download CSV */}
          <CSVLink
            data={data}
            headers={headers}
            filename={"users_data.csv"}
          >
            <Button variant="primary" size="lg" className="mt-3">
              Download CSV
            </Button>
          </CSVLink>
        </Col>
      </Row>
    </Container>
  );
};

export default App;

import React from 'react';

import { Button, Container, Row, Col, Table } from 'react-bootstrap';

import { CSVLink } from 'react-csv';

import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

// Sample JSON data to be converted to CSV

const data = [

{ id: 1, name: 'John Doe', age: 28, email: 'john@example.com' },

{ id: 2, name: 'Jane Smith', age: 34, email: 'jane@example.com' },

{ id: 3, name: 'Michael Johnson', age: 45, email: 'michael@example.com' },

{ id: 4, name: 'Emily Davis', age: 23, email: 'emily@example.com' },

];

// Define headers for the CSV

const headers = [

{ label: 'ID', key: 'id' },

{ label: 'Name', key: 'name' },

{ label: 'Age', key: 'age' },

{ label: 'Email', key: 'email' },

];

return (

<h1 className="mb-4">Download CSV Example</h1>

{/* Table to display data */}

<thead>

<tr>

<th>Email</th>

</tr>

</thead>

<tbody>

{data.map((row) => (

<td>{row.email}</td>

</tr>

))}

</tbody>

</Table>

{/* Button to download CSV */}

<CSVLink

data={data}

headers={headers}

filename={"users_data.csv"}

Download CSV

</Button>

</CSVLink>

</Col>

</Row>

</Container>

);

};

export default App;

Build a React.js CSV File Generator From Tablular Data Using react-csv Library

Comments

Leave a Reply Cancel reply

Archives