HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
What makes up a DataTable?
When to use
Finding a specific record
Narrowing a result set
Browsing a result set
Assembling a data set
Guidelines
Setting the width of a DataTable
Setting the height of a DataTable
Wrapping and truncating
Truncation
Wrapping
Handling empty cells
Accessibility
Status and state
DataTable behaviors & actions
Sorting
Resizeable columns
Searching and filtering
Navigation via DataTable
Selecting multiple records & batch actions
Paginated
Server-side paginated table
Fixing header row and/or columns
Column summaries & aggregation
Use pagination or infinite scroll
Vertically align row data
Components

DataTable

DataTable presents data in a column and row format.

Storage Pools

Arrays
Pinned
%
thh8y
Asup-array01-lvs (default)
Asup
asup-array01-lvs
14.6
1.9
3%
333.2
7phfb
Dev-K8-Sym-R5-3 (default)
Dev
harm-stage-array01
204.2
4.6
5%
333.2
79kyz
Dev36-erray01 (default)
Dev
harm-stage-array02
173.4
3.7
7%
3955.2
95xjq
asup-array1 (default)
Asup
harm-stage-array04
118.8
2.8
2%
3.9
ccnpr
Dev-K8-Sym-R5-3 (default)
Dev
Harm-cs-stage-R4-5
62.8
2.9
8%
333.2
0knx4
asup-array2 (default)
Asup
ds-array02
82.5
10.2
0%
3955.2
qeqgj
Dev36-varray02 (default)
Dev
ds-array01
92.5
11.3
0%
333.2
s9419
DevHarmCs2R39
Dev
harm-stage-array03
7.2
0.1
1%
333.2
56t7a
DevStageSymR31 (default)
Dev
rtp-array198
64.3
1.4
0%
333.2
koten
asup-array2 (default)
Asup
ds-array02
5.1
11.4
0%
3955.2
j8wyc
Dev36-varray02 (default)
Dev
ds-array01
0.6
1.2
0%
333.2
l4ai2
DevHarmCs2R39
Dev
harm-stage-array03
47.9
2.3
0%
333.2
ybzf3
DevStageSymR31 (default)
Dev
rtp-array198
27.9
20.5
3%
333.2

What makes up a DataTable?

DataTables enable users to accomplish a task by finding records of interest, then take action against them. They present structured data in a grid, with columns and rows to aid readability, scanability, and show the meaning of the data.

Table controls
Search
Filter controls
Actions
Table header
Table body
Table footer

Controls

DataTable controls should live above the table and facilitate a user's ability to locate and take actions against records of interest. A controls section may contain search and filter controls, as well as action controls such as batch applying settings or data export.

DataTable header

Contain table header cells concisely labeling the column's contents. Column headers may be enhanced by enabling sorting.

DataTable body
Consists of rows allowing users to scan, read and take action on the data. Rows may be enhanced by enabling actions such as record selection and navigation to a record's detailed view.

DataTable footer
Optional. Used for presenting summary counts, sums, averages, and other aggregations.

When to use

Users interacting with a DataTable are trying to accomplish one of the following types of tasks. They are not, however, trying to do all of these tasks at once. Keeping "what is the user setting out to accompish?" at the center of our mindset helps guide which table features to include and, more importantly, exclude when we add a Table to our interfaces.

Finding a specific record

Often, a user's task is to find and take action against a specific record. Whether it be finding a customer's record to review their chat history, tracking a particular order's status, etc., the user experience objective is to enable a user to locate that record as quickly as possible.

  • Use Search. This is often the quickest, most efficient method for users to find a record of interest.
  • As backup, use sortable columns coupled with paginated results. This combination provides users with the knowledge of alpha-numeric range, enabling an educated guess as to the record's location in the sort.
Example demonstrating how to find a record of interest with a Table
See finding a specific record

Narrowing a result set

When a user is looking to focus on a group of records sharing similar characteristics, providing thoughtful filter controls allows for incremental reduction of the DataTable's result set.

  • Provide filter controls.
  • Filter control input types should be chosen to best fit the data type and breadth of values.
Example demonstrating how to find a record of interest with a Table
Learn more about providing a great filter experience

Browsing a result set

