Table

Tables allow users to show a big amount of information in a easy and simplified way.

Introduction

The table component provides a lightweight and accessible way to display structured data in rows and columns. It is ideal for presenting small to medium-sized datasets that don't require complex interactions such as in-line editing or row expansion. The component supports different table densities and content types, ensuring clarity and visual consistency across use cases like summary lists, comparison views, or static reports. Unlike the datagrid or resultsate table component, our table is designed for non-complex scenarios where the priority is clear data display over advanced functionality.

Anatomy

1.
Header row: defines the label for each column and helps users understand the structure and meaning of the data presented. It can also include sorting controls when applicable.
2.
Cell: displays the individual content within the table.
3.
Action cell: contains interactive elements such as buttons or icons that allow users to perform specific actions related to that row.

Using tables

The table component is designed for clear and structured data presentation, with minimal interactivity and a strong focus on readability. Below are key aspects to keep in mind when using this component:

Layout and content

Tables are best suited for displaying moderate amounts of data with consistent structure. Each column should represent a single data type or category, while each row corresponds to a data entry. Keep content concise to avoid horizontal scrolling and ensure legibility.

Responsiveness

While the table is not responsive by default, content can be adjusted to fit smaller screens using wrapping text, truncation, or custom scroll containers. If your use case involves extensive data manipulation or mobile-first design, consider using the datagrid instead.

Text alignment and formatting

Align text consistently within columns based on content type: left-align text, right-align numbers, and center-align icons or action buttons.

Styling and density

The component supports different visual densities to adapt to the use case. Use higher density for data-heavy views where space is limited, and lower density for overviews or summary pages where clarity takes priority.

Table vs ResultsetTable

While both components present structured data in tabular format, their purposes and features are different:

Table is a lightweight component intended for static data. It doesn't include interaction features such as sorting or pagination. It's ideal for small datasets or summary views where simplicity and clarity are the main goals.
Resultset table, on the other hand, is a more advanced component built for dynamic datasets. It includes support for pagination, sorting, and density control. It's best suited for result views where users need to browse through large volumes of data efficiently, such as search results or query outputs.

Choose between them based on your needs: use the table for simple data display, and the resultset table for user-driven exploration of data.

Best practices

Use the table component for structured, static data that doesn't require user interaction, such as summaries, configuration overviews, or comparison tables.
Keep content concise and scannable: avoid long text blocks inside cells to preserve readability and prevent layout issues.
Maintain a clear visual hierarchy by using appropriate text styles for headers, totals, and other relevant indicators.
Ensure alignment consistency: text should be left-aligned, numbers right-aligned, and icons or controls centered, depending on their function.
Use a maximum of two or three actions per cell: avoid overcrowding cells with multiple buttons or icons to maintain clarity and avoid interaction confusion.
Use density thoughtfully: apply higher density when screen real estate is limited, and lower density when space allows for better readability.
Avoid using this component for large, interactive datasets. For those scenarios, opt for the resultset table or datagrid instead.