<h2>When to use</h2>
<p>Tables and lists are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Table</td>
<td>A table displays complex groups of information for the purpose of reference, comparison, or choice.</td>
</tr>
<tr>
<td><a href="/components/list/">List</a></td>
<td>A list presents a group of related information in a scannable format.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of a table, labeled 1 through 6.","caption":"The table component contains six elements:\n\n1. **Body cell**: input field for body text can contain alphanumeric text or links.\n2. **Body text**: content related to its corresponding column header.\n3. **Header cell**: input field for header text is the first row across all columns.\n4. **Sort function (optional)**: displays whether information is set to ascending (up arrow) or descending (down arrow).\n5. **Header text**: title or concise description of the content within its column.\n6. **Action menu trigger**: conveys that the header cell is enabled as a trigger to open a menu. The menu contains features available within the table including sort.","url":"https://dds.dell.com/site/stage/13/ab/Table_Anatomy_3_42ab5d69a6.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/data-tables/","type":"External"},"title":"Data tables","description":"Read the Nielsen Norman Group&#39;s article on tables.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Comparison tables allow users to review multiple factors or characteristics quickly and easily before making a decision. Use a table to help users decide between two or more items, such as support tiers or subscription plans.

When implemented in code as a grid, tables are used to show large sets of data in an organized manner. These tables contain multiple features, in which data is both filterable and searchable. 