Sometimes users are "checking up on things" or do not have specific records in mind. In this case, they are assessing the state of their records and the user experience objective is to facilitate the scanning of records to identify potential outliers or records which the user is unaware need attention or action.

  • Use infinite scroll. In this scenario, infinite scroll removes friction, allowing users to browse records effortlessly.
  • Consider adding column data types such as status indicators or meters which call attention to records needing attention.
Example demonstrating how to find a record of interest with a Table
Using infinite scroll with tables

Assembling a data set

Distinct from the user objectives above, data tables containing data for analytical purposes deserve distinct treatments as well. While data tables are useful for providing initial "discovery" type insights, such as identifying available attributes and ranges of values, purpose built tools are often a better choice for conducting in depth analysis. In this scenario, a data table's design should be optimized for assembling the data set for analysis and easy portability of that data into the user's preferred analytical tool.

  • Provide filter controls.
  • Filter control input types should be chosen to best fit the data type and breadth of values.
  • Provide export capability for users to consume the data in their analytical tool of choice.
  • Provide aggregate measures in the table footer.
  • Organize table columns to group like elements and to keep most important elements to the left.

Guidelines

Setting the width of a DataTable

  • Use the correct set of columns, prioritizing frequently used ones. Don't add more columns just because the data is there, as this will clutter the data table.
  • To support readability, make tables only as wide as they need to be and no wider. If the content does not need a large width, prevent the table from stretching.
  • Limit the whitespace on individual columns by using size for data table columns.
  • When the data table has the potential to be wider than the screen:
    • Use 'pin' to anchor the primary column to preserve row context.
    • Use horizontal scrolling within the data table, as opposed to scrolling at the level of the entire page
  • When the data table has the potential to be narrower than its layout context:
    • Align it horizontally with the rest of its layout context. Typically, this is aligned to the start of the content as opposed to stretched.
    • Align any header above the table, including heading, search, filter, actions, in the same way. This keeps an actions menu or button in the context of the data table and prevents them from being orphaned. However, don't force the header above the data table to align its width to the data table, as that might compress the contents of the header too much.

Setting the height of a DataTable

  • Let the data set the height of the data table. The data table will grow in height as the length of data increases.
  • If it is expected a user will want to navigate to a specific portion of the data, pagination should be used. Generally, it is recommended that each page of data table results be limited to 20 records. For more information on pagination, read Pagination guidance.
  • Do not restrict the height of a data table if the page has available space. This may introduce unnecessary scrolling.
  • If the height of a Table needs to be restricted, set overflow=“auto” on its parent Box to allow the user to scroll through the data.

Wrapping and truncating

When text exceeds the amount of space available within a table cell, wrapping or truncation may be used depending on your use case. Below are some best practices to consider when implementing.

  • For readability, avoid truncating or wrapping text within the first column.
  • Keep each cell short and concise, limiting the amount of characters within a cell when possible.
  • Minimize the number of included columns by only showing those which are used most frequently.

Truncation

Truncation should not be used on headings, numeric values, or statuses.

Truncation may be applied at the beginning, middle, or end of a piece of data. When choosing where to apply truncation within a string, consider which section of the text is most likely to differentiate the item from others in the column.

Additional questions to keep in mind when using truncation:

  1. How much information loss is acceptable?
  2. What impact is caused by any amount of information loss?
  3. When creating the data, can it be structured so that a table can truncate it in such way that the information loss is kept to a minimum?

Options for Positioning Truncation

Front-text

Front-text truncation is when an ellipsis is placed at the beginning of a long string. This is best used when the start of a string is similar to many other cells, such as text containing a common prefix.

Mid-text

For recognizability, it may be better to crop the middle of a string. Define the parts of the content which need to be preserved in order to keep recognition high and should not be truncated. This strategy can be used when both the beginning and ends are uniquely identifiable.

End-text

End-text truncation is when the ellipsis is placed at the end of the string.

If truncating numerical values is absolutely necessary, use end-text truncation. Additionally, provide a tooltip to help users view the complete string.

Wrapping

Wrapping allows long strings of text or words to break and wrap onto subsequent lines.

Wrapping should be used when:

  • The entirety of the content must be available at all times.
  • Long numerical values need to be displayed.

