Custom record field rendering

Customizing how AdminForth renders the cells with record values

Let's change how AdminForth renders the number of rooms in the 'list' and 'show' views. We will render '🟨' for each room and then we will print square_meter at the same cells.

Create directory custom. Create a file RoomsCell.vue in it:

./custom/RoomsCell.vue

<template>
  <div class="flex items-center">
    <span v-for="room in record.number_of_rooms">
      🟨
    </span>
      
    {{ record.square_meter }} m²
  </div>
</template>

<script setup>
defineProps({
  record: Object
});
</script>

Now you can use this component in the configuration of the resource:

./index.ts

{
  ...
  resourceId: 'aparts',
  columns: [
    ...
    {
      ...
      name: 'number_of_rooms',
     components: {
       show: '@@/RoomsCell.vue',
       list: '@@/RoomsCell.vue',
     }
    },
    ...
  ],
  ...
}

Here is how it looks:

In very similar way you can render how cell is rendered in 'edit' and 'create' view. You can use it for creating custom editors for the fields. Check component specs to understand which props are passed to the component

Parametrizing the custom components

Sometimes you need to render same component with different parameters. You can use full component declaration

./index.ts

{
  ...
  resourceId: 'aparts',
  columns: [
    ...
    {
      ...
      name: 'number_of_rooms',
      components: {
       show: '@@/RoomsCell.vue',
       show: {
         file: '@@/RoomsCell.vue',
         meta: {
           filler: '🟨',
         },
       },
       list: '@@/RoomsCell.vue',
       list: {
         file: '@@/RoomsCell.vue',
         meta: {
           filler: '🟦',
          },
        }
      }
    },
    ...
  ],
  ...
}

Now our component can read filler from meta prop:

./custom/RoomsCell.vue

<template>
  <div class="flex items-center">
    <span v-for="room in record.number_of_rooms">
-     🟨
+     {{ meta.filler }}
    </span>
    {{ room.square_meter }} m²
  </div>
</template>

<script setup>
defineProps({
  record: Object,
+ meta: Object
});
</script>