• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Table

Component status
Verified
Last releasedUnreleased
Current version@spectrum-css/table@3.0.3-alpha.1
View guidelines
Spectrum website
View repository
GitHub
View package
npm

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
Show markup
<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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </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>

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
Show markup
<table class="spectrum-Table">
  <thead class="spectrum-Table-head">
    <tr>
      <th class="spectrum-Table-headCell spectrum-Table-checkboxCell">
        <label class="spectrum-Checkbox spectrum-Checkbox--sizeM 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">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </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-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">
        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-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">
        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-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">
        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-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">
        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-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">
        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>

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
Show markup
<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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="descending">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </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>

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
Show markup
<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-Checkbox--sizeM 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">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </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-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">
        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-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">
        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-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">
        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-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">
        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-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">
        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>

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
Show markup
<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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </svg>
      </th>
      <th class="spectrum-Table-headCell is-sortable"" aria-sort="none" tabindex="0">
        Column Title
        <svg class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Arrow100" />
        </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>

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
Show markup
<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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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>

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
Show markup
<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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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>

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
Show markup
<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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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>

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
Show markup
<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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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>

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
Show markup
<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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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>

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 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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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-ArrowDown100 spectrum-Table-sortedIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Arrow100" />
      </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>

No results found

Try another search term.