HPE
Design System
Foundation
Components
Templates
Extend
Components

Table

Table presents data in a column and row format.

Figma
In Progress
Grommet
In Progress

Storage Pools

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

What makes up a table?

Tables 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
Table 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.

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

Table 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.

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

When to use

Users interacting with a Table 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 table'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, tables containing data for analytical purposes deserve distinct treatments as well. While 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 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.

Table 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
warning
7
rambutan
73
8/6/1991
ok
1
durian
42
1/25/1915
ok
2
cherimoya
3.14159
12/7/1941
ok
3
mangosteen
3
3/21/1965
warning
4
jackfruit
2.7182
12/15/1791
ok
5
kiwi
1.618
11/3/2020
critical
Open docs

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
Open docs

Searching and filtering tables

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.

Selecting single records

Orders

Id
Name
P.O. #
State
Service
Tenant
Contact
Order Date
OID257383
My PVT Cloud Order
9701231123323
Created
HPE GreenLake Private Cloud
Suncor Energy
melinda@suncor.co
4/30/2020
OID789345
GEM_1
9253856295
Build Prep
HPE Goats as a Service
Nestle
wan@nestle.com
4/5/2020
OID894567
VMaaS for R&D
7239456727
Processing
VMaaS for R&D
Coke
muhtar@coke.com
3/4/2020
OID829374
GEM_1
1926573453
Factory Express
HPE GreenLake Private Cloud
Domain
priyanka@domain.com
2/28/2020
OID648379
VMaas for R&D
2341835675
Provisioning
VMaaS for R&D
Nestle
wan@nestle.com
2/15/2020
OID192653
GEM_1
9253578367
In Transit
HPE GreenLake Private Cloud
Suncor Energy
melinda@suncor.co
1/30/2020
OID524387
My MVT Cloud Order
2634986755
Cancelled
HPE GreenLake Private Cloud
Boeing
susan@boeing.com
1/15/2020
OID824567
VMaaS for R&D
1986476536
Ready to Ship
HPE Goats as a Service
Coke
muhtar@coke.com
12/29/2019
OID945423
My PVT Cloud Order
9454285743
Created
HPE GreenLake Private Cloud
Domain
priyanka@domain.com
12/15/2019
OID253462
GEM_1
4459253462
Accepted
VMaaS for R&D
Suncor Energy
melinda@suncor.co
11/1/2019
OID953856
DevStageSymR31 (default)
2341835675
Processing
VMaaS for R&D
Coke
muhtar@coke.com
11/1/2019
OID953890
DevStageSymR31 (default)
475078908
Delivered
Mercury
Nestle
wan@nestle.com
11/1/2019
Open docs

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
Open docs

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
Open docs

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
Open docs

Use pagination or infinite scroll with tables

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.

Related

Related content you may find useful when using Table.

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.

Still have questions?

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

Edit this page