review findings

Author: JoCa96

packages/headless/src/composables/dataGrid/createDataGrid.ts

@@ -291,7 +291,6 @@ export const createDataGrid = createBuilder(
           () =>
             ({
               ref: tableElement,
-              // onFocusinCapture,
               onFocusin,
               onKeydown,
               role: "grid",

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

@@ -107,7 +107,6 @@ watch(
         columnGroups,
         async,
         skeleton,
-        editable: true,
       },
     );
     disposeWatcher?.();

packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.stories.ts

@@ -68,7 +68,7 @@ function getDummyCell(
   return {
     component: (props) => h("span", props.row.id.toString()),
     props: {
-      column: column,
+      column,
       row: {
         id,
       },

packages/sit-onyx/src/components/OnyxDataGrid/OnyxDataGridRenderer/OnyxDataGridRenderer.vue

@@ -34,7 +34,6 @@ const columnStyle = computed(() => {
   <OnyxTable
     class="onyx-data-grid"
     v-bind="tableProps"
-    :style="columnStyle"
     :scroll-container-attrs="mergeVueProps(props.scrollContainerAttrs, { style: columnStyle })"
   >
     <template #head>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRaw, watch } from "vue";
+import { computed, ref } from "vue";
 import { DataGridFeatures, OnyxDataGrid, type ColumnConfig } from "../../../index.js";
 import OnyxButton from "../../OnyxButton/OnyxButton.vue";
 import OnyxCodeTab from "../../OnyxCodeTab/OnyxCodeTab.vue";
@@ -100,21 +100,11 @@ const features = [
   }),
 ];
 
-const log = ref("");
+const log = computed(() => JSON.stringify(editState.value, null, 2));
+
 const reset = () => {
   editState.value = {};
-  log.value = "";
 };
-
-watch(
-  editState,
-  () => {
-    log.value = JSON.stringify(toRaw(editState.value), null, 2);
-  },
-  {
-    deep: true,
-  },
-);
 </script>
 
 <template>

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

@@ -24,6 +24,7 @@ export const Pagination: Story = {
 };
 
 export const Editing: Story = {
+  tags: ["new:feature"],
   ...createAdvancedStoryExample("OnyxDataGrid", "EditingExample"),
 };
 

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

@@ -28,7 +28,6 @@ export const BASE_MUTATION_ORDER =
 export const BASE_FEATURE = (options?: BaseFeatureOptions) =>
   createFeature(({ skeleton }) => {
     const rowCount = ref(0);
-    const selectedCell = ref();
 
     const headline = computed(() => {
       const _headline = toValue(options?.headline);
@@ -41,7 +40,7 @@ export const BASE_FEATURE = (options?: BaseFeatureOptions) =>
 
     return {
       name: BASE_FEATURE_SYMBOL,
-      watch: [skeleton, headline, selectedCell],
+      watch: [skeleton, headline],
       modifyColumns: {
         func: (columns) => {
           if (!skeleton.value) return [...columns];

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

@@ -426,7 +426,6 @@ export type UseDataGridFeaturesOptions<
   i18n: OnyxI18n;
   columnGroups: MaybeRefOrGetter<TColumnGroup>;
   async: Readonly<Ref<boolean>>;
-  editable: MaybeRefOrGetter<boolean>;
   skeleton: DataGridFeatureContext["skeleton"];
 };
 

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

@@ -54,7 +54,7 @@ const headlineId = computed(() => (slots.headline ? _headlineId : undefined));
     >
       <table
         ref="table"
-        v-bind="tableAttrs"
+        v-bind="props.tableAttrs"
         :class="[
           'onyx-table',
           'onyx-text',
@@ -79,7 +79,8 @@ const headlineId = computed(() => (slots.headline ? _headlineId : undefined));
               :key="group.key"
               :colspan="group.span"
               scope="colgroup"
-              class="onyx-table__colgroup"
+              :class="['onyx-table__colgroup', group.class]"
+              :style="group.style"
             >
               {{ group.header }}
             </th>
@@ -159,7 +160,7 @@ $border: var(--onyx-1px-in-rem) solid var(--onyx-color-component-border-neutral)
     display: flex;
     flex-direction: column;
     gap: var(--onyx-density-xs);
-    font-family: var(--onyx-font-family);
+    font-family: var(--onyx-font-family-paragraph);
     color: var(--onyx-color-text-icons-neutral-intense);
 
     &__container {