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-dev 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 |
|----------- |------------------- |--------- |---------- |----------------------------------------------------------------------------------- |
| bom | boolean | true | false | Activate or desactivate bom mode |
| 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 |
| separator | string | ',' | false | |
| noHeader | bool | 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 date in YYYYMMDDhhiiss format |
| suffix | string or boolean | false | false | Filename suffix/postfix. If true suffix becomes a date in YYYYMMDDhhiiss format |
| text | string | null | false | Download button text. Used if no children 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"
separator=";"
columns={columns}
datas={datas}
text="DOWNLOAD" />
</div>
);
}
// content of myfile.csv
// First column;Second column
// foo;bar
// foobar;foobar