Components

Data Tables

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

BasicBasic › DefaultBasic › With striped rowsBasic › With no row hoversBasic › With vertical bordersBasicdev ready

Preview

Code

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
  <thead>
    <tr class="slds-text-title--caps">
      <th scope="col">
        <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Account Name">Account Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Close Date">Close Date</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Stage">Stage</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Confidence">Confidence</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Amount">Amount</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Contact">Contact</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" data-label="Opportunity Name">
        <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
      </td>
    </tr>
    <tr>
      <th scope="row" data-label="Opportunity Name">
        <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
      </td>
    </tr>
  </tbody>
</table>

AdvancedAdvanced › DefaultAdvanced › Row SelectedAdvanced › All Rows SelectedAdvanced › Sorted AscendingAdvanced › Sorted DescendingAdvanced › Column resizedAdvanceddev ready

Preview

Code

<table class="slds-table slds-table--bordered slds-table--resizable-cols slds-table--fixed-layout" role="grid">
  <thead>
    <tr class="slds-line-height--reset">
      <th scope="col" style="width:3.25rem;" class="slds-text-align--right">
        <div class="slds-th__action slds-th__action--form">
          <span class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-118" />
            <label class="slds-checkbox__label" for="checkbox-118">
              <span class="slds-checkbox--faux"></span>
              <span class="slds-form-element__label slds-assistive-text">Select All</span>
            </label>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="0">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Name">Name</span>
          <div class="slds-icon_container">
            <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-553" class="slds-assistive-text">Name column width</label>
          <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-553" tabindex="0" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="0">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Account Name">Account Name</span>
          <div class="slds-icon_container">
            <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-554" class="slds-assistive-text">Account Name column width</label>
          <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-554" tabindex="0" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="0">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Close Date">Close Date</span>
          <div class="slds-icon_container">
            <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-555" class="slds-assistive-text">Close Date column width</label>
          <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-555" tabindex="0" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="0">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Stage">Stage</span>
          <div class="slds-icon_container">
            <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-556" class="slds-assistive-text">Stage column width</label>
          <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-556" tabindex="0" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="0">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Confidence">Confidence</span>
          <div class="slds-icon_container">
            <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-557" class="slds-assistive-text">Confidence column width</label>
          <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-557" tabindex="0" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="0">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Amount">Amount</span>
          <div class="slds-icon_container">
            <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-558" class="slds-assistive-text">Amount column width</label>
          <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-558" tabindex="0" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
        <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="0">
          <span class="slds-assistive-text">Sort </span>
          <span class="slds-truncate" title="Contact">Contact</span>
          <div class="slds-icon_container">
            <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
            </svg>
          </div>
          <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
        </a>
        <div class="slds-resizable">
          <label for="cell-resize-handle-559" class="slds-assistive-text">Contact column width</label>
          <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-559" tabindex="0" />
          <span class="slds-resizable__handle">
            <span class="slds-resizable__divider"></span>
          </span>
        </div>
      </th>
      <th scope="col" style="width:3.25rem;">
        <div class="slds-th__action">
          <span class="slds-assistive-text">Actions</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="slds-hint-parent">
      <td role="gridcell" class="slds-text-align--right" style="width:3.25rem;">
        <span class="slds-checkbox">
          <input type="checkbox" name="options" id="checkbox-119" />
          <label class="slds-checkbox__label" for="checkbox-119">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label slds-assistive-text">Select item 1</span>
          </label>
        </span>
      </td>
      <th scope="row">
        <div class="slds-truncate" title="Acme - 1,200 Widgets"><a href="javascript:void(0);">Acme - 1,200 Widgets</a></div>
      </th>
      <td role="gridcell">
        <div class="slds-truncate" title="Acme">Acme</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="4/10/15">4/10/15</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="Value Proposition">Value Proposition</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="30%">30%</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="$25,000,000">$25,000,000</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="jrogers@acme.com"><a href="javascript:void(0);">jrogers@acme.com</a></div>
      </td>
      <td role="gridcell" style="width:3.25rem;">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" title="Show More">
          <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent">
      <td role="gridcell" class="slds-text-align--right" style="width:3.25rem;">
        <span class="slds-checkbox">
          <input type="checkbox" name="options" id="checkbox-120" />
          <label class="slds-checkbox__label" for="checkbox-120">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label slds-assistive-text">Select item 2</span>
          </label>
        </span>
      </td>
      <th scope="row">
        <div class="slds-truncate" title="Acme - 200 Widgets"><a href="javascript:void(0);">Acme - 200 Widgets</a></div>
      </th>
      <td role="gridcell">
        <div class="slds-truncate" title="Acme">Acme</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="1/31/15">1/31/15</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="60%">60%</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="$5,000,000">$5,000,000</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="bob@acme.com"><a href="javascript:void(0);">bob@acme.com</a></div>
      </td>
      <td role="gridcell" style="width:3.25rem;">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" title="Show More">
          <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
    <tr class="slds-hint-parent">
      <td role="gridcell" class="slds-text-align--right" style="width:3.25rem;">
        <span class="slds-checkbox">
          <input type="checkbox" name="options" id="checkbox-121" />
          <label class="slds-checkbox__label" for="checkbox-121">
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label slds-assistive-text">Select item 3</span>
          </label>
        </span>
      </td>
      <th scope="row">
        <div class="slds-truncate" title="salesforce.com - 1,000 Widgets"><a href="javascript:void(0);">salesforce.com - 1,000 Widgets</a></div>
      </th>
      <td role="gridcell">
        <div class="slds-truncate" title="salesforce.com">salesforce.com</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="Id. Decision Makers">Id. Decision Makers</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="70%">70%</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="$25,000">$25,000</div>
      </td>
      <td role="gridcell">
        <div class="slds-truncate" title="nathan@salesforce.com"><a href="javascript:void(0);">nathan@salesforce.com</a></div>
      </td>
      <td role="gridcell" style="width:3.25rem;">
        <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" title="Show More">
          <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
          </svg>
          <span class="slds-assistive-text">Show More</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Inline EditInline Edit › DefaultInline Edit › Cell focused - LinkInline Edit › Cell focused - CheckboxInline Edit › Cell focusedInline Edit › Cell editInline Edit › Cell edit — RequiredInline Edit › Cell edit — ErrorInline Edit › Cell editedInline Edit › Error - Row level on saveInline Edit › Error indicator - FocusedInline Edit › Header cell focusedInline Edit › Header cell markedInline Editdev ready

