• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Table

Component status
Contribution
Current version@spectrum-css/table@5.2.5
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

The Table component is for displaying tabular info, with the option for sorting or row selection.

Variants

Default (medium)
Contribution

Tables come in four different sizes: small, medium, large, and extra-large. The medium size is the default and recommended option.

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

T-Shirt sizes
Contribution

Tables come in four different sizes: small, medium, large, and extra-large. The medium size is the default and recommended option.

Small

Column title Column title Column title
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Alpha Row Item Alpha Row Item Alpha

Medium

Column title Column title Column title
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Alpha Row Item Alpha Row Item Alpha

Large

Column title Column title Column title
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Alpha Row Item Alpha Row Item Alpha

Extra Large

Column title Column title Column title
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Alpha Row Item Alpha Row Item Alpha
Show markup
<div class="spectrum-Examples-item" style="margin-bottom: 2rem">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Small</h4>

  <table class="spectrum-Table spectrum-Table--sizeS spectrum-Table--emphasized">
    <thead class="spectrum-Table-head">
      <tr>
        <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown75 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow75" />
          </svg>
          Column title
        </th>
        <th class="spectrum-Table-headCell is-sortable is-sorted-asc" aria-sort="ascending" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown75 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow75" />
          </svg>
          Column title
        </th>
        <th class="spectrum-Table-headCell">Column title</th>
      </tr>
    </thead>
    <tbody class="spectrum-Table-body">
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="spectrum-Examples-item" style="margin-bottom: 2rem">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Medium</h4>

  <table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized">
    <thead class="spectrum-Table-head">
      <tr>
        <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg>
          Column title
        </th>
        <th class="spectrum-Table-headCell is-sortable is-sorted-asc" aria-sort="ascending" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg>
          Column title
        </th>
        <th class="spectrum-Table-headCell">Column title</th>
      </tr>
    </thead>
    <tbody class="spectrum-Table-body">
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="spectrum-Examples-item" style="margin-bottom: 2rem">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Large</h4>

  <table class="spectrum-Table spectrum-Table--sizeL spectrum-Table--emphasized">
    <thead class="spectrum-Table-head">
      <tr>
        <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown200 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow200" />
          </svg>
          Column title
        </th>
        <th class="spectrum-Table-headCell is-sortable is-sorted-asc" aria-sort="ascending" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown200 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow200" />
          </svg>
          Column title
        </th>
        <th class="spectrum-Table-headCell">Column title</th>
      </tr>
    </thead>
    <tbody class="spectrum-Table-body">
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="spectrum-Examples-item" style="margin-bottom: 2rem">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Extra Large</h4>

  <table class="spectrum-Table spectrum-Table--sizeXL spectrum-Table--emphasized">
    <thead class="spectrum-Table-head">
      <tr>
        <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown300 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow300" />
          </svg>
          Column title
        </th>
        <th class="spectrum-Table-headCell is-sortable is-sorted-asc" aria-sort="ascending" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown300 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow300" />
          </svg>
          Column title
        </th>
        <th class="spectrum-Table-headCell">Column title</th>
      </tr>
    </thead>
    <tbody class="spectrum-Table-body">
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
      </tr>
    </tbody>
  </table>
</div>

Compact
Contribution

The compact variant decreases the spacing used within the table.

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--compact spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Spacious
Contribution

The spacious variant increases the spacing used within the table.

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--spacious spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Multi-select
Contribution

The standard multi-select table includes a column of checkboxes used for selecting rows.

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized" role="grid" aria-multiselectable="true">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox is-indeterminate">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Dash100" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Alpha
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Alpha</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" aria-selected="true">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Bravo
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Bravo</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" aria-selected="true">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Charlie
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Charlie</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Delta
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Delta</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Echo
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Echo</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Non-emphasized multi-select
Contribution

