Repository files navigation

Responsive data tables -- tables of information that are still readable even atsmall screen widths -- can be tricky. There area lot of solutions out there. This one picks an option that ismobile-first, does not require JS, allows for multiple "levels" of data, and ispresented in a readable list form at small screen widths. Like so:

{image TK}

One drawback to this solution, though, is that it relies on column headers beinginserted into the HTML as data attributes, which is a pain if you have a lot ofrows of information to present. You also have to manually change things likecolspan based on the number of columns, andscope and CSS formatting (liketext-align) based on the type of data in each cell.

This tool consumes raw data files, runs them through the responsive tablestemplate, and gives you HTML and CSS you can drop in place. It automaticallyadjusts the code to fit your columns and data formatting requirements.

• Prepare the data you want to display in structured data files, without havingto worry about the necessary HTML code.

• Generate semantic and accessibility-focused HTML output, without any need forJavaScript.

• Tables are perfectly readable even if CSS never loads, and progressivelyenhanced for modern browsers while being fully compatible with old ones.

• Mobile-first tables, unlike some responsive solutions out there.

• Styling is done through Sass files, with variables that you can easily updateto change things like breakpoints, colors, and spacing.

• Within the table, different data can be formatted in different ways. Forinstance, you can right-align numerical data columns.

• CSS can optionally be included directly in the resulting HTML file -- so youcan drop it in all together, for instance in hosted solutions or CMSes where youdon't have control over the site-wide CSS files.

Runs on Node. Uses Handlebars and Sass, but these will install for you and youdon't necessarily need to know how to use them in order to process data and dosome basic formatting of it.

npm install

1. Fork, or clone locally.

2. Take a look atconfig.yaml and the sample data indata/sample.yaml. Runnpm start to see how the HTML forthis is generated (atdist/sample.html).

3. Modify config.yaml to suit your needs. Options include whether to create asingle HTML file of all your data, or one HTML file for each data file, andwhether to generate a separate CSS file or drop the CSS styles into each HTMLfile. Here you can also change some basic aspects of how your tables aredisplayed, like colors and spacing, and at what width you want themobile-to-desktop breakpoint to occur.

4. Place YAML data files indata, formatted as in the sample data file. Ifyou're not familiar with YAML, there arelots ofguidesandmany implementations. While JSON is probably better fordata generally, YAML is easier to format and read, and there areJSON-YAMLconverters you can use.

5. Runnpm start to generate the HTML and CSS.

6. For further styling customization, edit the Sass files in thestyles directory.

7. Runnpm start prod to generate compact and minified HTML and CSS files forproduction.

config.yaml, at the root directory, allows you to setgeneration options.

data is where you put all of the raw data you're going to beformatting. A sample file is included.

templates contains the Handlebars template files that will formatyour data. Generally you shouldn't need to edit these.

styles contains the Sass partials that control the styling of yourdata tables. Feel free to crack these open if you want to fully customize theCSS styling of your display.

dist is where the HTML and CSS files will be created.

I have data in key:value pairs like this and want to turn it into a table:

Name: AliceCity: AdelaideName: BobCity: Baltimore

I hear you. Unfortunately, I had to choose between this format and lists oflists (grouping together headers). The latter proved to be more flexible when itcame to defining properties of headings, rows and cells -- for instanceidentifying subheadings, setting things likecolspan, and formatting differentdata types like numbers.

The key:value format also requires repeating heading (column) names, which canbe problematic for those entering data by hand.

There areseveraldifferentwaystoconvert thesetypes of lists.

• Responsive tables, mobile first and no JS,Shell Bryson (the technique used in this system)

• Responsive Data Table Roundup,CSS-Tricks (Chris Coyier) — also seethe full archive of related articles

• Picking a Responsive Tables Solution,CloudFour (Jason Grigsby)

• A Responsive Accessible Table,Adrian Roselli

• Under-Engineered Responsive Tables,Adrian Roselli

• Web Typography: Designing Tables to be Read, Not Looked At,A List Apart (Richard Rutter)

• How to design complex (and responsive!) tables and not lose your mind,Rachel Anderson

• WAI's guide on accessible tables,W3C

• Creating Accessible Tables,WebAIM

• Tables, CSS Display Properties, and ARIA,Adrian Roselli

Work copyright Ivan Boothe, 2021. Licensed under GPLv3; seeLICENSE.

This program is free software: you can redistribute it and/or modifyit under the terms of the GNU General Public License as published bythe Free Software Foundation, either version 3 of the License, or(at your option) any later version.This program is distributed in the hope that it will be useful,but WITHOUT ANY WARRANTY; without even the implied warranty ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See theGNU General Public License for more details.You should have received a copy of the GNU General Public Licensealong with this program.  If not, see <https://www.gnu.org/licenses/>.