npm - @patternfly/patternfly - Versions diffs - 4.159.0 → 4.159.1 - Mend

@patternfly/patternfly 4.159.0 → 4.159.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +2 -2
package/RELEASE-NOTES.md +30 -0
package/docs/components/Table/examples/Table.md +1598 -6
package/docs/demos/Table/examples/Table.md +3734 -95
package/package.json +1 -1

package/docs/components/Table/examples/Table.md CHANGED Viewed

@@ -19118,28 +19118,1620 @@ Long strings in table cells will push content. Add a width modifier to `thead th
 ### Sticky column
-```hbs
+```html
 <div class="pf-c-scroll-inner-wrapper">
-  {{> table--scrollable table--scrollable--id="sticky-column-example" table--scrollable--Column1IsStickyColumn="true" table--scrollable--th--modifier--cell-1-modifier="pf-m-border-right"}}
+  <table
+    class="pf-c-table"
+    role="grid"
+    aria-label="This is a scrollable table"
+    id="-table"
+  >
+    <thead>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
+          role="columnheader"
+          aria-sort="none"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Fact</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-m-truncate pf-c-table__sort"
+          role="columnheader"
+          aria-sort="none"
+          data-label="Example th"
+          scope="col"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">State</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 3</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 4</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 5</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 6</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 7</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 8</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 9</th>
+      </tr>
+    </thead>
+    <tbody role="rowgroup">
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 1</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 1</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 2</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 2</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 3</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 4</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 5</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 6</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 7</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 8</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 9</th>
+        <td class="pf-m-nowrap" role="cell" data-label="Example td">State 9</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-9</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 ```
 ### Multiple sticky columns
-```hbs
+```html
 <div class="pf-c-scroll-inner-wrapper">
-  {{> table--scrollable table--scrollable--id="sticky-multi-column-example" table--scrollable--Column1IsStickyColumn="true" table--scrollable--Column2IsStickyColumn="true" table--scrollable--th--modifier--cell-2-modifier="pf-m-border-right"}}
+  <table
+    class="pf-c-table"
+    role="grid"
+    aria-label="This is a scrollable table"
+    id="-table"
+  >
+    <thead>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
+          role="columnheader"
+          aria-sort="none"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">Fact</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
+          role="columnheader"
+          aria-sort="none"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 120px; --pf-c-table__sticky-column--Left: 100px;"
+        >
+          <button class="pf-c-table__button">
+            <div class="pf-c-table__button-content">
+              <span class="pf-c-table__text">State</span>
+              <span class="pf-c-table__sort-indicator">
+                <i class="fas fa-arrows-alt-v"></i>
+              </span>
+            </div>
+          </button>
+        </th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 3</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 4</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 5</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 6</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 7</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 8</th>
+        <th
+          class="pf-m-truncate"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+        >Header 9</th>
+      </tr>
+    </thead>
+    <tbody role="rowgroup">
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 1</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 1</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 1-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 2</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 2</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 2-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 3</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 3</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 3-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 4</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 4</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 4-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 5</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 5</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 5-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 6</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 6</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 6-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 7</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 7</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 7-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 8</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 8</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 8-9</td>
+      </tr>
+      <tr role="row">
+        <th
+          class="pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 100px;"
+        >Fact 9</th>
+        <th
+          class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+          role="columnheader"
+          data-label="Example th"
+          scope="col"
+          style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+        >State 9</th>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-3</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-4</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-5</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-6</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-7</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-8</td>
+        <td
+          class="pf-m-nowrap"
+          role="cell"
+          data-label="Example td"
+        >Test cell 9-9</td>
+      </tr>
+    </tbody>
+  </table>
 </div>
 ```
 ### Sticky columns and header
-```hbs
+```html
 <div class="pf-c-scroll-outer-wrapper">
   <div class="pf-c-scroll-inner-wrapper">
-    {{> table--scrollable table--scrollable--id="sticky-header-columns-example" table--scrollable--modifier="pf-m-sticky-header" table--scrollable--Column1IsStickyColumn="true" table--scrollable--Column2IsStickyColumn="true" table--scrollable--th--modifier--cell-2-modifier="pf-m-border-right"}}
+    <table
+      class="pf-c-table pf-m-sticky-header"
+      role="grid"
+      aria-label="This is a scrollable table"
+      id="-table"
+    >
+      <thead>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
+            role="columnheader"
+            aria-sort="none"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >
+            <button class="pf-c-table__button">
+              <div class="pf-c-table__button-content">
+                <span class="pf-c-table__text">Fact</span>
+                <span class="pf-c-table__sort-indicator">
+                  <i class="fas fa-arrows-alt-v"></i>
+                </span>
+              </div>
+            </button>
+          </th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sort pf-c-table__sticky-column"
+            role="columnheader"
+            aria-sort="none"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 120px; --pf-c-table__sticky-column--Left: 100px;"
+          >
+            <button class="pf-c-table__button">
+              <div class="pf-c-table__button-content">
+                <span class="pf-c-table__text">State</span>
+                <span class="pf-c-table__sort-indicator">
+                  <i class="fas fa-arrows-alt-v"></i>
+                </span>
+              </div>
+            </button>
+          </th>
+          <th
+            class="pf-m-truncate"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+          >Header 3</th>
+          <th
+            class="pf-m-truncate"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+          >Header 4</th>
+          <th
+            class="pf-m-truncate"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+          >Header 5</th>
+          <th
+            class="pf-m-truncate"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+          >Header 6</th>
+          <th
+            class="pf-m-truncate"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+          >Header 7</th>
+          <th
+            class="pf-m-truncate"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+          >Header 8</th>
+          <th
+            class="pf-m-truncate"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+          >Header 9</th>
+        </tr>
+      </thead>
+      <tbody role="rowgroup">
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 1</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 1</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 1-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 1-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 1-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 1-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 1-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 1-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 1-9</td>
+        </tr>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 2</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 2</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 2-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 2-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 2-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 2-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 2-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 2-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 2-9</td>
+        </tr>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 3</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 3</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 3-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 3-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 3-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 3-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 3-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 3-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 3-9</td>
+        </tr>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 4</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 4</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 4-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 4-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 4-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 4-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 4-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 4-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 4-9</td>
+        </tr>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 5</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 5</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 5-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 5-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 5-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 5-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 5-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 5-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 5-9</td>
+        </tr>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 6</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 6</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 6-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 6-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 6-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 6-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 6-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 6-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 6-9</td>
+        </tr>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 7</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 7</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 7-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 7-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 7-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 7-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 7-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 7-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 7-9</td>
+        </tr>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 8</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 8</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 8-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 8-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 8-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 8-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 8-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 8-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 8-9</td>
+        </tr>
+        <tr role="row">
+          <th
+            class="pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 100px;"
+          >Fact 9</th>
+          <th
+            class="pf-m-border-right pf-m-truncate pf-c-table__sticky-column"
+            role="columnheader"
+            data-label="Example th"
+            scope="col"
+            style="--pf-c-table__sticky-column--MinWidth: 80px; --pf-c-table__sticky-column--Left: 100px;"
+          >State 9</th>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 9-3</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 9-4</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 9-5</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 9-6</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 9-7</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 9-8</td>
+          <td
+            class="pf-m-nowrap"
+            role="cell"
+            data-label="Example td"
+          >Test cell 9-9</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </div>
 ```
 ### Sticky column usage