From b01a711a9a6f4302a1e89c60b89dc3b499219f57 Mon Sep 17 00:00:00 2001
From: Maja Zarkova <60856270+MajaZarkova@users.noreply.github.com>
Date: Tue, 14 Jan 2025 11:33:01 +0200
Subject: [PATCH] feat(demo-app): Add data grid example in the demo-app (#2487)

<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #2293

- Add example in the demo-app
---
 apps/demo-app/src/views/DataGridView.vue | 49 ++++++++++++++++++++++--
 packages/sit-onyx/src/index.ts           |  1 +
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/apps/demo-app/src/views/DataGridView.vue b/apps/demo-app/src/views/DataGridView.vue
index 325dae8aa2..4336001e7e 100644
--- a/apps/demo-app/src/views/DataGridView.vue
+++ b/apps/demo-app/src/views/DataGridView.vue
@@ -1,8 +1,19 @@
 <script setup lang="ts">
-import { DataGridFeatures, OnyxDataGrid, OnyxHeadline, OnyxPageLayout, OnyxSwitch } from "sit-onyx";
-import { computed, ref } from "vue";
+import sort from "@sit-onyx/icons/sort.svg?raw";
+import {
+  DataGridFeatures,
+  OnyxDataGrid,
+  OnyxHeadline,
+  OnyxMenuItem,
+  OnyxPageLayout,
+  OnyxSwitch,
+  OnyxSystemButton,
+  createFeature,
+} from "sit-onyx";
+import { computed, h, ref } from "vue";
 
 const sortingEnabled = ref(false);
+const moreActions = ref(false);
 
 const data = [
   { id: 1, name: "John Doe", age: 30 },
@@ -12,11 +23,40 @@ const data = [
   { id: 5, name: "Asperiks Kafelon", age: 99 },
 ];
 
-const features = computed(() => {
+const dummyFeature = createFeature(() => ({
+  name: Symbol("More actions"),
+  watch: [],
+  header: {
+    actions: () => [
+      {
+        iconComponent: h(OnyxSystemButton, {
+          label: "Column options",
+          icon: sort,
+          color: "medium",
+        }),
+        menuItems: [h(OnyxMenuItem, () => "Pin column"), h(OnyxMenuItem, () => "Unpin column")],
+      },
+      {
+        iconComponent: h(OnyxSystemButton, {
+          label: "Column options",
+          icon: sort,
+          color: "medium",
+        }),
+        menuItems: [h(OnyxMenuItem, () => "Remove column")],
+      },
+    ],
+  },
+}));
+
+const dataFeatures = computed(() => {
   const enabled = [];
   if (sortingEnabled.value) {
     enabled.push(DataGridFeatures.useSorting());
   }
+
+  if (moreActions.value) {
+    enabled.push(dummyFeature());
+  }
   return enabled;
 });
 </script>
@@ -27,8 +67,9 @@ const features = computed(() => {
       <OnyxHeadline is="h1">Data-Grid example</OnyxHeadline>
       <section class="data-grid-settings">
         <OnyxSwitch v-model="sortingEnabled" label="Enable sorting" />
+        <OnyxSwitch v-model="moreActions" label="Enable more actions" />
       </section>
-      <OnyxDataGrid :features :data :columns="['name', 'age']" />
+      <OnyxDataGrid :features="dataFeatures" :data :columns="['name', 'age']" />
     </div>
   </OnyxPageLayout>
 </template>
diff --git a/packages/sit-onyx/src/index.ts b/packages/sit-onyx/src/index.ts
index 1d5a1140ee..dd45fed885 100644
--- a/packages/sit-onyx/src/index.ts
+++ b/packages/sit-onyx/src/index.ts
@@ -38,6 +38,7 @@ export { default as OnyxDataGrid } from "./components/OnyxDataGrid/OnyxDataGrid.
 export * from "./components/OnyxDataGrid/types";
 
 export * as DataGridFeatures from "./components/OnyxDataGrid/features/all";
+export * from "./components/OnyxDataGrid/features/index.ts";
 
 export { default as OnyxDatePicker } from "./components/OnyxDatePicker/OnyxDatePicker.vue";
 export * from "./components/OnyxDatePicker/types";