{"id":15375385,"url":"https://github.com/marudhupandiyang/react-csv-to-table","last_synced_at":"2025-07-20T21:32:28.837Z","repository":{"id":26882697,"uuid":"111637883","full_name":"marudhupandiyang/react-csv-to-table","owner":"marudhupandiyang","description":"Render a CSV as simple HTML Table","archived":false,"fork":false,"pushed_at":"2023-02-27T17:37:40.000Z","size":1032,"stargazers_count":47,"open_issues_count":16,"forks_count":25,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T08:44:53.553Z","etag":null,"topics":["csv-to-html","react","react-component"],"latest_commit_sha":null,"homepage":"","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/marudhupandiyang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-22T04:53:12.000Z","updated_at":"2024-12-13T05:08:04.000Z","dependencies_parsed_at":"2024-06-18T15:29:59.790Z","dependency_job_id":"7fb7a60c-51d0-475d-ba7f-faa9f2a1d340","html_url":"https://github.com/marudhupandiyang/react-csv-to-table","commit_stats":{"total_commits":27,"total_committers":5,"mean_commits":5.4,"dds":0.2222222222222222,"last_synced_commit":"3c3885bb2bfa264923bb99edf48a1b10b2ca98c6"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/marudhupandiyang/react-csv-to-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marudhupandiyang%2Freact-csv-to-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marudhupandiyang%2Freact-csv-to-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marudhupandiyang%2Freact-csv-to-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marudhupandiyang%2Freact-csv-to-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marudhupandiyang","download_url":"https://codeload.github.com/marudhupandiyang/react-csv-to-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marudhupandiyang%2Freact-csv-to-table/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266204399,"owners_count":23892358,"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":["csv-to-html","react","react-component"],"created_at":"2024-10-01T14:03:03.274Z","updated_at":"2025-07-20T21:32:28.733Z","avatar_url":"https://github.com/marudhupandiyang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React CSV to HTML Table (Only 3Kb unzipped)\n\nCSV is the simplest form of storing a tabular data. Each record consists of one or more fields, separated by commas. The use of the comma as a field separator is the source of the name for this file format. React csv to html table is a simple reactjs library that takes CSV file content as input and renders a simple HTML table.\n\nSupports React \u003e= v16.8.6 (Use older version of this library to support React v15)\n\nBlog post https://medium.com/@marudhupandiyang/react-csv-to-html-table-f7880a90bfc\n\n### Installation:\n\nUse for React \u003e= v16\n\n    `npm install react-csv-to-table`\n\n To use for React \u003e= v15+\n\n    `npm install react-csv-to-table@0.0.1`\n\n### Usage:\n\n```\nimport { CsvToHtmlTable } from 'react-csv-to-table';\n\nconst sampleData = `\nModel,mpg,cyl,disp,hp,drat,wt,qsec,vs,am,gear,carb\nMazda RX4,21,6,160,110,3.9,2.62,16.46,0,1,4,4\nMazda RX4 Wag,21,6,160,110,3.9,2.875,17.02,0,1,4,4\nDatsun 710,22.8,4,108,93,3.85,2.32,18.61,1,1,4,1\nHornet 4 Drive,21.4,6,258,110,3.08,3.215,19.44,1,0,3,1\nHornet Sportabout,18.7,8,360,175,3.15,3.44,17.02,0,0,3,2\nValiant,18.1,6,225,105,2.76,3.46,20.22,1,0,3,1\nDuster 360,14.3,8,360,245,3.21,3.57,15.84,0,0,3,4\nMerc 240D,24.4,4,146.7,62,3.69,3.19,20,1,0,4,2\nMerc 230,22.8,4,140.8,95,3.92,3.15,22.9,1,0,4,2\nMerc 280,19.2,6,167.6,123,3.92,3.44,18.3,1,0,4,4\nMerc 280C,17.8,6,167.6,123,3.92,3.44,18.9,1,0,4,4\nMerc 450SE,16.4,8,275.8,180,3.07,4.07,17.4,0,0,3,3\nMerc 450SL,17.3,8,275.8,180,3.07,3.73,17.6,0,0,3,3\nMerc 450SLC,15.2,8,275.8,180,3.07,3.78,18,0,0,3,3\nCadillac Fleetwood,10.4,8,472,205,2.93,5.25,17.98,0,0,3,4\nLincoln Continental,10.4,8,460,215,3,5.424,17.82,0,0,3,4\nChrysler Imperial,14.7,8,440,230,3.23,5.345,17.42,0,0,3,4\nFiat 128,32.4,4,78.7,66,4.08,2.2,19.47,1,1,4,1\n`;\n\n\u003cCsvToHtmlTable\n  data={sampleData}\n  csvDelimiter=\",\"\n/\u003e\n```\n\nEasily customizable via css using classnames\n\n```\n\u003cCsvToHtmlTable\n  data={sampleData}\n  csvDelimiter=\",\"\n  tableClassName=\"table table-striped table-hover\"\n/\u003e\n```\n\nThe above code displays a table like below which is styled using bootstrap.\n\n![Table styled with bootstrap](https://i.imgur.com/nW3R9z8.png)\n\n\n### Complete Properties\n\n|Property Name  | Type | Default Value  | Description |\n|---|---|---|---|\n|data | string  | Nothing  | Hold the complete CSV Data. If your `csv` data is in a `remote url`, `fetch` it and send the contents of the file.  |\n|hasHeader   | bool  | true  | Tells the program to consider the first line of the provided data as the header. If `hasHeader` is false, then the first line will also be treated like any other row.  |\n|csvDelimiter  | string  | '\\t'  | The `delimiter` that  seperates the columns in the text. Other possible values can include `,`,'\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;'(4 spaces) |\n|tableClassName|string|Nothing|Set the class name for the whole table|\n|tableRowClassName|string|Nothing|Set the class name for each row in the table body|\n|tableColumnClassName|string|Nothing|Set the class name for each column in the table body|\n|rowKey|function| (row, rowIdx) =\u003e `row-${rowIdx}`|If not passed, `index` of the row will be used. In case of function, the passed in function in receive row and row index as arguments as shown in default function.|\n|colKey|number or function| (col, colIdx, rowIdx) =\u003e `col-${colIdx}`| If number, the value in the column of the specified index will be used as key. In case of function, the passed in function in receive row, col index and row index as arguments as shown in default function.|\n|renderCell|function?| (value, colIdx, rowIdx) =\u003e String | If specified, calls the function with the column value to allow additional preprocessing of the csv's cell values|\n\n### Instructions for example\n Checkout example [Readme](examples)\n\n\n### Roadmap\n1. Add more features to support multiple functionalities.\n2. Make it to render millions of row easily.\n3. Add excel like features\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarudhupandiyang%2Freact-csv-to-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarudhupandiyang%2Freact-csv-to-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarudhupandiyang%2Freact-csv-to-table/lists"}