Table

A configurable component for displaying tabular data.

Introduction

A Table is used to display data in a structured and organised way, allowing users to easily compare and analyse information. It is useful for presenting large amounts of data in a concise and easy-to-read format.

Table component

Anatomy

The Table component typically includes horizontal rows and vertical columns with headers that label each column.

Table without selectable row

Table header: This is the top part of the table that labels each column. The header should be clear and descriptive, accurately reflecting what kind of data is presented in each column.

Separators: These are lines that divide each row in the table, helping to make the table more readable and organized.

Table Bottom Paginator: This is located at the bottom of the table. It allows users to navigate between different pages of data within the table, making it easier to manage large amounts of data. See paginator.

Optional Checkbox: This is a checkbox that can be included in the first cell of each row. It allows users to select or deselect all items in a particular row.

Table with selectable row

States

The Table does not inherently have states. However, individual rows can be selected or deselected by the user. In such a case, the only active element is the checkbox in the respective row.

Types

Many types and combinations are possible. For a complete overview, refer to the Angular component page.