Components/Table

A table contains a set of line items and usually comprises rows (with each row showing one line item) and columns. Line items can contain data of any kind, but also interactive elements, for example, for editing the data, navigating, or triggering actions relating to the line item. To display large amounts of data in tabular form, several table components are provided. These are divided into two groups, each of which is defined by a consistent feature set: - Fully responsive tables - Desktop-centric tables

**Use the responsive table if:** - The table content should be flexible and visually appealing. The responsive table offers the most flexibility in regards to its content because multiple components can be used. In addition, different rows can be based on different item templates. - The focus lies on working on line items, not on individual cells. - A main use case involves selecting one or more items, for which details are needed in order to choose the correct item. - Line items are independent of each other and no operation across columns is needed. - You want to have only one implementation for all devices. **Use the grid table if:** - You need to display more than 1,000 rows at the same time. - The cell level and the spatial relationship between cells are more important than the line item, such as if users need to recognize patterns in the data, like in waterfall charts. - Comparing items is a major use case. The grid table layout remains stable irrespective of the screen width. In addition, a cell only ever contains one component. - You need an analytical table, but you cannot provide an analytical binding. **Do not use the table if:** - You want to display a simple hierarchical dataset. - You want to use a hierarchical master list for a master-detail scenario using the **Flexible Column Layout**. - Using a tree table would be too complex. - The main use case involves selecting one of several hierarchical items with only a few details per item. In these cases, use the **Tree** instead. **Use the responsive table if:** - The table content should be flexible and visually appealing. The responsive table offers the most flexibility in regards to its content because multiple components can be used. In addition, different rows can be based on different item templates. - The focus lies on working on line items, not on individual cells. - A main use case involves selecting one or more items, for which details are needed in order to choose the correct item. - Line items are independent of each other and no operation across columns is needed. - You want to have only one implementation for all devices. - You want to display a simple hierarchical dataset. - You want to use a hierarchical master list for a master-detail scenario using the **Flexible Column Layout**. - Using a tree table would be too complex. - The main use case involves selecting one of several hierarchical items with only a few details per item. In these cases, use the **Tree** instead.

The primary table contains columns with headers, and rows with links. In the first column, links are displayed. To display links within a table, add the \

Table can be displayed without borders that separate the columns, column headers, and rows. To display a borderless table, add the \

Table can be displayed without borders that separate the columns and rows only, leaving the column headers with borders. To display a borderless table body, add the \

Table can be displayed without outer borders, might be needed when used inside some other element. To display a table without outer border, add the \

Table can be displayed with a footer. To display a table footer, add the \

Similar to the previous example, table can be displayed with a footer in condensed mode (for desktop screens). To display a condensed table, add the \

The table component can be interactive with hoverable and activable cells and rows. | Interaction | Modifier class | | :------------- | :------------------ | | Activate | \

The table component can display highlight indicators to classify certain items with semantic states. To display status indicators in table, add the \

Table can display focusable rows by adding the \

Table can display focusable cells by adding the \

Table can display checkboxes to allow the user to perform bulk actions. To display checkboxes in table, add the \

Table can be displayed with checkboxes in condensed mode. To display checkboxes in table, add the \

Table can be displayed with bottom pagination by adding the \

The table component can be displayed with an advanced **Toolbar**, which allows users to customize their table. In this example, buttons trigger **Dialogs**. To display an advanced toolbar, pair \

Table can display a contextual menu containing actions if there is not enough space in a given row. It is recommended to use a contextual menu if there are more than three actions. To display table with a contextual menu, add the \

Table can display menu options from a popover within headers. The example below demonstrates headers containing customization actions such as _Ascending_ and _Descending_. To display a menu within a header, add the \

Table can display fixed header, footer and columns (both, on the left and right). At first, wrap the table in a element with the \

Responsive table allows navigation from a line item. For that purpose you need to add a column with the icon \

The table component can display navigation indicators. When multi-selection is used in a master-detail scenario, it is not clear which item was last opened, you can mark it as a “navigated” indicator, as indicated in the second row, to mark an item that is currently open. To display a navigated indicator, add the \

The desktop responsive table should contain \

The responsive table can be displayed in pop-in mode for mobile and tablet screens. To display responsive table in pop-in mode, add the \

Information about the table such as a title, summary, and/or keyboard navigation instructions should be provided in captions for screen readers. To caption table information, use the \

Table can indicate that there is no data to display.

Table can have group rows, to get this do the following: - Add \

Table can show tree-like rows, to get this do the following: - Add \