cheatsheets devlog projects search

tables.md

Designing Enterprise Tables

2023-03-06 1

Something that I and I imagine many people struggle with is designing and implementing a table in an enterprise setting. There are so many examples of good and pretty tables but usually the amount of data they show is much less than what I run into inside a company.

Usually I’m trying to display 15-20 columns and some of these columns might be really long descriptions and others have long column names. Often times the tables could be streamlined but because there are many users and they all value different things, we need to have all the columns available.

The solution is usually to make it a full report rather than a web app but it would be nice to have it accessible as a table on a web page. The following is going to be my thoughts on how tables should work and what features they need to have in an enterprise setting.

The first is that a table is composed of 2 parts, there is the key of the table, this is the items we are looking at. This is often the left most column of a table besides the numbering column.

The second is that tables have attributes, this is the column headings of a table.

Now data in a table can be compared in 2 ways. You can compare items against each other so you’d ideally like to control which rows are currently visible. For example, if you had a product listing, you might want to compare 2 products to see what the differences are.

You can also compare attribute to each other. For example if you are looking at a product, then seeing the sell price and the cost would be valuable.

I also believe that tables that work on a desktop should also work on your phone. Mobile is king now and many people expect everything to work as well on their phone as it does on their computers.

Given that set up, these are some notes:

Column Specific

Table Specific

Now that we have the columns figured out, the next thing is that tables should all be filterable, sortable and searchable.

Tables should also be paged, though I haven’t decided if I like showing just a next and prev button or if seeing page numbers is important. I like page numbers but given a total count and a number of results per page you can get an understanding of where you are. The page numbers makes it more explicit but it gets messy when you get to many many pages.

Styling

Actions

The above all deal with the presentation of a table, if you can have actions then there are also other things that need to be done.

End

These notes were made after reading the following articles:

https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a

https://coyleandrew.medium.com/design-better-data-tables-4ecc99d23356

https://pencilandpaper.io/articles/ux-pattern-analysis-enterprise-data-tables/

https://ux.shopify.com/lessons-from-building-mobile-friendly-accessible-data-tables-1e05c6924eaf

My only wish was that there were some examples of large data sets with all these ideas. I’ll need to wire something up and see how much of this stuff is really valid. Everything makes sense when laid out this way but I want to optimize for both the person using the table but also for the developer making this table.

For that reason I’m going to stick with vanilla js for the functionality and try to keep things as semantic as possible. The goal is to try and get all these things done with as little code as possible.