In the case where large amounts of data are required, think about pairing [pagination ](/components/pagination/?tab=Design#usage)with the table in order to reduce the overall size into more easily consumable blocks. 

Note that loading a large amount of data may also take time. In such cases, a [loading indicator](/components/loading-indicator) may help to avoid confusion when it takes more than a few seconds to populate the table.

## Kinds

Consider the amount of information or kind of content you wish to present to help determine which table best meets your use case.

### Borders

Borders can be used to create grid, horizontal, or freeform tables.

<details data-name='image-block' data-images='[{"alt":"Example of a three-column table in the grid style.","caption":"Grid: Recommended for dense tables. The grid style includes both horizontal and vertical borders. The grid style is the default table style.","url":"https://dds.dell.com/site/stage/67/17/Table_Kinds_Borders_Grid_9ad8cfce09.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<details data-name='image-block' data-images='[{"alt":"Example of a two-column table in the horizontal grid style.","caption":"**Horizontal borders**: Recommended for most data sets. A table with horizontal borders reduces visual noise and allows users to easily scan data.","url":"https://dds.dell.com/site/stage/06/37/Table_Kinds_Borders_Horizontal_Borders_8f6a80bfa8.png"},{"alt":"Example of a two-column table in the freeform style.","caption":"**Freeform**: Recommended for light data sets only. Freeform tables do not include horizontal or vertical borders.","url":"https://dds.dell.com/site/stage/99/73/Table_Kinds_Borders_Freeform_2490ddb507.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Alternating rows

You can apply a color fill to every other row to increase readability in large data sets. This styling is available for tables with all, horizontal, or no borders.

<details data-name='image-block' data-images='[{"alt":"Example of a three-column table in the grid style with alternating rows applied.","caption":"","url":"https://dds.dell.com/site/stage/46/99/Table_Kinds_Alternating_Rows_a78e5d510c.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

Tables can extend anywhere within the margins of the screen grid. The overall size of the table depends on its location in relation to other elements on the page. When deciding the size of your table, consider the content you wish to display and the layout within your experience.

The following are recommended pixel ranges that fit within their respective breakpoints (see [grid](/foundations/grid/) foundations page). However, these pixel ranges are not preconfigured within the component. Additionally, pixel ranges are used to set fixed column widths, which increase as the ranges grow.

| Viewport range     | Table pixel range | Column width |
| ------------------ | ----------------- | ------------ |
| X-small            | 288px - 447px     | 202px        |
| Small              | 448px - 735px     | 210px        |
| Medium             | 720px - 975px     | 218px        |
| Large              | 944px - 1285px    | 226px        |
| X-large and larger | 1270px - 1487px   | 234px        |

There are no height restrictions for table, and individual row height automatically adjusts to fit its contents.

### Density

Table is offered in three different densities. Row height is determined by the selected density but will increase to accommodate more content when necessary.

| Density | Use case                                                                                                                                                             |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Compact | Use compact size when you have large amounts of information to display. By reducing the space between content, the user can easily scan and compare the information. |
| Default | This default size can be used in most cases, as long as you can maintain visual balance.                                                                             |
| Comfy   | Comfy size can be used when there isn’t a large amount of information to display and the whole table can be viewed on screen.                                        |

Density does not affect column width. Column width is defined in the table’s configuration, and can be adjusted per column. 

Speak with your engineering team when creating tables to determine what width works best for the content you’re trying to display. For example, you may want to set columns containing descriptions wider than their surrounding columns. Review table documentation on storybook for more information on how to adjust column width.

## Layout

### Alignment

Alignment is determined by the information within each column. Column headers should always align to their corresponding content.

#### Left-align

Left align text and qualitative numbers, including zip or postal codes and phone numbers.

#### Right-align

Right align quantitative numbers including money, quantities, measures, and percentages unless they are in the first column of the table. Align numbers to their decimal for readability.

## Interaction

### Behavior and states

#### Sorting

The sorting feature resides within the action menu. Once the action menu is triggered, sort can be applied in either ascending or descending order. Sort functionality can be enabled on one, multiple, or all columns within the table.

<details data-name='image-block' data-images='[{"alt":"Example of an expanded action menu, where Sort ascending is selected.","caption":"An option to unsort the table by the selected column can also be found within the menu.","url":"https://dds.dell.com/site/production/64/38/Table_Behaviors_Sorting_2_546c91564e.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Sticky header

A sticky header can clarify each column’s context when a table consists of more rows than can be shown within a fixed height, and vertical scroll is required to view the entire dataset.

<details data-name='image-block' data-images='[{"alt":"Image showing sticky header, which remains on top of the table’s body cells when users scroll.","caption":"Enabling a sticky header ensures the header row remains on top of the table’s content as users scroll vertically within the table. Additionally, an elevation effect is added to give the header height.","url":"https://dds.dell.com/site/production/ec/0a/Table_Behaviors_States_Sticky_Header_1_23e16a28e0.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Pinned columns

Enabling a pinned column ensures that it, and all columns that precede it, will remain in view within the defined width of the table as users scroll horizontally. 

An elevation effect gives pinned ones height over unpinned ones.

Any column can be pinned, but it’s most common to pin either the start column  or the end column. When any other column is pinned, it automatically pins all columns to the left side of it. 

Start columns are pinned when there are more columns that can be shown within a fixed width. Users pin start for various purposes, such as needing a more visible identifier, creating groups, categorizing or organizing data.

<details data-name='image-block' data-images='[{"alt":" a pinned column, which remains on top of the table’s body cells when users scroll.","caption":"Example of a table having the start column pinned","url":"https://dds.dell.com/site/production/41/ef/Table_Behaviors_States_Pinned_Columns_9860d20e7d.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

Pin end columns when there is a demand for data comparison or providing visibility to results. 

Columns presenting row actions with buttons 
such as editing, deleting, viewing details, and others.

 are commonly placed on the right side. This facilitates actions 

If there is a column consisting of an overflow action menu, that column is programmatically pinned at the end of the table in the UI.

<details data-name='image-block' data-images='[{"alt":"A pinned end column, which remains on top of the table’s body cells when users scroll.","caption":"Example of a table having the end column pinned","url":"https://dds.dell.com/site/production/41/ef/Table_Behaviors_States_Pinned_Columns_1ada27cd03.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Expandable rows

Expandable rows are used to provide additional information that is not visible in the table’s default rest view. When selected, the row expands to fill the width of the table and, if necessary, the expanded row’s content can be further accessed by scrolling.

Loading data may occur at the moment the row is expanded. In this case, speak with your engineering team about how your table will retrieve and display data. If there is a wait time of three seconds or more, use a small [loading indicator](/components/loading-indicator/) as a placeholder to let users know that their content is loading.

Supported content within the expanded section is limited to text in grid or list form.

<details data-name='image-block' data-images='[{"alt":"Action is taken to expand the second row in a table.","caption":"Expansion is indicated by a chevron.","url":"https://dds.dell.com/site/production/2d/23/Table_Expandable_Rows_1_1f8545c8ec.png"},{"alt":"An expanded row showing example content, description and date.","caption":"Once pressed, the chevron flips and the row opens to show additional content. Rows below the expanded row are pushed down.","url":"https://dds.dell.com/site/production/0f/37/Table_Expandable_Rows_2_b4cc5eb383.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

#### Selectable rows and bulk actions

Selectable rows include checkboxes that allow the user to select or deselect a specific row, or all viewable rows, in the table’s current view. The rows can be selected together to perform any action available within the bulk actions menu, such as delete, or move Rows that are not selectable display inactive checkboxes.

\
A user activates bulk actions by selecting one or more checkboxes in the table’s first column. All selected items will receive the action. 

Display any frequently used or necessary actions at all times. If using more than three actions, move them to a menu.\
\
It is recommended to enable the search feature when using selectable rows to prevent an empty ribbon above the table when no rows are selected.

<details data-name='image-block' data-images='[{"alt":"Example of a table with rows selected and displaying bulk actions","caption":"Example of a table with rows selected and displaying bulk actions","url":"https://dds.dell.com/site/production/b3/27/b3279ab9e8e09400d2f8ab1d1b3802a065567e23.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Search

Search capabilities are available for tables using an embedded search input. As a user types into the input, the table updates to display full rows containing matches to the search query. If no results match the query, show a “no results” message in the body of the table with a recommendation on a follow up action the user can take (see [empty state](/patterns/empty-state/#usage) pattern documentation).

#### Filtering

The filter inquiries are applied per column. As a user types into the input, the table updates to display full rows containing matches to the column filter’s query. If your table is paginated, all matching results will appear beginning from the first page, regardless of which page the user was on when the search was submitted. The filter should be triggered after 0.1s of inactivity, during a stop or pause on typing. In case there are multiple filters applied, the table will display results that match all queries.

<details data-name='image-block' data-images='[{"alt":"Example showing all results for \"Un\" and \"M\" column filters.","caption":"If the location column is filtered by “Un” and the column name filtered by “M”, the table will only display results where there are overlapping matches in both the location and name columns.","url":"https://dds.dell.com/site/production/a1/d8/Filter_entry_8a90e5afec.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Show or hide columns

The show or hide columns interaction lets users **control which columns appear in the table view**. When activated, it opens a [drawer](https://www.delldesignsystem.com/components/drawer) that lists all available columns. 

Place the “Show or Hide Columns” button on bulk actions. Avoid placing it inside the “More” [action menu](https://www.delldesignsystem.com/components/action-menu) to prevent accessibility issues.

The drawer includes a [text input](https://www.delldesignsystem.com/components/text-input) for filtering columns by name. Columns with **sorting, filtering, or pinning options** display an information icon next to the column name. The icon includes a [tooltip](https://www.delldesignsystem.com/components/tooltip) that explains how these features may affect the table layout. The [drawer](https://www.delldesignsystem.com/components/drawer) supports up to 20 columns. 

If the user deselects all columns, display an **error state** with red text and the message: *“Select at least one column to continue.”*.

Show a **status indicator** above pagination and inside the drawer to indicate how many columns are currently visible. Example: *“Showing X out of Y columns.”*.

For large tables, display a **loading indicator** while updates are processed.

<details data-name='image-block' data-images='[{"alt":"Example of the show or hide columns interaction in a table, displaying a tooltip on a column name.","caption":"Example of the show or hide columns interaction in a table, displaying a tooltip on a column name.","url":"https://dds.dell.com/site/components/table/table-showhidecolumns-default1.png"},{"alt":"Error state in the show or hide columns drawer in a table.","caption":"Error state in the show or hide columns drawer in a table.","url":"https://dds.dell.com/site/components/table/table-showhidecolumns-error1.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Standards

### Accessibility

#### Follow approved grid navigation behavior for keyboard users:

| Command             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tab (initial press) | Focus should move into the grid, onto the cell positioned in the first row of the first column.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| Arrow keys          | Cycles focus from one cell to the next, following the direction of the arrow key that is pressed. For example, the down arrow key moves the focus down one cell each time it is pressed.                                                                                                                                                                                                                                                                                                                                                     |
| Enter               | The enter key is used to set focus on an item within a cell, for a text input or action. Subsequent presses will confirm the action in the case for buttons or links. Note that the tab key can be used to “enter” a focused cell but will exit the grid if pressed again.                                                                                                                                                                                                                                                                   |
| Tab (within a cell) | If the user has set focus within the cell (after pressing the enter key), using the tab key will navigate among the available interactive elements within that cell. For example, if the cell contains a text input, pressing the enter key will allow users to type into the input. Pressing the tab key will move focus from the input to the clear button, if available. The tab key does not cycle through options within the cell and will cause users to exit the grid if no other interactive elements are available within the cell. |
| Esc                 | The esc key is used to exit a cell and allows users to resume navigating the grid using their keyboard’s arrow keys.                                                                                                                                                                                                                                                                                                                                                                                                                         |
| Tab (focus on cell) | Will exit the grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

### Content

#### Headers

Headers should be clear, concise, and descriptive. Use sentence case and capitalize the first word for all headers.

**Do**: Email address

**Don’t**: Employee’s Email Address

#### Organization

Organize information according to a hierarchy of important information. Otherwise arrange data in ascending order, descending order, or alphabetically.

#### Punctuation

In most cases, punctuation is not necessary inside tables, unless writing information in full sentences such as within description and use case columns.

Design



To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-table--basic).

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-table--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-table--basic).

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-table--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-table--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-table--docs&viewMode=docs&websiteFrame=true'></details>

A table contains data arranged in rows and columns. They are used to communicate relationships between content and to display references, comparisons, and choices.

Table

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
