feat(OnyxTable): create prop to handle table- vs page-scrolling (#1470)

feat(OnyxTable): create prop to switch from table-scrolling to
page-scrolling
- make alpha table example more vue-ish
- feat(demo-app): remember component selection in localStorage

.changeset/six-parents-appear.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxTable): add `withPageScrolling` prop to switch from table-scrolling to page-scrolling

apps/alpha-test-app/src/views/HomeView.vue

@@ -30,6 +30,7 @@ import {
 import { capitalize, computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LanguageSelection from "../components/LanguageSelection.vue";
+import { useStorage } from "@vueuse/core";
 
 const { locale } = useI18n();
 
@@ -68,7 +69,7 @@ const filteredConfigOptions = computed(() =>
     ? configOptions.filter(({ label }) => normalizedIncludes(label, searchTerm.value))
     : configOptions,
 );
-const componentsToShow = ref([...configOptions]);
+const componentsToShow = useStorage("components-to-show", [...configOptions]);
 const componentNamesToShow = computed(() => componentsToShow.value.map((option) => option.value));
 const show = computed(() => {
   return (componentName: (typeof COMPONENTS)[number]) =>
@@ -131,6 +132,13 @@ const timerEndDate = new Date();
 timerEndDate.setHours(timerEndDate.getHours() + 2);
 
 const toast = useToast();
+
+const tableColumns = ["Fruit", "Price (€/kg)", "Inventory (kg)"];
+const tableData = [
+  { fruit: "Strawberry", price: "4.50", inventory: 200 },
+  { fruit: "Apple", price: "1.99", inventory: 3000 },
+  { fruit: "Banana", price: "3.75", inventory: 18000 },
+];
 </script>
 
 <template>
@@ -264,30 +272,19 @@ const toast = useToast();
         />
 
         <template v-if="show('OnyxTable')">
-          <OnyxTable>
+          <OnyxTable style="max-height: 250px" with-page-scrolling>
             <template #head>
               <tr>
-                <th>Fruit</th>
-                <th>Price (€/kg)</th>
-                <th>Inventory (kg)</th>
+                <th v-for="col in tableColumns" :key="col">{{ col }}</th>
               </tr>
             </template>
-            <tr>
-              <td>Strawberry</td>
-              <td>4.50</td>
-              <td>200</td>
-            </tr>
-            <tr>
-              <td>Apple</td>
-              <td>1.99</td>
-              <td>3000</td>
-            </tr>
-            <tr>
-              <td>Banana</td>
-              <td>3.75</td>
-              <td>18000</td>
+            <tr v-for="{ fruit, price, inventory } in tableData" :key="fruit">
+              <td>{{ fruit }}</td>
+              <td>{{ price }}</td>
+              <td>{{ inventory }}</td>
             </tr>
           </OnyxTable>
+
           <OnyxTable>
             <template #head>
               <tr>

packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue

@@ -10,6 +10,7 @@ import type { OnyxTableProps } from "./types";
 const props = withDefaults(defineProps<OnyxTableProps>(), {
   striped: false,
   withVerticalBorders: false,
+  withPageScrolling: false,
 });
 
 const slots = defineSlots<{
@@ -39,7 +40,10 @@ const isEmptyMessage = computed(() => t.value("table.empty"));
 
 <template>
   <div class="onyx-table-wrapper">
-    <div class="onyx-table-wrapper__scroll-container" tabindex="0">
+    <div
+      :class="{ 'onyx-table-wrapper__scroll-container': !props.withPageScrolling }"
+      :tabindex="props.withPageScrolling ? undefined : 0"
+    >
       <table
         class="onyx-table onyx-text"
         :class="[
@@ -48,7 +52,7 @@ const isEmptyMessage = computed(() => t.value("table.empty"));
           densityClass,
         ]"
       >
-        <thead v-if="slots.head">
+        <thead v-if="slots.head" class="onyx-table__header">
           <slot name="head"></slot>
         </thead>
         <tbody>
@@ -212,7 +216,8 @@ $border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
       }
     }
 
-    thead {
+    &__header,
+    &__header th {
       position: sticky;
       top: 0;
       z-index: var(--onyx-z-index-sticky-content);

packages/sit-onyx/src/components/OnyxTable/types.ts

@@ -9,4 +9,11 @@ export type OnyxTableProps = DensityProp & {
    * If `true`, vertical borders will be displayed in addition to the default horizontal borders.
    */
   withVerticalBorders?: boolean;
+  /**
+   * Whether the table will only scroll in a page context and will not scroll internally.
+   * - `false` => the table header will stick to the top of the **table** when it has a limited height
+   * - `true` => the table header will stick to the top of the **page** when scrolling the page
+   * - Warning: Don't set a max-height/width on the table when `withPageScrolling` is set.
+   */
+  withPageScrolling?: boolean;
 };