{"id":13941905,"url":"https://github.com/ashishd751/react-excel-renderer","last_synced_at":"2025-03-31T11:00:20.216Z","repository":{"id":48496445,"uuid":"165195332","full_name":"ashishd751/react-excel-renderer","owner":"ashishd751","description":"A react library to render and display excel sheets on webpage","archived":false,"fork":false,"pushed_at":"2022-12-02T21:59:59.000Z","size":832,"stargazers_count":178,"open_issues_count":32,"forks_count":53,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-24T09:02:43.131Z","etag":null,"topics":["excel","excel-based","exceldatareader","javascript","reactjs","sheetjs","workbook"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ashishd751.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://www.buymeacoffee.com/ashishd751"]}},"created_at":"2019-01-11T06:59:59.000Z","updated_at":"2025-02-20T09:54:33.000Z","dependencies_parsed_at":"2023-01-22T23:00:54.497Z","dependency_job_id":null,"html_url":"https://github.com/ashishd751/react-excel-renderer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashishd751%2Freact-excel-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashishd751%2Freact-excel-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashishd751%2Freact-excel-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ashishd751%2Freact-excel-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ashishd751","download_url":"https://codeload.github.com/ashishd751/react-excel-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246457967,"owners_count":20780676,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["excel","excel-based","exceldatareader","javascript","reactjs","sheetjs","workbook"],"created_at":"2024-08-08T02:01:35.200Z","updated_at":"2025-03-31T11:00:20.184Z","avatar_url":"https://github.com/ashishd751.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/ashishd751"],"categories":["JavaScript"],"sub_categories":[],"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)\nA react library to render and display excel sheets on webpage\n\n---\n\n## Demo\n* A sample demo can be found - [here](https://ashishd751.github.io/excel-renderer-demo/)\n* You can find code for the demo - [here](https://github.com/ashishd751/excel-renderer-demo)\n\n![](https://github.com/ashishd751/excel-renderer-demo/blob/master/public/DemoSample.gif)\n\n## Installation\n\n```\nnpm install react-excel-renderer --save\n```\n\n## Usage\n* Import the primary module *ExcelRenderer* to convert sheet data into JSON format. \n* Also import *OutTable* to display the obtained JSON into a HTML Table.\n```\nimport {OutTable, ExcelRenderer} from 'react-excel-renderer';\n```\n* Place a simple `input` element in the render function of your class and pass an `onChange` handler\n```\n\u003cinput type=\"file\" onChange={this.fileHandler.bind(this)} style={{\"padding\":\"10px\"}} /\u003e\n```\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\n```\n  fileHandler = (event) =\u003e {\n    let fileObj = event.target.files[0];\n\n    //just pass the fileObj as parameter\n    ExcelRenderer(fileObj, (err, resp) =\u003e {\n      if(err){\n        console.log(err);            \n      }\n      else{\n        this.setState({\n          cols: resp.cols,\n          rows: resp.rows\n        });\n      }\n    });               \n\n  }\n```\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\n```\n\u003cOutTable data={this.state.rows} columns={this.state.cols} tableClassName=\"ExcelTable2007\" tableHeaderRowClass=\"heading\" /\u003e\n```\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)\n\n\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.\n\n\n## Built With\n* [SheetJS](https://github.com/SheetJS/js-xlsx) - The web page sheet framework used\n\n\n## Authors\n**Ashish Deshpande** - *Initial work* - [Ashish's Github Profile](https://github.com/ashishd751)\n\n## License\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\n\n## Acknowledgments\n* Special shout out to the guys at **Sheet JS** for developing the parent library\n* High gratitude towards Bernard Bado to help me publish my first npm package\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashishd751%2Freact-excel-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashishd751%2Freact-excel-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashishd751%2Freact-excel-renderer/lists"}