Table
Table 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 | 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 |
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.
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.
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.
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.
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.
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.
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.
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 |
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 |
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.
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 |
Checkboxes allow for selection of multiple records, which then may apply batch actions via action control buttons or menus.
Manage Orders
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 |
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 |
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 |
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.