<h2>Usage</h2>
<p>Table view allows customers to view complex data from charts in a simple table format, where data is arranged in rows and columns. This is critical for accessibility, as it reduces cognitive load, allows for customization of visual settings, and is more easily navigated by screen readers.</p>
<p>In charts where tables are not already present, table view is critical for processing information and data export.   Currently, the table view pattern is designed to work for:</p>
<ul>
<li><a href="/data-visualization/area-chart/">Area charts</a></li>
<li><a href="/data-visualization/bar-chart/">Bar charts</a></li>
<li><a href="/data-visualization/donut-chart/">Donut chart</a></li>
<li><a href="/data-visualization/gauge-chart/">Basic gauge chart</a></li>
<li><a href="/data-visualization/line-chart/">Line chart</a></li>
<li><a href="/data-visualization/pie-chart/">Pie chart</a></li>
</ul>
<p>Data export</p>
<p>Table data can be downloaded as a Comma Separated Values (CSV) file. This is helpful for 
transferring or storing data.</p>
<h2>Layout</h2>
<p>Table view and download options are accessed via an <a href="/components/action-menu/">action menu</a> located on the right of the header. </p>
<details data-name='image-block' data-images='[{"alt":"Image showing action menu being selected and opening action items.","caption":"The action menu opens the two action items View as table, and Download as CSV.","url":"https://dds.dell.com/site/patterns/table-view/action-menu-2x.png"}]' data-numberofcolumns='1'></details>

<h2>Interaction</h2>
<p>Selecting the <a href="/components/action-menu/">action menu</a> will open two action items, &quot;View as table&quot; and &quot;Download as CSV&quot;. </p>
<p>Selecting &quot;View as Table&quot; opens a drawer containing the table displaying the chart data. </p>
<p>Selecting &quot;Download as CSV&quot; will download the data in CSV format. The option to download the data as CSV will also be available on the right side of the header of an opened table.</p>
<details data-name='image-block' data-images='[{"alt":"Image of the action menu being selected and the subsequent opening of the table drawer.","caption":"Selecting \"View as table\" opens a drawer housing the table.","url":"https://dds.dell.com/site/patterns/table-view/table-view-2x.png"}]' data-numberofcolumns='1'></details>

<h2>Related components</h2>
<p>Table view is made up of the following components. Please refer to the accessibility standards for each components when using.</p>
<p><a href="/components/action-menu/">Action menu</a> <a href="https://www.delldesignsystem.com/components/action-menu/"></a>- <a href="https://www.delldesignsystem.com/components/action-menu/"></a>a container with a menu related to the task at hand.</p>
<p><a href="/components/button/"></a><a href="/components/button/">Button</a> - <a href="https://www.delldesignsystem.com/components/button/"></a>used to initiate actions.</p>
<p><a href="/components/drawer/">Drawer</a> - a secondary content component that sits off-screen until triggered by the user.</p>
<p><a href="/components/drawer/"></a><a href="/components/drawer/">Table</a> - contains data arranged in rows and columns.</p>
<p><a href="https://www.delldesignsystem.com/components/table/"></a></p>


figma

Figma UI Kit

Table view allows you to view chart data as a table and to export that same data.

Table view

React update

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


DDS React components

Home

About DDS

Figma

Vanilla

Angular

React

Data visualization

Migration guide

A11y annotation kit

AI chat toolkit

Contributor sandbox

Getting started

Changelog

Roadmap

Updates

Overview

Color

Elevation

Grid

Icons

Typography

Foundations

Accordion

Action menu

Badge

Blockquote

Breadcrumb

Button

Card

Carousel

Category navigation

Checkbox

Date picker

Divider

Drawer

Dropdown

File input

Footnote

Link

List

Loading indicator

Message bar

Modal

Notification

Overlay

Pagination

Popover

Progress bar

Progress tracker

Radio button

Search

Select

Side navigation

Switch

Table

Tabs

Text area

Text input

Time picker

Tooltip

View more/less

Components

Area chart

Bar chart

Bubble chart

Donut chart

Gauge chart

Line chart

Metrics card

Pie chart

Utilization chart

Dashboard template

Chart customization

Drag and drop

Empty state

Filter

Form

Microinteraction

Sign-in

Patterns

Accessibility

Brand

Partners

Case studies

FAQs

Tools

Videos

Dell Design System v1

Resources

Send Feedback

Check my tickets

Find us on Teams

Support