Component Library 2.17.5 (configured with Dummy App)
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="table" data-strategy="table" role="region" tabindex="0" aria-labelledby="table-caption-15224843">
  <table class="table__table">
    <caption id="table-caption-15224843" class="table__caption">Gender pay gap by pay quartile</caption>
    <thead class="table__head">
      <tr class="table__row">
        <th class="table__cell" scope="col">Band</th>
        <th class="table__cell" scope="col">Males</th>
        <th class="table__cell" scope="col">Females</th>
        <th class="table__cell" scope="col">Description</th>
      </tr>
    </thead>
    <tbody class="table__body">
      <tr class="table__row">
        <th class="table__cell" scope="row">A</th>
        <td class="table__cell">49.00%</td>
        <td class="table__cell">51.00%</td>
        <td class="table__cell">Includes all employees whose standard hourly rate places them at or below the lower quartile.</td>
      </tr>
      <tr class="table__row">
        <th class="table__cell" scope="row">B</th>
        <td class="table__cell">45.40%</td>
        <td class="table__cell">54.60%</td>
        <td class="table__cell">Includes all employees whose standard hourly rate places them above the lower quartile but at or below the median.</td>
      </tr>
      <tr class="table__row">
        <th class="table__cell" scope="row">C</th>
        <td class="table__cell">47.50%</td>
        <td class="table__cell">52.50%</td>
        <td class="table__cell">Includes all employees whose standard hourly rate places them above the median but at or below the upper quartile.</td>
      </tr>
      <tr class="table__row">
        <th class="table__cell" scope="row">D</th>
        <td class="table__cell">35.52%</td>
        <td class="table__cell">64.48%</td>
        <td class="table__cell">Includes all employees whose standard hourly rate places them above the upper quartile.</td>
      </tr>
    </tbody>
  </table>
</div>
1
render GllComponentLibrary::Patterns::TableComponent.with(caption:, headers: (HEADERS if show_header), rows: ROWS, row_headers:, strategy:)

No notes provided.

Param Description Input

—

—

First cell of each row is a row header

—