{"id":18632721,"url":"https://github.com/simplenotsimpler/modern-table","last_synced_at":"2025-10-04T19:34:16.385Z","repository":{"id":56601801,"uuid":"257487993","full_name":"simplenotsimpler/modern-table","owner":"simplenotsimpler","description":"JavaScript ES6 library that displays table JSON data nicely within a Bootstrap 4 Card. ","archived":false,"fork":false,"pushed_at":"2021-08-21T01:21:56.000Z","size":424,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T15:00:43.267Z","etag":null,"topics":["bootstrap-4","data-table","es6-classes","es6-javascript","javascript","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://simplenotsimpler.github.io/modern-table-example/","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/simplenotsimpler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-21T05:19:10.000Z","updated_at":"2025-01-25T00:44:37.000Z","dependencies_parsed_at":"2022-08-15T21:40:47.422Z","dependency_job_id":null,"html_url":"https://github.com/simplenotsimpler/modern-table","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/simplenotsimpler/modern-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplenotsimpler%2Fmodern-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplenotsimpler%2Fmodern-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplenotsimpler%2Fmodern-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplenotsimpler%2Fmodern-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplenotsimpler","download_url":"https://codeload.github.com/simplenotsimpler/modern-table/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplenotsimpler%2Fmodern-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278366581,"owners_count":25975091,"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-10-04T02:00:05.491Z","response_time":63,"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":["bootstrap-4","data-table","es6-classes","es6-javascript","javascript","vanilla-javascript","vanilla-js"],"created_at":"2024-11-07T05:13:05.438Z","updated_at":"2025-10-04T19:34:16.361Z","avatar_url":"https://github.com/simplenotsimpler.png","language":"JavaScript","readme":"# ModernTable [![GitHub version](https://badge.fury.io/gh/simplenotsimpler%2Fmodern-table.svg)](https://badge.fury.io/gh/simplenotsimpler%2Fmodern-table) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)\nSimple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card.\n\n# Notes:\n* __*Only*__ targets **modern** browsers. \n* To help [Microsoft phase out IE11](https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666) and in anticipation of [Bootstrap 5 dropping IE support](https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/), IE is not supported.\n* Compatible with Bootstrap 4.4.1 and higher.\n* Specifically tested with Bootstrap 4.4.1 and 4.5.3.\n* Theoretically, this should work with other CSS frameworks. However, this has __*NOT*__ been tested with other CSS frameworks, so your mileage may vary.\n* If number or date formatting are specified in the configuration, but the proper library does not load, this gracefully fails to no formatting.\n* Strongly recommended to use ISO 8601 date formats in your source data and configuration. Then use the UI for localization.\n\n# Live Demo\n[https://simplenotsimpler.github.io/modern-table-example/](https://simplenotsimpler.github.io/modern-table-example/)\n\n# Getting Started\n## Documentation\n[https://simplenotsimpler.github.io/modern-table/](https://simplenotsimpler.github.io/modern-table/)\n\n## Requires:\n* JSON data source\n* Container to hold the table\n* [modern-table.css](/src/modern-table.css)\n\n## Recommended:\n* Number formatting: [format-intl-number library](https://github.com/simplenotsimpler/format-intl-number)\n* Date formatting: [Moment.js](https://momentjs.com/)\n\n## CDN:\n* CSS:  \n`\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/simplenotsimpler/modern-table@1.0.8/src/modern-table.css\"\u003e`\n\n* JS:  \n`\u003cscript src=\"https://cdn.jsdelivr.net/gh/simplenotsimpler/modern-table@1.0.8/src/modern-table.js\"\u003e\u003c/script\u003e`\n\n## Example\n**HTML:**\n```html\n\u003cdiv class=\"card card-body rounded shadow-lg\"\u003e\n    \u003cdiv id=\"table-container\" class=\"table-responsive table-height\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n**JS:**\n```javascript\nconst localJSON = 'data/sample-sales-data.json';\n\nconst sampleTable = new ModernTable(\n  'table-container', // tableContainerID\n  'sample-table', // tableID\n  localJSON, // dataURL\n  {\n    tableClasses: 'table table-bordered table-striped table-hover table-sticky table-sm',\n    tableCaption: 'Sample Sales Data',  \n    searchClasses: 'form-control mb-2 w-25 float-right',\n    colConfig: {\n      'rpt_date': {\n        'format': 'date-us',\n        'dateFrom': 'YYYY-MM-DD',\n        'dateTo': 'MM/DD/YY',\n        'columnTitle': 'report date'\n      },\n      'new_customers': {\n        'format': 'number-grouped',\n        'alignment': 'right'\n      },\n      'revenue': {\n        'format': 'currency-us',\n        'alignment': 'right'\n      },\n      'cogs': {\n        'format': 'currency-us',\n        'alignment': 'right'\n      },\n      'profit': {\n        'format': 'currency-us',\n        'alignment': 'right'\n      },\n      'profit_margin': {\n        'format': 'percent',\n        'numDecimals': 1,\n        'alignment': 'right'\n      }\n    }\n  });\n```\n# Styling\nFor the most part, the table is stylistically agnostic with a few exceptions which allow for a simple table scroll:\n* Container for the table has explicit height and overflow. These can be overriden.\n* Table header is sticky.\n* Sticky table header makes the header row background transparent, so this was explicitly set. This can be overridden.\n\nFor details on specific classes see [modern-table.css](/src/modern-table.css).\n\n# License\nThis project is [MIT licensed](https://github.com/simplenotsimpler/modern-table/blob/main/LICENSE).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplenotsimpler%2Fmodern-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplenotsimpler%2Fmodern-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplenotsimpler%2Fmodern-table/lists"}