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

…SFKUI-6935) fixes #157
Forsakringskassan · Jan 15, 2025 · 76a1403 · 76a1403
1 parent 26ef65c
commit 76a1403
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 29 deletions.
diff --git a/docs/components/table-and-list/table.md b/docs/components/table-and-list/table.md
@@ -82,6 +82,10 @@ const myExpandableRows = [
 ];
 ```
 
+```import
+FInteractiveTableExpandableExample.vue
+```
+
 För att istället skapa expanderbara rader med valfritt innehåll används `expandable` slot.
 
 ```html static

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
@@ -265,7 +265,7 @@ $table-input-offset-horizontal: 0.25rem;
                 padding: densify(0.2rem) 0.2rem;
             }
 
-            &--indented {
+            &--placeholder + .table__column {
                 padding-left: size.$padding-150;
             }
 

diff --git a/packages/vue/src/components/FInteractiveTable/FInteractiveTable.spec.ts b/packages/vue/src/components/FInteractiveTable/FInteractiveTable.spec.ts
@@ -839,6 +839,49 @@ it("should call provided sort method when clicking columnheader that is registra
     `);
 });
 
+describe("Expandable rows", () => {
+    it("Should handle slot content in expanded rows", () => {
+        expect.assertions(3);
+        const TestComponent = defineComponent({
+            components: { FInteractiveTable, FTableColumn },
+            template: /* HTML */ `
+                <f-interactive-table
+                    :rows
+                    expandable-attribute="myExpandableRow"
+                    key-attribute="id"
+                >
+                    <template #caption> Expanderbara rader </template>
+                    <template #default="{ row }">
+                        <f-table-column name="names" title="Fruit">
+                            Juicy {{ row.name }}
+                        </f-table-column>
+                    </template>
+                </f-interactive-table>
+            `,
+            data() {
+                return {
+                    rows: [
+                        {
+                            id: 1,
+                            name: "apples",
+                            myExpandableRow: [
+                                { id: 11, name: "green apples" },
+                                { id: 12, name: "red apples" },
+                            ],
+                        },
+                    ],
+                };
+            },
+        });
+        const wrapper = mount(TestComponent);
+        const tr = wrapper.findAll("tr");
+        tr[0].element.click();
+        expect(tr[1].text()).toBe("Juicy apples");
+        expect(tr[2].text()).toBe("Juicy green apples");
+        expect(tr[3].text()).toBe("Juicy red apples");
+    });
+});
+
 describe("html-validate", () => {
     it("should require non-empty key-attribute attribute", () => {
         expect.assertions(2);

diff --git a/packages/vue/src/components/FInteractiveTable/FInteractiveTable.vue b/packages/vue/src/components/FInteractiveTable/FInteractiveTable.vue
@@ -92,22 +92,16 @@
                                 Expandable column placeholder.
                                 Expandable rows cannot be expanded.
                             -->
-                            <td></td>
+                            <td class="table__column--placeholder"></td>
 
                             <!--
                                 Selectable column placeholder.
                                 Expandable rows cannot be selected.
                             -->
-                            <td v-if="selectable" class="table__column--selectable"></td>
+                            <td v-if="selectable" class="table__column--placeholder"></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,