2.35 #Components.table Table

Toggle example guides Toggle HTML markup

JavaScript is required for:

  • Adding/removing visible class on keyboard tab, if touchscreen or after any checkbox selection
  • :focus-visible will not work in all browsers

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Default styling
Form Name Platform Created Performance Status
19 Sept 2018 221 Completed Active
18 Sept 2018 221 Completed Disabled
18 Sept 2018 221 Completed Active
.sb-table--checkbox-visible
Shows all elements on checkbox column.
Form Name Platform Created Performance Status
19 Sept 2018 221 Completed Active
18 Sept 2018 221 Completed Disabled
18 Sept 2018 221 Completed Active
.sb-table--compact.sb-table--checkbox-visible
Applies small padding to the cells of your table.
Form Name Platform Created Performance Status
19 Sept 2018 221 Completed Active
18 Sept 2018 221 Completed Disabled
18 Sept 2018 221 Completed Active
.sb-table--comfortable.sb-table--checkbox-visible
Applies big padding to the cells of your table.
Form Name Platform Created Performance Status
19 Sept 2018 221 Completed Active
18 Sept 2018 221 Completed Disabled
18 Sept 2018 221 Completed Active
Markup 
<div class="sb-table [modifier class]">
  <table class="sb-table__table" role="grid">
     <thead class="sb-table__thead">
        <tr class="sb-table__tr">
           <th class="sb-table__hh sb-table__action sb-text--center" scope="col">
             <!-- empty cel for checkbox column, we don't have select all function yet -->
           </th>
           <th class="sb-table__hh" scope="col">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
                 Form Name<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
           <th class="sb-table__hh sb-text--center" scope="col">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
                 Platform<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
           <th class="sb-table__hh" scope="col" aria-sort="ascending">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="">
                 Created<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
           <th class="sb-table__hh" scope="col" aria-sort="descending">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
                 Performance<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
           <th class="sb-table__hh" scope="col">
              <span class="sb-table__sort sb-text--nowrap" tabindex="0" role="button" title="Sort">
                 Status<span class="sb-table__icon">
                   <svg class="sb-icon sb-icon--s" viewBox="0 0 9 11">
                     <path d="M4 8.8V1h1v7.8l2.8-3.2.6.8-3.9 4.3-4-4.3.7-.8L4 8.8z"/>
                   </svg>
                 </span>
              </span>
           </th>
        </tr>
     </thead>
     <tbody class="sb-table__tbody sb-text--s">
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-1-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <td class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-1-[modifier class]">NPS campaign CS Nordics</label>
           </td>
           <td class="sb-table__td sb-text--center">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">19 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-2-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-2-[modifier class]">Slide-out campaign: really big title slide out how did you find us?</label>
           </th>
           <td class="sb-table__td sb-text--center">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--error" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Disabled
           </td>
        </tr>
        <tr class="sb-table__tr">
           <td class="sb-table__td sb-table__checkbox sb-text--center">
             <div class="sb-checkbox-without-label">
               <input type="checkbox" id="checkbox-table-3-[modifier class]" class="sb-checkbox-without-label__input">
               <div class="sb-checkbox-without-label__checkmark-container">
                 <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
                   <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
               </div>
             </div>
           </td>
           <th class="sb-table__td" scope="row">
             <label class="sb-text" for="checkbox-table-3-[modifier class]">Exit Survey (Product Page)</label>
           </th>
           <td class="sb-table__td sb-text--center">
             <svg class="sb-icon" viewBox="0 0 16 16">
               <path d="M4.5 13.706L8 11.568l3.5 2.138-.952-3.99 3.114-2.667-4.087-.328L8 2.935 6.425 6.721l-4.087.328 3.114 2.668-.952 3.989zM8 12.61l-4.86 2.968 1.321-5.54L.136 6.335l5.677-.455L8 .62l2.187 5.259 5.677.455-4.325 3.705 1.321 5.54L8 12.608z"/>
             </svg>
           </td>
           <td class="sb-table__td sb-text--nowrap">18 Sept 2018</td>
           <td class="sb-table__td">221 Completed</td>
           <td class="sb-table__td sb-text--nowrap">
             <svg class="sb-icon sb-icon--success" viewBox="0 0 16 16">
               <circle cx="5.5" cy="6.5" r="5.5"/>
             </svg>
             Active
           </td>
        </tr>
     </tbody>
  </table>
</div>
Source: components/_table.scss, line 1