{"id":26426426,"url":"https://github.com/pavelsr/csv-to-tablesorter","last_synced_at":"2025-08-21T10:15:28.336Z","repository":{"id":67319364,"uuid":"222323536","full_name":"pavelsr/csv-to-tablesorter","owner":"pavelsr","description":"Display any CSV file as HTML table with jQuery tablesorter. Alternative to derekeder/csv-to-html-table","archived":false,"fork":false,"pushed_at":"2020-02-04T17:38:05.000Z","size":15,"stargazers_count":12,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-19T11:45:10.247Z","etag":null,"topics":["csv-parser","csv-reader","csv-viewer","papaparse","tablesorter"],"latest_commit_sha":null,"homepage":"https://pavelsr.github.io/csv-to-tablesorter/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pavelsr.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":"2019-11-17T22:54:59.000Z","updated_at":"2025-05-24T21:41:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"0f7dd656-a740-4cd9-a2c9-dac8f18f624d","html_url":"https://github.com/pavelsr/csv-to-tablesorter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/pavelsr/csv-to-tablesorter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelsr%2Fcsv-to-tablesorter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelsr%2Fcsv-to-tablesorter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelsr%2Fcsv-to-tablesorter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelsr%2Fcsv-to-tablesorter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pavelsr","download_url":"https://codeload.github.com/pavelsr/csv-to-tablesorter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavelsr%2Fcsv-to-tablesorter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271462086,"owners_count":24763858,"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","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-parser","csv-reader","csv-viewer","papaparse","tablesorter"],"created_at":"2025-03-18T03:29:52.506Z","updated_at":"2025-08-21T10:15:28.331Z","avatar_url":"https://github.com/pavelsr.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSV to jQuery tablesorter\n\nDisplay any CSV file as a searchable, filterable, pretty HTML table. Done in 100% JavaScript.\n\nThis project is alternative to [derekeder/csv-to-html-table](https://github.com/derekeder/csv-to-html-table) with substitutions:\n\n  * [jquery-csv](https://github.com/evanplaice/jquery-csv/) -\u003e [papaparse](https://github.com/mholt/PapaParse)\n  * [datatables](https://datatables.net/) -\u003e [tablesorter](https://mottie.github.io/tablesorter/docs/)\n\nCheck out the working demo: https://pavelsr.github.io/csv-to-tablesorter/\n\nIn demo `\u003cthead\u003e` is predefined in html code but you can easily read it from csv file or add dynamically with js.\n\nYou can also rewrite `createTable()` function according your needs - e.g. for pretty output of links, images etc.\n\nBy default all dependencies are loaded from `cdnjs.cloudflare.com`\n\n\u003c!--ts--\u003e\n   * [CSV to jQuery tablesorter](#csv-to-jquery-tablesorter)\n   * [HOW TO](#how-to)\n      * [Define thead is javascript](#define-thead-is-javascript)\n      * [Get header from first row](#get-header-from-first-row)\n      * [Create table in case if tableData is array of objects instead of array of arrays](#create-table-in-case-if-tabledata-is-array-of-objects-instead-of-array-of-arrays)\n      * [Allow header word transfer](#allow-header-word-transfer)\n      * [Get file change date](#get-file-change-date)\n      * [Data formatting for filtering](#data-formatting-for-filtering)\n      * [Host as JSON API](#host-as-json-api)\n   * [Possible console errors](#possible-console-errors)\n      * [XML Parsing Error: not well-formed](#xml-parsing-error-not-well-formed)\n      * [TypeError: e is undefined on  jquery.tablesorter.widgets](#typeerror-e-is-undefined-on--jquerytablesorterwidgets)\n\n\u003c!-- Added by: pavel, at: Сб янв 11 13:31:50 MSK 2020 --\u003e\n\n\u003c!--te--\u003e\n\n# HOW TO\n\n## Define `thead` is javascript\n\nYou can redefine `createTable()` like that:\n\n```javascript\n\nfunction createTable(tableData, callback) {\n    var table = $('table#jquery-table');\n    \n    table.empty();\n\n    table.append(\n        $('\u003cthead\u003e').append(\n            $('\u003ctr\u003e').append(\n                $('\u003cth\u003e').text(\"Col1 header\"),\n                $('\u003cth\u003e').text(\"Col2 header\"),\n                $('\u003cth\u003e').text(\"Col3 header\"),\n                ...\n            )\n        )\n    );\n\n    var tbody = $('\u003ctbody\u003e');\n    $.each(tableData, function(x, row) {\n        var tr = $('\u003ctr\u003e');\n        $.each(row, function(y, col) {\n            tr.append( $('\u003ctd\u003e').text(col) );\n        });\n        tbody.append(tr);\n    });\n\n    table.append(tbody);\n    \n    callback();\n}\n\n```\n\nor make `thead` more elegant:\n\n```javascript\nvar header_columns = [\"Header_1\", \"Header_2\", \"Header_3\"];\nvar thead_tr = $('\u003ctr\u003e');\n$.each(header_columns, function(x, hcol) {\n    $('\u003ctd\u003e').text(hcol).appendTo(thead_tr);\n});\ntable.append( $('\u003cthead\u003e').append(thead_tr) );\n```\n\n## Get header from first row\n\nYou can set PapaParse `header` option to true and pass to `createTable()` `results.meta.fields` in addition to `results.data` (or just pass whole `results` object)\n\n```javascript\nvar table = $('table#jquery-table');\nvar thead_tr = $('\u003ctr\u003e');\n$.each(results.meta.fields, function(x, col_h) {\n    $('\u003ctd\u003e').text(col_h).appendTo(thead_tr);\n});\ntable.append( $('\u003cthead\u003e').append(thead_tr) );\t\n```\n\n## Change columns order other than it's defined in parsed CSV file\n\nAfter particular\n\n## Hide columns from result table \n\nYou should excluse field from `thead` and `tbody` both:\n\n```javascript\n$.each(results.meta.fields, function(x, col_name) {\n\tif ( col_name == \"Col_name_to_exclude\" ) {\n\t\treturn true;\n\t}\n    $('\u003ctd\u003e').text(col_name).appendTo(thead_tr);\n...\n$.each(results.data, function(x, row) {\n    var tr = $('\u003ctr\u003e');\n    $.each(row, function(col_name, col_value) {\n        if ( col_name == \"Col_name_to_exclude\" ) { // не отображаем вообще\n\t\t\treturn true;\n\t\t}\n        tr.append( $('\u003ctd\u003e').text(col_value) );\n\n```\n\n\n## Create table in case if `tableData` is array of objects instead of array of arrays\n\nE.g. if you are reading data from JSON API following code example can be useful\n\n```javascript\n$.each(tableData, function(i, item) {\n    $('\u003ctr\u003e').append(\n        $('\u003ctd\u003e').text(item.prop1),\n        $('\u003ctd\u003e').text( js_func_1( item.prop1, item.prop2 ) ),\n        $('\u003ctd\u003e').append( '\u003ca href=\"' + item.prop3 + '\" target=\"_blank\"\u003e'+ js_func_2(item.prop4) + '\u003c/a\u003e' ),\n        ...\n    ).appendTo( table.append( $('\u003ctbody\u003e') ) );\n});\n```\n\n## Allow header word transfer\n\nIt's done automatically\n\n## Get file change date\n\nYou can do it with jquery \n\n```javascript\n$.get( csv_filename, function( data, textStatus, request ) {\n\t$(\"span#file_date\").text( request.getResponseHeader(\"Last-Modified\") );\n\tPapa.parse(data, { ...\n```\n\n## Dynamically add columns\n\nYou should add headers at `Papa.parse` `complete` callback, at `results.meta.fields` array.\nOtherwise it will not tied properly\n\n```javascript\nPapa.parse(data, {\n\t\tcomplete: function(results) {\n\t\t\tresults.meta.fields.push('New column header');\n```\n\nAn you should fill dynamic columns values at `createTable()` row iterator\n\n## Data formatting for filtering\n\nMost good option is [formatter widget](https://mottie.github.io/tablesorter/docs/example-widget-formatter.html) - it allows\nto save original cell text within the table cell data-attribute to maintain the sort order.\n\n```javascript\nwidgetOptions: {\n\tformatter_column: {\n        1 : function( text, data ) {\n\t\t\tconsole.log( \"text in cell: \" + text);\n\t\t\tconsole.log( \"text in 2nd column: \" + $(data.$cells[2]).text() );\n\t\t\treturn _func( text, $(data.$cells[2]).text() );\n\t\t}\n    },\n    ...\n```\n\nPapa.parse parse all as string by default ( if you haven't set `dynamicTyping: true` )\n\nYou can use this construction for rounding numbers\n\n```javascript\nparseFloat( str.toString().replace(\",\", \".\") ).toFixed(2)\n```\n\n## Host data as JSON API on Github\n\n# Possible console errors\n\n## XML Parsing Error: not well-formed\n\nIn console you can see that error. \n\nThere is no problem if you see it locally and other code is working fine.\n\nThis error appears only because csv file has no `Content-type: text/csv` headers, inserted by server.\n\nIf you still annoyed by this you can run\n\n```\npython -m SimpleHTTPServer\n```\n\nand check your code on http://localhost:8000/\n\n## TypeError: e is undefined on  jquery.tablesorter.widgets\n\nIt's a problem related to [select2](https://mottie.github.io/tablesorter/docs/example-widget-filter-formatter-select2.html) widget\n\nPossible reason is empty field that's needed to be filtered ( e.g. it could be caused of trailing newline in end of csv file )\n\nYou can remove trailing newline in end of file with `perl -pi -e 'chomp if eof' demo.csv`\n\nFor exact debug please inspect array after `Parsing complete` message.\n\nUPD: More elegant solution: set `skipEmptyLines: true` at `Papa.parse()`.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavelsr%2Fcsv-to-tablesorter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpavelsr%2Fcsv-to-tablesorter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavelsr%2Fcsv-to-tablesorter/lists"}