Package Exports
- react-csv-downloader
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-csv-downloader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React CSV Downloader
A simple react component to allow download CSV file from js object
Installation
npm install --save react-csv-downloaderUsage
Use with children component
import CsvDownloader from 'react-csv-downloader';
<CsvDownloader>
<button>Download</button>
</CsvDownloader>Use without children component
<CsvDownloader text="Download"/>Datas
pass the downloaded datas as a component prop
const datas = [{
cell1: 'row 1 - cell 1',
cell2: 'row 1 - cell 2'
}, {
cell1: 'row 2 - cell 1',
cell2: 'row 2 - cell 2'
}];
<CsvDownloader datas={datas}/>Column
pass the columns definition as a component prop to change the cell display name. If column isn't passed the cell display name is automatically defined with datas keys
const columns = [{
id: 'cell1',
displayName: 'Cell 1'
}, {
id: 'cell2',
displayName: 'Cell 2'
}];
<CsvDownloader columns={columns}/>You can also use the columns definition to set the columns display order
Props
| Name | Type | Default | Required | Description |
|--------------- |------------------- |--------- |---------- |----------------------------------------------------------------------------------- |
| columns | array of object | null | false | Columns definition |
| datas | array of object | null | true | Downloaded datas |
| filename | string | null | true | You can pass the filename without extension. The extension is automatically added |
| extension | string | '.csv' | false | You can pass the file extension, note that it will affect filename |
| separator | string | ',' | false | Columns separator |
| noHeader | boolean | false | false | If true the header isn't added to the csv file |
| prefix | string or boolean | false | false | Filename prefix. If true prefix becomes a timestamp |
| suffix | string or boolean | false | false | Filename suffix/postfix. If true suffix becomes a timestamp |
| text | string | null | false | Download button text. Used if no children component. |
| wrapColumnChar | string | '' | false | Character to wrap every data and header value with. |
| bom | boolean | true | false | Activate or deactivate bom mode |
| newLineAtEnd | boolean | false | false | Insert new line at end of file. |
All other props are passed to button or wrapping component.
Full example
pass the downloaded datas as a component prop
render() {
const columns = [{
id: 'first',
displayName: 'First column'
}, {
id: 'second',
displayName: 'Second column'
}];
const datas = [{
first: 'foo',
second: 'bar'
}, {
first: 'foobar',
second: 'foobar'
}];
return (
<div>
<CsvDownloader
filename="myfile"
extension=".csv"
separator=";"
wrapColumnChar="'"
columns={columns}
datas={datas}
text="DOWNLOAD" />
</div>
);
}
// content of myfile.csv
// 'First column';'Second column'
// 'foo';'bar'
// 'foobar';'foobar'Get CSV contents
If you just need to get CSV contents, import react-csv-downloader/dist/lib/csv function and use it directly.