data-tables
Data tables are an enhanced version of an HTML table and are used to display tabular data.
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
About Data Tables
To initialize a data table, apply the slds-table class to the table element. This class creates a table with formatted cells and allows you to use data table utilities.
Accessibility
To create an accessible table, the top row of column headers (th) are placed in a thead. Each one receives the scope="col" attribute. The first non-actionable (meaning that doesn't contain a checkbox or menu) column in each row should be marked as a th with a scope="row" attribute.
Base
Opportunity Name | Account Name | Close Date | Stage | Confidence | Amount | Contact |
|---|---|---|---|---|---|---|
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k |
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">Striped rows
Opportunity Name | Account Name | Close Date | Stage | Confidence | Amount | Contact |
|---|---|---|---|---|---|---|
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k |
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
<thead>
<tr class="slds-line-height_reset">Columns dividers
Opportunity Name | Account Name | Close Date | Stage | Confidence | Amount | Contact |
|---|---|---|---|---|---|---|
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k |
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
<thead>
<tr class="slds-line-height_reset">Rows with no hover
Opportunity Name | Account Name | Close Date | Stage | Confidence | Amount | Contact |
|---|---|---|---|---|---|---|
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k |
<table class="slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">Single Column table
Opportunity Name |
|---|
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">Headless
Opportunity Name | Account Name | Close Date | Stage | Confidence | Amount | Contact |
|---|---|---|---|---|---|---|
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k |
<table class="slds-table slds-table_cell-buffer slds-table_header-hidden slds-table_bordered">
<thead class="slds-assistive-text">
<tr class="slds-line-height_reset">With no borders
Opportunity Name | Account Name | Close Date | Stage | Confidence | Amount | Contact |
|---|---|---|---|---|---|---|
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k | ||
Cloudhub | 4/14/2015 | Prospecting | 20% | $25k |
<table class="slds-table slds-table_cell-buffer slds-table_header-hidden">
<thead class="slds-assistive-text">
<tr class="slds-line-height_reset">Actionable mode - Column sorting and row selection(s)
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Single row selection
Choose a row to select | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Navigation mode - Cell focused
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Row Selection
Single row selected
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">All rows selected
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Column sorting
Sorted Ascending
| Choose a row | Sort by: Name Sorted ascending | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Sorted Descending
| Choose a row | Sort by: Name Sorted descending | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Column resizing
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Column headers with overflow actions button menu
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Column with icons
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Cell with icons
| Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|
Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 High | ||||
Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | ||||
salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 Low |
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">Inline Edit
Accessibility
The Advanced Data Table and Inline Edit Data Table are based on the semantics, roles and interaction model of the ARIA Grid. In SLDS we overlay the ARIA Grid on top of native HTML table semantics.
The role of Grid comes with 2 distinct modes, Navigation mode and Actionable mode. Both come with very specific keyboard interaction modals. Navigation mode is the default mode of the Grid.
Navigation Mode
- Tabbing into the grid focuses the first data cell in the table.
- The second tab key press takes the user focus out of the grid onto the next focusable element on the page.
- Once the user has tabbed out of the grid, tabbing back into the grid will return focus to the last cell the user was focused on.
- Navigation in the grid is accomplished via the arrow keys.
- No actionable items in cell contents are focusable.
- Pressing the Enter key on a chosen grid cell, places the entire Grid into Actionable mode.
Actionable Mode
- Once in Actionable mode, all focusable items in the entire grid can be tabbed to.
- Arrow navigation still takes the user cell to cell in any direction, but focuses on the first actionable item in the cell, if there is one.
- Pressing the Escape key exits Actionable mode, placing the user back into Navigation mode, keeping the users cursor on the same cell they were focused in.
- When interacting with a component in a cell, such as a Menu, that also uses the Escape key as an exit action, pressing Escape will take the user back to the triggering element in the current cell. A subsequent press of Escape will return the user to Navigation mode.
For the purposes of these docs, the Default state of Inline Edit is representative of Navigation mode, all other states are assumed to be in Actionable Mode.
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-no-cell-focus slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Keyboard navigation
1st cell highlighted (checkbox)
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>2nd cell highlighted
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>3rd cell highlighted
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Cell Edit
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Required form element
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Required form element with error
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme This field is required | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Edited cell (unsaved)
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Edited cell with row selected (unsaved)
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Edited cell with row level error (unsaved)
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Edited cell with focused row level error (unsaved)
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
Resolve error
Company encountered an error
<div class="demo-only" style="margin-top:100px;margin-left:10px">
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">Edited cell with row selected and row level error (unsaved)
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Header navigation
Header cell focused
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Header cell marked
Errors | Choose a row | Sort by: Name | Sort by: Account Name | Sort by: Close Date | Sort by: Stage | Sort by: Confidence | Sort by: Amount | Sort by: Contact | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Acme - 1,200 Widgets | Acme | 4/10/15 | Value Proposition | 30% | $25,000,000 | jrogers@acme.com | |||
| Acme - 200 Widgets | Acme | 1/31/15 | Prospecting | 60% | $5,000,000 | bob@acme.com | |||
| salesforce.com - 1,000 Widgets | salesforce.com | 1/31/15 3:45PM | Id. Decision Makers | 70% | $25,000 | nathan@salesforce.com |
<div class="slds-table_edit_container slds-is-relative">
<table aria-multiselectable="true" class="slds-table slds-no-cell-focus slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols" role="grid" style="width:66.75rem">
<thead>Cell Content
As a default method, wrap any table cell content in a <div>.
Truncated
Add the slds-truncate class to truncate any content that might overflow the tables cell area.
Typical Column Header | Truncated, no wrap | Typical Column Header |
|---|---|---|
Typical cell content | Cell content that is very long.
It also has a line break.
It has more than one line break | Typical cell content |
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_fixed-layout slds-table_striped">
<thead>
<tr class="slds-line-height_reset">Wrapped
In those cases where long cell content is anticipated, use the slds-cell-wrap class on the cell <td> to have the text wrap within the cell’s width.
Also, use the slds-line-clamp class on the content-wrapping <div> to clamp, or truncate, the cell content after a certain amount of lines. Other line clamping classes can be used in place for various line clamping limits. The clamping limit can also be changed by reassigning a value to the line-clamp token.
Typical Column Header | Wrapped, line clamped | Typical Column Header |
|---|---|---|
Typical cell content | Cell content that is very long.
It also has a line break.
It has more than one line break | Typical cell content |
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_fixed-layout slds-table_striped">
<thead>
<tr class="slds-line-height_reset">