Preview

Code

<div class="slds-table--edit_container slds-is-relative">
  <table class="slds-table slds-table--edit slds-table--bordered slds-table--fixed-layout slds-table--resizable-cols slds-no-cell-focus" role="grid" style="width:66.75rem;">
    <thead>
      <tr class="slds-line-height--reset">
        <th scope="col" style="width:3.75rem;">
          <div class="slds-th__action">
            <span class="slds-assistive-text">Errors</span>
          </div>
        </th>
        <th scope="col" style="width:2rem;">
          <div class="slds-th__action slds-th__action--form">
            <label class="slds-checkbox">
              <input type="checkbox" name="options" tabindex="-1" />
              <span class="slds-checkbox--faux"></span>
              <span class="slds-assistive-text">Select All</span>
            </label>
          </div>
        </th>
        <th style="width:8.75rem;" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
          <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
            <span class="slds-assistive-text">Sort </span>
            <span class="slds-truncate" title="Name">Name</span>
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
              </svg>
            </div>
            <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
          </a>
          <div class="slds-resizable">
            <label for="cell-resize-handle-560" class="slds-assistive-text">Name column width</label>
            <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-560" tabindex="-1" />
            <span class="slds-resizable__handle">
              <span class="slds-resizable__divider"></span>
            </span>
          </div>
        </th>
        <th style="width:8.75rem;" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
          <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
            <span class="slds-assistive-text">Sort </span>
            <span class="slds-truncate" title="Account Name">Account Name</span>
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
              </svg>
            </div>
            <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
          </a>
          <div class="slds-resizable">
            <label for="cell-resize-handle-561" class="slds-assistive-text">Account Name column width</label>
            <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-561" tabindex="-1" />
            <span class="slds-resizable__handle">
              <span class="slds-resizable__divider"></span>
            </span>
          </div>
        </th>
        <th style="width:8.75rem;" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
          <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
            <span class="slds-assistive-text">Sort </span>
            <span class="slds-truncate" title="Close Date">Close Date</span>
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
              </svg>
            </div>
            <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
          </a>
          <div class="slds-resizable">
            <label for="cell-resize-handle-562" class="slds-assistive-text">Close Date column width</label>
            <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-562" tabindex="-1" />
            <span class="slds-resizable__handle">
              <span class="slds-resizable__divider"></span>
            </span>
          </div>
        </th>
        <th style="width:8.75rem;" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
          <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
            <span class="slds-assistive-text">Sort </span>
            <span class="slds-truncate" title="Stage">Stage</span>
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
              </svg>
            </div>
            <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
          </a>
          <div class="slds-resizable">
            <label for="cell-resize-handle-563" class="slds-assistive-text">Stage column width</label>
            <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-563" tabindex="-1" />
            <span class="slds-resizable__handle">
              <span class="slds-resizable__divider"></span>
            </span>
          </div>
        </th>
        <th style="width:8.75rem;" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
          <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
            <span class="slds-assistive-text">Sort </span>
            <span class="slds-truncate" title="Confidence">Confidence</span>
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
              </svg>
            </div>
            <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
          </a>
          <div class="slds-resizable">
            <label for="cell-resize-handle-564" class="slds-assistive-text">Confidence column width</label>
            <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-564" tabindex="-1" />
            <span class="slds-resizable__handle">
              <span class="slds-resizable__divider"></span>
            </span>
          </div>
        </th>
        <th style="width:8.75rem;" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
          <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
            <span class="slds-assistive-text">Sort </span>
            <span class="slds-truncate" title="Amount">Amount</span>
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
              </svg>
            </div>
            <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
          </a>
          <div class="slds-resizable">
            <label for="cell-resize-handle-565" class="slds-assistive-text">Amount column width</label>
            <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-565" tabindex="-1" />
            <span class="slds-resizable__handle">
              <span class="slds-resizable__divider"></span>
            </span>
          </div>
        </th>
        <th style="width:8.75rem;" class="slds-is-sortable slds-is-resizable slds-text-title--caps" scope="col">
          <a href="javascript:void(0);" class="slds-th__action slds-text-link--reset" tabindex="-1">
            <span class="slds-assistive-text">Sort </span>
            <span class="slds-truncate" title="Contact">Contact</span>
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--x-small slds-icon-text-default slds-is-sortable__icon" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#arrowdown"></use>
              </svg>
            </div>
            <span class="slds-assistive-text" aria-live="assertive" aria-atomic="true"></span>
          </a>
          <div class="slds-resizable">
            <label for="cell-resize-handle-566" class="slds-assistive-text">Contact column width</label>
            <input type="range" min="20" max="1000" class="slds-resizable__input slds-assistive-text" id="cell-resize-handle-566" tabindex="-1" />
            <span class="slds-resizable__handle">
              <span class="slds-resizable__divider"></span>
            </span>
          </div>
        </th>
        <th scope="col" style="width:3.25rem;">
          <div class="slds-th__action">
            <span class="slds-assistive-text">Actions</span>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="slds-hint-parent">
        <td role="gridcell" class="slds-cell-edit slds-cell-error">
          <button id="error-01" class="slds-button slds-button--icon slds-button--icon-error slds-m-horizontal--xxx-small slds-hidden" tabindex="-1" aria-hidden="true">
            <span class="slds-assistive-text">Item 1 has errors</span>
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
            </svg>
          </button>
          <span class="slds-row-number slds-text-body--small slds-text-color--weak"></span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <label class="slds-checkbox">
            <input type="checkbox" name="options" tabindex="-1" id="checkbox-01" />
            <span class="slds-checkbox--faux"></span>
            <span class="slds-assistive-text">Select item 1</span>
          </label>
        </td>
        <th scope="row" tabindex="0" class="slds-cell-edit slds-has-focus">
          <span class="slds-grid slds-grid--align-spread"><a href="javascript:void(0);" class="slds-truncate" tabindex="0" title="Acme - 1,200 Widgets">Acme - 1,200 Widgets</a>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="0">
              <span class="slds-assistive-text">Edit Name: Item 1</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </th>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="Acme">Acme</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Account Name: Item 1</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="4/10/15">4/10/15</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Close Date: Item 1</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="Value Proposition">Value Proposition</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Stage: Item 1</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit" aria-readonly="true">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="30%">30%</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1" disabled="">
              <span class="slds-assistive-text">Confidence: Item 1</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--lock slds-button__icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#lock"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="$25,000,000">$25,000,000</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Amount: Item 1</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="jrogers@acme.com">jrogers@acme.com</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Contact: Item 1</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <div class="slds-p-right--medium">
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" tabindex="-1" title="Show More">
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
        </td>
      </tr>
      <tr class="slds-hint-parent">
        <td role="gridcell" class="slds-cell-edit slds-cell-error">
          <button id="error-02" class="slds-button slds-button--icon slds-button--icon-error slds-m-horizontal--xxx-small slds-hidden" tabindex="-1" aria-hidden="true">
            <span class="slds-assistive-text">Item 2 has errors</span>
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
            </svg>
          </button>
          <span class="slds-row-number slds-text-body--small slds-text-color--weak"></span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <label class="slds-checkbox">
            <input type="checkbox" name="options" tabindex="-1" id="checkbox-01" />
            <span class="slds-checkbox--faux"></span>
            <span class="slds-assistive-text">Select item 2</span>
          </label>
        </td>
        <th scope="row" tabindex="-1" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread"><a href="javascript:void(0);" class="slds-truncate" tabindex="-1" title="Acme - 200 Widgets">Acme - 200 Widgets</a>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Name: Item 2</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </th>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="Acme">Acme</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Account Name: Item 2</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="1/31/15">1/31/15</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Close Date: Item 2</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="Prospecting">Prospecting</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Stage: Item 2</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit" aria-readonly="true">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="60%">60%</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1" disabled="">
              <span class="slds-assistive-text">Confidence: Item 2</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--lock slds-button__icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#lock"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="$5,000,000">$5,000,000</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Amount: Item 2</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="bob@acme.com">bob@acme.com</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Contact: Item 2</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <div class="slds-p-right--medium">
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" tabindex="-1" title="Show More">
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
        </td>
      </tr>
      <tr class="slds-hint-parent">
        <td role="gridcell" class="slds-cell-edit slds-cell-error">
          <button id="error-03" class="slds-button slds-button--icon slds-button--icon-error slds-m-horizontal--xxx-small slds-hidden" tabindex="-1" aria-hidden="true">
            <span class="slds-assistive-text">Item 3 has errors</span>
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
            </svg>
          </button>
          <span class="slds-row-number slds-text-body--small slds-text-color--weak"></span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <label class="slds-checkbox">
            <input type="checkbox" name="options" tabindex="-1" id="checkbox-01" />
            <span class="slds-checkbox--faux"></span>
            <span class="slds-assistive-text">Select item 3</span>
          </label>
        </td>
        <th scope="row" tabindex="-1" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread"><a href="javascript:void(0);" class="slds-truncate" tabindex="-1" title="salesforce.com - 1,000 Widgets">salesforce.com - 1,000 Widgets</a>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Name: Item 3</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </th>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="salesforce.com">salesforce.com</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Account Name: Item 3</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="1/31/15 3:45PM">1/31/15 3:45PM</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Close Date: Item 3</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="Id. Decision Makers">Id. Decision Makers</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Stage: Item 3</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit" aria-readonly="true">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="70%">70%</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1" disabled="">
              <span class="slds-assistive-text">Confidence: Item 3</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--lock slds-button__icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#lock"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="$25,000">$25,000</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Amount: Item 3</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <span class="slds-grid slds-grid--align-spread">
            <span class="slds-truncate" title="nathan@salesforce.com">nathan@salesforce.com</span>
            <button class="slds-button slds-button--icon slds-cell-edit__button slds-m-left--x-small" tabindex="-1">
              <span class="slds-assistive-text">Edit Contact: Item 3</span>
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--edit" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
              </svg>
            </button>
          </span>
        </td>
        <td role="gridcell" class="slds-cell-edit">
          <div class="slds-p-right--medium">
            <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" tabindex="-1" title="Show More">
              <svg class="slds-button__icon slds-button__icon--hint slds-button__icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
              </svg>
              <span class="slds-assistive-text">Show More</span>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Accessibility

