Data Table

A table for displaying tabular data in native html tables

Default Example

Monthly Revenue Report by Region
Region Q1 Revenue Q2 Revenue Year-over-Year Growth
North America $1,250,000 $1,340,000 +12.5%
Europe $850,000 $920,000 +8.2%
Asia Pacific $620,000 $710,000 +14.5%
Total $2,720,000 $2,970,000 +11.8%
HTML 
<table class="data-table">
  <caption>Monthly Revenue Report by Region</caption>
  <thead>
    <tr>
      <th>Region</th>
      <th>Q1 Revenue</th>
      <th>Q2 Revenue</th>
      <th>Year-over-Year Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>North America</td>
      <td>$1,250,000</td>
      <td>$1,340,000</td>
      <td>+12.5%</td>
    </tr>
    <tr>
      <td>Europe</td>
      <td>$850,000</td>
      <td>$920,000</td>
      <td>+8.2%</td>
    </tr>
    <tr>
      <td>Asia Pacific</td>
      <td>$620,000</td>
      <td>$710,000</td>
      <td>+14.5%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$2,720,000</td>
      <td>$2,970,000</td>
      <td>+11.8%</td>
    </tr>
  </tfoot>
</table>

Complex Table

Striped Table

Server Migration Task Status
Environment Server Roles Downtime Details Ticket ID
Primary Secondary Pre-checks Post-checks
Production Database cluster Cache server Passed Pending IT-992-A
Web frontend Load balancer Passed Passed IT-993-B
Message queue Worker nodes Warning N/A IT-994-C
HTML 
<table class="data-table data-table--striped" id="dt-1">
  <caption>
    Server Migration Task Status
  </caption>
  <thead>
    <tr>
      <th id="dt-1-type" rowspan="2">Environment</th>
      <th id="dt-1-group" colspan="2">Server Roles</th>
      <th id="dt-1-details" colspan="2">Downtime Details</th>
      <th id="dt-1-id" rowspan="2">Ticket ID</th>
    </tr>
    <tr>
      <th headers="dt-1-group" id="dt-1-primary">Primary</th>
      <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
      <th headers="dt-1-details" id="dt-1-before">Pre-checks</th>
      <th headers="dt-1-details" id="dt-1-after">Post-checks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" headers="dt-1-type dt-1-r1" id="dt-1-r1">Production</th>
      <td headers="dt-1-group dt-1-primary dt-1-r1">Database cluster</td>
      <td headers="dt-1-group dt-1-secondary dt-1-r1">Cache server</td>
      <td headers="dt-1-details dt-1-before dt-1-r1">Passed</td>
      <td headers="dt-1-details dt-1-after dt-1-r1">Pending</td>
      <td headers="dt-1-id">IT-992-A</td>
    </tr>
    <tr>
      <td headers="dt-1-group dt-1-primary dt-1-r1">Web frontend</td>
      <td headers="dt-1-group dt-1-secondary dt-1-r1">Load balancer</td>
      <td headers="dt-1-details dt-1-before dt-1-r1">Passed</td>
      <td headers="dt-1-details dt-1-after dt-1-r1">Passed</td>
      <td headers="dt-1-id">IT-993-B</td>
    </tr>
    <tr>
      <td headers="dt-1-group dt-1-primary dt-1-r1">Message queue</td>
      <td headers="dt-1-group dt-1-secondary dt-1-r1">Worker nodes</td>
      <td headers="dt-1-details dt-1-before dt-1-r1">Warning</td>
      <td headers="dt-1-details dt-1-after dt-1-r1">N/A</td>
      <td headers="dt-1-id">IT-994-C</td>
    </tr>
  </tbody>
</table>

Large-first Table

Server Migration Task Status
Environment Server Roles Downtime Details Ticket ID
Primary Secondary Pre-checks Post-checks
Production Database cluster Cache server Passed Pending IT-992-A
Web frontend Load balancer Passed Passed IT-993-B
Message queue Worker nodes Warning N/A IT-994-C
HTML 
<table class="data-table data-table--large-first" id="dt-2">
  <caption>
    Server Migration Task Status
  </caption>
  <thead>
    <tr>
      <th id="dt-2-type" rowspan="2">Environment</th>
      <th id="dt-2-group" colspan="2">Server Roles</th>
      <th id="dt-2-details" colspan="2">Downtime Details</th>
      <th id="dt-2-id" rowspan="2">Ticket ID</th>
    </tr>
    <tr>
      <th headers="dt-2-group" id="dt-2-primary">Primary</th>
      <th headers="dt-2-group" id="dt-2-secondary">Secondary</th>
      <th headers="dt-2-details" id="dt-2-before">Pre-checks</th>
      <th headers="dt-2-details" id="dt-2-after">Post-checks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" headers="dt-2-type dt-2-r1" id="dt-2-r1">Production</th>
      <td headers="dt-2-group dt-2-primary dt-2-r1">Database cluster</td>
      <td headers="dt-2-group dt-2-secondary dt-2-r1">Cache server</td>
      <td headers="dt-2-details dt-2-before dt-2-r1">Passed</td>
      <td headers="dt-2-details dt-2-after dt-2-r1">Pending</td>
      <td headers="dt-2-id">IT-992-A</td>
    </tr>
    <tr>
      <td headers="dt-2-group dt-2-primary dt-2-r1">Web frontend</td>
      <td headers="dt-2-group dt-2-secondary dt-2-r1">Load balancer</td>
      <td headers="dt-2-details dt-2-before dt-2-r1">Passed</td>
      <td headers="dt-2-details dt-2-after dt-2-r1">Passed</td>
      <td headers="dt-2-id">IT-993-B</td>
    </tr>
    <tr>
      <td headers="dt-2-group dt-2-primary dt-2-r1">Message queue</td>
      <td headers="dt-2-group dt-2-secondary dt-2-r1">Worker nodes</td>
      <td headers="dt-2-details dt-2-before dt-2-r1">Warning</td>
      <td headers="dt-2-details dt-2-after dt-2-r1">N/A</td>
      <td headers="dt-2-id">IT-994-C</td>
    </tr>
  </tbody>
