Resultset table

The resultset table is a data-rich component designed for displaying large sets of information with built-in features like sorting, pagination, and scroll behavior to support efficient exploration and comparison.

Overview

Code

Introduction

The resultset table component is designed for displaying large datasets with interactive features such as sorting, pagination, and selection. Unlike the basic table component, this one offers built-in functionality that allows users to explore and manipulate data efficiently, making it ideal for use cases like search results, reports, or management dashboards.

Anatomy

1.
Header row: displays the column titles and defines the data categories for the table. It also includes optional sorting icons to help users organize content.
2.
Cell: represents an individual data point within the table. Cells are aligned with the header columns and typically show text, numbers, or icons.
3.
Sorting icon: indicates whether a column is sortable and shows the current sorting direction (ascending or descending). Appears next to the header label when sorting is enabled.
4.
Row: Represents a single entry in the dataset. Each row groups related cells and can respond to user interactions like selection or hover.
5.
Scrollbar: allows horizontal and vertical navigation when the table's content exceeds the visible area. It ensures accessibility for large datasets.
6.
Paginator: provides controls to navigate through multiple pages of results. It helps manage large sets of data by splitting them into manageable views.

Using resultset tables

The resultset table is intended for scenarios where users need to work with dynamic or high-volume data. Here are key aspects to keep in mind:

Sorting and filtering

Resultset tables support client-side or server-side sorting, which allows users to reorganize the data by column. Use this feature to improve discoverability and simplify decision-making.

Pagination

Built-in pagination controls prevent overwhelming the user with too much data at once and help maintain performance. Choose the pagination strategy depending on your backend setup.

Row selection

Users can select one or multiple rows to perform bulk actions. Use checkboxes for multi-selection and radio buttons for single-selection. Selected rows can persist across pages if needed.

Action column

Resultset tables can include an action column where users can perform row-level actions (e.g., edit, delete, view details). This column should remain consistent across rows to maintain usability.

Custom content and responsiveness

Cells can contain more than just text: icons, buttons, or status indicators are supported. However, maintain clarity and avoid overloading. The layout can adapt to different screen sizes with horizontal scroll if necessary.

Virtualization

For very large datasets, virtualization improves performance by rendering only the visible rows within the viewport, significantly reducing DOM load and enabling smooth scrolling. To enable virtualization, the virtualizedHeight prop must be set to a valid value on the resultset table. This defines the scrollable area and allows the table to calculate which rows should be rendered dynamically.

Accessibility

The resultset table is fully keyboard navigable and screen-reader friendly. Ensure all custom content also follows accessibility guidelines.

Responsive behavior

Changes to the screen size affects tables based on the default behavior of their parent components (ex. container, flexbox, grid).

When placing a table inside a container component that adjusts based on screen width, the table's width also correspondingly adjusts up to a certain minimum value based on its content and the number of columns.
Using the overflow property of the container (to account for both horizontal and vertical adjustments) is one way to preserve the size of the display of the table while using scrollbars for the adjustments needed in place of continuous resizing.
Consider using the reduced mode for tables that are information dense and need to minimize the spacing in between table cells. This can help accommodate more information as the screen size is reduced up to a certain extent.

Best practices

Use the resultset table when displaying large sets of interactive data: it is ideal for workflows where users need to search, sort, or take action on rows.
Limit the number of columns to what is strictly necessary. Too many columns can make the table hard to read and navigate.
Keep cell content focused: if you need to include actions or visuals, make sure they serve a purpose and don't clutter the interface.
Do not place more than one or two actions per row. If additional actions are needed, consider using a dropdown or context menu.
Label all interactive elements inside the table properly. This improves accessibility and helps users understand the functionality.
Use consistent patterns across all rows. Keep the structure and interaction model predictable to support learnability.
Optimize performance by using pagination, enabling virtualization and minimizing real-time rendering when working with large datasets.
Adapt for responsiveness. If the table is used in narrow viewports, allow horizontal scrolling or collapse less relevant columns.