Having a comprehensive data table allows the user to scan, analyse and compare information. The user should also be able to filter, sort and take actions on it and this experience should be easy and intuitive.
Table module is use for displaying related cross-dimensioned and multiple lines of information together.
Some table present statistic graphics, and some contains links to further information (a pop-up or even to an external page).
Keep in mind that the data you are presenting provides context and meaning, for example each row needs to stand out from the ones to either side. To this end, you’ll see many tables use shaded backgrounds behind every other row. This makes it easy to scan across the various columns without inadvertently skipping from one row to the next. It’s vital that tables can easily be read, so make sure there’s good contrast between your text color and row backgrounds.
Users should have the ability to view our application on any device, so you need to ensure that your table will be usable whether displayed on mobile, tablet or desktop.
One common pattern is to allow the table to scroll horizontally on smaller screens, removing the need for hidden columns. Consider using both patterns and provide an option to switch between the two.
Example of tables used at Daimler
Designs of the Table component are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste then into your designs or use the Sketch file as a linked library and import the symbols.
See the Sketch Design Kit