feat: add tableRowReplace injection for custom row rendering in list view

Author: NoOne7135

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -396,6 +396,70 @@ cd custom
 npm i @iconify-prerendered/vue-mdi
 ```
 
+## List table row replace injection
+
+`tableRowReplace` lets you fully control how each list table row is rendered. Instead of the default table `<tr>…</tr>` markup, AdminForth will mount your Vue component per record and use its returned DOM to display the row. Use this when you need custom row layouts, extra controls, or conditional styling that goes beyond column-level customization.
+
+Supported forms:
+- Single component: `pageInjections.list.tableRowReplace = '@@/MyRowRenderer.vue'`
+- Object form with meta: `pageInjections.list.tableRowReplace = { file: '@@/MyRowRenderer.vue', meta: { /* optional */ } }`
+- If an array is provided, the first element is used.
+
+Example configuration:
+
+```ts title="/resources/apartments.ts"
+{
+  resourceId: 'aparts',
+  ...
+  options: {
+    pageInjections: {
+      list: {
+        tableRowReplace: {
+          file: '@@/ApartRowRenderer.vue',
+          meta: {
+            // You can pass any meta your component may read
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Minimal component example (decorate default row with a border):
+
+```vue title="/custom/ApartRowRenderer.vue"
+<template>
+  <tr class="border border-gray-200 dark:border-gray-700 rounded-sm">
+    <slot />
+  </tr>
+  
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+const props = defineProps<{
+  record: any
+  resource: any
+  meta: any
+}>();
+</script>
+```
+
+Component contract:
+- Inputs
+  - `record`: the current record object
+  - `resource`: the resource config object
+  - `meta`: the meta object passed in the injection config
+- Slots
+  - Default slot: the table’s standard row content (cells) will be projected here. Your component can wrap or style it.
+- Output
+  - Render a full `<tr>…</tr>` fragment. For simple decoration, render a single `<td :colspan="columnsCount">` and wrap `<slot />` inside your layout.
+
+Notes and tips:
+- Requirements:
+  - Required <tr></tr> structure around </slot>
+
 ## List table beforeActionButtons
 
 `beforeActionButtons` allows injecting one or more compact components into the header bar of the list page, directly to the left of the default action buttons (`Create`, `Filter`, bulk actions, three‑dots menu). Use it for small inputs (quick search, toggle, status chip) rather than large panels.

adminforth/modules/configValidator.ts

@@ -869,7 +869,7 @@ export default class ConfigValidator implements IConfigValidator {
       // Validate page-specific allowed injection keys
       const possiblePages = ['list', 'show', 'create', 'edit'];
       const allowedInjectionsByPage: Record<string, string[]> = {
-        list: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'beforeActionButtons', 'bottom', 'threeDotsDropdownItems', 'customActionIcons', 'tableBodyStart'],
+        list: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'beforeActionButtons', 'bottom', 'threeDotsDropdownItems', 'customActionIcons', 'tableBodyStart', 'tableRowReplace'],
         show: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems'],
         edit: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'saveButton'],
         create: ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom', 'threeDotsDropdownItems', 'saveButton'],

adminforth/spa/src/components/ResourceListTableVirtual.vue

@@ -93,14 +93,21 @@
         </tr>
 
         <!-- Visible rows -->
-        <tr @click="onClick($event,row)" 
-          v-for="(row, rowI) in visibleRows" 
-          :key="`row_${row._primaryKeyValue}`"
-          ref="rowRefs"
-          class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
-          :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
-          @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
-        >
+        <component
+            v-else
+            v-for="(row, rowI) in visibleRows"
+            :is="tableRowReplaceInjection ? getCustomComponent(tableRowReplaceInjection) : 'tr'"
+            :key="`row_${row._primaryKeyValue}`"
+            :record="row"
+            :resource="resource"
+            :adminUser="coreStore.adminUser"
+            :meta="tableRowReplaceInjection ? tableRowReplaceInjection.meta : undefined"
+            @click="onClick($event, row)"
+            ref="rowRefs"
+            class="list-table-body-row bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
+            :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
+            @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
+         >
         <td class="w-4 p-4 cursor-default sticky-column bg-lightListTableHeading dark:bg-darkListTableHeading" @click="(e)=>e.stopPropagation()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
@@ -224,7 +231,7 @@
               </template>
             </div>
           </td>
-        </tr>
+        </component>
 
         <!-- Bottom spacer -->
         <tr v-if="totalHeight > 0">

adminforth/spa/src/views/ListView.vue

@@ -143,6 +143,9 @@
           ? [coreStore.resourceOptions.pageInjections.list.tableBodyStart]
           : []
       "
+      :tableRowReplaceInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace)
+        ? coreStore.resourceOptions.pageInjections.list.tableRowReplace[0]
+        : coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace || null"
       :container-height="1100"
       :item-height="52.5"
       :buffer-size="listBufferSize"
@@ -173,6 +176,9 @@
           ? [coreStore.resourceOptions.pageInjections.list.tableBodyStart]
           : []
       "
+      :tableRowReplaceInjection="Array.isArray(coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace)
+        ? coreStore.resourceOptions.pageInjections.list.tableRowReplace[0]
+        : coreStore.resourceOptions?.pageInjections?.list?.tableRowReplace || null"
     />
 
     <component