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.

Table

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

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>
		
	

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>

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>

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