</table>

Large-header Table

Server Migration Task Status
Environment Server Roles Downtime Details Ticket ID
Primary Secondary Pre-checks Post-checks
Production Database cluster Cache server Passed Pending IT-992-A
Web frontend Load balancer Passed Passed IT-993-B
Message queue Worker nodes Warning N/A IT-994-C
HTML 
<table class="data-table data-table--large-header" id="dt-3">
  <caption>
    Server Migration Task Status
  </caption>
  <thead>
    <tr>
      <th id="dt-3-type" rowspan="2">Environment</th>
      <th id="dt-3-group" colspan="2">Server Roles</th>
      <th id="dt-3-details" colspan="2">Downtime Details</th>
      <th id="dt-3-id" rowspan="2">Ticket ID</th>
    </tr>
    <tr>
      <th headers="dt-3-group" id="dt-3-primary">Primary</th>
      <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
      <th headers="dt-3-details" id="dt-3-before">Pre-checks</th>
      <th headers="dt-3-details" id="dt-3-after">Post-checks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" headers="dt-3-type dt-3-r1" id="dt-3-r1">Production</th>
      <td headers="dt-3-group dt-3-primary dt-3-r1">Database cluster</td>
      <td headers="dt-3-group dt-3-secondary dt-3-r1">Cache server</td>
      <td headers="dt-3-details dt-3-before dt-3-r1">Passed</td>
      <td headers="dt-3-details dt-3-after dt-3-r1">Pending</td>
      <td headers="dt-3-id">IT-992-A</td>
    </tr>
    <tr>
      <td headers="dt-3-group dt-3-primary dt-3-r1">Web frontend</td>
      <td headers="dt-3-group dt-3-secondary dt-3-r1">Load balancer</td>
      <td headers="dt-3-details dt-3-before dt-3-r1">Passed</td>
      <td headers="dt-3-details dt-3-after dt-3-r1">Passed</td>
      <td headers="dt-3-id">IT-993-B</td>
    </tr>
    <tr>
      <td headers="dt-3-group dt-3-primary dt-3-r1">Message queue</td>
      <td headers="dt-3-group dt-3-secondary dt-3-r1">Worker nodes</td>
      <td headers="dt-3-details dt-3-before dt-3-r1">Warning</td>
      <td headers="dt-3-details dt-3-after dt-3-r1">N/A</td>
      <td headers="dt-3-id">IT-994-C</td>
    </tr>
  </tbody>
</table>

No-border Table

Server Migration Task Status
Environment Server Roles Downtime Details Ticket ID
Primary Secondary Pre-checks Post-checks
Production Database cluster Cache server Passed Pending IT-992-A
Web frontend Load balancer Passed Passed IT-993-B
Message queue Worker nodes Warning N/A IT-994-C
HTML 
<table class="data-table data-table--no-border" id="dt-4">
  <caption>
    Server Migration Task Status
  </caption>
  <thead>
    <tr>
      <th id="dt-4-type" rowspan="2">Environment</th>
      <th id="dt-4-group" colspan="2">Server Roles</th>
      <th id="dt-4-details" colspan="2">Downtime Details</th>
      <th id="dt-4-id" rowspan="2">Ticket ID</th>
    </tr>
    <tr>
      <th headers="dt-4-group" id="dt-4-primary">Primary</th>
      <th headers="dt-4-group" id="dt-4-secondary">Secondary</th>
      <th headers="dt-4-details" id="dt-4-before">Pre-checks</th>
      <th headers="dt-4-details" id="dt-4-after">Post-checks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" headers="dt-4-type dt-4-r1" id="dt-4-r1">Production</th>
      <td headers="dt-4-group dt-4-primary dt-4-r1">Database cluster</td>
      <td headers="dt-4-group dt-4-secondary dt-4-r1">Cache server</td>
      <td headers="dt-4-details dt-4-before dt-4-r1">Passed</td>
      <td headers="dt-4-details dt-4-after dt-4-r1">Pending</td>
      <td headers="dt-4-id">IT-992-A</td>
    </tr>
    <tr>
      <td headers="dt-4-group dt-4-primary dt-4-r1">Web frontend</td>
      <td headers="dt-4-group dt-4-secondary dt-4-r1">Load balancer</td>
      <td headers="dt-4-details dt-4-before dt-4-r1">Passed</td>
      <td headers="dt-4-details dt-4-after dt-4-r1">Passed</td>
      <td headers="dt-4-id">IT-993-B</td>
    </tr>
    <tr>
      <td headers="dt-4-group dt-4-primary dt-4-r1">Message queue</td>
      <td headers="dt-4-group dt-4-secondary dt-4-r1">Worker nodes</td>
      <td headers="dt-4-details dt-4-before dt-4-r1">Warning</td>
      <td headers="dt-4-details dt-4-after dt-4-r1">N/A</td>
      <td headers="dt-4-id">IT-994-C</td>
    </tr>
  </tbody>
</table>