Handling empty cells

If the value of a cell is empty, use -- in place of where a value would appear. This visual indicator aids the user in identifying fields that do not have values while also maintaing the scanablility across rows and columns.

Because the HPE theme does not have borders or background color differences to differentiate between rows and columns, a visual indicator in empty cells is necessary to maintain readability and scanability.

For empty cells, add an a11yTitle="No value" to the Text component that would otherwise render the data to ensure users of assisstive technology are informed of the empty state.

Storage Pools

Arrays
Pinned
%
thh8y
Asup-array01-lvs (default)
Asup
asup-array01-lvs
14.6
1.9
3%
333.2
7phfb
Dev-K8-Sym-R5-3 (default)
Dev
Asup
204.2
4.6
5%
333.2
79kyz
Dev36-erray01 (default)
Dev
harm-stage-array02
173.4
3.7
7%
3955.2
95xjq
asup-array1 (default)
--
asup-array01-lvs
--
2.8
2%
3.9
ccnpr
Dev-K8-Sym-R5-3 (default)
--
Harm-cs-stage-R4-5
62.8
11.4
2%
--
0knx4
asup-array2 (default)
Asup
ds-array02
82.5
10.2
0%
--
qeqgj
--
--
ds-array01
92.5
11.3
0%
333.2
s9419
DevHarmCs2R39
--
--
7.2
0.1
1%
333.2
56t7a
DevStageSymR31 (default)
Dev
harm-stage-array03
--
11.4
0%
333.2
koten
asup-array2 (default)
--
harm-stage-array03
5.1
11.4
0%
3955.2
j8wyc
Dev36-varray02 (default)
Dev
--
0.6
1.2
0%
333.2
l4ai2
DevHarmCs2R39
Dev
harm-stage-array03
47.9
2.3
0%
333.2
ybzf3
DevStageSymR31 (default)
Dev
rtp-array198
27.9
20.5
3%
333.2

Accessibility

To ensure screen readers are able to associate a page heading with a given DataTable, apply an id to the Heading and aria-describedBy to the DataTable, where the same string value is applied to both attributes. When a screen reader reaches the data table, it will announce the Heading content which provides the user with better context about the table data and purpose.

For example, if on the Heading you apply id="storage-pools-heading", on the DataTable you would apply aria-describedBy="storage-pools-heading". In this example, the screen reader would properly associate "Storage Pools" as the description for the DataTable.

<Heading id="storage-pools-heading">Storage Pools</Heading>
<DataTable aria-describedBy="storage-pools-heading" />

Status and state

Statuses within a DataTable should always have these accompanying elements:

  • Shape
  • Color
  • Content (This is not restricted to just normal, warning, unknown, and critical)

Greater detail, including accessibility considerations, is included on the status indicator page.

A state is the current stage of a process. A status is the condition of the state. Status can also be thought of as a pointer to a state’s “health”. Read more about the distinctions between state and status.

Depending on the scenario, status and state may be displayed within a DataTable in one of three ways:

  1. Separate columns for status and state
  2. Status only column
  3. Combined column

1. Separate columns for status and state

When status and state are distinct and independent from each other, display them in separate columns. This is the most common use case.

  • Used when the status column is not coupled with the displayed state column. (Ex. An equipment can have a “Normal” status but have a “Running” state shown within the DataTable.)
  • Allows columns to be sorted independently from each other.
  • Clearly visually separates and labels status and state to avoid false associations.
Example of a data table showing separate columns for status and state

2. Status only column

  • In some use cases, displaying status on a DataTable is more important to users than state. If this is true for your use case, feel free to display only the status in the DataTable.
  • Used in situations where horizontal screen real-estate is an issue.
  • If displaying state is required, provide the user the ability to view the record's detail. State may be displayed once the user selects the row for more information.
Example showing a status column in the data table pointing to the state within the details

3. Combined column

When the status and state are coupled, they may be displayed as a single element.

  • Coupled statuses have a 1:1 relationship with specific states.
  • A single column presents both status and state. Status represented by a status indicator and state as the accompanying label.
  • Status and State are sorted together rather than individually.
  • Note: A single column is rarely used. Ensure false associations are not created when status and state are not coupled.
