react-js-table-with-csv-dl

React-table-with-csv-download

React JS Table and log viewer with CSV download functionality

Description

React JS Table and log viewer with CSV download functionality. You can display data table information passing JS objects and an array of dats you want to show and download the full data into a csv file. You can pick what fields of the object you want to display and download the full objects.

How it looks:

Installation

Install it from npm and include it in your React build process (using Webpack, Browserify, etc).

npm i react-table-with-csv-download

Usage

Import TableViewer in your react component.

import TableViewer from 'react-table-with-csv-download';

Props available:

• content - An array of objects the data content

let table = [ 
  {number: 12, name: "Del Piero", position: "ST"},
  {number: 21, name: "Pirlo", position: "MC"},
  {number: 1, name: "Buffon", position: "GK"}
];

• headers - An array of strings with the headers you want to display

["number", "name"]

Use the same names as the object you are passing as prop. In this case, the table will show only name and number. In case of downloading data, will download the full object including the position. This gives you the ability of showing some fields and being able to download full data rows.

• minHeight, maxHeight - Min and Max height dimensions for the table

• activateDownloadButton - (Boolean) if you want to have a download button

For example:

<TableViewer
  title="Lineup"
  content={this.state.table}
  headers={this.state.headers}
  minHeight={0}
  maxHeight={400}
  activateDownloadButton={this.state.activateDownloadButton}
/>

License

Licensed under the MIT License.