Excluding the spectrum-Table--emphasized class will change the style of selected rows.

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM" role="grid" aria-multiselectable="true">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox is-indeterminate">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Dash100" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Alpha
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Alpha</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" aria-selected="true">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Bravo
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Bravo</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" aria-selected="true">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Charlie
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Charlie</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Delta
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Delta</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Echo
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Echo</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Quiet
Contribution

The quiet table has a transparent background and no borders on the left and right.

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized spectrum-Table--quiet">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Multi-select (quiet)
Contribution

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized spectrum-Table--quiet" role="grid" aria-multiselectable="true">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Alpha
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Alpha</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" aria-selected="true">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Bravo
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Bravo</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row is-selected" aria-selected="true">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Charlie
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Charlie</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Delta
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Delta</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell" role="gridcell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Checkmark100" />
            </svg>
          </span>
        </label>
      </td>
      <td class="spectrum-Table-cell" role="gridcell">
        Row Item Echo
      </td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Echo</td>
      <td class="spectrum-Table-cell" role="gridcell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Column dividers
Contribution

The standard table can display column dividers by including the spectrum-Table-cell--divider class with spectrum-Table-cell. Use sparingly to group related content (see guidelines for more info).

Column title Column title Column title
Row Item Echo Row Item Echo Row Item Echo
Row Item Delta Row Item Delta Row Item Delta
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Alpha Row Item Alpha Row Item Alpha
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-asc" aria-sort="ascending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable"" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell spectrum-Table-cell--divider">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
  </tbody>
</table>

Summary row
Contribution

Tables can have a summary row to show totals, at either the top or the bottom of the table.

Column title Column title Column title
Row Item Alpha 18 2875
Row Item Bravo 23 3679
Row Item Delta 7 1308
Summary 48 7862
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">18</td>
      <td class="spectrum-Table-cell">2875</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">23</td>
      <td class="spectrum-Table-cell">3679</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">7</td>
      <td class="spectrum-Table-cell">1308</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--summary">
      <td class="spectrum-Table-cell">Summary</td>
      <td class="spectrum-Table-cell">48</td>
      <td class="spectrum-Table-cell">7862</td>
    </tr>
  </tbody>
</table>

Section header row
Contribution

Tables can style one or more rows as section headers.

Column title Column title Column title
Section header
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Another section header for the table
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row spectrum-Table-row--sectionHeader">
      <th class="spectrum-Table-cell" colspan="3" scope="col">Section header</th>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--sectionHeader">
      <th class="spectrum-Table-cell" colspan="3" scope="col">Another section header for the table</th>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Section header row (quiet)
Contribution

Column title Column title Column title
Section header
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Another section header for the table
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized spectrum-Table--quiet">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row spectrum-Table-row--sectionHeader">
      <th class="spectrum-Table-cell" colspan="3" scope="col">Section header</th>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--sectionHeader">
      <th class="spectrum-Table-cell" colspan="3" scope="col">Another section header for the table</th>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Scrollable with fixed column headers
Contribution

A table can be wrapped in a fixed height div with the spectrum-Table-scroller class. This allows scrolling of the table body and makes the column headers sticky (i.e. fixed to the top on scroll).

When using the scrollable wrapper, the column headers must have a solid background color set. This can be customized to match the parent background with the custom property --mod-table-header-background-color-scrollable.

