Office UI Fabric JS
Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.

Overview

Presents tabular data with multiple rows and columns. The table's width is flexible, but it does not have any advanced responsive behaviors.

Using this Component

  1. Confirm that you have references to Fabric's CSS and JavaScript on your page:

    			<link rel="stylesheet" href="fabric.min.css" />
    <link rel="stylesheet" href="fabric.components.min.css" />
    <script src="fabric.min.js"></script>
    		
  2. Copy the HTML from one of the samples below into your page. For example:

    <table class="ms-Table">
      <thead>
        <tr>
          <th>Location</th>
          <th>Modified</th>
          <th>Type</th>
          <th>File Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Location</td>
          <td>Modified</td>
          <td>Type</td>
          <td>File Name</td>
        </tr>
        <tr>
          <td>Location</td>
          <td>Modified</td>
          <td>Type</td>
          <td>File Name</td>
        </tr>
        <tr>
          <td>Location</td>
          <td>Modified</td>
          <td>Type</td>
          <td>File Name</td>
        </tr>
        <tr>
          <td>Location</td>
          <td>Modified</td>
          <td>Type</td>
          <td>File Name</td>
        </tr>
        <tr>
          <td>Location</td>
          <td>Modified</td>
          <td>Type</td>
          <td>File Name</td>
        </tr>
        <tr>
          <td>Location</td>
          <td>Modified</td>
          <td>Type</td>
          <td>File Name</td>
        </tr>
        <tr>
          <td>Location</td>
          <td>Modified</td>
          <td>Type</td>
          <td>File Name</td>
        </tr>
      </tbody>
    </table>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Table components on the page:

    <script type="text/javascript">
      var TableElements = document.querySelectorAll(".ms-Table");
      for (var i = 0; i < TableElements.length; i++) {
        new fabric['Table'](TableElements[i]);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default Table
<table class="ms-Table">
  <thead>
    <tr>
      <th>Location</th>
      <th>Modified</th>
      <th>Type</th>
      <th>File Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
  var TableElements = document.querySelectorAll(".ms-Table");
  for (var i = 0; i < TableElements.length; i++) {
    new fabric['Table'](TableElements[i]);
  }
</script>
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Fixed Table
<table class="ms-Table ms-Table--fixed">
  <thead>
    <tr>
      <th>Location</th>
      <th>Modified</th>
      <th>Type</th>
      <th>File Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
  var TableElements = document.querySelectorAll(".ms-Table");
  for (var i = 0; i < TableElements.length; i++) {
    new fabric['Table'](TableElements[i]);
  }
</script>
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Selectable Table
<table class="ms-Table ms-Table--selectable">
  <thead>
    <tr>
      <th class="ms-Table-rowCheck"></th>
      <th>Location</th>
      <th>Modified</th>
      <th>Type</th>
      <th>File Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="ms-Table-rowCheck"></td>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td class="ms-Table-rowCheck"></td>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td class="ms-Table-rowCheck"></td>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td class="ms-Table-rowCheck"></td>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td class="ms-Table-rowCheck"></td>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td class="ms-Table-rowCheck"></td>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
    <tr>
      <td class="ms-Table-rowCheck"></td>
      <td>Location</td>
      <td>Modified</td>
      <td>Type</td>
      <td>File Name</td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
  var TableElements = document.querySelectorAll(".ms-Table");
  for (var i = 0; i < TableElements.length; i++) {
    new fabric['Table'](TableElements[i]);
  }
</script>
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name
Location Modified Type File Name