Intro to Tables in UI

The row height of your table should make it easy for users to read the information each row contains. There are 3 common sizes: condensed (40px), regular (48px), and relaxed (56px).^[1]

Condensed rows can help display data without scrolling, though it is harder to read than the other two row heights. If seeing the entire table at once is important to the table’s function, then condensed rows make sense. Otherwise, using regular or relaxed row heights provides a better user experience.

After row height, your column width is another key factor in the table’s readability. Each column’s width will be dependent on the width of its content, but readability still needs to be the top priority. Make sure there are wide enough margins on both sides of a column so that users can effortlessly scan, compare, or edit the table.

Table headers — the labels that briefly describe each column’s content — are a necessary component of every table. The header style should set these labels apart from the rest of the text in the table through an established visual hierarchy, without becoming overwhelming or intrusive. This can be done by using a slightly darker color or bold text for table headers.

Sorting functionality is crucial in any large table, as it transforms navigating through extensive data sets from a nightmare into a manageable task.^[2]

Allow users to sort rows not only in alphabetical or numerical order, ascendingly or descendingly but also based on date, time, or even custom criteria tailored to specific content or users' preferences. This versatility allows users to manipulate and view the data in the most convenient and insightful way.

Toolbars positioned above your tables can significantly enhance functionality by offering a range of options.

They typically include features such as:

• Search functionality to quickly locate specific data
• Export functions to save or share data in various formats
• Print options for physical copies
• Filters to refine the data displayed
• Sorting capabilities to organize data by different criteria

These tools not only increase the usability of the table but also make the data more accessible and user-friendly.

Tables often look the same across many rows, making it easy for users to lose their spot. When users interact with rows in a table, it's helpful to show visual signs of their interaction to improve the experience.

Here’s how to do this:

• Add a hover state to a row when the cursor is over it. You can do this by changing the row's background color or adding a highlight effect when the cursor hovers over it. This makes it much easier for users to keep track of where they are in the table, especially when they need to interact with specific rows or compare data across a row. This becomes even more important in situations where rows are interactive or contain actionable items.
• In situations where users need to select multiple table rows for bulk actions, make the selected rows stand out visually. Rather than relying on a small checkmark, which can be easily overlooked, opt for a more noticeable approach — change the background color of the selected rows to a distinct hue or shade.

When you want users to be able to interact within each row, including an inline menu can give them a broad range of possible actions.

Hiding these actions behind a kebab (three-dot) menu saves space, reduces visual clutter, and makes it easier for the table data to be scanned without interference from buttons or other action items.

Just be aware that users likely won’t be aware of the options in the inline menu until they start interacting with the table.

Pagination is the simplest way to break up your table into more usable chunks. It is best used when data needs to be organized and navigated in a precise manner, such as in reports, search results, or tables with large datasets where users might need to refer back to specific pages, or when it's important to give users a clear sense of the total data volume and their position within it.

To reduce server load and make it easy for users to flip through the content, split the table into pages with a set number of rows on each page. Be sure to make it clear which page users are currently on. To prevent confusion, display the number of rows your users are viewing on the current page out of the total count.^[3]

As an alternative to pagination, infinite scrolling continuously loads more data as users scroll down, eliminating the need to click a Next button or navigate through multiple pages.

However, infinite scrolling has its drawbacks. It doesn't keep track of pages, making it challenging for users to refer back to previously viewed data. Additionally, it doesn't indicate the total amount of data in the table, which can lead to user frustration.

Use infinite scrolling in tables when the user experience benefits from seamless, continuous browsing, particularly when the precise quantity of data is less important, or when quick, endless access to a large dataset is prioritized over precise navigation. For instance, in a table showcasing an extensive inventory of books in an online library, infinite scrolling would be beneficial.

Manual infinite scrolling combines the ideas of pagination and infinite scrolling. When users get to the bottom of the data that has already been loaded, they’re specifically asked if they want to load more.

With manual infinite scrolling, content is shown in easy-to-consume chunks as users scroll down the page, but gives them control over the experience. The advantage over pagination is that previous rows remain visible, but as with infinite scroll, it doesn’t automatically tell users how much data is left to load.

Use manual infinite scrolling in contexts like a job listing table, where users benefit from a continuous flow of new options but also value control over the pace of data presentation and the ability to easily review previous entries.