diff --git a/adminforth/index.ts b/adminforth/index.ts
index 05ede79c7..7acf79efa 100644
--- a/adminforth/index.ts
+++ b/adminforth/index.ts
@@ -230,6 +230,55 @@ class AdminForth implements IAdminForth {
     });
   }
 
+  validateRecordValues(resource: AdminForthResource, record: any): any {
+    // check if record with validation is valid
+    for (const column of resource.columns.filter((col) => col.name in record && col.validation)) {
+      let error = null;
+      if (column.isArray?.enabled) {
+        error = record[column.name].reduce((err, item) => {
+          return err || AdminForth.Utils.applyRegexValidation(item, column.validation);
+        }, null);
+      } else {
+        error = AdminForth.Utils.applyRegexValidation(record[column.name], column.validation);
+      }
+      if (error) {
+        return error;
+      }
+    }
+
+    // check if record with minValue or maxValue is within limits
+    for (const column of resource.columns.filter((col) => col.name in record
+      && ['integer', 'decimal', 'float'].includes(col.isArray?.enabled ? col.isArray.itemType : col.type)
+      && (col.minValue !== undefined || col.maxValue !== undefined))) {
+      if (column.isArray?.enabled) {
+        const error = record[column.name].reduce((err, item) => {
+          if (err) return err;
+
+          if (column.minValue !== undefined && item < column.minValue) {
+            return `Value in "${column.name}" must be greater than ${column.minValue}`;
+          }
+          if (column.maxValue !== undefined && item > column.maxValue) {
+            return `Value in "${column.name}" must be less than ${column.maxValue}`;
+          }
+
+          return null;
+        }, null);
+        if (error) {
+          return error;
+        }
+      } else {
+        if (column.minValue !== undefined && record[column.name] < column.minValue) {
+          return `Value in "${column.name}" must be greater than ${column.minValue}`;
+        }
+        if (column.maxValue !== undefined && record[column.name] > column.maxValue) {
+          return `Value in "${column.name}" must be less than ${column.maxValue}`;
+        }
+      }
+    }
+
+    return null;
+  }
+
 
   async discoverDatabases() {
     this.statuses.dbDiscover = 'running';
@@ -350,24 +399,9 @@ class AdminForth implements IAdminForth {
     { resource: AdminForthResource, record: any, adminUser: AdminUser, extra?: HttpExtra }
   ): Promise<{ error?: string, createdRecord?: any }> {
 
-    // check if record with validation is valid
-    for (const column of resource.columns.filter((col) => col.name in record && col.validation)) {
-      const error = AdminForth.Utils.applyRegexValidation(record[column.name], column.validation);
-      if (error) {
-        return { error };
-      }
-    }
-
-    // check if record with minValue or maxValue is within limits
-    for (const column of resource.columns.filter((col) => col.name in record
-      && ['integer', 'decimal', 'float'].includes(col.type)
-      && (col.minValue !== undefined || col.maxValue !== undefined))) {
-      if (column.minValue !== undefined && record[column.name] < column.minValue) {
-        return { error: `Value in "${column.name}" must be greater than ${column.minValue}` };
-      }
-      if (column.maxValue !== undefined && record[column.name] > column.maxValue) {
-        return { error: `Value in "${column.name}" must be less than ${column.maxValue}` };
-      }
+    const err = this.validateRecordValues(resource, record);
+    if (err) {
+      return { error: err };
     }
 
     // execute hook if needed
@@ -435,24 +469,9 @@ class AdminForth implements IAdminForth {
     { resource: AdminForthResource, recordId: any, record: any, oldRecord: any, adminUser: AdminUser, extra?: HttpExtra }
   ): Promise<{ error?: string }> {
 
-    // check if record with validation is valid
-    for (const column of resource.columns.filter((col) => col.name in record && col.validation)) {
-      const error = AdminForth.Utils.applyRegexValidation(record[column.name], column.validation);
-      if (error) {
-        return { error };
-      }
-    }
-
-    // check if record with minValue or maxValue is within limits
-    for (const column of resource.columns.filter((col) => col.name in record
-      && ['integer', 'decimal', 'float'].includes(col.type)
-      && (col.minValue !== undefined || col.maxValue !== undefined))) {
-      if (column.minValue !== undefined && record[column.name] < column.minValue) {
-        return { error: `Value in "${column.name}" must be greater than ${column.minValue}` };
-      }
-      if (column.maxValue !== undefined && record[column.name] > column.maxValue) {
-        return { error: `Value in "${column.name}" must be less than ${column.maxValue}` };
-      }
+    const err = this.validateRecordValues(resource, record);
+    if (err) {
+      return { error: err };
     }
 
     // remove editReadonly columns from record
diff --git a/adminforth/modules/configValidator.ts b/adminforth/modules/configValidator.ts
index e13a2392c..e35ef6077 100644
--- a/adminforth/modules/configValidator.ts
+++ b/adminforth/modules/configValidator.ts
@@ -22,6 +22,7 @@ import {
   AllowedActionsEnum,
   AdminForthComponentDeclaration , 
   AdminForthResourcePages,
+  AdminForthDataTypes,
 } from "../types/Common.js";
 import AdminForth from "adminforth";
 import { AdminForthConfigMenuItem } from "adminforth";
@@ -400,6 +401,35 @@ export default class ConfigValidator implements IConfigValidator {
         
         col.editingNote = typeof inCol.editingNote === 'string' ? { create: inCol.editingNote, edit: inCol.editingNote } : inCol.editingNote;
 
+        if (col.isArray !== undefined) {
+          if (typeof col.isArray !== 'object') {
+            errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray must be an object`);
+          } else if (col.isArray.enabled) {
+            if (col.primaryKey) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a primary key columns`);
+            }
+            if (col.masked) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a masked column`);
+            }
+            if (col.foreignResource) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray cannot be used for a foreignResource column`);
+            }
+
+            if (!col.type || col.type !== AdminForthDataTypes.JSON) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray can be used only with column type JSON`);
+            }
+
+            if (col.isArray.itemType === undefined) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray must have itemType`);
+            }
+            if (col.isArray.itemType === AdminForthDataTypes.JSON) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray itemType cannot be JSON`);
+            }
+            if (col.isArray.itemType === AdminForthDataTypes.RICHTEXT) {
+              errors.push(`Resource "${res.resourceId}" column "${col.name}" isArray itemType cannot be RICHTEXT`);
+            }
+          }
+        }
         if (col.foreignResource) {
 
           if (!col.foreignResource.resourceId) {
diff --git a/adminforth/spa/src/components/ColumnValueInput.vue b/adminforth/spa/src/components/ColumnValueInput.vue
new file mode 100644
index 000000000..98f458b07
--- /dev/null
+++ b/adminforth/spa/src/components/ColumnValueInput.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="flex">
+    <component
+      v-if="column?.components?.[props.source]?.file"
+      :is="getCustomComponent(column.components[props.source])"
+      :column="column"
+      :value="value"
+      @update:value="$emit('update:modelValue', $event)"
+      :meta="column.components[props.source].meta"
+      :record="currentValues"
+      @update:inValidity="$emit('update:inValidity', $event)"
+      @update:emptiness="$emit('update:emptiness', $event)"
+    />
+    <Select
+      v-else-if="column.foreignResource"
+      ref="input"
+      class="w-full"
+      :options="columnOptions[column.name] || []"
+      :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
+      :modelValue="value"
+      :readonly="column.editReadonly && source === 'edit'"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <Select
+      v-else-if="column.enum"
+      ref="input"
+      class="w-full"
+      :options="column.enum"
+      :modelValue="value"
+      :readonly="column.editReadonly && source === 'edit'"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <Select
+      v-else-if="(type || column.type) === 'boolean'"
+      ref="input"
+      class="w-full"
+      :options="getBooleanOptions(column)"
+      :modelValue="value"
+      :readonly="column.editReadonly && source === 'edit'"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <input 
+      v-else-if="['integer'].includes(type || column.type)"
+      ref="input"
+      type="number" 
+      step="1"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+      placeholder="0"
+      :readonly="column.editReadonly && source === 'edit'"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+    <CustomDatePicker
+      v-else-if="['datetime'].includes(type || column.type)"
+      ref="input"
+      :column="column"
+      :valueStart="value"
+      auto-hide
+      @update:valueStart="$emit('update:modelValue', $event)"
+      :readonly="column.editReadonly && source === 'edit'"
+    />
+    <input
+      v-else-if="['decimal', 'float'].includes(type || column.type)"
+      ref="input"
+      type="number"
+      step="0.1"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+      placeholder="0.0"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+      :readonly="column.editReadonly && source === 'edit'"
+    />
+    <textarea
+      v-else-if="['text', 'richtext'].includes(type || column.type)"
+      ref="input"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+      :placeholder="$t('Text')"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+      :readonly="column.editReadonly && source === 'edit'"
+    />
+    <textarea
+      v-else-if="['json'].includes(type || column.type)"
+      ref="input"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+      :placeholder="$t('Text')"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <input
+      v-else
+      ref="input"
+      :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+      :placeholder="$t('Text')"
+      :value="value"
+      @input="$emit('update:modelValue', $event.target.value)"
+      autocomplete="false"
+      data-lpignore="true"
+      readonly
+      @focus="onFocusHandler($event, column, source)"
+    >
+
+    <button
+      v-if="deletable"
+      type="button"
+      class="h-6 inset-y-2 right-0 flex items-center px-2 pt-4 z-index-100 focus:outline-none"
+      @click="$emit('delete')"
+    >
+      <IconTrashBinSolid class="w-6 h-6 text-gray-400"/>
+    </button>
+    <button
+      v-else-if="column.masked"
+      type="button"
+      @click="$emit('update:unmasked')"
+      class="h-6 inset-y-2 right-0 flex items-center px-2 pt-4 z-index-100 focus:outline-none"
+    >
+      <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]"/>
+      <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { IconEyeSlashSolid, IconEyeSolid, IconTrashBinSolid } from '@iconify-prerendered/vue-flowbite';
+  import CustomDatePicker from "@/components/CustomDatePicker.vue";
+  import Select from '@/afcl/Select.vue';
+  import { ref } from 'vue';
+  import { getCustomComponent } from '@/utils';
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    source: 'create' | 'edit',
+    column: any,
+    type: string,
+    value: any,
+    currentValues: any,
+    mode: string,
+    columnOptions: any,
+    unmasked: any,
+    deletable: boolean,
+  }>();
+
+  const input = ref(null);
+
+  const getBooleanOptions = (column: any) => {
+    const options: Array<{ label: string; value: boolean | null }> = [
+      { label: t('Yes'), value: true },
+      { label: t('No'), value: false },
+    ];
+    if (!column.required[props.mode]) {
+      options.push({ label: t('Unset'), value: null });
+    }
+    return options;
+  };
+
+  function onFocusHandler(event:FocusEvent, column:any, source:string, ) {
+    const focusedInput = event.target as HTMLInputElement; 
+    if(!focusedInput) return;  
+    if (column.editReadonly && source === 'edit') return;  
+    else {
+      focusedInput.removeAttribute('readonly'); 
+    }
+  }
+
+  function focus() {
+    if (input.value?.focus) input.value?.focus();
+  }
+
+  defineExpose({
+    focus,
+  });
+</script>
\ No newline at end of file
diff --git a/adminforth/spa/src/components/CustomDatePicker.vue b/adminforth/spa/src/components/CustomDatePicker.vue
index ec96ce0e2..f65462d86 100644
--- a/adminforth/spa/src/components/CustomDatePicker.vue
+++ b/adminforth/spa/src/components/CustomDatePicker.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="grid w-40 gap-4 mb-2">
       <div>
-        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
+        <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
 
         <div class="relative">
           <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
@@ -10,7 +10,7 @@
           </div>
 
           <input ref="datepickerStartEl"  type="text"
-                 class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
                 :placeholder="$t('Select date')" :disabled="readonly" />
           
         </div>
@@ -26,7 +26,7 @@
             </div>
 
             <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
                    value="00:00" :disabled="readonly" required/>
           </div>
         </div>
@@ -177,4 +177,12 @@ onBeforeUnmount(() => {
   removeChangeDateListener();
   destroyDatepickerElement();
 });
+
+function focus() {
+  datepickerStartEl.value?.focus();
+}
+
+defineExpose({
+  focus,
+});
 </script>
\ No newline at end of file
diff --git a/adminforth/spa/src/components/GroupsTable.vue b/adminforth/spa/src/components/GroupsTable.vue
index cf4ec440b..b0194bbea 100644
--- a/adminforth/spa/src/components/GroupsTable.vue
+++ b/adminforth/spa/src/components/GroupsTable.vue
@@ -38,115 +38,54 @@
               </Tooltip>
             </span>
           </td>
-          <td class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell rounded-br-lg " 
-              :class="{'rounded-br-lg': i === group.columns.length - 1}">
-            <template v-if="column?.components?.[props.source]?.file">
-              <component
-                :is="getCustomComponent(column.components[props.source])"
+          <td
+            class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell"
+            :class="{'rounded-br-lg': i === group.columns.length - 1}"
+          >
+            <template v-if="column.isArray?.enabled">
+              <ColumnValueInput
+                v-for="(arrayItemValue, arrayItemIndex) in currentValues[column.name]"
+                :key="`${column.name}-${arrayItemIndex}`"
+                ref="arrayItemRefs"
+                :class="{'mt-2': arrayItemIndex}"
+                :source="source"
                 :column="column"
-                :value="currentValues[column.name]"
-                @update:value="setCurrentValue(column.name, $event)"
-                :meta="column.components[props.source].meta"
-                :record="currentValues"
+                :type="column.isArray.itemType"
+                :value="arrayItemValue"
+                :currentValues="currentValues"
+                :mode="mode"
+                :columnOptions="columnOptions"
+                :deletable="!column.editReadonly"
+                @update:modelValue="setCurrentValue(column.name, $event, arrayItemIndex)"
+                @update:unmasked="unmasked[column.name] = !unmasked[column.name]"
                 @update:inValidity="customComponentsInValidity[column.name] = $event"
                 @update:emptiness="customComponentsEmptiness[column.name] = $event"
+                @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
               />
-            </template>
-            <template v-else>
-              <Select
-                class="w-full"
-                v-if="column.foreignResource"
-                :options="columnOptions[column.name] || []"
-                :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
-                :modelValue="currentValues[column.name]"
-                :readonly="column.editReadonly && source === 'edit'"
-                @update:modelValue="setCurrentValue(column.name, $event)"
-              ></Select>
-              <Select
-                class="w-full"
-                v-else-if="column.enum"
-                :options="column.enum"
-                :modelValue="currentValues[column.name]"
-                :readonly="column.editReadonly && source === 'edit'"
-                @update:modelValue="setCurrentValue(column.name, $event)"
-              ></Select>
-              <Select
-                class="w-full"
-                v-else-if="column.type === 'boolean'"
-                :options="getBooleanOptions(column)"
-                :modelValue="currentValues[column.name]"
-                :readonly="column.editReadonly && source === 'edit'"
-                @update:modelValue="setCurrentValue(column.name, $event)"
-              ></Select>
-              <input 
-                  v-else-if="['integer'].includes(column.type)"
-                  type="number" 
-                  step="1"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="0"
-                  :readonly="column.editReadonly && source === 'edit'"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-              >
-              <CustomDatePicker
-                  v-else-if="['datetime'].includes(column.type)"
-                  :column="column"
-                  :valueStart="currentValues[column.name]"
-                  auto-hide
-                  @update:valueStart="setCurrentValue(column.name, $event)"
-                  :readonly="column.editReadonly && source === 'edit'"
-              />
-              <input
-                  v-else-if="['decimal', 'float'].includes(column.type)"
-                  type="number"
-                  step="0.1"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-40 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  placeholder="0.0"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-                  :readonly="column.editReadonly && source === 'edit'"
-              />
-              <textarea
-                  v-else-if="['text', 'richtext'].includes(column.type)"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  :placeholder="$t('Text')"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-                  :readonly="column.editReadonly && source === 'edit'"
-              >
-              </textarea>
-              <textarea
-                  v-else-if="['json'].includes(column.type)"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  :placeholder="$t('Text')"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-              >
-              </textarea>
-              <input
-                  v-else
-                  :type="!column.masked || unmasked[column.name] ? 'text' : 'password'"
-                  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                  :placeholder="$t('Text')"
-                  :value="currentValues[column.name]"
-                  @input="setCurrentValue(column.name, $event.target.value)"
-                  autocomplete="false"
-                  data-lpignore="true"
-                  readonly
-                  ref="readonlyInputs"
-                  @focus="onFocusHandler($event, column, source)"
-              >
-
               <button
-                  v-if="column.masked"
-                  type="button"
-                  @click="unmasked[column.name] = !unmasked[column.name]"
-                  class="h-6 absolute inset-y-2 top-6 right-6 flex items-center pr-2 z-index-100 focus:outline-none"
+                v-if="!column.editReadonly"
+                @click="setCurrentValue(column.name, currentValues[column.name], currentValues[column.name].length); focusOnLastInput(column.name)"
+                class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+                :class="{'mt-2': currentValues[column.name].length}"
               >
-                  <IconEyeSolid class="w-6 h-6 text-gray-400"  v-if="!unmasked[column.name]" />
-                  <IconEyeSlashSolid class="w-6 h-6 text-gray-400" v-else />
+                <IconPlusOutline class="w-4 h-4 me-2"/>
+                {{ $t('Add') }}
               </button>
             </template>
+            <ColumnValueInput
+              v-else
+              :source="source"
+              :column="column"
+              :value="currentValues[column.name]"
+              :currentValues="currentValues"
+              :mode="mode"
+              :columnOptions="columnOptions"
+              :unmasked="unmasked"
+              @update:modelValue="setCurrentValue(column.name, $event)"
+              @update:unmasked="unmasked[column.name] = !unmasked[column.name]"
+              @update:inValidity="customComponentsInValidity[column.name] = $event"
+              @update:emptiness="customComponentsEmptiness[column.name] = $event"
+            />
             <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
             <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
           </td>
@@ -157,12 +96,10 @@
 </template>
 
 <script setup lang="ts">
-  import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@iconify-prerendered/vue-flowbite';
-  import CustomDatePicker from "@/components/CustomDatePicker.vue";
-  import Select from '@/afcl/Select.vue';
-  import { getCustomComponent } from '@/utils';
+  import { IconExclamationCircleSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+  import ColumnValueInput from "@/components/ColumnValueInput.vue";
   import { Tooltip } from '@/afcl';
-  import { ref, computed, watch, type Ref } from 'vue';
+  import { ref, computed, watch, nextTick, type Ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   const { t } = useI18n();
@@ -179,33 +116,18 @@
     columnOptions: any,
   }>();
 
+  const arrayItemRefs = ref([]);
+
   const customComponentsInValidity: Ref<Record<string, boolean>> = ref({});
   const customComponentsEmptiness: Ref<Record<string, boolean>> = ref({});
 
-  const getBooleanOptions = (column: any) => {
-    const options: Array<{ label: string; value: boolean | null }> = [
-      { label: t('Yes'), value: true },
-      { label: t('No'), value: false },
-    ];
-    if (!column.required[props.mode]) {
-      options.push({ label: t('Unset'), value: null });
-    }
-    return options;
-  };
-  function onFocusHandler(event:FocusEvent, column:any, source:string, ) {
-    const focusedInput = event.target as HTMLInputElement; 
-    if(!focusedInput) return;  
-    if (column.editReadonly && source === 'edit') return;  
-    else {
-      focusedInput.removeAttribute('readonly'); 
-    }
-  }
-
-
   const emit = defineEmits(['update:customComponentsInValidity', 'update:customComponentsEmptiness']);
 
-
-
+  async function focusOnLastInput(column) {
+    // wait for element to register
+    await nextTick();
+    arrayItemRefs.value[arrayItemRefs.value.length - 1].focus();
+  }
 
   watch(customComponentsInValidity, (newVal) => {
     emit('update:customComponentsInValidity', newVal);
diff --git a/adminforth/spa/src/components/ResourceForm.vue b/adminforth/spa/src/components/ResourceForm.vue
index 8d28a9d68..43807185a 100644
--- a/adminforth/spa/src/components/ResourceForm.vue
+++ b/adminforth/spa/src/components/ResourceForm.vue
@@ -101,7 +101,7 @@ const columnError = (column) => {
 
     if ( 
       column.required[mode.value] && 
-      (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '') && 
+      (currentValues.value[column.name] === undefined || currentValues.value[column.name] === null || currentValues.value[column.name] === '' || (column.isArray?.enabled && !currentValues.value[column.name].length)) && 
       // if component is custum it might tell other criteria for emptiness by emitting 'update:emptiness'
       // components which do not emit 'update:emptiness' will have undefined value in customComponentsEmptiness
       (customComponentsEmptiness.value[column.name] !== false)
@@ -109,68 +109,103 @@ const columnError = (column) => {
     ) {
       return t('This field is required');
     }
-    if (column.type === 'json' && currentValues.value[column.name]) {
+    if (column.type === 'json' && !column.isArray?.enabled && currentValues.value[column.name]) {
       try {
         JSON.parse(currentValues.value[column.name]);
       } catch (e) {
         return t('Invalid JSON');
       }
-    }
-    if ( column.type === 'string' || column.type === 'text' ) {
-      if ( column.maxLength && currentValues.value[column.name]?.length > column.maxLength ) {
-        return t('This field must be shorter than {maxLength} characters', { maxLength: column.maxLength });
-      }
-      
-      if ( column.minLength && currentValues.value[column.name]?.length < column.minLength ) {
-        // if column.required[mode.value] is false, then we check if the field is empty
-        let needToCheckEmpty = column.required[mode.value] || currentValues.value[column.name]?.length > 0;
-        if (!needToCheckEmpty) {
-          return null;
+    } else if (column.isArray?.enabled) {
+      if (!column.isArray.allowDuplicateItems) {
+        if (currentValues.value[column.name].filter((value, index, self) => self.indexOf(value) !== index).length > 0) {
+          return t('Array cannot contain duplicate items');
         }
-        return t('This field must be longer than {minLength} characters', { minLength: column.minLength });
       }
+
+      return currentValues.value[column.name] && currentValues.value[column.name].reduce((error, item) => {
+        return error || validateValue(column.isArray.itemType, item, column) ||
+          (item === null || !item.toString() ? t('Array cannot contain empty items') : null);
+      }, null);
+    } else {
+      return validateValue(column.type, currentValues.value[column.name], column);
     }
-    if ( ['integer', 'decimal', 'float'].includes(column.type) ) {
-      if ( column.minValue !== undefined 
-        && currentValues.value[column.name] !== null 
-        && currentValues.value[column.name] < column.minValue 
-      ) {
-        return t('This field must be greater than {minValue}', { minValue: column.minValue });
-      }
-      if ( column.maxValue !== undefined && currentValues.value[column.name] > column.maxValue ) {
-        return t('This field must be less than {maxValue}', { maxValue: column.maxValue });
-      }
+    
+  });
+  return val.value;
+};
+
+const validateValue = (type, value, column) => {
+  if (type === 'string' || type === 'text') {
+    if (column.maxLength && value?.length > column.maxLength) {
+      return t('This field must be shorter than {maxLength} characters', { maxLength: column.maxLength });
     }
-    if (currentValues.value[column.name] && column.validation) {
-      const error = applyRegexValidation(currentValues.value[column.name], column.validation);
-      if (error) {
-        return error;
+    
+    if (column.minLength && value?.length < column.minLength) {
+      // if column.required[mode.value] is false, then we check if the field is empty
+      let needToCheckEmpty = column.required[mode.value] || value?.length > 0;
+      if (!needToCheckEmpty) {
+        return null;
       }
+      return t('This field must be longer than {minLength} characters', { minLength: column.minLength });
+    }
+  }
+  if (['integer', 'decimal', 'float'].includes(type)) {
+    if (column.minValue !== undefined 
+      && value !== null 
+      && value < column.minValue
+    ) {
+      return t('This field must be greater than {minValue}', { minValue: column.minValue });
+    }
+    if (column.maxValue !== undefined && value > column.maxValue) {
+      return t('This field must be less than {maxValue}', { maxValue: column.maxValue });
     }
+  }
+  if (value && column.validation) {
+    const error = applyRegexValidation(value, column.validation);
+    if (error) {
+      return error;
+    }
+  }
 
-    return null;
-  });
-  return val.value;
+  return null;
 };
 
 
-const setCurrentValue = (key, value) => {
+const setCurrentValue = (key, value, index=null) => {
   const col = props.resource.columns.find((column) => column.name === key);
-  if (['integer', 'float'].includes(col.type) && (value || value === 0)) {
-    currentValues.value[key] = +value;
+  // if field is an array, we need to update the array or individual element
+  if (col.type === 'json' && col.isArray?.enabled) {
+    if (index === null) {
+      currentValues.value[key] = value;
+    } else if (index === currentValues.value[key].length) {
+      currentValues.value[key].push(null);
+    } else {
+      if (['integer', 'float'].includes(col.isArray.itemType) && (value || value === 0)) {
+        currentValues.value[key][index] = +value;
+      } else {
+        currentValues.value[key][index] = value;
+      }
+      if (['text', 'richtext', 'string'].includes(col.isArray.itemType) && col.enforceLowerCase) {
+        currentValues.value[key][index] = currentValues.value[key][index].toLowerCase();
+      }
+    }
   } else {
-    currentValues.value[key] = value;
-  }
-  if (['text', 'richtext', 'string'].includes(col.type) && col.enforceLowerCase) {
-    currentValues.value[key] = currentValues.value[key].toLowerCase();
+    if (['integer', 'float'].includes(col.type) && (value || value === 0)) {
+      currentValues.value[key] = +value;
+    } else {
+      currentValues.value[key] = value;
+    }
+    if (['text', 'richtext', 'string'].includes(col.type) && col.enforceLowerCase) {
+      currentValues.value[key] = currentValues.value[key].toLowerCase();
+    }
   }
 
   currentValues.value = { ...currentValues.value };
 
-  //json fields should transform to object
+  // json fields should transform to object
   const up = {...currentValues.value};
   props.resource.columns.forEach((column) => {
-    if (column.type === 'json' && up[column.name]) {
+    if (column.type === 'json' && !column.isArray?.enabled && up[column.name]) {
       try {
         up[column.name] = JSON.parse(up[column.name]);
       } catch (e) {
@@ -185,8 +220,19 @@ onMounted(() => {
   currentValues.value = Object.assign({}, props.record);
   // json values should transform to string
   props.resource.columns.forEach((column) => {
-    if (column.type === 'json' && currentValues.value[column.name]) {
-      currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
+    if (column.type === 'json') {
+      if (column.isArray?.enabled) {
+        // if value is null or undefined, we should set it to empty array
+        if (!currentValues.value[column.name]) {
+          currentValues.value[column.name] = [];
+        } else {
+          // else copy array to prevent mutation
+          currentValues.value[column.name] = [...currentValues.value[column.name]];
+        }
+      } else if (currentValues.value[column.name]) {
+        currentValues.value[column.name] = JSON.stringify(currentValues.value[column.name], null, 2);
+      }
+
     }
   });
   emit('update:isValid', isValid.value);
diff --git a/adminforth/spa/src/components/ValueRenderer.vue b/adminforth/spa/src/components/ValueRenderer.vue
index 12e115c0f..90b780c85 100644
--- a/adminforth/spa/src/components/ValueRenderer.vue
+++ b/adminforth/spa/src/components/ValueRenderer.vue
@@ -14,6 +14,32 @@
       <span v-if="record[column.name]" class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
       <span v-else class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
     </span>
+    <span
+      v-else-if="column.type === 'json' && column.isArray?.enabled"
+      class="flex flex-wrap"
+    >
+      <template v-for="(arrayItem, arrayItemIndex) in record[column.name]">
+        <span
+          v-if="column.isArray.itemType === 'boolean' && arrayItem"
+          :key="`${column.name}-${arrayItemIndex}`"
+          class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
+          {{ $t('Yes') }}
+        </span>
+        <span
+          v-else-if="column.isArray.itemType === 'boolean'"
+          :key="`${column.name}-${arrayItemIndex}`"
+          class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
+          {{ $t('No') }}
+        </span>
+        <span
+          v-else
+          :key="`${column.name}-${arrayItemIndex}`"
+          class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
+        >
+          {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type) }}
+        </span>
+      </template>
+    </span>
     <span v-else-if="column.enum">
       {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type) }}
     </span>
@@ -102,6 +128,20 @@ function formatTime(time: string) {
   if (!time) return '';
   return dayjs(`0000-00-00 ${time}`).format(coreStore.config?.timeFormat || 'HH:mm:ss');
 }
+
+function getArrayItemDisplayValue(value, column) {
+  if (column.isArray?.itemType === 'datetime') {
+    return formatDateTime(value);
+  } else if (column.isArray?.itemType === 'date') {
+    return formatDate(value);
+  } else if (column.isArray?.itemType === 'time') {
+    return formatTime(value);
+  } else if (column.enum) {
+    return column.enum.find(e => e.value === value)?.label || value;
+  }
+
+  return value;
+}
 </script>
 
 <style lang="scss">
diff --git a/adminforth/types/Common.ts b/adminforth/types/Common.ts
index 9a44f971e..ea482d6a7 100644
--- a/adminforth/types/Common.ts
+++ b/adminforth/types/Common.ts
@@ -568,6 +568,24 @@ export interface AdminForthResourceColumnInputCommon {
    */
   type?: AdminForthDataTypes,
 
+  /**
+   * Defines whether column is array and what type of items it contains.
+   * AdminForth will use this information to render proper input fields in the admin panel with control buttons to add and remove items.
+   * If enabled, requires column type to be JSON.
+   * Cannot be used with masked columns, columns with foreignResource or primary key columns.
+   */
+  isArray?: {
+    enabled: boolean,
+    /**
+     * Type of items in array. Cannot be JSON or RICHTEXT.
+     */
+    itemType: AdminForthDataTypes,
+    /**
+     * If enabled, AdminForth will allow to add items with the same value.
+     */
+    allowDuplicateItems?: boolean,
+  },
+
   /**
    * An optional configuration object for extra settings.
    */
diff --git a/dev-demo/migrations/20250120084236_add_room_sizes_to_apartments/migration.sql b/dev-demo/migrations/20250120084236_add_room_sizes_to_apartments/migration.sql
new file mode 100644
index 000000000..4c1bb8d47
--- /dev/null
+++ b/dev-demo/migrations/20250120084236_add_room_sizes_to_apartments/migration.sql
@@ -0,0 +1,29 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `property_type` on the `apartments` table. All the data in the column will be lost.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_apartments" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "created_at" DATETIME,
+    "title" TEXT NOT NULL,
+    "square_meter" REAL,
+    "price" DECIMAL NOT NULL,
+    "number_of_rooms" INTEGER,
+    "room_sizes" REAL,
+    "description" TEXT,
+    "country" TEXT,
+    "listed" BOOLEAN NOT NULL DEFAULT false,
+    "realtor_id" TEXT,
+    "user_id" TEXT,
+    "apartment_image" TEXT
+);
+INSERT INTO "new_apartments" ("apartment_image", "country", "created_at", "description", "id", "listed", "number_of_rooms", "price", "realtor_id", "square_meter", "title", "user_id") SELECT "apartment_image", "country", "created_at", "description", "id", "listed", "number_of_rooms", "price", "realtor_id", "square_meter", "title", "user_id" FROM "apartments";
+DROP TABLE "apartments";
+ALTER TABLE "new_apartments" RENAME TO "apartments";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;
diff --git a/dev-demo/migrations/20250120092738_update_room_sizes_to_string/migration.sql b/dev-demo/migrations/20250120092738_update_room_sizes_to_string/migration.sql
new file mode 100644
index 000000000..da78ed15b
--- /dev/null
+++ b/dev-demo/migrations/20250120092738_update_room_sizes_to_string/migration.sql
@@ -0,0 +1,23 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_apartments" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "created_at" DATETIME,
+    "title" TEXT NOT NULL,
+    "square_meter" REAL,
+    "price" DECIMAL NOT NULL,
+    "number_of_rooms" INTEGER,
+    "room_sizes" TEXT,
+    "description" TEXT,
+    "country" TEXT,
+    "listed" BOOLEAN NOT NULL DEFAULT false,
+    "realtor_id" TEXT,
+    "user_id" TEXT,
+    "apartment_image" TEXT
+);
+INSERT INTO "new_apartments" ("apartment_image", "country", "created_at", "description", "id", "listed", "number_of_rooms", "price", "realtor_id", "room_sizes", "square_meter", "title", "user_id") SELECT "apartment_image", "country", "created_at", "description", "id", "listed", "number_of_rooms", "price", "realtor_id", "room_sizes", "square_meter", "title", "user_id" FROM "apartments";
+DROP TABLE "apartments";
+ALTER TABLE "new_apartments" RENAME TO "apartments";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;
diff --git a/dev-demo/resources/apartments.ts b/dev-demo/resources/apartments.ts
index 68a12c71e..dcaa44391 100644
--- a/dev-demo/resources/apartments.ts
+++ b/dev-demo/resources/apartments.ts
@@ -219,6 +219,14 @@ export default {
       ],
       showIn: ["filter", "show", "create", "edit"],
     },
+    {
+      name: "room_sizes",
+      type: AdminForthDataTypes.JSON,
+      isArray: {
+        enabled: true,
+        itemType: AdminForthDataTypes.FLOAT,
+      },
+    },
     {
       name: "description",
       sortable: false,
@@ -366,6 +374,7 @@ export default {
           "price",
           "square_meter",
           "number_of_rooms",
+          "room_sizes",
           "listed",
         ],
       },
diff --git a/dev-demo/schema.prisma b/dev-demo/schema.prisma
index 664602266..0ab3726e5 100644
--- a/dev-demo/schema.prisma
+++ b/dev-demo/schema.prisma
@@ -26,6 +26,7 @@ model apartments {
     square_meter    Float?
     price           Decimal
     number_of_rooms Int?
+    room_sizes      String?
     description     String?
     country         String?
     listed          Boolean   @default(false)