fix: use slot content for expandable rows in FInteractiveTable (refs …

…SFKUI-6935) fixes #157
Forsakringskassan · Jan 10, 2025 · 479942f · 479942f
1 parent 72d0241
commit 479942f
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 55 deletions.
diff --git a/docs/components/table-and-list/table.md b/docs/components/table-and-list/table.md
@@ -55,31 +55,8 @@ Med expanderbara rader går det att skapa ytterligare tabellrader som visas när
 För att skapa expanderbart innehåll som följer existerande kolumner så krävs det att `expandable-attribute` är satt och `expandable` slot inte används.
 Innehållet måste då följa samma datastruktur som ordinarie rader.
 
-Se nedan exempel av data som kan användas för att generera en expanderbar rad som innehåller två tabellrader.
-
-```js static
-const myExpandableRows = [
-    {
-        id: "1",
-        name: "Utbetalning",
-        date: "2023-10-11",
-        sum: 1200,
-        expandable: [
-            {
-                id: "1a",
-                name: "Barnbidrag",
-                date: "2023-10-11",
-                sum: 200,
-            },
-            {
-                id: "1b",
-                name: "Övrig ersättning",
-                date: "2023-10-11",
-                sum: 1000,
-            },
-        ],
-    },
-];
+```import
+FInteractiveTableExpandableExample.vue
 ```
 
 För att istället skapa expanderbara rader med valfritt innehåll används `expandable` slot.

diff --git a/etc/vue.api.md b/etc/vue.api.md
@@ -676,8 +676,6 @@ export interface EventBusMap {
 
 // @public (undocumented)
 export interface ExpandableTable {
-    // (undocumented)
-    expandableColumnClasses(column: FTableColumnData, index: number): string[];
     // (undocumented)
     expandableRowClasses(row: ListItem, index: number): string[];
     // (undocumented)

diff --git a/packages/design/src/components/table/_table.scss b/packages/design/src/components/table/_table.scss
@@ -234,6 +234,10 @@ $table-input-offset-horizontal: 0.25rem;
             &--collapsed {
                 visibility: collapse;
             }
+
+            td:nth-child(2) {
+                padding-left: size.$padding-150;
+            }
         }
 
         td,
@@ -265,10 +269,6 @@ $table-input-offset-horizontal: 0.25rem;
                 padding: densify(0.2rem) 0.2rem;
             }
 
-            &--indented {
-                padding-left: size.$padding-150;
-            }
-
             // remove margin and reduce padding on buttons
             &--action .button--discrete {
                 border-radius: var(--f-button-discrete-table-column-action-border-radius);

diff --git a/packages/vue/src/components/FInteractiveTable/FInteractiveTable.vue b/packages/vue/src/components/FInteractiveTable/FInteractiveTable.vue
@@ -101,13 +101,7 @@
                             <td v-if="selectable" class="table__column--selectable"></td>
 
                             <template v-if="!hasExpandableSlot">
-                                <td
-                                    v-for="(column, columnIndex) in columns"
-                                    :key="`${rowKey(expandableRow)}${column.name}`"
-                                    :class="expandableColumnClasses(column, columnIndex)"
-                                >
-                                    {{ expandableRow[column.name] }}
-                                </td>
+                                <slot v-bind="{ row: expandableRow }"></slot>
                             </template>
                             <td v-else class="table__column table__column--indented" :colspan="columns.length">
                                 <!--

diff --git a/...ages/vue/src/components/FInteractiveTable/examples/FInteractiveTableExpandableExample.vue b/...ages/vue/src/components/FInteractiveTable/examples/FInteractiveTableExpandableExample.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { FInteractiveTable, FTableColumn } from "@fkui/vue";
+
+const rows = [
+    {
+        id: "1",
+        name: "Utbetalning",
+        date: "2023-09-27",
+        sum: 1200,
+        myExpandableRow: [
+            {
+                id: "1a",
+                name: "Barnbidrag",
+                date: "2023-09-25",
+                sum: 200,
+            },
+            {
+                id: "1b",
+                name: "Övrig ersättning",
+                date: "2023-09-27",
+                sum: 1000,
+            },
+        ],
+    },
+    {
+        id: "2",
+        name: "Utbetalning",
+        date: "2023-12-25",
+        sum: 1000,
+        myExpandableRow: [
+            {
+                id: "2a",
+                name: "Barnbidrag",
+                date: "2023-12-25",
+                sum: 1000,
+            },
+        ],
+    },
+];
+</script>
+
+<template>
+    <f-interactive-table :rows expandable-attribute="myExpandableRow" key-attribute="id">
+        <template #caption> Expanderbara rader </template>
+        <template #default="{ row }">
+            <f-table-column name="compensation" title="Ersättning"> {{ row.name }} </f-table-column>
+            <f-table-column name="id" title="Id" shrink> {{ row.id }} </f-table-column>
+            <f-table-column name="date" title="Datum" type="date"> {{ row.date }} </f-table-column>
+            <f-table-column name="amount" title="Summa" type="numeric">
+                {{ row.sum }} kronor
+            </f-table-column>
+        </template>
+    </f-interactive-table>
+</template>
diff --git a/packages/vue/src/components/FInteractiveTable/useExpandableTable.ts b/packages/vue/src/components/FInteractiveTable/useExpandableTable.ts
@@ -1,6 +1,5 @@
 import { type ComputedRef, type Ref, type Slots, ref, computed } from "vue";
 import { type ListArray, type ListItem } from "../../types";
-import { type FTableColumnData } from "../FTableColumn";
 import { itemEquals, includeItem } from "../../utils";
 
 /**
@@ -14,7 +13,6 @@ export interface ExpandableTable {
     isExpanded(row: ListItem): boolean;
     rowAriaExpanded(row: ListItem): boolean | undefined;
     expandableRowClasses(row: ListItem, index: number): string[];
-    expandableColumnClasses(column: FTableColumnData, index: number): string[];
     getExpandableDescribedby(row: ListItem): string | undefined;
     expandableRows(row: ListItem): ListArray | undefined;
     hasExpandableContent(row: ListItem): boolean;
@@ -91,20 +89,6 @@ export function useExpandableTable(
         return ["table__expandable-row", ...border, ...expanded];
     }
 
-    function expandableColumnClasses(
-        column: FTableColumnData,
-        index: number,
-    ): string[] {
-        const indented = index === 0 ? ["table__column--indented"] : [];
-
-        return [
-            "table__column",
-            `table__column--${column.type}`,
-            column.size,
-            ...indented,
-        ];
-    }
-
     function getExpandableDescribedby(row: ListItem): string | undefined {
         if (!isExpandableTable) {
             return undefined;
@@ -145,7 +129,6 @@ export function useExpandableTable(
         isExpanded,
         rowAriaExpanded,
         expandableRowClasses,
-        expandableColumnClasses,
         getExpandableDescribedby,
         expandableRows,
         hasExpandableContent,