
Designing better data tables (2017) - yread
https://uxdesign.cc/design-better-data-tables-4ecc99d23356
======
pirsquare
Regarding table columns sorting - are there anyone else who thinks that
clicking on the same column the third time should remove the sort? For
example:

    
    
      • First Click: Sort ASC
    
      • Second Click: Sort DESC
    
      • Third Click: Remove Column Sort
    
    

This allows me to go back to the initial state where the tables have been
loaded. Currently, most data tables don't support "resetting" of column
sorting and are implemented in this manner:

    
    
      • First Click: Sort ASC
    
      • Second Click: Sort DESC
    
      • Third Click: Sort ASC

~~~
dmos62
Rows will always have an order, even if that order is the order they are
indexed in the database, which for the purposes of a table is an implicit
column. So "remove column sort" means revert to the default sort. In other
words, there is no such thing as no sort: rows will always be sorted, you just
choose by which column and the direction. Implicit sorts aren't a great idea,
I think.

~~~
pirsquare
Thanks - you certainly made a good point. But there's one problem with
enforcement of explicit sort and this the problem I constantly have with my
projects.

By default, most tables that I have are sorted by "created_datetime" but this
is the column that won't be shown to the end-user since most of the time it is
redundant information for them. If we're implementing explicit sort, I need to
add an additional column which would be useless to them.

Having the ability to easily reset back to default sort makes everything so
much cleaner as an end-user (for me). I won't have to experience another "How
the heck do I go back".

~~~
wruza
Depending on the dataset structure (as seen by app/db developer) there may be
in fact two sorts: one that reorders rows in a set* and one that reorders rows
in a table view (M and V from MVC, respectively). Your “go back” thing is then
a conflict between the two.

It may be seen as overengineering for an itunes user, but a full
implementation should provide a way to do both sorts and to cancel view-sort
if no longer needed.

Also, sorts may be not just column-based. Shop cart may be sorted by product
group without having such column even in dataset, like
rows.sort(“product.group.title”) or alike. In UI it can be done as right-
clicking on a column/cell and sort->[natural, id, title, group->[natural, id,
title, ...], ...] menu hierarchy.

* algorithms may depend on this ordering, so a user takes care to not change it accidentally

------
megaduck
<BEGIN PSA> Please, please, please, do not use hover controls. They are
useless for touch users as well as screen readers, and the discoverability is
poor.

Modals are also really really hard to make accessible, and are often
confusing. If you MUST use modals, please use a well-vetted library instead of
rolling your own.

There's a lot of things that look really cool but make life difficult for
people that aren't you. We appreciate your consideration when you build your
UX. <END OF PSA>

~~~
yoran
Is there a reliable way to detect touch screens and screen readers?

This way, you can enable hover controls only if the user is not on a touch
screen or a screen reader.

~~~
joekrill
It's not really a clear distinction, though. I have a laptop that has a
touchscreen, but also a regular touchpad and sometimes I use an actual mouse
with it. Sometimes I touch the screen if it's easier even if I have a mouse
connected. I also sometimes remote into it. Then there's my tablet: I can use
a bluetooth mouse with that if I want. Or an external touchpad.

~~~
yoran
I imagine I'd err on the safe side. If the screen has touch functionality
(includes laptops with touchscreen), then don't do actions on hover. Is there
a way to reliably detect the existence of touch functionality through the
browser?

------
Grumbledour
I think it must be 20 years ago that browser makers talked about implementing
features like table sorting into the browser. I am still waiting.

I think leaving this kind of functionality to web developers, leaving everyone
to figure it out for themselves and also make it work on several platforms and
browsers is just silly. I don't know why we do it this way.

~~~
ghusbands
HTML columns have no type, so, for example, sorting a date column would not
give the expected order. HTML table cells admit arbitrary HTML, so there's no
easy comparability, there. Sort orders even for understood data vary greatly;
sometimes a lexicographical order is sufficient, sometimes you want special
handling of numbers within text, sometimes you want a case-insensitive order.
Locale of the data and the user can affect sorting greatly. And that's without
even getting into editing, grouping and filtering.

Basically, it would be hugely complicated, require significant additions to
the HTML of tables and would probably be no more successful than the built-in
date-pickers of browsers, which always get replaced to get a nice look or
behavior.

------
omgtehlion
A more than decade ago I was tasked to implement a table view in web
application (it was time when jQuery was not yet popular, all the hype were
DHTML and AJAX). The task was: "do something resembling windows file
explorer".

When I gave the first version to our testers, each and every one of them came
with non-overlapping set of features. Some of these features are listed in
this article and even more.

If you look into details, you will be amazed how many features there are in
such common and simply-looking interface element. It took me (and the testing
team) more than a couple of weeks to "kind-a finish" this work.

~~~
chrisweekly
> "If you look into details, you will be amazed how many features there are in
> such common and simply-looking interface element."

Yes! Reminds me of this recent tweet by Ryan Florence (a renowned JS lib
author) on spending 3 hours w/ a friend creating a chart -- ie, a spec -- for
"just" a dropdown button:

[https://twitter.com/ryanflorence/status/1189728090575921152?...](https://twitter.com/ryanflorence/status/1189728090575921152?s=21)

------
shrumm
Am I the only one who read the article and hoping to see an implementation =)?
Any suggestions on any good open source data tables components you guys use?

The Adamn Lynch article that was on HN a few months ago was great, with code
examples - [https://adamlynch.com/flexible-data-tables-with-css-
grid](https://adamlynch.com/flexible-data-tables-with-css-grid)

~~~
cjauvin
As all the features were being listed, I scrolled with the exact same hope :-)

I have been using Sencha/ExtJS' grid for that purpose, which is very powerful
and versatile, and recently I've been contemplating ag-grid, which seems very
nice also.

~~~
Davertron
We use Ag-grid at my company. It's probably the most fully-featured data grid
I've ever worked with on the Web, but it definitely has some pain points. I
think it basically supports almost everything mentioned in this article out of
the box (except for modals etc., which shouldn't be part of the grid itself
anyway...). They even recently added support for charting selected ranges of
data from the table.

Be forewarned though: if you're trying to use this from React with dynamic
data that can be modified on the client, you're probably not going to have
fun. Ag-grid is a vanilla JS library with a very thin React wrapper written
around it, so even though on the surface it looks like it fits into the React
model, most complex things you'll want to do end up meaning you have to use
the imperative table API. I can't speak to how it fits in with other
frameworks out there, but I would imagine it's going to be a similar
situation.

That being said, if you're just going to drop some data into the table that's
read-only, i.e. just for analysis etc., I think it's pretty solid and hard to
find something with anywhere near a comparable level of features.

