# Tables

Tables should be used to arrange and display data to the user. Tables often contain or work in conjunction with other components that are listed throughout Style Guide. Refer to statistics tables for examples of advanced tables with various sets of significant data for the user.

# Standard

| Contacts | Date Added | Last Opened | Last Clicked | Actions
--- | --- | --- | --- | --- | ---
| todd.moy@sendgrid.com | 02/02/2015 | 02/10/2016 | 02/08/2016 |
| tyler.hale@sendgrid.com | 04/22/2015 | 01/02/2016 | 11/26/2015 |
| travis.terwilligar@sendgrid.com | 05/06/2015 | 12/31/2015 | 10/31/2015 |

Container(s) | .table-wrap
Modifier(s) | .has-checkboxes
HTML Elements | th.table-checkbox td.actions
Optional Elements | th.sort td.contact td.stats
States | .is-selected

# Sort

| Contacts | Date Added | Last Opened | Last Clicked | Actions
--- | --- | --- | --- | --- | ---
| jason.walker@sendgrid.com | 01/31/2015 | 02/04/2016 | 02/04/2016 |
| evan.huwa@sendgrid.com | 01/31/2015 | 02/04/2016 | 02/04/2016 |

Required | .sort
Modifiers | .sort-asc .sort-desc

# Search

Search

| Contacts | Date Added | Last Opened | Last Clicked | Actions
--- | --- | --- | --- | --- | ---
| jason.walker@sendgrid.com | 02/02/2015 | 02/10/2016 | 02/08/2016 |

1 Search Result(s) Clear

Modifier(s) | .is-table-search
HTML Elements | div.input-text-wrap.is-search

# Composite

Status | Message | Opens | Clicks
--- | --- | --- | ---
Delivered 10/02/16 @ 04:24am UTC | To: jason.walker@sendgrid.com Boulder County Ballot Track - Ballot Update | 2 | —
Bounced 10/02/16 @ 03:216am UTC | To: katie.porter@sendgrid.com Your subscription payment was declined | 3 | —
Processed 10/02/16 @ 03:08am UTC | To: todd.moy@sendgrid.com See our new fall collection and save 20% on one item | 1 | —

HTML Elements | td.cell-label
Optional Elements | span.label span.date span.email span.subject

# Hierarchy

| Type | Name | Contacts | Actions
--- | --- | --- | --- | ---
| Global | All Contacts | 2,000 |
| Segment | Clicked last 30 days | 999 |
| List | Friends | 302 |
| Segment | Friends @ Gmail | 240 |
| Optimized | Friends - Engagers | 120 |
| List | Students @ CSU | 1,280 |

Required | .segment-item
HTML Elements | td.table-checkbox td.cell-label td.list-name td.numeric td.actions

# Basic

Server | smtp.sendgrid.net
Ports | 25, 587, 465
Username | YOUR_USERNAME
Password | YOUR_PASSWORD

Container(s) | .table-wrap
Modifiers | .is-auto-width

# Empty State

## Get started adding contacts

Add and update your contacts via CSV upload or manually add them one at a time, then create static lists or dynamic segments for better targeting. Use the Add List or Segment button above to get started.

Need help? Get more info on adding and updating contacts.

Container(s) | .table-state
Required | .is-empty