To make sure that reverse keyboard link navigation (shift-tab) keeps the whole cell in focus, --mod-table-current-header-height should be dynamically updated with JS to match the height of .spectrum-Table-head.

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Row Item Foxtrot Row Item Foxtrot Row Item Foxtrot
Show markup
<div class="spectrum-Table-scroller spectrum-Table spectrum-Table--emphasized spectrum-Table--sizeM" style="height: 200px">
  <table class="spectrum-Table-main">
    <thead class="spectrum-Table-head">
      <tr>
        <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg><span class="spectrum-Table-columnTitle">Column title</span>
        </th>
        <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg><span class="spectrum-Table-columnTitle">Column title</span>
        </th>
        <th class="spectrum-Table-headCell">Column title</th>
      </tr>
    </thead>
    <tbody class="spectrum-Table-body">
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
        <td class="spectrum-Table-cell">Row Item Alpha</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
        <td class="spectrum-Table-cell">Row Item Bravo</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Charlie</td>
        <td class="spectrum-Table-cell">Row Item Charlie</td>
        <td class="spectrum-Table-cell">Row Item Charlie</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Delta</td>
        <td class="spectrum-Table-cell">Row Item Delta</td>
        <td class="spectrum-Table-cell">Row Item Delta</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Echo</td>
        <td class="spectrum-Table-cell">Row Item Echo</td>
        <td class="spectrum-Table-cell">Row Item Echo</td>
      </tr>
      <tr class="spectrum-Table-row">
        <td class="spectrum-Table-cell">Row Item Foxtrot</td>
        <td class="spectrum-Table-cell">Row Item Foxtrot</td>
        <td class="spectrum-Table-cell">Row Item Foxtrot</td>
      </tr>
    </tbody>
  </table>
</div>

Divs
Contribution

A table can alternatively be composed entirely of <div> tags, instead of a <table>. This example also uses the scrollable wrapper.

Column title
Column title
Column title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Row Item Foxtrot
Row Item Foxtrot
Row Item Foxtrot
Show markup
<div class="spectrum-Table-scroller spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized" style="height: 200px">
  <div class="spectrum-Table-main" role="table">
    <div class="spectrum-Table-head" role="rowgroup">
      <div role="row">
        <div class="spectrum-Table-headCell is-sortable is-sorted-desc" role="columnheader" aria-sort="descending" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg><span class="spectrum-Table-columnTitle">Column title</span>
        </div>
        <div class="spectrum-Table-headCell is-sortable" role="columnheader" aria-sort="none" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg><span class="spectrum-Table-columnTitle">Column title</span>
        </div>
        <div class="spectrum-Table-headCell" role="columnheader">Column title</div>
      </div>
    </div>
    <div class="spectrum-Table-body" role="rowgroup">
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Foxtrot</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Foxtrot</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Foxtrot</div>
      </div>
    </div>
  </div>
</div>

Collapsible rows
Contribution

In a table with collapsible rows, all child items must have columns that match the parent items. See the Guidelines for more info on how and when to use collapsible rows.

Column title Column title Column title
Row Item Alpha
Row Item Alpha Row Item Alpha
Row Item Bravo
Row Item Bravo Row Item Bravo
Row Item Delta
 Row Item Delta Row Item Delta
Row Item Echo
 Row Item Echo Row Item Echo
Row Item Foxtrot
 Row Item Foxtrot Row Item Foxtrot
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row spectrum-Table-row--collapsible" data-tier="0" id="table-cr-alpha">
      <td class="spectrum-Table-cell spectrum-Table-cell--collapsible">
        <div class="spectrum-Table-collapseInner">
          <button
            class="spectrum-Button spectrum-Button--sizeM spectrum-Button--iconOnly spectrum-Table-disclosureIcon"
            aria-label="Collapse"
            aria-expanded="true"
            aria-controls="table-cr-bravo table-cr-delta"
          >
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron100" />
            </svg>
          </button>
          <div class="spectrum-Table-collapseContent">Row Item Alpha</span>
        </div>
      </td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--collapsible" data-tier="1" id="table-cr-bravo">
      <td class="spectrum-Table-cell spectrum-Table-cell--collapsible">
        <div class="spectrum-Table-collapseInner">
          <button
            class="spectrum-Button spectrum-Button--sizeM spectrum-Button--iconOnly spectrum-Table-disclosureIcon"
            aria-label="Expand"
            aria-expanded="false"
            aria-controls="table-cr-charlie"
          >
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron100" />
            </svg>
          </button>
          <div class="spectrum-Table-collapseContent">Row Item Bravo</span>
        </div>
      </td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--collapsible" data-tier="2" id="table-cr-charlie" hidden>
      <td class="spectrum-Table-cell">
        <div class="spectrum-Table-collapseInner">
          <div class="spectrum-Table-collapseContent">Row Item Charlie</span>
        </div>
      </td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--collapsible" data-tier="1" id="table-cr-delta">
      <td class="spectrum-Table-cell spectrum-Table-cell--collapsible">
        <div class="spectrum-Table-collapseInner">
          <button
            class="spectrum-Button spectrum-Button--sizeM spectrum-Button--iconOnly spectrum-Table-disclosureIcon"
            aria-label="Collapse"
            aria-controls="table-cr-echo table-cr-foxtrot"
            aria-expanded="true"
          >
            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-ChevronRight100" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-Chevron100" />
            </svg>
          </button>
          <div class="spectrum-Table-collapseContent">Row Item Delta</div>
        </div>
      </td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--collapsible is-last-tier" aria-expanded="true" data-tier="2" id="table-cr-echo">
      <td class="spectrum-Table-cell spectrum-Table-cell--collapsible">
        <div class="spectrum-Table-collapseInner">
          <div class="spectrum-Table-collapseContent">Row Item Echo</div>
        </div>
      </td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--collapsible is-last-tier" aria-expanded="true" data-tier="2" id="table-cr-foxtrot">
      <td class="spectrum-Table-cell spectrum-Table-cell--collapsible">
        <div class="spectrum-Table-collapseInner">
          <div class="spectrum-Table-collapseContent">Row Item Foxtrot</div>
        </div>
      </td>
      <td class="spectrum-Table-cell">Row Item Foxtrot</td>
      <td class="spectrum-Table-cell">Row Item Foxtrot</td>
    </tr>
  </tbody>
