npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pbrost-gral/react-data-export

v0.0.3

Published

A set of tools to export dataset from react to different formats.

Downloads

270

Readme

React-Data-Export

:warning: A complete re-write is coming soon (we won't need xlsx package anymore (It will be backward compatible):warning:

:new: I am re-writing complete excel api in JavaScript, please consider contributing or putting your ideas here https://github.com/securedeveloper/javascript-excel (After finishing will update this library)

(:exclamation::exclamation::exclamation:The purpose of having a new library is that open source libraries either does not support styling and rest functionality in excel or they are too heavy to consider)

npm version dependencies Status devDependencies Status Build Status Vulnerabilities Coverage Status

A data export library built with and for React.

Installation

With npm:

npm install react-data-export --save

Code Examples

Excel Props

| Prop | Type | Default | Required | Description
| :------------ | :------------------- | :--------- | :------- | :------------------------------------------------- | hideElement | bool | false | false | To hide the button & directly download excel file | filename | string | Download | false | Excel file name to be downloaded | fileExtension | string | xlsx | false | Download file extension [xlsx] | element | HTMLElement | <button> | false | Element to download excel file | children | Array<ExcelSheet> | null | true | ExcelSheet Represents data

ExcelSheet Props

| Prop | Type | Default | Required | Description
| :------------ | :---------------------- | :--------- | :------- | :------------------------------- | name | string | "" | true | Sheet name in file | data | array<object> | null | false | Excel Sheet data | dataSet | array<ExcelSheetData> | null | false | Excel Sheet data | children | ExcelColumn | null | false | ExcelColumns

Note: In ExcelSheet props dataSet has precedence over data and children props.

For further types and definitions Read More

Cell Style

Cell styles are specified by a style object that roughly parallels the OpenXML structure. The style object has five top-level attributes: fill, font, numFmt, alignment, and border.

| Style Attribute | Sub Attributes | Values | | :-------------- | :------------- | :------------- | | fill | patternType | "solid" or "none" | | fgColor | COLOR_SPEC | | bgColor | COLOR_SPEC | font | name | "Calibri" // default | | sz | "11" // font size in points | | color | COLOR_SPEC | | bold | true or false | | underline | true or false | | italic | true or false | | strike | true or false | | outline | true or false | | shadow | true or false | | vertAlign | true or false | numFmt | | "0" // integer index to built in formats, see StyleBuilder.SSF property | | | "0.00%" // string matching a built-in format, see StyleBuilder.SSF | | | "0.0%" // string specifying a custom format | | | "0.00%;\\(0.00%\\);\\-;@" // string specifying a custom format, escaping special characters | | | "m/dd/yy" // string a date format using Excel's format notation | alignment | vertical | "bottom" or "center" or "top" | | horizontal | "bottom" or "center" or "top" | | wrapText | true or false | | readingOrder | 2 // for right-to-left | | textRotation | Number from 0 to 180 or 255 (default is 0) | | | 90 is rotated up 90 degrees | | | 45 is rotated up 45 degrees | | | 135 is rotated down 45 degrees | | | 180 is rotated down 180 degrees | | | 255 is special, aligned vertically | border | top | { style: BORDER_STYLE, color: COLOR_SPEC } | | bottom | { style: BORDER_STYLE, color: COLOR_SPEC } | | left | { style: BORDER_STYLE, color: COLOR_SPEC } | | right | { style: BORDER_STYLE, color: COLOR_SPEC } | | diagonal | { style: BORDER_STYLE, color: COLOR_SPEC } | | diagonalUp | true or false | | diagonalDown | true or false

COLOR_SPEC: Colors for fill, font, and border are specified as objects, either:

  • { auto: 1} specifying automatic values
  • { rgb: "FFFFAA00" } specifying a hex ARGB value
  • { theme: "1", tint: "-0.25"} specifying an integer index to a theme color and a tint value (default 0)
  • { indexed: 64} default value for fill.bgColor

BORDER_STYLE: Border style is a string value which may take on one of the following values:

  • thin
  • medium
  • thick
  • dotted
  • hair
  • dashed
  • mediumDashed
  • dashDot
  • mediumDashDot
  • dashDotDot
  • mediumDashDotDot
  • slantDashDot

Borders for merged areas are specified for each cell within the merged area. So to apply a box border to a merged area of 3x3 cells, border styles would need to be specified for eight different cells:

  • left borders for the three cells on the left,
  • right borders for the cells on the right
  • top borders for the cells on the top
  • bottom borders for the cells on the left

Dependencies

This library uses file-saver and xlsx and using json-loader will do the magic for you.

///webpack.config.js
vendor: [
        .....
        'xlsx',
        'file-saver'
],
.....
node: {fs: 'empty'},
externals: [
    {'./cptable': 'var cptable'},
    {'./jszip': 'jszip'}
 ]