add Example, documentation and do some refactorings

Author: Niel Rohling

packages/sit-onyx/src/components/OnyxDataGrid/examples/ExpandableRowExample.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { h } from "vue";
+import { OnyxDataGrid, OnyxHeadline, type ColumnConfig } from "../../../index.js";
+import { useExpandableRows } from "../features/all.js";
+
+type TEntry = {
+  id: number;
+  name: string;
+  age: number;
+};
+
+const data: TEntry[] = [
+  { id: 1, name: "Alice", age: 30 },
+  { id: 2, name: "Charlie", age: 35 },
+  { id: 3, name: "Bob", age: 25 },
+  { id: 4, name: "Robin", age: 28 },
+  { id: 5, name: "John", age: 42 },
+];
+
+const columns: ColumnConfig<TEntry>[] = [
+  { key: "name", label: "Name" },
+  { key: "age", label: "Age", type: "number" },
+];
+
+const features = [
+  useExpandableRows<TEntry>({
+    detailsComponent: (row) => h(OnyxHeadline, { is: "h3" }, () => `Details for ${row.name}`),
+  }),
+];
+</script>
+
+<template>
+  <OnyxDataGrid headline="Example headline" :columns :data :features />
+</template>

packages/sit-onyx/src/components/OnyxDataGrid/examples/OnyxDataGridFeatureExamples.stories.ts

@@ -28,6 +28,10 @@ export const Editing: Story = {
   ...createAdvancedStoryExample("OnyxDataGrid", "EditingExample"),
 };
 
+export const ExpandableRow: Story = {
+  ...createAdvancedStoryExample("OnyxDataGrid", "ExpandableRowExample"),
+};
+
 export const LazyLoading: Story = {
   ...createAdvancedStoryExample("OnyxDataGrid", "LazyLoadingExample"),
 };

packages/sit-onyx/src/components/OnyxDataGrid/features/expandableRows/expandableRows.ts

@@ -1,7 +1,7 @@
 import { iconChevronDown, iconChevronUp } from "@sit-onyx/icons";
-import OnyxSystemButton from "src/components/OnyxSystemButton/OnyxSystemButton.vue";
-import { DataGridFeatures } from "src/index.js";
-import { h, ref, type Ref } from "vue";
+import { h, ref } from "vue";
+import { DataGridFeatures } from "../../../../index.js";
+import OnyxSystemButton from "../../../OnyxSystemButton/OnyxSystemButton.vue";
 import { DataGridRowOptionsSymbol, type DataGridEntry } from "../../types.js";
 import { createFeature, type DataGridFeature, type InternalColumnConfig } from "../index.js";
 import type { UseExpandableRowsOptions } from "./types.js";
@@ -16,22 +16,28 @@ export const useExpandableRows = <TEntry extends DataGridEntry>(
   options: UseExpandableRowsOptions<TEntry>,
 ) =>
   createFeature(() => {
-    const expandedRows = ref<TEntry["id"][]>([]) as Ref<TEntry["id"][]>;
-    const baseCols = ref<Readonly<InternalColumnConfig<TEntry>[]>>([]);
-    const expandCol = {
-      key: EXPAND_BUTTON_COLUMN,
-      label: "",
-      type: { name: EXPAND_BUTTON_RENDERER },
-      width: "min-content",
+    const columnConfig = ref<Readonly<InternalColumnConfig<TEntry>[]>>([]);
+
+    const expandedRows = ref<Set<PropertyKey>>(new Set());
+    const toggleExpanded = (id: PropertyKey) => {
+      if (expandedRows.value.has(id)) {
+        expandedRows.value.delete(id);
+      } else {
+        expandedRows.value.add(id);
+      }
     };
 
+    /**
+     * Adds the detail row for expandedd columns
+     */
     const mapRow = (row: TEntry) => {
-      if (!expandedRows.value.includes(row.id))
+      if (!expandedRows.value.has(row.id))
         return [
+          // don't change anything
           {
             ...row,
             [DataGridRowOptionsSymbol]: {
-              columns: baseCols.value,
+              columns: columnConfig.value,
             },
           },
         ];
@@ -40,16 +46,18 @@ export const useExpandableRows = <TEntry extends DataGridEntry>(
           {
             ...row,
             [DataGridRowOptionsSymbol]: {
-              columns: baseCols.value,
+              columns: columnConfig.value,
             },
           },
+          // add hidden row to keep striped pattern
           {
             [DataGridRowOptionsSymbol]: {
               trAttributes: {
                 style: { display: "none" },
               },
             },
           },
+          // add row for details
           {
             ...row,
             id: row.id,
@@ -62,12 +70,21 @@ export const useExpandableRows = <TEntry extends DataGridEntry>(
 
     return {
       name: EXPANDABLE_ROWS_FEATURE,
-      watch: [expandedRows, baseCols],
+      watch: [expandedRows, columnConfig],
       modifyColumns: {
         func: (cols) => {
-          const config = [...cols, expandCol] as InternalColumnConfig<TEntry>[];
-          baseCols.value = config;
+          const config = [
+            {
+              key: EXPAND_BUTTON_COLUMN,
+              label: "",
+              type: { name: EXPAND_BUTTON_RENDERER },
+              width: "min-content",
+            },
+            ...cols,
+          ] as InternalColumnConfig<TEntry>[];
 
+          // Store the column configuration with column for expand button for later reference
+          columnConfig.value = config;
           return config;
         },
       },
@@ -80,29 +97,22 @@ export const useExpandableRows = <TEntry extends DataGridEntry>(
       typeRenderer: {
         [EXPAND_BUTTON_RENDERER]: DataGridFeatures.createTypeRenderer<object, TEntry>({
           cell: {
-            component: ({ row }) => {
-              const isExpanded = expandedRows.value.includes(row.id);
-
-              return h(OnyxSystemButton, {
-                icon: isExpanded ? iconChevronUp : iconChevronDown,
+            component: ({ row }) =>
+              h(OnyxSystemButton, {
+                icon: expandedRows.value.has(row.id) ? iconChevronUp : iconChevronDown,
                 label: "",
                 onClick: () => {
-                  if (isExpanded) {
-                    expandedRows.value = expandedRows.value.filter((id) => id !== row.id);
-                  } else {
-                    expandedRows.value = [...expandedRows.value, row.id];
-                  }
+                  toggleExpanded(row.id);
                 },
-              });
-            },
+              }),
           },
         }),
         [DETAILS_RENDERER]: DataGridFeatures.createTypeRenderer<object, TEntry>({
           cell: {
             tdAttributes: {
               colspan: 99,
             },
-            component: ({ row }) => options.renderDetails(row),
+            component: ({ row }) => options.detailsComponent(row),
           },
         }),
       },

packages/sit-onyx/src/components/OnyxDataGrid/features/expandableRows/types.ts

@@ -1,5 +1,11 @@
-import type { h } from "vue";
+import type { Component } from "vue";
 
+/**
+ * Options for rendering detail content for expanded rows.
+ */
 export type UseExpandableRowsOptions<TEntry> = {
-  renderDetails: (row: TEntry) => ReturnType<typeof h>;
+  /**
+   * Function to render the detail content.
+   */
+  detailsComponent: (row: TEntry) => Component;
 };