rxw

react-xlsx-workbook

An downloadable excel workbook react component from ClearC2 and republish by devarchi33

Showing:

Popularity

Downloads/wk

94

GitHub Stars

3

Maintenance

Last Commit

3yrs ago

Contributors

4

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Excel Workbook

React Excel Workbook is a library for defining downloadable excel workbooks with react components.

Example

import Workbook from 'react-xlsx-workbook'

const data1 = [
  {
    foo: '123',
    bar: '456',
    baz: '789'
  },
  {
    foo: 'abc',
    bar: 'dfg',
    baz: 'hij'
  },
  {
    foo: 'aaa',
    bar: 'bbb',
    baz: 'ccc'
  }
]

const data2 = [
  {
    aaa: 1,
    bbb: 2,
    ccc: 3
  },
  {
    aaa: 4,
    bbb: 5,
    ccc: 6
  }
]

const example = (
  <div className="row text-center" style={{marginTop: '100px'}}>
    <Workbook filename="example.xlsx" element={<button className="btn btn-lg btn-primary">Try me!</button>}>
      <Workbook.Sheet data={data1} name="Sheet A">
        <Workbook.Column label="Foo" value="foo"/>
        <Workbook.Column label="Bar" value="bar"/>
      </Workbook.Sheet>
      <Workbook.Sheet data={data2} name="Another sheet">
        <Workbook.Column label="Double aaa" value={row => row.aaa * 2}/>
        <Workbook.Column label="Cubed ccc " value={row => Math.pow(row.ccc, 3)}/>
      </Workbook.Sheet>
    </Workbook>
  </div>
)

render(example, document.getElementById('app'))

Example Excel

Workbooks can have multiple sheets. Sheets can use the same or different data sets(an array of objects). Sheets have columns. Columns define a column label and value. Values can either be a string(the property name) or a function that takes the current object and returns a value.

Dependencies

This package uses file-saver and xlsx packages. I am only familiar with webpack and in order for everything to work with webpack you must use the json-loader and have this defined in your webpack config.

node: {fs: 'empty'},
externals: [
  {'./cptable': 'var cptable'},
  {'./jszip': 'jszip'}
]

See the example directory for a working example.

Testing

I have no idea how to test this.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial