9 ms·

Designing better data tables (2017)

241 points by yread 7y ago

Grumbledour 7y ago
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 7y ago
  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.
stevoski 7y ago
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 7y ago
  > 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 7y ago
    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?
- omgtehlion 7y ago
  Looking from my experience I'd say: it typically involves adding lot of fine detail to make it at least bearable
arkh 7y ago
To play with data: check Excel filters. It is really hard to beat.
latchkey 7y ago
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.
- speedplane 7y ago
  > There is exactly zero open source and/or free component data tables for React that do everything in this article. Pretty sad no? Spreadsheets have been around for 30 years and there is still no excellent solution for web apps?
  - latchkey 7y ago
    I'd say that Airtable is actually doing a pretty great job. Unfortunately their grid implementation isn't free. =)
- omgtehlion 7y ago
  That's because everyone has a different set of requirements. Throughout my web-dev career, I did table or detailed-list views many times, but each time with different requirements. Aside from sheer size of code to implement all the features, you will have contradicting requirements and there is no one-size-fits-all solution. Top concerns are: 1. is your data homogeneous (all columns in a row are presented equally) 2. can this data change? 3. is there a lot of data? (so you have to implement virtual list) 4. is data dynamically loaded? 5. do you need actions on data, and how to display them (inline / overlay / menu?) 6. some features are really simple on surface (resizing, drag-drop reorder of rows, auto-sizing on dbl-click is a hell of itself) but are pain in the ass to implement. 7. is filtering/sorting done on a client or you have a server to help you? 8. and many many more... There are multiple implementations, but you have to investigate which one fits you need.
poutrathor 7y ago
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.
omgtehlion 7y ago
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 7y ago
  > "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?s=21 https://twitter.com/ryanflorence/status/1189728090575921152?...
dmitriid 7y ago
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.
megaduck 7y ago
<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>
- omgtehlion 7y ago
  I would add: even if you design only for desktops and discoverability is not an issue, PLEASE do not use slow animations for hover controls to appear.
- Grumbledour 7y ago
  At least for screen readers, they can work really well as long as you avoid display or visibility properties to hide them. Just position absolute and left: -999em will hide them visually but still let the screen reader 'see' them. Of course, this will still not really help with touch devices.
- yoran 7y ago
  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 7y ago
    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 7y ago
bvrmn 7y ago
Good searching and filtering should be on the first place. May be you don't need long tabular presentation at all because of this.
- omgtehlion 7y ago
  Sometimes it is better to take advantage of web browser builtin search function (Ctrl+F). Unfortunately some overly-eager implementations break it when supplanting with their own...
  - bvrmn 7y ago
    Most real data is too big to fetch in one piece by a client. Internal admin interfaces come to mind. On each job every time support people ask to include monstrous sorting behavior over multiple columns to be able to find group in question. However simple search would be enough.
    - omgtehlion 7y ago
      Yeah. There are different sizes of data, that's why there is no good control for everyone. Size of data can be: 1. Small, so you can display it all at once and the user will have luxury to ctrl+f what he/she wants; 2. Big to display, but small enough to push to client: then you will need to create pagination or virtualized view. Ctrl+F will not work (at least without some tricks), but you can easily filter/search it yourself in JS; 3. Too big to transfer: the only way to search/filter is on the server and separate controls (of course Ctrl+F won't work).
      - TeMPOraL 7y ago
        I'm worried at what size 1 becomes 2. I've seen web tables that choke on 100 rows. I feel that if a table can't handle 10-100x that without destroying site's performance, it's done wrong. I also wonder whether we shouldn't have new <table> tag, meant specifically for data tables. Say, <datatable>. It would have all sorts of sorting and filtering and pivot tables built-in, and it could exploit native code to ensure high performance. Case 3 could be handled by a well-defined API that translates table operations to JS calls, in case a full dataset can't be sent to the browser.
Freak_NL 7y ago
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 7y ago
  Turn off JS and you will get proper images.
shrumm 7y ago
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
- teddyuk 7y ago
  I was waiting for the "and here is where you can get it (half expecting to have to sign up)" but nothing
- derekbreden 7y ago
  The appropriately named DataTables[1] has worked well for me recently. - It’s focused entirely on tables (as opposed to being a more general widget framework). - I believe it covers most of the functionality discussed in the article. - It has a mobile vertical layout. [1] https://datatables.net/ https://datatables.net/
- cjauvin 7y ago
  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 7y ago
    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.
tda 7y ago
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
pirsquare 7y ago
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 7y ago
  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.
  - brobdingnagians 7y ago
    I agree; in projects where I've used a lot of data tables, there is usually a column that makes sense as the default sort for the stakeholders, so I just make sure it is ordered by that at load and then it makes more sense to people to toggle ASC/DESC sorts.
  - pirsquare 7y ago
    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".
    - 7y ago
markdog12 7y ago
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 7y ago
Is there a framework or package, that out of the box includes the majority of these table features?
- krapp 7y ago
  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.
- ajna91 7y ago
  Hey, this is kind of unrelated, but the other day you mentioned "Blueprints for a Sparkling Tomorrow". May I ask what brought that to your mind, since the book was published years ago?
- Random_Person 7y ago
  DataTables does most of it minus the modals and pop-overs
gimboland 7y ago
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".
n0tme 7y ago
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?
tenaciousDaniel 7y ago
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.
thunderbong 7y ago
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/?classic#grids https://examples.sencha.com/extjs/7.0.0/examples/kitchensink... For Mobile: https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/?modern#grids https://examples.sencha.com/extjs/7.0.0/examples/kitchensink...
erikig 7y ago
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
objektif 7y ago
Whats the best Js library for implementing functionalities listed in the article?

241 points by yread 7y ago

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 7y ago
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.

stevoski 7y ago

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 7y ago
> 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 7y ago
  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?
omgtehlion 7y ago
Looking from my experience I'd say: it typically involves adding lot of fine detail to make it at least bearable

arkh 7y ago

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

latchkey 7y ago

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.

speedplane 7y ago
> There is exactly zero open source and/or free component data tables for React that do everything in this article. Pretty sad no? Spreadsheets have been around for 30 years and there is still no excellent solution for web apps?
- latchkey 7y ago
  I'd say that Airtable is actually doing a pretty great job. Unfortunately their grid implementation isn't free. =)
omgtehlion 7y ago
That's because everyone has a different set of requirements. Throughout my web-dev career, I did table or detailed-list views many times, but each time with different requirements. Aside from sheer size of code to implement all the features, you will have contradicting requirements and there is no one-size-fits-all solution. Top concerns are: 1. is your data homogeneous (all columns in a row are presented equally) 2. can this data change? 3. is there a lot of data? (so you have to implement virtual list) 4. is data dynamically loaded? 5. do you need actions on data, and how to display them (inline / overlay / menu?) 6. some features are really simple on surface (resizing, drag-drop reorder of rows, auto-sizing on dbl-click is a hell of itself) but are pain in the ass to implement. 7. is filtering/sorting done on a client or you have a server to help you? 8. and many many more... There are multiple implementations, but you have to investigate which one fits you need.

poutrathor 7y ago

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.

omgtehlion 7y ago

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 7y ago
> "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?s=21 https://twitter.com/ryanflorence/status/1189728090575921152?...

dmitriid 7y ago

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.

megaduck 7y ago

<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>

omgtehlion 7y ago
I would add: even if you design only for desktops and discoverability is not an issue, PLEASE do not use slow animations for hover controls to appear.
Grumbledour 7y ago
At least for screen readers, they can work really well as long as you avoid display or visibility properties to hide them. Just position absolute and left: -999em will hide them visually but still let the screen reader 'see' them. Of course, this will still not really help with touch devices.
yoran 7y ago
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 7y ago
  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 7y ago

bvrmn 7y ago

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

omgtehlion 7y ago
Sometimes it is better to take advantage of web browser builtin search function (Ctrl+F). Unfortunately some overly-eager implementations break it when supplanting with their own...
- bvrmn 7y ago
  Most real data is too big to fetch in one piece by a client. Internal admin interfaces come to mind. On each job every time support people ask to include monstrous sorting behavior over multiple columns to be able to find group in question. However simple search would be enough.
  - omgtehlion 7y ago
    Yeah. There are different sizes of data, that's why there is no good control for everyone. Size of data can be: 1. Small, so you can display it all at once and the user will have luxury to ctrl+f what he/she wants; 2. Big to display, but small enough to push to client: then you will need to create pagination or virtualized view. Ctrl+F will not work (at least without some tricks), but you can easily filter/search it yourself in JS; 3. Too big to transfer: the only way to search/filter is on the server and separate controls (of course Ctrl+F won't work).
    - TeMPOraL 7y ago
      I'm worried at what size 1 becomes 2. I've seen web tables that choke on 100 rows. I feel that if a table can't handle 10-100x that without destroying site's performance, it's done wrong. I also wonder whether we shouldn't have new <table> tag, meant specifically for data tables. Say, <datatable>. It would have all sorts of sorting and filtering and pivot tables built-in, and it could exploit native code to ensure high performance. Case 3 could be handled by a well-defined API that translates table operations to JS calls, in case a full dataset can't be sent to the browser.

Freak_NL 7y ago

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 7y ago
Turn off JS and you will get proper images.

shrumm 7y ago

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

teddyuk 7y ago
I was waiting for the "and here is where you can get it (half expecting to have to sign up)" but nothing
derekbreden 7y ago
The appropriately named DataTables[1] has worked well for me recently. - It’s focused entirely on tables (as opposed to being a more general widget framework). - I believe it covers most of the functionality discussed in the article. - It has a mobile vertical layout. [1] https://datatables.net/ https://datatables.net/
cjauvin 7y ago
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 7y ago
  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.

tda 7y ago

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

pirsquare 7y ago

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 7y ago
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.
- brobdingnagians 7y ago
  I agree; in projects where I've used a lot of data tables, there is usually a column that makes sense as the default sort for the stakeholders, so I just make sure it is ordered by that at load and then it makes more sense to people to toggle ASC/DESC sorts.
- pirsquare 7y ago
  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".
  - 7y ago

markdog12 7y ago

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 7y ago

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

krapp 7y ago
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.
ajna91 7y ago
Hey, this is kind of unrelated, but the other day you mentioned "Blueprints for a Sparkling Tomorrow". May I ask what brought that to your mind, since the book was published years ago?
Random_Person 7y ago
DataTables does most of it minus the modals and pop-overs

gimboland 7y ago

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".

n0tme 7y ago

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?

tenaciousDaniel 7y ago

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.

thunderbong 7y ago

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/?classic#grids https://examples.sencha.com/extjs/7.0.0/examples/kitchensink... For Mobile: https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/?modern#grids https://examples.sencha.com/extjs/7.0.0/examples/kitchensink...

erikig 7y ago

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

objektif 7y ago

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