</table>

Thumbnails
Contribution

Thumbnails can be used in the table content, with some additional markup and classes for alignment. This variant can also be combined with collapsible rows.

Animals Number
Placeholder image
Birds
 2
Placeholder image
Ducks
 23
Placeholder image
Goats
 7
Placeholder image
Rabbits
 18
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg>
        <span>Animals</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg>
        <span>Number</span>
      </th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row spectrum-Table-row--thumbnail">
      <td class="spectrum-Table-cell spectrum-Table-cell--thumbnail">
        <div class="spectrum-Table-thumbnailInner">
          <div class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail--size300 spectrum-OpacityCheckerboard">
            <div class="spectrum-Thumbnail-image-wrapper">
              <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Placeholder image">
            </div>
          </div>
          <div class="spectrum-Table-thumbnailContent">Birds</div>
        </div>
      </td>
      <td class="spectrum-Table-cell">2</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--thumbnail">
      <td class="spectrum-Table-cell spectrum-Table-cell--thumbnail">
        <div class="spectrum-Table-thumbnailInner">
          <div class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail--size300 spectrum-OpacityCheckerboard">
            <div class="spectrum-Thumbnail-image-wrapper">
              <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Placeholder image">
            </div>
          </div>
          <div class="spectrum-Table-thumbnailContent">Ducks</div>
        </div>
      </td>
      <td class="spectrum-Table-cell">23</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--thumbnail">
      <td class="spectrum-Table-cell spectrum-Table-cell--thumbnail">
        <div class="spectrum-Table-thumbnailInner">
          <div class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail--size300 spectrum-OpacityCheckerboard">
            <div class="spectrum-Thumbnail-image-wrapper">
              <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Placeholder image">
            </div>
          </div>
          <div class="spectrum-Table-thumbnailContent">Goats</div>
        </div>
      </td>
      <td class="spectrum-Table-cell">7</td>
    </tr>
    <tr class="spectrum-Table-row spectrum-Table-row--thumbnail">
      <td class="spectrum-Table-cell spectrum-Table-cell--thumbnail">
        <div class="spectrum-Table-thumbnailInner">
          <div class="spectrum-Thumbnail spectrum-Thumbnail--cover spectrum-Thumbnail--size300 spectrum-OpacityCheckerboard">
            <div class="spectrum-Thumbnail-image-wrapper">
              <img class="spectrum-Thumbnail-image" src="img/flowers.png" alt="Placeholder image">
            </div>
          </div>
          <div class="spectrum-Table-thumbnailContent">Rabbits</div>
        </div>
      </td>
      <td class="spectrum-Table-cell">18</td>
    </tr>
  </tbody>