The Advanced Data Table and Inline Edit Data Table are based on the semantics, roles and interaction model of the [ARIA Grid](http://w3c.github.io/aria/practices/aria-practices.html#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.

ResponsiveResponsive › Stacked with Horizontal CellsResponsive › StackedResponsiveprototype

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

When a table exceeds the width of its container, one responsive option is to wrap the table in a .slds-scrollable--x class so that the user can scroll horizontally. View the example small and medium form factor tabs to see the effect.

When .slds-max-medium-table--stacked is applied to the “Grid” table, we generate faux <th> labels using the data-label applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the medium form factor breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.

When .slds-max-medium-table--stacked is applied to the “Grid” table, we generate faux <th> labels using the data-label applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the medium form factor breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal.

Component Overview

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.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-table
Applied to:

<table>

Outcome:

Initializes data table

Required:

Required

Comments:

--

.slds-table--bordered
Applied to:

.slds-table

Outcome:

Adds borders to the table

Required:

No, optional element or modifier

Comments:

--

.slds-table--col-bordered
Applied to:

.slds-table

Outcome:

Adds vertical lines between columns

Required:

No, optional element or modifier

Comments:

Used in tables where each column represents a record, for example when mapping fields. Do not use for tables where a row is a record.

.slds-table--striped
Applied to:

.slds-table

Outcome:

Adds stripes to alternating rows

Required:

No, optional element or modifier

Comments:

Used to increase the readability of some tables, especially when printing.

.slds-table--fixed-layout
Applied to:

.slds-table

Outcome:

Styles for resizeable columns

Required:

No, optional element or modifier

Comments:

--

.slds-table--compact
Applied to:

.slds-table

Outcome:

Styles for compact version

Required:

No, optional element or modifier

Comments:

--

.slds-is-selected
Applied to:

<tr>

Outcome:

Changes row to selected state

Required:

No, optional element or modifier

Comments:

--

.slds-is-sortable
Applied to:

<th>

Outcome:

Enables user interactions for sorting a column

Required:

No, optional element or modifier

Comments:

--

.slds-is-sortable__icon
Applied to:

<svg>

Outcome:

Arrow that indicates sorted direction

Required:

No, optional element or modifier

Comments:

--

.slds-is-sorted--asc
Applied to:

<th>

Outcome:

Makes sortable icon point up

Required:

No, optional element or modifier

Comments:

--

.slds-is-resizable
Applied to:

<th>

Outcome:

Enables table cell to be resized

Required:

No, optional element or modifier

Comments:

--

.slds-resizable
Applied to:

<div>

Outcome:

Resizing element within a table heading cell

Required:

No, optional element or modifier

Comments:

--

.slds-resizable__input
Applied to:

<input type="range">

Outcome:

Input inside resizable element that is used for screen readers, value updates as the column width updates

Required:

No, optional element or modifier

Comments:

--

.slds-resizable__handle
Applied to:

<span>

Outcome:

Handle the user interacts with to initiate a column resize

Required:

No, optional element or modifier

Comments:

--

.slds-resizable__divider
Applied to:

<span>

Outcome:

Vertical indicator spanning down the table column

Required:

No, optional element or modifier

Comments:

--

.slds-th__action
Applied to:

<a>

Outcome:

Actionable area inside a table heading cell

Required:

No, optional element or modifier

Comments:

--

.slds-cell-wrap
Applied to:

<td>

Outcome:

Forces text to wrap in a cell

Required:

No, optional element or modifier

Comments:

--

.slds-cell-shrink
Applied to:

<th>, <td>

Outcome:

Shrinks cell to width of content

Required:

No, optional element or modifier

Comments:

Use if cell contains a checkbox or action menu

.slds-no-row-hover
Applied to:

.slds-table

Outcome:

Removes hover state on row

Required:

No, optional element or modifier

Comments:

Rows have a hover state by default

.slds-scrollable--x
Applied to:

parent div

Outcome:

Creates a scrollable container for a table on smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-max-medium-table--stacked
Applied to:

.slds-table

Outcome:

Modifies table layout by stacking cells to accommodate smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-max-medium-table--stacked-horizontal
Applied to:

.slds-table

Outcome:

Modifies table layout by displaying the header and row data side by side for smaller viewports

Required:

No, optional element or modifier

Comments:

--

.slds-hint-parent
Applied to:

<tr>

Outcome:

Highlights action overflow ribbons on row hover

Required:

No, optional element or modifier

Comments:

When you have an overflow action menu