Example of a data table showing combined column for status and state

DataTable behaviors & actions

Sorting

Column headers behave as a button and perform the sort action. A caret icon indicates the directionality and to which column the sort is currently applied.

Sortable Items

6
lemon
182282
7/20/1969
75%
warning
7
rambutan
73
8/6/1991
50%
ok
1
durian
42
1/25/1915
5%
ok
2
cherimoya
3.14159
12/7/1941
99%
ok
3
mangosteen
3
3/21/1965
33%
warning
4
jackfruit
2.7182
12/15/1791
25%
ok
5
kiwi
1.618
11/3/2020
67%
critical

Resizeable columns

Columns can be resized if a DataTable has the resizeable prop applied. Column resizing allows the user to change the width of the header columns. Each column can be resized by dragging the right side of its header to the left or to the right to expand the column.

Contact Information

Company
Contact
Title
Email
Phone number
Device name
City
Blue Line Graphics
Joe Smith
CTO
joe.smith@blg.com
542-659-6500
Chromecast
Phoenix, AZ
Home Depot
John Gomez
Regional Manager
john@homedepot.com
332-467-5872
Gateway32B6CD
Orlando, FL
Hewlett Packard
Alissa Marshall
Sales Person
alissa.m@hp.com
450-221-0093
Amazon-Firestick
Austin, TX
Michaels
Maritza Garcia
Site Manager
maritza@michaels.com
549-691-3199
Google-Home
Rochester, NY
Trader Joes
Victor Manuel
Regional Manager
victor.manuel@tj.com
864-092-3469
Daras-MBP
Ann Arbor, MI
Whole Foods
Leticia Anderson
CFO
leti@wholefoods.com
445-543-7899
Daras-Air
Los Angeles, CA
Macys
Bryan Newman
Manager
bryan.newman@macys.com
203-793-0983
iPhone
Boise, ID
Electro Co.
Liz Montgomery
Assistant Manager
liz@electroco.com
982-430-5643
HPCBF857
Portland, OR
Home Depot
Amy Li
CTO
amy@homedepot.com
370-432-5430
Google-Home-Mini
New York, NY
HPE
Joshua Hansen
Site Manager
joshua@hpe.com
656-264-3398
Amazon-Alexa
Fort Collins, CO
Electro Co.
Marco Ventura
Sales Person
marco@electroco.com
320-633-0912
Google-Home-Mini
Atlanta, GA
Trader Joes
Justin Jones
Assistant Manager
justin.jones@tj.com
432-348-4453
N/A
San Francisco, CA
Michaels
Pierre Laurent
Regional Manager
pierre@michaels.com
124-567-4039
N/A
Paris, France

Searching and filtering

Complimenatary elements such as search or filters should be guided by the task the user is setting out to accomplish.

  • Looking for a specific record? --> Search.
  • Trying to narrow records down to a set of shared characteristics? --> Filter.
  • Not quite certain for what I am looking, but I know its general characteristics? --> Filter.

See Filtering for greater detail.

Navigation via DataTable

Clicking on a data table row takes the user to a context where the most prominent heading matches the primary column text. This context could either be a page or a modal. In this example, clicking on a table row navigates to a detail page.

Orders

Id
Name
P.O. #
State
Service
Tenant
Contact
Order date
OID257383
My PVT Cloud Order
9701231123323
Created
HPE GreenLake Private Cloud
Suncor Energy
4/30/2020
OID789345
GEM_1
9253856295
Build prep
HPE Goats as a Service
Nestle
4/5/2020
OID894567
VMaaS for R&D
7239456727
Processing
VMaaS for R&D
Coke
3/4/2020
OID829374
GEM_1
1926573453
Factory express
HPE GreenLake Private Cloud
Domain
2/28/2020
OID648379
VMaas for R&D
2341835675
Provisioning
VMaaS for R&D
Nestle
2/15/2020
OID192653
GEM_1
9253578367
In transit
HPE GreenLake Private Cloud
Suncor Energy
1/30/2020
OID524387
My MVT Cloud Order
2634986755
Cancelled
HPE GreenLake Private Cloud
Boeing
1/15/2020
OID824567
VMaaS for R&D
1986476536
Ready to Ship
HPE Goats as a Service
Coke
12/29/2019
OID945423
My PVT Cloud Order
9454285743
Created
HPE GreenLake Private Cloud
Domain
12/15/2019
OID253462
GEM_1
4459253462
Accepted
VMaaS for R&D
Suncor Energy
11/1/2019
OID953856
DevStageSymR31 (default)
2341835675
Processing
VMaaS for R&D
Coke
11/1/2019
OID953890
DevStageSymR31 (default)
475078908
Delivered
Mercury
Nestle
11/1/2019