</table>

Body dropzone
Contribution

Column title Column title Column title
Row Item Alpha Row Item Alpha Row Item Alpha
Row Item Bravo Row Item Bravo Row Item Bravo
Row Item Charlie Row Item Charlie Row Item Charlie
Row Item Delta Row Item Delta Row Item Delta
Row Item Echo Row Item Echo Row Item Echo
Show markup
<table class="spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg><span class="spectrum-Table-columnTitle">Column title</span>
      </th>
      <th class="spectrum-Table-headCell">Column title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body is-drop-target">
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
      <td class="spectrum-Table-cell">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
      <td class="spectrum-Table-cell">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
      <td class="spectrum-Table-cell">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
      <td class="spectrum-Table-cell">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>

Row dropzone
Contribution

Rows that accept dropped content.

Column title
Column title
Column title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show markup
<div class="spectrum-Table-scroller spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized" style="height: 200px">
  <div class="spectrum-Table-main" role="table">
    <div class="spectrum-Table-head" role="rowgroup">
      <div role="row">
        <div class="spectrum-Table-headCell is-sortable is-sorted-desc" role="columnheader" aria-sort="descending" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg><span class="spectrum-Table-columnTitle">Column title</span>
        </div>
        <div class="spectrum-Table-headCell is-sortable" role="columnheader" aria-sort="none" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg><span class="spectrum-Table-columnTitle">Column title</span>
        </div>
        <div class="spectrum-Table-headCell" role="columnheader">Column title</div>
      </div>
    </div>
    <div class="spectrum-Table-body" role="rowgroup">
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
      </div>
      <div class="spectrum-Table-row is-drop-target" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
      </div>
    </div>
  </div>
</div>

Row dropzone (quiet)
Contribution

Column title
Column title
Column title
Row Item Alpha
Row Item Alpha
Row Item Alpha
Row Item Bravo
Row Item Bravo
Row Item Bravo
Row Item Charlie
Row Item Charlie
Row Item Charlie
Row Item Delta
Row Item Delta
Row Item Delta
Row Item Echo
Row Item Echo
Row Item Echo
Show markup
<div class="spectrum-Table-scroller spectrum-Table spectrum-Table--sizeM spectrum-Table--emphasized spectrum-Table--quiet" style="height: 200px">
  <div class="spectrum-Table-main" role="table">
    <div class="spectrum-Table-head" role="rowgroup">
      <div role="row">
        <div class="spectrum-Table-headCell is-sortable is-sorted-desc" role="columnheader" aria-sort="descending" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg><span class="spectrum-Table-columnTitle">Column title</span>
        </div>
        <div class="spectrum-Table-headCell is-sortable" role="columnheader" aria-sort="none" tabindex="0">
          <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Arrow100" />
          </svg><span class="spectrum-Table-columnTitle">Column title</span>
        </div>
        <div class="spectrum-Table-headCell" role="columnheader">Column title</div>
      </div>
    </div>
    <div class="spectrum-Table-body" role="rowgroup">
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Alpha</div>
      </div>
      <div class="spectrum-Table-row is-drop-target" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Bravo</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Charlie</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Delta</div>
      </div>
      <div class="spectrum-Table-row" role="row">
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
        <div class="spectrum-Table-cell" role="cell">Row Item Echo</div>
      </div>
    </div>
  </div>
</div>

Custom properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration guide

Sorted icon moved to left side of text

The sorted icon was previously on the right side of the text, but has been moved to the left in the markup. If used on the right side of the text, the spacing between icon and text will be incorrect.

Remove whitespace between column title text and sort icon(s)

In the column header, when the sort icon or header menu icon is displayed, remove any white space in the HTML markup between the icon and the column title. This ensures that no extra space is created. Also, the column title text is now wrapped in a <span class="spectrum-Table-columnTitle"> element when the column is sortable.