~~~
cjauvin
Oh thank you for this explanation and warning, I am indeed contemplating using
the React version of Ag-Grid (for the experimental rewrite of a relatively
complex internal management app, written entirely in ExtJS 4, and I was
wondering how well it would integrate into it (especially given that it has
flavours for all the major frameworks, React being only one of them).

------
stevoski
The article is an excellent example of how something that seems easy and
common-place ("show tabular data in a table") requires a lot of work to make
it really good.

I'd say this is common to a lot of our work as developers. On the face of it a
task seems easy - but it typically involves adding lot of fine detail to make
it excellent.

~~~
speedplane
> The article is an excellent example of how something that seems easy and
> common-place ("show tabular data in a table") requires a lot of work to make
> it really good.

One thing they don't mention, is exporting. Anytime you're dealing with
tabular data, you really need an "export to excel" button. You'll never be
able to do all the slicing, filtering, and sorting that excel can do. By all
means, add it into your app and hopefully over time your users won't need it,
but at the start, it's vital.

~~~
TeMPOraL
I wish apps allowing editing tables were oriented around a workflow where you
export to Excel, edit it there, and reimport it back. Let's be honest, your
web app's table is never going to be anywhere near as ergonomic and functional
as Excel, so why not just leverage it?

------
gimboland
LOL @ "Multi-modal". The whole point of "modal" is that it introduces a new
[mode]([https://en.wikipedia.org/wiki/Mode_(user_interface)](https://en.wikipedia.org/wiki/Mode_\(user_interface\)))
in which the interactions that were possible a moment ago cease to be
possible, until you've dealt with the modal and leave that mode, returning to
your prior mode. "Multi-modal" is just "windows".

------
poutrathor
I agree until the in-view presentation. When there are few rows, the inside
modal or sliding panel will feel awkward. So basically
[https://datatables.net/](https://datatables.net/) This jquery tool meets most
of the requirements.

I recently had to implement a js/jquery web application & datatables is golden
: so many features, so many possibilities. Used for so long by so many => so
few bugs left.

------
erikig
I keep this resource bookmarked. It lists a number of the most popular JS/HTML
table/grid components many of which implement the UX guidelines in this
article.

[https://jspreadsheets.com](https://jspreadsheets.com)

------
tda
I recently stumbled upon jExcel. I use it as an editable datatable that allows
copy pasting to and from excel. That's what all my users end up doing anyway
with any non trivial dataset, so might as wel make it look and behave as much
as excel as possible

------
latchkey
This is a pretty good article that shows some good design ideas for data
tables. That said, it is a puff piece for hiring at a company and not a
recommendation for something to use.

There is exactly zero open source and/or free component data tables for React
that do everything in this article.

Not only that, but many are so full of bugs or so difficult to implement that
they might as well not exist at all.

Serious opportunity to create a top leading project that would have a huge
impact on the usability of the web if everyone adopted it.

Edit: Yes, I'd contribute to working on a project like this under a permissive
MIT license, but I don't want to do it alone.

~~~
jannes
I highly recommend ag-grid, it works well with React. The free version is MIT
licensed, while the paid enterprise features are open source on Github, but
not free to use.

[https://www.ag-grid.com/](https://www.ag-grid.com/)

~~~
latchkey
Great recommendation. My only issue with this is that they don't have a super
solid solution for Material Design based grids. Now I know that is more of a
problem with MD (and they note that on their theme page), but omg... once
again... it is like we are back at the drawing board again.

------
bvrmn
Good searching and filtering should be on the first place. May be you don't
need long tabular presentation at all because of this.

~~~
LeonM
This. I've been preaching this for years now.

Paging is an anti pattern. You need good search and filters, not paging. With
paging all you do is overload the user with information, forcing them to scan
mountains of irrelevant data over and over again until they find what they
were looking for.

If you need paging, your UX design is wrong.

~~~
davidivadavid
That's a really good heuristic, but unfortunately, lots of users are still
stuck in the "I need an exhaustive list of all of our data, ever"-mindset
because that's what their manager mandates. Then they print it and put it in a
drawer. _shrug_

------
thunderbong
A lot of these features are available in the Sencha ExtJs Grid (both for
desktop apps and mobile).

Sencha ExtJs is a paid front-end JS framework, which I find extremely
comprehensive. I have worked on this framework quite extensively and find
these features missing even in most, if not all, modern JS frameworks.

Examples:

For Desktop:
[https://examples.sencha.com/extjs/7.0.0/examples/kitchensink...](https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/?classic#grids)

For Mobile:
[https://examples.sencha.com/extjs/7.0.0/examples/kitchensink...](https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/?modern#grids)

------
Freak_NL
What's wrong with the way this page loads images? On the first try I get
nothing but grey rectangles, on refresh I get images, on another refresh I get
blurred image placeholders.

Hmm:

    
    
        Loading failed for the <script> with source “https://cdn.optimizely.com/js/16180790160.js”. design-better-data-tables-4ecc99d23356:8:1
        -+++++=        .+++++=
        .+@@@@@+       #@@@@*:
          .@@@@@=     *@@@@@  
           @+@@@@-   =#@@@@@  
           @ +@@@@: :% @@@@@  
           @  *@@@@-%: @@@@@  
           @   *@@@@-  @@@@@  
          -@-   #@@+  :@@@@@: 
        -#@@@#-  ##  =@@@@@@@=
        .......      .........
        main.fe894587.chunk.js:1:322280
        We're hiring! https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e main.fe894587.chunk.js:1:322536
        onmozfullscreenchange is deprecated. media.html:11:9799
        onmozfullscreenerror is deprecated. media.html:11:9799
        Loading failed for the <script> with source “https://d1z2jf7jlzjs58.cloudfront.net/keys/medium.com/p.js”. design-better-data-tables-4ecc99d23356:1:1
        Loading failed for the <script> with source “https://cdn.branch.io/branch-latest.min.js”. design-better-data-tables-4ecc99d23356:1:1
        Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://collector-medium.lightstep.com/api/v0/reports. (Reason: CORS request did not succeed).
        
        This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on     related tools and features! design-better-data-tables-4ecc99d23356
        Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://collector-medium.lightstep.com/api/v0/reports. (Reason: CORS request did not succeed).
        Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://collector-medium.lightstep.com/api/v0/reports. (Reason: CORS request did not succeed).

~~~
SahAssar
Turn off JS and you will get proper images.

------
markdog12
Just yesterday I had to laugh in despair at how bad Google Cloud's UI is,
including scrolling the headers instead of pinning to the top. What's much
worse though is the perf, load times for simple pages are 10 seconds, my
machine is pegged at 100% cpu, slogging through logs viewer like molasses. I
just find it hard to believe it'd be so bad, on such a crucial product. This
coming from a company that has dev rels advocating better perf (as they
should!), but not applying it to one of their most important products.

------
RootKitBeerCat
Is there a framework or package, that out of the box includes the majority of
these table features?

~~~
krapp
There was, a simple, elegant, easy to use and modular framework called JQuery,
and it had plenty of plugins for sortable tables.

Unfortunately, we're all too clever for that nowadays, so you'll probably have
to download and compile half a terabyte of Rust from a proprietary package
manager just to get something that only works in the nightly build of Chrome.

------
tenaciousDaniel
Funny, I've been referencing this article a lot lately, because I'm designing
a fairly complex table in an app I'm building.

I wish there were more articles like this. The illustrations are great.

------
dmitriid
It's ok and good until "Quick view". Click on the left of the screen, sheet
slides out from the right, and you have to move the mouse all the way to the
right to close it.

------
arkh
To play with data: check Excel filters. It is really hard to beat.

------
n0tme
Am I the only person in the world who just can't stand fixed headers, be it a
table header or a website top menu?

------
objektif
Whats the best Js library for implementing functionalities listed in the
article?

