Data tables are an enhanced version of an HTML table and are used to display tabular data.

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

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#

Headers#

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.

Labeling#

To give additional context, like a caption or description, to a table for screen readers, the attributes aria-labelledby or aria-label can be used on the table element.

For aria-label, set the description as the attribute value. Alternatively, if another element, or elements, can serve this purpose for the table, then set the value of aria-labelledby with the id of the element[s].

This example shows aria-labelledby set with the ids of two separate elements to make up the label.

Example data table of Opportunities

Using `aria-labelledby`, instead of aria-label

Opportunity Name	Account Name	Close Date	Stage	Confidence	Amount	Contact
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub + Anypoint Connectors	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com

<h2 id="element-with-table-label" class="slds-text-heading_medium slds-m-bottom_xx-small">Example data table of Opportunities</h2>
<h3 id="other-element-with-table-label" class="slds-text-title slds-m-bottom_small">Using
  <code>aria-labelledby</code>, instead of aria-label</h3>
<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-labelledby="element-with-table-label other-element-with-table-label">

Base#

Opportunity Name	Account Name	Close Date	Stage	Confidence	Amount	Contact
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub + Anypoint Connectors	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com

<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-label="Example default base table of Opportunities">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

Striped rows#

Opportunity Name	Account Name	Close Date	Stage	Confidence	Amount	Contact
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub + Anypoint Connectors	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped" aria-label="Example table of Opportunities with striped rows">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

Columns dividers#

Opportunity Name	Account Name	Close Date	Stage	Confidence	Amount	Contact
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub + Anypoint Connectors	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" aria-label="Example table of Opportunities with vertical borders">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

Rows with no hover#

Opportunity Name	Account Name	Close Date	Stage	Confidence	Amount	Contact
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub + Anypoint Connectors	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com

<table class="slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered" aria-label="Example table of Opportunities with no row hovers">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

Single Column table#

Opportunity Name
Cloudhub
Cloudhub + Anypoint Connectors

<table class="slds-table slds-table_cell-buffer slds-table_bordered" aria-label="Example table of Opportunities with a single column">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

Headless#

Opportunity Name	Account Name	Close Date	Stage	Confidence	Amount	Contact
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub + Anypoint Connectors	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com

<table class="slds-table slds-table_cell-buffer slds-table_header-hidden slds-table_bordered" aria-label="Example headless table of Opportunities">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

With no borders#

Opportunity Name	Account Name	Close Date	Stage	Confidence	Amount	Contact
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub + Anypoint Connectors	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com
Cloudhub	Cloudhub	4/14/2015	Prospecting	20%	$25k	jrogers@cloudhub.com

<table class="slds-table slds-table_cell-buffer slds-table_header-hidden" aria-label=" Example headless table of Opportunities with no borders ">
  <thead class="slds-assistive-text">
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

Actionable mode - Column sorting and row selection(s)#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities in actionable mode">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right slds-cell_action-mode" scope="col" style="width:3.25rem">

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
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table as radio group">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities with cell focused">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Row Selection#

Single row selected#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities in actionable mode with row selected">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right slds-cell_action-mode" scope="col" style="width:3.25rem">

All rows selected#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities in actionable mode with all rows selected">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right slds-cell_action-mode" scope="col" style="width:3.25rem">

Column sorting#

Accessibility Note
The assistive text for the sort action contains `aria-live="polite"` so screen reader doesn't disrupt itself from announcing what the user is interacting with.

Sorted Ascending#

Choose a row Select All	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
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities in actionable mode with ascending column sorting">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right slds-cell_action-mode" scope="col" style="width:3.25rem">

Sorted Descending#

Choose a row Select All	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
Select item 1	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities in actionable mode with descending column sorting">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right slds-cell_action-mode" scope="col" style="width:3.25rem">

Column resizing#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities in actionable mode with resized column">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right slds-cell_action-mode" scope="col" style="width:3.25rem">

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities with header menu button">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Column with icons#

Choose a row Select All	Sort by: Name	Sort by: AccountAccount Name	Sort by: Close Date	Sort by: Stage	Sort by: Einstein calculated Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities with header icon and menu button">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

Cell with icons#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000 Text alternative when needed High	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000 Text alternative when needed Low	nathan@salesforce.com

<table aria-multiselectable="true" class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid" aria-label="Example advanced table of Opportunities with cell icon">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="slds-text-align_right" scope="col" style="width:3.25rem">

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.

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example default inline edit table with cell focused">
    <thead>
      <tr class="slds-line-height_reset">

1st cell highlighted (checkbox)#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in actionable mode with checkbox cell focused">
    <thead>
      <tr class="slds-line-height_reset">

2nd cell highlighted#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table">
    <thead>
      <tr class="slds-line-height_reset">

3rd cell highlighted#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in navigation mode with cell focused">
    <thead>
      <tr class="slds-line-height_reset">

Cell Edit#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme Company	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in actionable mode with cell edit">
    <thead>
      <tr class="slds-line-height_reset">

