Table

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/table@2.0.0

Variants#


Standard#
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
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </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" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
    </tr>
  </tbody>
</table>
Show markup

Multi-select#
Contribution

The standard multi-select 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
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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 is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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 is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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>
Show markup

Quiet#
Contribution

The quiet 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
<table class="spectrum-Table spectrum-Table--quiet">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="descending">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </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" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Alpha</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Bravo</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Charlie</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Delta</td>
    </tr>
    <tr class="spectrum-Table-row">
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
      <td class="spectrum-Table-cell" tabindex="0">Row Item Echo</td>
    </tr>
  </tbody>
</table>
Show markup

Quiet multi-select#
Contribution

The quiet multi-select 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
<table class="spectrum-Table spectrum-Table--quiet">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select All">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </th>
      <th class="spectrum-Table-headCell is-sortable is-sorted-desc" aria-sort="descending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell">Column Title</th>
    </tr>
  </thead>
  <tbody class="spectrum-Table-body">
    <tr class="spectrum-Table-row" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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 is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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 is-selected" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" checked title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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" tabindex="0">
      <td class="spectrum-Table-cell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Table-checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
          </span>
        </label>
      </td>
      <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>
Show markup

Column dividers#
Contribution

The standard table with column dividers

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
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell is-sortable is-sorted-asc" aria-sort="ascending" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable"" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
        </svg>
      </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 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 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 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 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 Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
      <td class="spectrum-Table-cell">Row Item Echo</td>
    </tr>
  </tbody>
</table>
Show markup

Divs#
Contribution

A table composed with <div> tags.

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
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell" tabindex="0">Row Item Echo</div>
    </div>
  </div>
</div>
Show markup

Divs (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
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>
Show markup

Body dropzone#
Contribution

Tables 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
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body is-drop-target" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>
Show markup

Body 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
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body is-drop-target" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>
Show markup

Row 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
<div class="spectrum-Table" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row is-drop-target" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>
Show markup

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
<div class="spectrum-Table spectrum-Table--quiet" role="grid">
  <div class="spectrum-Table-head" style="display: flex" role="row">
    <div class="spectrum-Table-headCell is-sortable is-sorted-desc" style="flex: 1" role="columnheader" aria-sort="descending" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell is-sortable" style="flex: 1" role="columnheader" aria-sort="none" tabindex="0">
      Column Title
      <svg class="spectrum-Icon spectrum-UIIcon-ArrowDownSmall spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ArrowDownSmall" />
      </svg>
    </div>
    <div class="spectrum-Table-headCell" style="flex: 1" role="columnheader">Column Title</div>
  </div>
  <div class="spectrum-Table-body" style="height: 120px" role="rowgroup">
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Alpha</div>
    </div>
    <div class="spectrum-Table-row is-drop-target" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Bravo</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Charlie</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Delta</div>
    </div>
    <div class="spectrum-Table-row" style="display: flex" role="row">
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
      <div class="spectrum-Table-cell" style="flex: 1" role="gridcell">Row Item Echo</div>
    </div>
  </div>
</div>
Show markup