Uswds: Suggestions for tables

Created on 25 Mar 2016  路  5Comments  路  Source: uswds/uswds

Suggest adding standard controls/icons for tables to allow sorting/filtering based on column heading; also standard icons/controls for downloading table data or visualizing the table as a graph

minor ux design visual design enhancement

All 5 comments

Hey thanks @DruidSmith, I've added this as a feature request and we'll see how this fits with our product roadmap https://github.com/18F/web-design-standards/wiki/Product-Roadmap and component prioritization: https://github.com/18F/web-design-standards/wiki/Component-prioritization:-The-factors-that-guide-our-prioritization-process

DataTables is a well-written open-source, free, plugin for progressively-enhancing tables to add filtering, sorting, pagination and even optional exports to PDF, CSV and clipboard. A lot of thought has gone into it.

Perhaps the good play here is to create a "Design Standards" theme for DataTables. That way a project that needs the enhancement(s) can include DataTables, and the relevant theme's CSS and get what they need, while the Design Standards core stays "clean" of extra code that won't always be desired.

I'll donate the time to create the theme if it is wanted...just let me know!

The visualization can be a little more tricky. I'd love to see Highcharts (which is "pure" JavaScript) adopted for this purpose. I know they are fleshing-out the DOM-reading widget of that software...perhaps they would allow the distribution of their product within the Design Standards in exchange for making that part of their product better? Highcharts is free for non-commercial organizations...perhaps US Gov already qualifies?

+1 for table sorting standards.

FYI, I fleshed out a proposal for the sortable table in #1643. We've ditched jQuery recently, so DataTables as a specific solution seems less appropriate. A solid stepping stone to offering our own component would be well-researched 3rd party library recommendations (as we've done with Politespace for zip code masking on the address form), and I would happily suggest DataTables for folks who use jQuery elsewhere. I'd also like to recommend vanilla JS solutions, though; if you know of any, feel free to mention them in #1643.

Re: data downloads, I could see describing download controls as a table-related pattern like our form templates, rather than a separate "component". If that's still useful to any of you, feel free to open up another issue with some more specific information about your needs.

Data visualization, though right up _my_ alley, is a much bigger category of feature that I don't think we're ready to tackle yet. (For more context, check out our product roadmap.) @DruidSmith, @jhfrench, and others: if you have time, we'd love to hear about your more specific visualization needs in new issues. In the meantime, I'm going to close this one.

Was this page helpful?
0 / 5 - 0 ratings