Make property definition table headers sticky (#287)

blackbaud · May 23, 2024 · 9c867c4 · 9c867c4
1 parent 9485830
commit 9c867c4
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 10.5.0 (2024-05-23)
+
+- Make property definition table headers sticky. [#287](https://github.com/blackbaud/skyux-docs-tools/pull/287)
+
 ## 10.4.0 (2024-05-23)
 
 - Update control panel radio groups to use heading text inputs. [#286](https://github.com/blackbaud/skyux-docs-tools/pull/286)

diff --git a/projects/docs-tools/package.json b/projects/docs-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@skyux/docs-tools",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "peerDependencies": {
     "@angular/common": "^17.3.10",
     "@angular/core": "^17.3.10",

diff --git a/projects/docs-tools/src/modules/type-definitions/property-definitions.component.html b/projects/docs-tools/src/modules/type-definitions/property-definitions.component.html
@@ -1,35 +1,39 @@
 <div *ngIf="properties" class="sky-docs-property-definitions">
   <table *ngIf="!isMobile; else mobileTemplate" class="sky-docs-table">
-    <tr class="sky-docs-table-row">
-      <th
-        class="sky-docs-table-column-header sky-docs-table-column-header-name"
-      >
-        {{ propertyType }}
-      </th>
-      <th
-        class="sky-docs-table-column-header sky-docs-table-column-header-description"
-      >
-        Description
-      </th>
-    </tr>
-    <tr *ngFor="let property of properties" class="sky-docs-table-row">
-      <td
-        class="sky-docs-table-cell sky-docs-property-definitions-table-cell-name"
-      >
-        <ng-template
-          [ngTemplateOutlet]="nameTemplate"
-          [ngTemplateOutletContext]="{ $implicit: property }"
-        ></ng-template>
-      </td>
-      <td
-        class="sky-docs-table-cell sky-docs-property-definitions-table-cell-description"
-      >
-        <ng-template
-          [ngTemplateOutlet]="descriptionTemplate"
-          [ngTemplateOutletContext]="{ $implicit: property }"
-        ></ng-template>
-      </td>
-    </tr>
+    <thead>
+      <tr class="sky-docs-table-row">
+        <th
+          class="sky-docs-table-column-header sky-docs-table-column-header-name"
+        >
+          {{ propertyType }}
+        </th>
+        <th
+          class="sky-docs-table-column-header sky-docs-table-column-header-description"
+        >
+          Description
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let property of properties" class="sky-docs-table-row">
+        <td
+          class="sky-docs-table-cell sky-docs-property-definitions-table-cell-name"
+        >
+          <ng-template
+            [ngTemplateOutlet]="nameTemplate"
+            [ngTemplateOutletContext]="{ $implicit: property }"
+          ></ng-template>
+        </td>
+        <td
+          class="sky-docs-table-cell sky-docs-property-definitions-table-cell-description"
+        >
+          <ng-template
+            [ngTemplateOutlet]="descriptionTemplate"
+            [ngTemplateOutletContext]="{ $implicit: property }"
+          ></ng-template>
+        </td>
+      </tr>
+    </tbody>
   </table>
 
   <ng-template #mobileTemplate>

diff --git a/projects/docs-tools/src/modules/type-definitions/property-definitions.component.scss b/projects/docs-tools/src/modules/type-definitions/property-definitions.component.scss
@@ -10,7 +10,15 @@
 .sky-docs-property-definitions {
   width: 100%;
   max-width: 100%;
-  overflow: auto;
+
+  th {
+    position: sticky;
+    top: var(--sky-viewport-top, 0);
+  }
+
+  &-table-cell-description {
+    word-break: break-word;
+  }
 }
 
 .sky-docs-table-column-header-name {