React-export-table NPM

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

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>

<AnyOfThoseComponent
    data={data}
    headers={["Name", "Age", "Something"]}
>
    {(props)=> (
      <button {...props}>
        Export as Excel
      </button>
    )}
</AnyOfThoseComponent>