@vlsergey/react-bootstrap-csv-export

@vlsergey/react-bootstrap-csv-export

Ready-to-use components to export data as CSV. Provides not only core TypeScript functions, but also react-bootstrap form components that can be directly used in application.

Main features:

• Generated CSV is downloaded to user browser with streamsaver library
• Supports async fetching with pagination
• Indicates export progress

Online demo: HERE

Installation:

npm install --save @vlsergey/react-bootstrap-csv-export

or

npm install --save-dev @vlsergey/react-bootstrap-csv-export

Usage as part of the page

To include export-to-csv form to modal window or distinct page:

import Container from 'react-bootstrap/Container';
import {ExportToCsvForm, Page} from '@vlsergey/react-bootstrap-csv-export';

async function fetchPageImpl( page: number ) : Promise<Page<MyType>> {
  /* define how to fetch page of MyType */
  return {
    content: /*...*/ as MyType[],
    number: page,
    totalElements: /*...*/,
    totalPages: /*...*/,
  };
}
const fields = [{key: 'id'}, {key: 'name'}, {key: 'birthday'},];

/* ... */

export default function Demo (): JSX.Element {

  return <Container>
    <ExportToCsvForm
      fetchPage={fetchPageImpl}
      fields={fields}
      fileName="test.csv" />
  </Container>;
}

Usage as modal

To use out-of-the-box export-to-csv modal form:

import React, {useCallback, useState} from 'react';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';

import {ExportToCsvModal} from '@vlsergey/react-bootstrap-csv-export';

/* ... */

async function fetchPageImpl( page: number ) : Promise<Page<MyType>> {
  /* define how to fetch page of MyType */
  return {
    content: /*...*/ as MyType[],
    number: page,
    totalElements: /*...*/,
    totalPages: /*...*/,
  };
}

const fields = [{key: 'id'}, {key: 'name'}, {key: 'birthday'},];

export default function FormDemo (): JSX.Element {

  const [ show, setShow ] = useState<boolean>(false);
  const handleShow = useCallback(() => setShow(true), [ setShow ]);
  const handleHide = useCallback(() => setShow(false), [ setShow ]);

  return <Container>
    <ExportToCsvModal
      fetchPage={fetchPageImpl}
      fields={fields}
      fileName="test.csv"
      onHide={handleHide}
      show={show} />
    <Button onClick={handleShow}>Export to CSV</Button>
  </Container>;
}