Selecting multiple records & batch actions

Checkboxes allow for selection of multiple records, which then may apply batch actions via action control buttons or menus.

Manage Orders

12
items
Id
Order name
P.O. #
State
Service
Tenant
Contact
Order date
OID257383
9701231123323
Created
HPE GreenLake Private Cloud
Suncor Energy
melinda@suncor.co
4/30/2020
OID789345
9253856295
Build prep
HPE Goats as a Service
Nestle
wan@nestle.com
4/5/2020
OID894567
7239456727
Processing
VMaaS for R&D
Coke
muhtar@coke.com
3/4/2020
OID829374
1926573453
Factory express
HPE GreenLake Private Cloud
Domain
priyanka@domain.com
2/28/2020
OID648379
2341835675
Provisioning
VMaaS for R&D
Nestle
wan@nestle.com
2/15/2020
OID192653
9253578367
In transit
HPE GreenLake Private Cloud
Suncor Energy
melinda@suncor.co
1/30/2020
OID524387
2634986755
Cancelled
HPE GreenLake Private Cloud
Boeing
susan@boeing.com
1/15/2020
OID824567
1986476536
Ready to ship
HPE Goats as a Service
Coke
muhtar@coke.com
12/29/2019
OID945423
9454285743
Created
HPE GreenLake Private Cloud
Domain
priyanka@domain.com
12/15/2019
OID253462
4459253462
Accepted
VMaaS for R&D
Suncor Energy
melinda@suncor.co
11/1/2019
OID953856
2341835675
Processing
VMaaS for R&D
Coke
muhtar@coke.com
11/1/2019
OID953890
475078908
Delivered
Mercury
Nestle
wan@nestle.com
11/1/2019

Paginated

With long sets of data, pagination can help to create a more efficient means of navigating to a specific item or range of items.

Storage Pools

Arrays
Pinned
%
thh8y
Asup-array01-lvs (default)
Asup
asup-array01-lvs
14.6
1.9
33%
333.2
7phfb
Dev-K8-Sym-R5-3 (default)
Dev
harm-stage-array01
204.2
4.6
53%
333.2
79kyz
Dev36-erray01 (default)
Dev
harm-stage-array02
173.4
3.7
66%
3955.2
95xjq
asup-array1 (default)
Asup
harm-stage-array04
118.8
2.8
23%
3.9
ccnpr
Dev-K8-Sym-R5-3 (default)
Dev
Harm-cs-stage-R4-5
62.8
2.9
84%
333.2
0knx4
asup-array2 (default)
Asup
ds-array02
82.5
10.2
0%
3955.2
qeqgj
Dev36-varray02 (default)
Dev
ds-array01
92.5
11.3
0%
333.2
s9419
DevHarmCs2R39
Dev
harm-stage-array03
7.2
0.1
6%
333.2
56t7a
DevStageSymR31 (default)
Dev
rtp-array198
64.3
1.4
0%
333.2
koten
asup-array2 (default)
Asup
ds-array02
5.1
11.4
0%
3955.2

Server-side paginated table

In this example, data is dynamically fetched using an API call and rendered as a paginated DataTable. This approach is preferred for DataTables that may have large amounts of records because, by loading only a page worth of data at a time, it ensures the DOM doesn't become overloaded.

Launches

Success

Fixing header row and/or columns

Fixing or pinning header rows, columns, or footers allow users to track and maintain context across long and wide data sets.

Connected Devices

