react-export-table
v3.1.9
Published
A all in one solution for exporting array data as excel, pdf and copy to clipboard & print data!
Downloads
1,215
Maintainers
Readme
React Export Table
A package for for exporting array data or table data as excel sheet, csv, pdf and tools for copied data to clipboard or printing data. By using this package you can you can export table data and print table data or copy to clipboard all in one place.
- Small in Size
- All in one
- Properly Maintained
What's new on version 3.1.8
- Added
orientation
props toExportAsPdf
component. - Added
orientation
props toPrintDocument
component. - Added a solve for "Error: Orientation can be only..." error when orientation props is not provided
Installation
$ npm i react-export-table
import { ExportAsExcel, ExportAsPdf, ExportAsCsv, CopyToClipboard, CopyTextToClipboard, PrintDocument, ExcelToJsonConverter, FileUpload } from "react-export-table";
//Export as Excel Sheet
<ExportAsExcel
data={data}
headers={["Name", "Age", "Something"]}
>
{(props)=> (
<button {...props}>
Export as Excel
</button>
)}
</ExportAsExcel>
//Export as pdf
<ExportAsPdf
data={data}
headers={["CreatedBy", "Age", "Something Else"]}
headerStyles={{ fillColor: "red" }}
title="Sections List"
>
{(props)=> (
<button {...props}>
Export as PDF
</button>
)}
</ExportAsPdf>
//Export as CSV
<ExportAsCsv
data={data}
>
{(props)=> (
<button {...props}>Hello World</button>
)}
</ExportAsCsv>
//Copy to clipboard (Array or Table)
<CopyToClipboard
data={data}
headers={["CreatedBy", "Age", "Something Else"]}
>
{(props)=> (
<button {...props}>
Copy Document
</button>
)}
</CopyToClipboard>
//Copy to clipboard (text)
<CopyTextToClipboard text="Hello World">
{(props)=> (
<button {...props}>
Copy Text
</button>
)}
</CopyTextToClipboard>
//Print data
<PrintDocument
data={data}
headers={["CreatedBy", "Age", "Something Else"]}
>
{(props)=> (
<button {...props}>
Copy Text
</button>
)}
</PrintDocument>
//Excel to json converter or Read Excel File
<ExcelToJsonConverter>
{({
isDragging,
dragProps,
onFileUpload,
errors,
data,
fileInfo
}) => (
<div {...dragProps} onClick={onFileUpload}>
{errors}
</div>
)}
</ExcelToJsonConverter>
//File Upload
<FileUpload acceptType={[".pdf"]}>
{({
isDragging,
dragProps,
onFileUpload,
errors,
fileInfo
}) => (
<div className="border border-solid border-red-600 p-8" {...dragProps} onClick={onFileUpload}>
{errors}
</div>
)}
</FileUpload>
Options
ExportAsExcel
ExportAsPdf
StylesDefs
font: 'helvetica'|'times'|'courier' = 'helvetica'
fontStyle: 'normal'|'bold'|'italic'|'bolditalic' = 'normal'
overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'linebreak'
fillColor: Color? = null
textColor: Color? = 20
cellWidth: 'auto'|'wrap'|number = 'auto'
minCellWidth: number? = 10
minCellHeight: number = 0
halign: 'left'|'center'|'right' = 'left'
valign: 'top'|'middle'|'bottom' = 'top'
fontSize: number = 10
cellPadding: Padding = 10
lineColor: Color = 10
lineWidth: border = 0
// If 0, no border is drawn
Margin
top: number
right: number
bottom: number
left: number
Theme
You find this three type theme-
ExportAsCsv
CopyToClipboard
CopyTextToClipboard
PrintDocument
- Same as
ExportAsPdf
Component!
ExcelToJsonConverter
Props
Exported Options
FileUpload
Props
Exported Options
Migrate to Version 3
In version 3 I added more headless on each component. I update only CopyTextToClipboard
, CopyToClipboard
, ExportAsCsv
, ExportAsExcel
, ExportAsPdf
, PrintDocument
component.
Update this
<AnyOfThoseComponent
data={data}
headers={["Name", "Age", "Something"]}
>
<button>
Export as Excel
</button>
</AnyOfThoseComponent>
to
<AnyOfThoseComponent
data={data}
headers={["Name", "Age", "Something"]}
>
{(props)=> (
<button {...props}>
Export as Excel
</button>
)}
</AnyOfThoseComponent>
Stay in touch
- Author - Siam Ahnaf
- Website - https://www.siamahnaf.com/
- Twitter - https://twitter.com/siamahnaf198
- Github - https://github.com/siamahnaf