Required form element#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme *Company	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in actionable mode with required cell edit">
    <thead>
      <tr class="slds-line-height_reset">

Required form element with error#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme *Company This field is required	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in actionable mode with cell error">
    <thead>
      <tr class="slds-line-height_reset">

Edited cell (unsaved)#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in actionable mode with cell edited">
    <thead>
      <tr class="slds-line-height_reset">

Edited cell with row selected (unsaved)#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in actionable mode with cell edited in selected row">
    <thead>
      <tr class="slds-line-height_reset">

Edited cell with row level error (unsaved)#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in actionable mode with cell error on save">
    <thead>
      <tr class="slds-line-height_reset">

Edited cell with focused row level error (unsaved)#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	salesforce.com - 1,000 Widgets	salesforce.com	1/31/15 3:45PM	Id. Decision Makers	70%	$25,000	nathan@salesforce.com

<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" aria-label="Example inline edit table in actionable mode with error indicator focused">
      <thead>

Edited cell with row selected and row level error (unsaved)#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in actionable mode with cell error on save in selected row">
    <thead>
      <tr class="slds-line-height_reset">

Header cell focused#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in navigation mode with header cell focused">
    <thead>
      <tr class="slds-line-height_reset">

Header cell marked#

Choose a row Select All	Sort by: Name	Sort by: Account Name	Sort by: Close Date	Sort by: Stage	Sort by: Confidence	Sort by: Amount	Sort by: Contact
Select item 1	Acme - 1,200 Widgets	Acme	4/10/15	Value Proposition	30%	$25,000,000	jrogers@acme.com
Select item 2	Acme - 200 Widgets	Acme	1/31/15	Prospecting	60%	$5,000,000	bob@acme.com
Select item 3	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" aria-label="Example inline edit table in navigation mode with header cell marked">
    <thead>
      <tr class="slds-line-height_reset">

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" aria-label=" Example headless table of Opportunities with cell content truncated ">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

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" aria-label=" Example headless table of Opportunities with cell content wrapped ">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-table`
Summary	Initializes data table
Support	dev-ready
Restrict	`table`
Variant	True

Selector	`.slds-no-row-hover`
Summary	Default Table Row Hover
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-is-selected`
Summary	Selected Table Row + Hover
Restrict	`.slds-table tr`
Modifier	True

Selector	`.slds-cell-wrap`
Summary	By default, nowrap is applied
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-cell-buffer_left`
Summary	Use to add a left padding buffer to cells
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-cell-buffer_right`
Summary	Use to add a right padding buffer to cells
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-has-focus`
Summary	Focus state on a cell
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-cell_action-mode`
Summary	Use when cells are in action mode
Restrict	`.slds-table th, .slds-table td`
Modifier	True

Selector	`.slds-table_cell-buffer`
Summary	Add left and right padding to the first and last cells of a table
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-table_bordered`
Summary	Add vertical borders to a table
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-table_col-bordered`
Summary	Add column borders
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-table_striped`
Summary	Add alternating strips to rows
Restrict	`.slds-table`
Modifier	True

Selector	`.slds-table_fixed-layout`
Summary	Set table to use fixed layout for width and truncation purposes
Support	dev-ready
Restrict	`.slds-table`
Variant	True

Selector	`.slds-is-sortable`
Summary	If the column is sortable, then let's handle the actionable region of the `<th>` cell
Restrict	`.slds-table_fixed-layout th`

Selector	`.slds-is-sortable__icon`
Summary	Icon inside sortable th
Restrict	`.slds-is-sortable .slds-icon`

Selector	`.slds-has-button-menu`
Summary	If the column header has a menu button, then let's add right padding to the header to preserve truncation
Restrict	`.slds-table_fixed-layout th`

Selector	`.slds-th__action-button`
Summary	Allows for alignment of button, such as a menu
Restrict	`.slds-has-button-menu .slds-button_icon`

Selector	`.slds-is-sorted`
Summary	Active state of sorted column
Restrict	`.slds-table_fixed-layout th`

Selector	`.slds-is-sorted_asc`
Summary	Change direction of arrow
Restrict	`.slds-is-sorted`
Modifier	True

Selector	`.slds-table_resizable-cols`
Summary	Resizable data table columns
Restrict	`.slds-table_fixed-layout`

Selector	`.slds-is-resizable`
Summary	Provide an indicator that resizing is available
Restrict	`.slds-table_resizable-cols th`

Selector	`.slds-resizable`
Summary	Resizable handle
Restrict	`.slds-is-resizable div`

Selector	`.slds-resizable__handle`
Summary	Grab handle to resize column
Restrict	`.slds-resizable span`

Selector	`.slds-resizable__divider`
Summary	Grab handle divider indicator when resizing column
Restrict	`.slds-resizable__handle span`

Selector	`.slds-th__action`
Summary	Actionable area inside th
Restrict	`.slds-table th div, .slds-table th a`

