@vlsergey/react-bootstrap-csv-export
v1.5.0
Published
Ready to use CSV exporter components with settings form and progress indicator
Downloads
5
Maintainers
Readme
@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:
- [x] Generated CSV is downloaded to user browser with streamsaver library
- [x] Supports async fetching with pagination
- [x] 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>;
}