{"id":20612886,"url":"https://github.com/alan-khosro/web-table","last_synced_at":"2026-04-21T19:03:52.763Z","repository":{"id":57685787,"uuid":"488327770","full_name":"alan-khosro/web-table","owner":"alan-khosro","description":"A tiny web component that converts data to beautiful, sortable, searchable, flexible table","archived":false,"fork":false,"pushed_at":"2022-07-23T05:25:15.000Z","size":51,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T17:41:58.997Z","etag":null,"topics":["csv-table","json-table","table","web-components","web-table"],"latest_commit_sha":null,"homepage":"https://alan-khosro.github.io/web-table/","language":"JavaScript","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/alan-khosro.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}},"created_at":"2022-05-03T18:52:17.000Z","updated_at":"2022-07-25T03:44:46.000Z","dependencies_parsed_at":"2022-09-18T23:00:49.203Z","dependency_job_id":null,"html_url":"https://github.com/alan-khosro/web-table","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/alan-khosro%2Fweb-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan-khosro%2Fweb-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan-khosro%2Fweb-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan-khosro%2Fweb-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alan-khosro","download_url":"https://codeload.github.com/alan-khosro/web-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242261087,"owners_count":20098691,"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-table","json-table","table","web-components","web-table"],"created_at":"2024-11-16T11:08:16.654Z","updated_at":"2026-04-21T19:03:52.729Z","avatar_url":"https://github.com/alan-khosro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/dable)\n\n# Web Table\nConverts data to a html table. It is\n- very tiny (2kb min.js.gzip) with no dependency\n- web component and easy to use: import the js file and use `\u003cweb-table\u003e` tag \n- sortable\n- searchable (filterable)\n- filter out unwanted columns or/and rename columns\n- flexible data input: csv, json, records, arrays\n- configurable by user or by programmer\n- Setting ui and battery included\n\n## DEMO: \n- [Documentation](https://alan-khosro.github.io/web-table/)\n- [Simple Usage](https://alan-khosro.github.io/web-table/examples/simple-usage.html)\n- [Usage with options](https://alan-khosro.github.io/web-table/examples/options-usage-example.html)\n- [Advanced Usage](https://alan-khosro.github.io/web-table/examples/advanced-usage.html)\n\n## CDN\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/alan-khosro/web-table/dist/web-table.min.js\" type=\"module\"\u003e\u003c/script\u003e\n```\n\n### Simple Usage\nImport library and initiate the table with a data url to populate it\n\n- [View source code example](https://raw.githubusercontent.com/alan-khosro/web-table/main/examples/simple-usage.html)\n\n\n```html\n\u003cscript src=\"../dist/web-table.js\" type=\"module\"\u003e\u003c/script\u003e\n\n\u003cweb-table \n\turl=\"./cash_flow_components.json\" \n\tdatatype=\"records\"\n\u003e\u003c/web-table\u003e\n```\n\nUser can use its built-in `Settings` ui to tweak irs colors, data source, etc.\n\n### options\n- [View source code for options usage](https://raw.githubusercontent.com/alan-khosro/web-table/main/examples/options-usage-example.html)\n\nyou can pass optional attributes:\n- datatype:\n\t- records (default): array of object [{col1: \"val1\", col2: 2},...]\n\t- csv: to read csv file\n\t- arrays: array of array [[\"col1\", \"col2\"],[\"row11\", \"row12\"],...]\n\t- headless: array of array with no column names\n- data source:\n\t- can be a url, feeding data with js, or local file\n- columns: \n\t- provide a list of columns that you want to show\n\t- the rest of columns in your data will be discarded\n\t- for headless array, provide column indices: [0, 3]\n\t- it will show data in the order of columns you provide\n\t- use comma to separate columns when using inline attributes (see the below example)\n- renames:\n\t- if you need to rename your column names, provide new names\n- accent:\n\t- to change default accent color, provide rgb numbers like accent=\"150,200,250\"\n- color:\n\t- to change default color, provide rgb numbers like color=\"100,100,100\"\n- delim:\n\t- if providing datatype=\"csv\" and delimeter is not comma, provide the seperator\n\n```html\n\u003cscript src=\"../dist/web-table.min.js\" type=\"module\"\u003e\u003c/script\u003e\n\n\u003cweb-table \n\turl=\"./owid-covid-latest.csv\" \n\tdatatype=\"csv\"\n\tdelim=\",\"\n\taccent=\"255, 100, 100\",\n\tcolumns=\"location,total_cases_per_million,new_cases_smoothed,total_deaths_per_million,new_deaths_smoothed\"\n\trenames=\"loc,case_rate,new_cases,deaths_rate,new_deaths\"\n\u003e\u003c/web-table\u003e\n```\n\n## Advanced Usage\n- [View source code for advanced usage](https://raw.githubusercontent.com/alan-khosro/web-table/main/examples/advanced-usage.js)\n\nYou can initiate it with no data url and then call its `populate` method in your js file.\nIt is useful for advanced use case when you need to prepare your data before populating the table.\n\u003e Please notice that the webcomponent has **no url** when you are populating data through js\n\u003e Please notice the second variable is an object that defines the options\n\n```html\n\u003csimple-table\u003e\u003c/simple-table\u003e\n```\n\n\n## TODO features: YAGNI\n- [ ] user settings to save table data as csv, json, arrays\n- [ ] user settings to upload local file (file access api)\n- [ ] user settings to change columns, renames\n- [ ] user settings to update from url\n- [ ] pagination\n- [ ] refactor to same method updating by user or programmer\n- [ ] look for hidden class (UPDATE and PAGINATION) and complete it\n\nTechnical Debt:\n- [ ] when sorting, it ignores filter values (YAGNI)\n- [ ] rewrite updateData method: refactor to take into account updating by user and programmer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan-khosro%2Fweb-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falan-khosro%2Fweb-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan-khosro%2Fweb-table/lists"}