Selector	`.slds-th__action_form`
Summary	Allows for alignment of form element, such as a checkbox
Restrict	`.slds-th__action`

Selector	`.slds-table_header-hidden`
Summary	Used to remove the top border when a table's header is visually hidden
Support	dev-ready
Restrict	`.slds-table`
Variant	True

Selector	`.slds-table_edit`
Summary	Initiates inline-edit mode for data-tables
Support	dev-ready
Restrict	`.slds-table`
Variant	True

Selector	`.slds-cell-error`
Summary	Cell that has error icon appear within
Restrict	`.slds-table_edit td`

Selector	`.slds-cell-edit`
Summary	Informs a table cell that it has editing capabilities
Restrict	`.slds-table_edit th, .slds-table_edit td`

Selector	`.slds-is-edited`
Summary	Informs a cell that it has been edited but not saved
Restrict	`.slds-cell-edit`
Modifier	True

Selector	`.slds-has-error`
Summary	Informs a cell that it has an error inside of it
Restrict	`.slds-cell-edit`
Modifier	True

Selector	`.slds-cell-edit__button`
Summary
Restrict	`.slds-cell-edit button`

Selector	`.slds-no-cell-focus`
Summary	Handles children of the table where we don't want any focusable cells
Restrict	`.slds-table_edit`
Modifier	True

Selector	`.slds-max-medium-table_stacked`
Summary	Creates stacked row with stacked cells
Support	prototype
Restrict	`.slds-table`
Variant	True

Selector	`.slds-max-medium-table_stacked-horizontal`
Summary	Creates stacked rows with horizontal cells
Support	prototype
Restrict	`.slds-table`
Modifier	True

Data Tables Release Notes

2.17.0

Added

Added slds-cell_action-mode to blueprints of actionable data tables

2.15.2

Added

Added aria-label, and alternatively, aria-labelledby to allow adding additional table context for screen readers

2.15.1

Changed

Changed the aria-live value from assertive to polite

2.14.0

Added

Added slds-cell_action-mode class for styling cells in Action mode

2.12.1

Changed

Updated styles for resize handle if final column is resizable.

2.12.0

Changed

Changed white-space property to pre-line in slds-cell-wrap for cell content that has pre-formatted line breaks.
Adjusted positioning for resize handle for better usability on touch devices, and made the handle visible in all cases

Added

Added documentation and examples for wrapping, line clamping and truncating table cell content.

2.11.8

Changed

Adjusted positioning for slds-th__action-button for better vertical alignment and made additional changes to support appearance in the touch implementation

2.11.7

Changed

Updated height and width dimensions on touch version of slds-th__action-button

2.10.0

Changed

Changed slds-th__action-button alignment to use margin-top instead of transform: translateY

2.8.0

Changed

Added bold font weight to th elements within table headers.

Removed

Removed slds-text-title_caps from table headers.

2.7.0

Added

Added a hidden header variation of the data table
- This involves adding the slds-table_header-hidden class to the <table> and using the slds-assistive-text class on the <thead> to ensure the table remains accessible
Multi select data tables now require aria-multiselectable="true" applied to the table element for both Advanced and Inline Edit variants.
Multi select data tables now require aria-selected to be set to false on every row that is not selected

Changed

Data tables underwent some minor markup changes to help align all the different variants to use common markup patterns. No visual styling or functionality has changed, but you will notice more examples.

Fixed

Improved the color contrast of links inside of selected rows

Sections

About Data Tables#

Accessibility#

Headers#

Labeling#

Example data table of Opportunities

Using aria-labelledby, instead of aria-label

Base#

Striped rows#

Columns dividers#

Rows with no hover#

Single Column table#

Headless#

With no borders#

Actionable mode - Column sorting and row selection(s)#

Single row selection#

Navigation mode - Cell focused#

Row Selection#

Single row selected#

All rows selected#

Column sorting#

Accessibility Note

Sorted Ascending#

Sorted Descending#

Column resizing#

Column headers with overflow actions button menu#

Column with icons#

Cell with icons#

Inline Edit#

Accessibility#

Keyboard navigation#

1st cell highlighted (checkbox)#

2nd cell highlighted#

3rd cell highlighted#

Cell Edit#

Required form element#

Required form element with error#

Edited cell (unsaved)#

Edited cell with row selected (unsaved)#

Edited cell with row level error (unsaved)#

Edited cell with focused row level error (unsaved)#

Edited cell with row selected and row level error (unsaved)#

Header navigation#

Header cell focused#

Header cell marked#

Cell Content#

Truncated#

Wrapped#

Overview of CSS Classes#

What are these categories?

Data Tables Release Notes

2.17.0

Added

2.15.2

Added

2.15.1

Changed

2.14.0

Added

2.12.1

Changed

2.12.0

Changed

Added

2.11.8

Changed

2.11.7

Changed

2.10.0

Changed

2.8.0

Changed

Removed

2.7.0

Added

Changed

Fixed

Using `aria-labelledby`, instead of aria-label