{"_id":"react-excel-renderer","_rev":"2-fa09c7af1572fd4c586b0d6b3e0a4760","name":"react-excel-renderer","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"react-excel-renderer","version":"1.0.0","description":"A react library to render and display excel sheets on webpage","main":"build/index.js","mode":"production","scripts":{"test":"echo \"Error: no test specified\" && exit 1","start":"webpack --watch","build":"webpack"},"repository":{"type":"git","url":"git+https://github.com/ashishd751/react-excel-renderer.git"},"keywords":["react","react-dom","excel","sheetjs","workbook","table"],"author":{"name":"Ashish Deshpande"},"license":"MIT","bugs":{"url":"https://github.com/ashishd751/react-excel-renderer/issues"},"homepage":"https://github.com/ashishd751/react-excel-renderer#readme","dependencies":{"react":"^16.7.0","webpack":"^4.12.0","xlsx":"^0.14.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.7.0","webpack-cli":"^3.0.4"},"gitHead":"93d217b3a6618c02367fd191a6d893bd9a1c6bdc","_id":"react-excel-renderer@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"ashishd751","email":"ashishd751@gmail.com"},"dist":{"integrity":"sha512-DNtizrdj6CeXOzZtWoafpw6a5BwTo13g6J41FcTPJ3mznFq9cecPPpOPFEzHW0pfEQJs+KyPZsdKxABIrSYd+g==","shasum":"15d3f39c9e67828a58676967841212fecf24126f","tarball":"https://registry.npmjs.org/react-excel-renderer/-/react-excel-renderer-1.0.0.tgz","fileCount":7,"unpackedSize":935443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcVCzzCRA9TVsSAnZWagAARiQP/1T4eN7qmSmoSN2XqWpM\nXIOTSGJfqBkmpyd1HZJ+TbXMDQXJufCmuOrhQBI1NjM7dHLK5xMG3vxBzejS\n/pxd4qpteffI95jmMgEZAXd8kKWJ5OP3myFjmJA4gEy41zD4kmJltPP9KzGz\n8N6gBLkOvld48T/XqPfFdSRq7BCnxaO5um1X7cc1cbFcPkjfDvS9kI9to+QT\nD1WMxZfoemAJs1FuUWV4wCQYMFB4cyAGqJC2LPLpXhAyzr6xsikE82Uq/T0C\ndQh9ntmw03WjbsFUDzRbxuPs1JLk6X3qrH6idREjj7HOh3a7szUPOFNQOzEZ\nvZMjnNTkj54jX4RjP2hqqufomUinT8FjtOd3Mti5RZzWd2B7nsN8RMBENWc5\n4BKfoCP6ckib7mhkgwwFZG2XsmH0YzdjmBEfcwqpm2Xs+Nq5JNjB0GyURwGy\noFVKp2Udv/5roO0P+1aBSP5KAchRS/VnPvC0xca1VCqsF7v28sptp87ZwwZN\nZb/F1l69yj7rSTcAK8gToHtJMy7txgaiR5rTmtU0Q/7coetWJg5xr+UFL88Q\nAsey1/PMeEiXrSU9/V7BYoGL2Kvz2LyxxD3Q1XnX+ZQ6S+Sdyx37Zg6VReeY\nEN96yfoOU43jwCb6cAkLXlxkHl9+q+WQtuZdCbw9ViuVxztnYo1LV3afnvcK\nA3La\r\n=OIW9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3QHYf5/c5PKclfcUhVCeN0d0kW89GupFA71waSw/rcAiEA1ICi4jx6eJHhf1RYra+iaCJPlhvgkFaBZ4+SksWZ5Ik="}]},"maintainers":[{"name":"ashishd751","email":"ashishd751@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-excel-renderer_1.0.0_1549020403164_0.3743763194648484"},"_hasShrinkwrap":false},"1.1.0":{"name":"react-excel-renderer","version":"1.1.0","description":"A react library to render and display excel sheets on webpage","main":"build/index.js","mode":"production","scripts":{"test":"echo \"Error: no test specified\" && exit 1","start":"webpack --watch","build":"webpack"},"repository":{"type":"git","url":"git+https://github.com/ashishd751/react-excel-renderer.git"},"keywords":["react","react-dom","excel","sheetjs","workbook","table"],"author":{"name":"Ashish Deshpande"},"license":"MIT","bugs":{"url":"https://github.com/ashishd751/react-excel-renderer/issues"},"homepage":"https://github.com/ashishd751/react-excel-renderer#readme","dependencies":{"react":"^16.7.0","webpack":"^4.12.0","xlsx":"^0.14.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.7.0","webpack-cli":"^3.0.4"},"gitHead":"0e5734d5ceeb54a2da254c9bc8d4526a8e8c7986","_id":"react-excel-renderer@1.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"ashishd751","email":"ashishd751@gmail.com"},"dist":{"integrity":"sha512-bxQdl7CLQmC3ughWUyMuzVPgjnssiQWi/3hGzq7bJ39wkBUT1E7gr8uh3PaJMG+AqYPx91qBFhDwzzNzZGKADA==","shasum":"6bcaef1fe621da70db838f361d9cc699a4efc5f0","tarball":"https://registry.npmjs.org/react-excel-renderer/-/react-excel-renderer-1.1.0.tgz","fileCount":7,"unpackedSize":936168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYmz9CRA9TVsSAnZWagAAapEQAIcIZbdgBP7ubygCup7u\nWNFjp+wTXrFjuv7NACM+lZDLmG5OE/KoaFFbMHU8e0c26isNWdG4KDeJxk76\ntjVFEKK6LWvHwqD+jRp5FpecRtOS8m6kKVpO2n+2Nq083LANGQ69Ut0TuPPZ\nAzhSeLztObO3133GtBmOhQwGX/K9H4la1HA/4Wu50qFlqB+QkfKJ7/sVT3km\n/kHB6FoopdYFGUiEngb50tHZ/XIwFfzG4O3S1gNejXZ0U4PMk/XTred+Lh9F\nhYOy7qaIBEjM47CQUKxXmRUAFUULDd43ErG48FY40b1fnwtO5Mhdr7a2KiiH\nKUA8Q6NQONB8su0u0k7yCNCvrrtW0wDScMAacmHquLk+lVYfhk7Tll3ngNR2\nyAKmU80DQN1bme5hPf4CoM8aHhazqFeVzmbxIx87CMXkooT5pBJO5ay+JtNF\n5XQHVB3FFCdZ4hN9HKksoqrdHqKnCE3vIJev3Yz+AXvpVtQd4fsWGfdGkHzD\n/70VUAadgbD6izFl2Zr6rWy1VZta912/kEXqbEZgMoeQd1Ynr3Mc4INpLqQj\nfD/sRI5C+V3vuvwW686VfvODIvSuOIQ55Yx0PrhLCQfAa/dTVzeCGTGARdaA\nHUcrEPmgGrJuOIpkx5FWRZR5sE+KCCICclHAi6WgH05yOCte/jtY6r3mRDlR\nUwLk\r\n=5zss\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+8gt4/BuU8GkJwzBGVaFmqaEj/AS+pJnIxzCEIKceYQIhAKXHU7Rb/4WQZCqk0XQf/uI6KfJL06y5zYr9AuBc7J08"}]},"maintainers":[{"name":"ashishd751","email":"ashishd751@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-excel-renderer_1.1.0_1549954301124_0.29001042673391875"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-01T11:26:43.164Z","1.0.0":"2019-02-01T11:26:43.288Z","modified":"2022-05-14T10:29:23.278Z","1.1.0":"2019-02-12T06:51:41.203Z"},"maintainers":[{"name":"ashishd751","email":"ashishd751@gmail.com"}],"description":"A react library to render and display excel sheets on webpage","homepage":"https://github.com/ashishd751/react-excel-renderer#readme","keywords":["react","react-dom","excel","sheetjs","workbook","table"],"repository":{"type":"git","url":"git+https://github.com/ashishd751/react-excel-renderer.git"},"author":{"name":"Ashish Deshpande"},"bugs":{"url":"https://github.com/ashishd751/react-excel-renderer/issues"},"license":"MIT","readme":"# react-excel-renderer ![](https://img.shields.io/npm/l/react-excel-renderer.svg?style=flat) ![](https://img.shields.io/npm/v/react-excel-renderer.svg?style=flat) ![](https://img.shields.io/npm/dt/react-excel-renderer.svg?style=flat)\r\nA react library to render and display excel sheets on webpage\r\n\r\n---\r\n\r\n## Demo\r\n* A sample demo can be found - [here](https://ashishd751.github.io/excel-renderer-demo/)\r\n* You can find code for the demo - [here](https://github.com/ashishd751/excel-renderer-demo)\r\n\r\n![](https://github.com/ashishd751/excel-renderer-demo/blob/master/public/DemoSample.gif)\r\n\r\n## Installation\r\n\r\n```\r\nnpm install react-excel-renderer --save\r\n```\r\n\r\n## Usage\r\n* Import the primary module *ExcelRenderer* to convert sheet data into JSON format. \r\n* Also import *OutTable* to display the obtained JSON into a HTML Table.\r\n```\r\nimport {OutTable, ExcelRenderer} from 'react-excel-renderer';\r\n```\r\n* Place a simple `input` element in the render function of your class and pass an `onChange` handler\r\n```\r\n<input type=\"file\" onChange={this.fileHandler.bind(this)} style={{\"padding\":\"10px\"}} />\r\n```\r\n* In the `onChange` handler, invoke the `ExcelRenderer` function and provide file object from the event handler to the `ExcelRenderer` function to obtain JSON data from sheet\r\n```\r\n  fileHandler = (event) => {\r\n    let fileObj = event.target.files[0];\r\n\r\n    //just pass the fileObj as parameter\r\n    ExcelRenderer(fileObj, (err, resp) => {\r\n      if(err){\r\n        console.log(err);            \r\n      }\r\n      else{\r\n        this.setState({\r\n          cols: resp.cols,\r\n          rows: resp.rows\r\n        });\r\n      }\r\n    });               \r\n\r\n  }\r\n```\r\n* Use the OutTable component to render obtained JSON data into HTML table, and provide classnames as props to make table look alike an Excel Sheet\r\n```\r\n<OutTable data={this.state.rows} columns={this.state.cols} tableClassName=\"ExcelTable2007\" tableHeaderRowClass=\"heading\" />\r\n```\r\n* To make this table look more like an excel sheet, follow this article - [Quick CSS Tools to make your web page tables to look just like excel](https://www.cogniview.com/articles-resources/quick-css-tools-for-making-your-web-tables-look-just-like-excel)\r\n\r\n\r\n**Note:** Once the JSON data is obatined, you can also use other options to render them instead of the OutTable component. For example, [CanvasDataGrid](https://github.com/TonyGermaneri/canvas-datagrid) provides various features to render tabular data.\r\n\r\n\r\n## Built With\r\n* [SheetJS](https://github.com/SheetJS/js-xlsx) - The web page sheet framework used\r\n\r\n\r\n## Authors\r\n**Ashish Deshpande** - *Initial work* - [Ashish's Github Profile](https://github.com/ashishd751)\r\n\r\n## License\r\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/ashishd751/react-excel-renderer/blob/master/LICENSE) file for details\r\n\r\n## Acknowledgments\r\n* Special shout out to the guys at **Sheet JS** for developing the parent library\r\n* High gratitude towards Bernard Bado to help me publish my first npm package\r\n\r\n","readmeFilename":"README.md"}