MAC address
IP V4
Hostname
Connection type
Category
Device name
Status
Network band
GHz
Link rate
Mbps
b0:2a:43:52:48:c5
192.168.0.20
wh7-dureal50
Wireless
Network
Chromecast
Active
2.4
72
00:d0:2d:32:b6:cd
192.168.0.24
wh7-dureal50
Wireless
Network
Gateway32B6CD
Active
2.4
72
d8:6c:63:46:13:03
192.168.0.19
wh7-dureal50
Wireless
Network
Amazon-Firestick
Active
2.4
72
f4:f5:d8:c0:e2:9c
192.168.0.21
wh7-dureal50
Wireless
Network
Google-Home
Active
2.4
72
38:f9:d3:b7:09:4e
192.168.0.21
wh7-dureal50
Wireless
Network
Daras-MBP
Active
5
702
10:40:f3:85:67:44
192.168.0.13
wh7-dureal50
Wireless
Network
Daras-Air
Active
2.4
78
a4:f1:e8:27:e7:1c
192.168.0.11
wh7-dureal50
Wireless
Network
iPhone
Active
2.4
24
10:e7:c6:cb:f8:58
192.168.0.22
wh7-dureal50
Wireless
Network
HPCBF857
Active
2.4
24
44:07:0b:ba:1e:eb
192.168.0.18
wh7-dureal50
Wireless
Network
Google-Home-Mini
Active
2.4
72
00:f6:20:60:15:d0
192.168.0.17
wh7-dureal50
Wireless
Network
Amazon-Alexa
Active
2.4
72
30:fd:38:88:49:f4
192.168.0.16
wh7-dureal50
Wireless
Network
Google-Home-Mini
Active
2.4
292
7c:b0:c2:5c:94:a5
192.168.0.26
wh7-dureal50
Wireless
Network
N/A
Active
2.4
6
E0:5F:45:96:F4:DD
192.168.0.25
wh7-dureal50
Wireless
Network
N/A
Active
2.4
1

Column summaries & aggregation

Service Adoption

Service
Requests
Delivered
Attachment
%
General Purpose VMs
742
623
84.0
Containers
23
12
52.2
ML Ops
42
32
76.2
Private Cloud VMs
654
516
78.9
Storage Optimized Compute
298
290
97.3
Hyperconverged VMs
1,074
1,052
98.0
Mission Critical Storage
322
273
84.8
Data Protection
742
623
84.0
Composable Compute
33
22
66.7
General Compute
52
32
61.5
Business Critical Storage
694
616
88.8
Enterprise-Ready VMs
1,074
752
70.0
5,750
4,843
78.5

Use pagination or infinite scroll

Should be guided by the task the user is setting out to accomplish.

  • Browsing? --> Infinite Scroll
    • Perhaps I am reviewing a customer's account history. I am not looking for a particular record, rather I am in scanning mode, trying to get a sense of the volume and types of interaction with a customer over time. Infinite Scroll creates a nice, frictionless experirence for this to occur.
  • Searching for a specific record? --> It depends.
    • Do you have a good search experience? --> Infinite Scroll
    • Do you have a performant API?
    • Do you require page reloads?
    • Is your data structured?
  • Do rows have many interactive elements? --> Pagination
    • Be mindful of keyboard users.

Vertically align row data

When a column has multi-line data, it may improve readability to align the data to the top of the row. In these cases, apply verticalAlign={{ body: 'top' }} to the DataTable.

Server Groups

Servers
ok
0rg7c
Production
875765-S01+2M282501WVP18603-B21+CN703712GP874460-S01+MXQ824045X
ok
f4kv6
Staging
874460-S01+MXQ824045QP19774-B21+SGH9321GF3WC2759-003+CN79320146
warning
wnf6e
QA
874460-S01+MXQ8240458P18603-B21+CN702708SPP18603-B21+MXQ1150TYL

Related

Related content you may find useful when using DataTable.

HPE Filtering Preview
Filtering
Allows users to create a focused data set by specifying data attributes and values of interest.
HPE Lists Preview
Lists
Go-to patterns for displaying many services, devices, users, and more.
HPE Cards Preview
Card
A container providing at-a-glance information and easy access to more details.
HPE Design System Pagination
Pagination
Pagination divides content into separate pages in order to enhance navigation to specific items.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page