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

Loading

 Contacts Date Added Last Opened Last Clicked Actions
Container(s) .table-wrap
Required td:empty

Checkboxes

Desktop Clients
Apple Mail
Outlook
Container(s) .table-wrap.has-internal-checkboxes
HTML Elements td.list-name td.checkbox-grid .input-checkbox-wrap input[type="checkbox"] label.input-checkbox-label
Optional Elements span.input-checkbox-info

Composite

Status Message Opens Clicks
Delivered 10/02/16 @ 04:24am UTC Boulder County Ballot Track - Ballot Update 2 —
Bounced 10/02/16 @ 03:216am UTC Your subscription payment was declined 3 —
Processed 10/02/16 @ 03:08am UTC 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