Data Table

Also known as: List, Data Table, Data List, List View, Data Grid, Spreadsheet, Table, Multi-Column List

Tags: content

Show collection of items with multiple attributes in a data table to make the data easy to scan, analyze, and customize.
In WordPress administration panel, blog posts are shown in a data table along with multiple attributes, such as author, tags, and date. The table has a short but descriptive title, there are some table filters, and table headers are shown both at the top and the bottom. Post names are bolded to stand out from other data, and row striping makes the data easier to read. As the table is large, pagination is being used.

WordPress 2.7 administration pages.

WordPress 2.7 administration pages.

What problem does the pattern solve?

  • There is tabular, mostly text-based data that user needs to browse through and analyze.
    • e.g. search results, lists of music records, stock quotes, people, etc.

When to use it?

  • There is tabular, mostly text-based data that user needs to browse through and analyze.
    • e.g. search results, lists of music records, stock quotes, people, etc.

How to use it?

All tables

  • Tell what the table is about.
    • Give the table a descriptive title, and also a brief caption if needed. Show the title at the top of the table or in the table header, and the caption below the table.
  • Reduce and Compress Data.
    • Show only the information that users really need to see, but provide a possibility to dig deeper into details. Use Inlays, Overlays, and tooltips for showing details on the same page with the table to maintain user’s flow.
    • If you have numeric data, keep the level of precision appropriate. The fewer decimals, the less time it takes to scan and understand the data.
    • Summarize data when possible.
  • Use visual elements as little as possible.
    • Remove all interface elements that are not necessary. Less visual noise means less distraction and makes it easier to concentrate on the table data. Focus should be on the information itself, not the design of the table.
    • However, don’t remove visual elements that are useful. Keep the elements that support structure, organization, and readability of the table, but use the minimum amount of visual weight needed (use light colors, thin borders etc.).
  • Highlight the most important information.
    • Use different styling for information that is always important (e.g. total column), and information that is important at the moment (exceptions in data items etc.).
    • Change color intensity and/or hue, use bigger font, bold text, thicker lines, different orientation, added marks etc. to make important information stand out from other data.
    • Keep in mind that if you emphasize too much information, nothing will stand out anymore.
  • Allow customization.
    • Consider allowing the users to select what information to show in the table.
  • Right-left alignment.
    • Right align numbers, to make it easier to compare and sum up the values.
    • Left align text.
    • Consider using center alignment for columns that contain status texts (e.g. planned, completed) to make them stand out.

Large tables

  • Consider making table headers float.
    • If the table becomes large, consider making the table headers stay visible in the browser window as the user scrolls up and down a page to remind the user of what the columns in the table are. See example.
    • The more columns there are, the more valuable this feature is.
    • See JavaScript implementation on Google Code.
  • Use Endless Scrolling or Page Pagination pattern when all the results doesn’t comfortably fit within one page.
  • Allow sorting.
    • Allow users to sort the table by clicking table headers.
    • Use a link color, underline, or sort icons to communicate that column headers are sortable.
    • Sort items in a logical order by default.
  • Provide filtering options.

Table Actions

Actions in tables are a large topic and will be described later in another pattern.

Why to use it?

  • Provides structure to data.
  • A well-designed table makes it easy to scan information and find items from a large set of data.
  • People are familiar with data tables.
  • Allows easy comparison between items.

Useful linksUseful links icon

Example images (14 examples)

Comments

  • yingying (www) May 14, 2012 21:40

    Thanks for the great patterns!

  • ace miel Sept. 10, 2012 06:18

    Very informative discussion of tables. It helped me a lot. Thanks!

  • David Aug. 30, 2013 06:21

    great ~~~~