Skip to main content
Microsoft
Fabric-JS
Fabric-JS
  • Home
  • Get Started
    • Basic Inputs
      • Button
      • CheckBox
      • ChioceFieldGroup
      • CommandButton
      • ContextualMenu
      • Dropdown
      • Label
      • Link
      • TextField
      • Toggle
    • Content
      • FacePile
      • List
      • ListItem
      • OrgChart
      • Persona
      • Table
    • Navigation
      • Breadcrumb
      • CommandBar
      • Pivot
      • SearchBox
    • Pickers
      • DatePicker
      • PeoplePicker
    • Progress & Validation
      • MessageBar
      • MessageBanner
      • ProgressIndicator
      • Spinner
    • Surfaces
      • Callout
      • Dialog
      • Overlay
      • Panel
      • PersonaCard
      • Microsoft 365
      • Azure
      • Office 365
      • Dynamics 365
      • Power Platform
      • Windows 10
    • Products & Services
      • Windows Server
      • Enterprise Mobility + Security
      • Power BI
      • Teams
      • Visual Studio
      • Microsoft Advertising
    • Emerging Technologies
      • AI
      • Internet of Things
      • Azure Cognitive Services
      • Quantum
      • Microsoft HoloLens
      • Mixed Reality
    • Developer & IT
      • Docs
      • Developer Center
      • Windows Dev Center
      • Windows IT Pro Center
      • FastTrack
      • Power Platform
    • Partner
      • Partner Network
      • Solution Providers
      • Partner Center
      • Cloud Hosting
    • Industries
      • Education
      • Financial services
      • Government
      • Health
      • Manufacturing & resources
      • Retail
    • Other
      • Security
      • Licensing
      • AppSource
      • Azure Marketplace
      • Events
      • Research
    • View Sitemap
Sign in
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.
  • Breadcrumb
  • Button
  • Callout
  • CheckBox
  • ChoiceFieldGroup
  • CommandBar
  • CommandButton
  • ContextualMenu
  • DatePicker
  • Dialog
  • Dropdown
  • FacePile
  • Label
  • Link
  • List
  • ListItem
  • MessageBanner
  • MessageBar
  • OrgChart
  • Overlay
  • Panel
  • PeoplePicker
  • Persona
  • PersonaCard
  • Pivot
  • ProgressIndicator
  • SearchBox
  • Spinner
  • Table
  • TextField
  • Toggle

Table

  • Overview
  • Using this Component
  • Variants

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
Follow us
Share this page
What's new
  • Surface Laptop 4
  • Surface Laptop Go
  • Surface Go 2
  • Surface Pro X
  • Surface Duo
  • Microsoft 365
  • Windows 10 apps
  • HoloLens 2
Microsoft Store
  • Account profile
  • Download Center
  • Microsoft Store support
  • Returns
  • Order tracking
  • Virtual workshops and training
  • Microsoft Store Promise
  • Financing
Education
  • Microsoft in education
  • Office for students
  • Office 365 for schools
  • Deals for students & parents
  • Microsoft Azure in education
Enterprise
  • Azure
  • AppSource
  • Automotive
  • Government
  • Healthcare
  • Manufacturing
  • Financial services
  • Retail
Developer
  • Microsoft Visual Studio
  • Windows Dev Center
  • Developer Center
  • Microsoft developer program
  • Channel 9
  • Office Dev Center
  • Microsoft Garage
Company
  • Careers
  • About Microsoft
  • Company news
  • Privacy at Microsoft
  • Investors
  • Diversity and inclusion
  • Accessibility
  • Security
English (United States)
  • Sitemap
  • Contact Microsoft
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Safety & eco
  • About our ads
  • © Microsoft 2021

Sign in required


Your session has expired. Please sign-in again to continue. Unfortunately any unsaved changes will be lost.

Sign in