{"id":16581639,"url":"https://github.com/rootwork/responsive-tables-builder","last_synced_at":"2026-04-09T21:54:33.794Z","repository":{"id":68068993,"uuid":"350850569","full_name":"rootwork/responsive-tables-builder","owner":"rootwork","description":"Create mobile-first, accessible, responsive data tables from data files. HTML and CSS only; no JS in the output.","archived":false,"fork":false,"pushed_at":"2021-03-31T00:12:02.000Z","size":1860,"stargazers_count":1,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-01T05:46:25.232Z","etag":null,"topics":["accessibility","accessible-design","accessible-tables","data-tables","handlebars","mobile-first","mobile-first-tables","nojs","responsive-design","responsive-tables","sass","tables"],"latest_commit_sha":null,"homepage":"https://github.com/rootwork/responsive-tables-builder","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rootwork.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-23T20:37:02.000Z","updated_at":"2023-02-09T07:59:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"661ed397-a79c-4e69-800a-e7361db566d6","html_url":"https://github.com/rootwork/responsive-tables-builder","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/rootwork%2Fresponsive-tables-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootwork%2Fresponsive-tables-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootwork%2Fresponsive-tables-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rootwork%2Fresponsive-tables-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rootwork","download_url":"https://codeload.github.com/rootwork/responsive-tables-builder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242129625,"owners_count":20076439,"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":["accessibility","accessible-design","accessible-tables","data-tables","handlebars","mobile-first","mobile-first-tables","nojs","responsive-design","responsive-tables","sass","tables"],"created_at":"2024-10-11T22:29:35.138Z","updated_at":"2025-10-04T21:37:09.059Z","avatar_url":"https://github.com/rootwork.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Note: This is a WIP. The readme below is aspirational, guiding me in what I\nwant to do -- but things are only partially working at this point.**\n\nResponsive data tables -- tables of information that are still readable even at\nsmall screen widths -- can be tricky. There are\n[a lot of solutions out there](#techniques). This one picks an option that is\nmobile-first, does not require JS, allows for multiple \"levels\" of data, and is\npresented in a readable list form at small screen widths. Like so:\n\n{image TK}\n\nOne drawback to this solution, though, is that it relies on column headers being\ninserted into the HTML as data attributes, which is a pain if you have a lot of\nrows of information to present. You also have to manually change things like\n`colspan` based on the number of columns, and `scope` and CSS formatting (like\n`text-align`) based on the type of data in each cell.\n\nThis tool consumes raw data files, runs them through the responsive tables\ntemplate, and gives you HTML and CSS you can drop in place. It automatically\nadjusts the code to fit your columns and data formatting requirements.\n\n# Features\n\n* Prepare the data you want to display in structured data files, without having\nto worry about the necessary HTML code.\n\n* Generate semantic and accessibility-focused HTML output, without any need for\nJavaScript.\n\n* Tables are perfectly readable even if CSS never loads, and progressively\nenhanced for modern browsers while being fully compatible with old ones.\n\n* Mobile-first tables, unlike some responsive solutions out there.\n\n* Styling is done through Sass files, with variables that you can easily update\nto change things like breakpoints, colors, and spacing.\n\n* Within the table, different data can be formatted in different ways. For\ninstance, you can right-align numerical data columns.\n\n* CSS can optionally be included directly in the resulting HTML file -- so you\ncan drop it in all together, for instance in hosted solutions or CMSes where you\ndon't have control over the site-wide CSS files.\n\n# Requirements\n\nRuns on Node. Uses Handlebars and Sass, but these will install for you and you\ndon't necessarily need to know how to use them in order to process data and do\nsome basic formatting of it.\n\n# Details\n\n## Installation\n\n`npm install`\n\n## Usage\n\n1. Fork, or clone locally.\n\n2. Take a look at [`config.yaml`](config.yaml) and the sample data in\n[`data/sample.yaml`](data/sample.yaml). Run `npm start` to see how the HTML for\nthis is generated (at `dist/sample.html`).\n\n3. Modify config.yaml to suit your needs. Options include whether to create a\nsingle HTML file of all your data, or one HTML file for each data file, and\nwhether to generate a separate CSS file or drop the CSS styles into each HTML\nfile. Here you can also change some basic aspects of how your tables are\ndisplayed, like colors and spacing, and at what width you want the\nmobile-to-desktop breakpoint to occur.\n\n4. Place YAML data files in `data`, formatted as in the sample data file. If\nyou're not familiar with YAML, there are\n[lots](https://blog.stackpath.com/yaml/) of\n[guides](https://www.codeproject.com/Articles/1214409/Learn-YAML-in-five-minutes)\nand [many implementations](https://yaml.org/). While JSON is probably better for\ndata generally, YAML is easier to format and read, and there are [JSON-YAML\nconverters](https://www.json2yaml.com/) you can use.\n\n5. Run `npm start` to generate the HTML and CSS.\n\n6. For further styling customization, edit the Sass files in the\n[`styles`](styles) directory.\n\n7. Run `npm start prod` to generate compact and minified HTML and CSS files for\nproduction.\n\n## Directory structure\n\n[`config.yaml`](config.yaml), at the root directory, allows you to set\ngeneration options.\n\n[`data`](data) is where you put all of the raw data you're going to be\nformatting. A sample file is included.\n\n[`templates`](templates) contains the Handlebars template files that will format\nyour data. Generally you shouldn't need to edit these.\n\n[`styles`](styles) contains the Sass partials that control the styling of your\ndata tables. Feel free to crack these open if you want to fully customize the\nCSS styling of your display.\n\n[`dist`](dist) is where the HTML and CSS files will be created.\n\n# Known issues\n\n**I have data in key:value pairs like this and want to turn it into a table:**\n\n```\nName: Alice\nCity: Adelaide\nName: Bob\nCity: Baltimore\n```\n\nI hear you. Unfortunately, I had to choose between this format and lists of\nlists (grouping together headers). The latter proved to be more flexible when it\ncame to defining properties of headings, rows and cells -- for instance\nidentifying subheadings, setting things like `colspan`, and formatting different\ndata types like numbers.\n\nThe key:value format also requires repeating heading (column) names, which can\nbe problematic for those entering data by hand.\n\nThere are\n[several](https://stackoverflow.com/questions/55974692/how-to-convert-key-value-list-into-array-of-objects)\ndifferent\n[ways](https://stackoverflow.com/questions/63937416/how-to-convert-key-value-list-into-array)\nto\n[convert](https://www.samanthaming.com/tidbits/90-object-from-entries/) these\ntypes of lists.\n\n# Resources\n\n## Techniques\n\n* [Responsive tables, mobile first and no JS](https://codepen.io/shellbryson/post/responsive-tables),\nShell Bryson (the technique used in this system)\n\n* [Responsive Data Table Roundup](https://css-tricks.com/responsive-data-table-roundup/),\nCSS-Tricks (Chris Coyier) — also see\n[the full archive of related articles](https://css-tricks.com/tag/responsive-tables/)\n\n* [Picking a Responsive Tables Solution](https://cloudfour.com/thinks/picking-responsive-tables-solution/),\nCloudFour (Jason Grigsby)\n\n* [A Responsive Accessible Table](https://adrianroselli.com/2017/11/a-responsive-accessible-table.html),\nAdrian Roselli\n\n* [Under-Engineered Responsive Tables](https://adrianroselli.com/2020/11/under-engineered-responsive-tables.html),\nAdrian Roselli\n\n## Guides\n\n* [Web Typography: Designing Tables to be Read, Not Looked At](https://alistapart.com/article/web-typography-tables/),\nA List Apart (Richard Rutter)\n\n* [How to design complex (and responsive!) tables and not lose your mind](https://medium.com/firefly-design/how-to-design-complex-and-responsive-tables-and-not-lose-your-mind-15d8e1cc67a),\nRachel Anderson\n\n* [WAI's guide on accessible tables](https://www.w3.org/WAI/tutorials/tables/),\nW3C\n\n* [Creating Accessible Tables](https://webaim.org/techniques/tables/data),\nWebAIM\n\n* [Tables, CSS Display Properties, and ARIA](https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html),\nAdrian Roselli\n\n# License\n\nWork copyright Ivan Boothe, 2021. Licensed under GPLv3; see [LICENSE](LICENSE).\n\n    This program is free software: you can redistribute it and/or modify\n    it under the terms of the GNU General Public License as published by\n    the Free Software Foundation, either version 3 of the License, or\n    (at your option) any later version.\n\n    This program is distributed in the hope that it will be useful,\n    but WITHOUT ANY WARRANTY; without even the implied warranty of\n    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n    GNU General Public License for more details.\n\n    You should have received a copy of the GNU General Public License\n    along with this program.  If not, see \u003chttps://www.gnu.org/licenses/\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frootwork%2Fresponsive-tables-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frootwork%2Fresponsive-tables-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frootwork%2Fresponsive-tables-builder/lists"}