diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
index 78e2dbae00..0c449f2428 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/BaseResource.vue
@@ -70,6 +70,8 @@ export default {
             formGroupsDisplayMode: props.formGroupsDisplayMode || null,
             getToolbarButtons: props.getToolbarButtons || (() => []),
             appendToShow: props.appendToShow || [],
+            nameAttr: props.nameAttr || null,
+            idAttr: props.idAttr || null,
         };
 
         return {
@@ -407,121 +409,6 @@ export default {
                 return [...acc, groupInfo];
             }, []);
         },
-        getTableColumns(resourceAttrs) {
-            let get_lib_from_av = this.get_lib_from_av;
-            let idAttr = this.idAttr;
-
-            const columns = resourceAttrs
-                ?.filter(attr => attr.showInTable)
-                .reduce((acc, attr, i) => {
-                    if (typeof attr.showInTable === "object") {
-                        acc.push(attr.showInTable);
-                        return acc;
-                    }
-                    if (attr.name === this.idAttr) {
-                        acc.push({
-                            title: attr.label,
-                            data: attr.name,
-                            searchable: true,
-                            orderable: true,
-                            render: function (data, type, row, meta) {
-                                return (
-                                    '<a role="button" class="show">' +
-                                    escape_str(row[attr.name]) +
-                                    "</a>"
-                                );
-                            },
-                        });
-                        return acc;
-                    }
-                    if (attr.name === this.nameAttr) {
-                        acc.push({
-                            title: attr.label,
-                            data: attr.name,
-                            searchable: true,
-                            orderable: true,
-                            render: function (data, type, row, meta) {
-                                return (
-                                    '<a role="button" class="show">' +
-                                    escape_str(row[attr.name]) +
-                                    "</a>"
-                                );
-                            },
-                        });
-                        return acc;
-                    }
-                    if (attr.type === "vendor") {
-                        acc.push({
-                            title: attr.label,
-                            data: attr.name,
-                            searchable: true,
-                            orderable: true,
-                            render: function (data, type, row, meta) {
-                                return row.vendor_id != undefined
-                                    ? '<a href="/cgi-bin/koha/acquisition/vendors/' +
-                                          row.vendor_id +
-                                          '">' +
-                                          escape_str(row.vendor.name) +
-                                          "</a>"
-                                    : "";
-                            },
-                        });
-                        return acc;
-                    }
-                    if (attr.type === "select" && attr.avCat) {
-                        acc.push({
-                            title: attr.label,
-                            data: attr.name,
-                            searchable: true,
-                            orderable: true,
-                            render: function (data, type, row, meta) {
-                                return get_lib_from_av(
-                                    attr.avCat,
-                                    row[`${attr.name}`]
-                                );
-                            },
-                        });
-                        return acc;
-                    }
-                    if (attr.type === "date") {
-                        acc.push({
-                            title: attr.label,
-                            data: attr.name,
-                            searchable: true,
-                            orderable: true,
-                            render: function (data, type, row, meta) {
-                                return $date(row[`${attr.name}`]);
-                            },
-                        });
-                        return acc;
-                    }
-                    if (attr.type === "boolean" || attr.type === "checkbox") {
-                        acc.push({
-                            title: attr.label,
-                            data: attr.name,
-                            searchable: true,
-                            orderable: true,
-                            render: function (data, type, row, meta) {
-                                return escape_str(
-                                    row[`${attr.name}`] ? __("Yes") : __("No")
-                                );
-                            },
-                        });
-                        return acc;
-                    }
-                    if (attr.showInTable) {
-                        acc.push({
-                            title: attr.label,
-                            data: attr.name,
-                            searchable: true,
-                            orderable: true,
-                        });
-                        return acc;
-                    }
-                    return acc;
-                }, []);
-            return columns;
-        },
     },
     computed: {
         /**
@@ -587,9 +474,6 @@ export default {
     created() {
         if (this.resourceAttrs) {
             this.populateAttributesWithAuthorisedValues(this.resourceAttrs);
-            this.tableOptions.columns = this.getTableColumns(
-                this.resourceAttrs
-            );
         }
     },
     name: "BaseResource",
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
index 32d95dc08c..19b2bd93e6 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ResourceList.vue
@@ -21,7 +21,7 @@
         <div v-if="resourceCount > 0" class="page-section">
             <KohaTable
                 ref="table"
-                v-bind="tableOptions"
+                v-bind="tableOptionsWithColumns"
                 :searchable_additional_fields="searchable_additional_fields"
                 :searchable_av_options="searchable_av_options"
                 @show="goToResourceShow"
@@ -39,7 +39,7 @@
 <script>
 import Toolbar from "./Toolbar.vue";
 import ToolbarButton from "./ToolbarButton.vue";
-import { ref } from "vue";
+import { ref, inject } from "vue";
 import { APIClient } from "../fetch/api-client.js";
 import KohaTable from "./KohaTable.vue";
 
@@ -48,8 +48,12 @@ export default {
     setup(props) {
         const table = ref();
 
+        const AVStore = inject("AVStore");
+        const { get_lib_from_av } = AVStore;
+
         return {
             table,
+            get_lib_from_av,
         };
     },
     props: {
@@ -62,12 +66,12 @@ export default {
         doResourceDelete: Function,
         goToResourceAdd: Function,
         doResourceSelect: Function,
-        // tableFilters: { type: Array, default: [] },
-        // getFilters: Function,
-        // filterTable: Function | null,
         resourceName: String,
         hasAdditionalFields: { type: Boolean, default: false },
         extendedAttributesResourceType: String,
+        resourceAttrs: Array,
+        nameAttr: String,
+        idAttr: String,
         getToolbarButtons: {
             type: Function,
             default: () => [],
@@ -145,6 +149,125 @@ export default {
                     });
                 });
         },
+        getTableColumns(resourceAttrs) {
+            let get_lib_from_av = this.get_lib_from_av;
+
+            const columns = resourceAttrs
+                ?.filter(attr => attr.showInTable)
+                .reduce((acc, attr, i) => {
+                    if (typeof attr.showInTable === "object") {
+                        acc.push(attr.showInTable);
+                        return acc;
+                    }
+                    if (attr.name === this.idAttr) {
+                        acc.push({
+                            title: attr.label,
+                            data: attr.name,
+                            searchable: true,
+                            orderable: true,
+                            render: function (data, type, row, meta) {
+                                return (
+                                    '<a role="button" class="show">' +
+                                    escape_str(row[attr.name]) +
+                                    "</a>"
+                                );
+                            },
+                        });
+                        return acc;
+                    }
+                    if (attr.name === this.nameAttr) {
+                        acc.push({
+                            title: attr.label,
+                            data: attr.name,
+                            searchable: true,
+                            orderable: true,
+                            render: function (data, type, row, meta) {
+                                return (
+                                    '<a role="button" class="show">' +
+                                    escape_str(row[attr.name]) +
+                                    "</a>"
+                                );
+                            },
+                        });
+                        return acc;
+                    }
+                    if (attr.type === "vendor") {
+                        acc.push({
+                            title: attr.label,
+                            data: attr.name,
+                            searchable: true,
+                            orderable: true,
+                            render: function (data, type, row, meta) {
+                                return row.vendor_id != undefined
+                                    ? '<a href="/cgi-bin/koha/acquisition/vendors/' +
+                                          row.vendor_id +
+                                          '">' +
+                                          escape_str(row.vendor.name) +
+                                          "</a>"
+                                    : "";
+                            },
+                        });
+                        return acc;
+                    }
+                    if (attr.type === "select" && attr.avCat) {
+                        acc.push({
+                            title: attr.label,
+                            data: attr.name,
+                            searchable: true,
+                            orderable: true,
+                            render: function (data, type, row, meta) {
+                                return get_lib_from_av(
+                                    attr.avCat,
+                                    row[`${attr.name}`]
+                                );
+                            },
+                        });
+                        return acc;
+                    }
+                    if (attr.type === "date") {
+                        acc.push({
+                            title: attr.label,
+                            data: attr.name,
+                            searchable: true,
+                            orderable: true,
+                            render: function (data, type, row, meta) {
+                                return $date(row[`${attr.name}`]);
+                            },
+                        });
+                        return acc;
+                    }
+                    if (attr.type === "boolean" || attr.type === "checkbox") {
+                        acc.push({
+                            title: attr.label,
+                            data: attr.name,
+                            searchable: true,
+                            orderable: true,
+                            render: function (data, type, row, meta) {
+                                return escape_str(
+                                    row[`${attr.name}`] ? __("Yes") : __("No")
+                                );
+                            },
+                        });
+                        return acc;
+                    }
+                    acc.push({
+                        title: attr.label,
+                        data: attr.name,
+                        searchable: true,
+                        orderable: true,
+                    });
+                    return acc;
+                }, []);
+            return columns;
+        },
+    },
+    computed: {
+        tableOptionsWithColumns() {
+            this.tableOptions.columns = this.getTableColumns(
+                this.resourceAttrs
+            );
+            return this.tableOptions;
+        },
     },
     components: { Toolbar, ToolbarButton, KohaTable },
     name: "ResourcesList",