Saltar al contenido principal

Key-value

Introducción​

El campo key-value te permite interactuar con un objeto JSON unidimensional:

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')

Si estás guardando los datos en Eloquent, debes asegurarte de añadir un cast array a la propiedad del modelo:

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    /**
     * @return array<string, string>
     */
    protected function casts(): array
    { 
        return [
            'meta' => 'array',
        ];
    }

    // ...
}

Añadir filas​

Se muestra un botón de acción debajo del campo para permitir al usuario añadir una nueva fila.

Establecer la etiqueta del botón de añadir​

Puedes establecer una etiqueta para personalizar el texto que debe mostrarse en el botón para añadir una fila, usando el método addActionLabel():

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->addActionLabel('Add property')
Details

Inyección de utilidades Además de permitir un valor estático, el método addActionLabel() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Evitar que el usuario añada filas​

Puedes evitar que el usuario añada filas usando el método addable(false):

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->addable(false)
Details

Inyección de utilidades Además de permitir un valor estático, el método addable() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Eliminar filas​

Se muestra un botón de acción en cada elemento para permitir al usuario eliminarlo.

Evitar que el usuario elimine filas​

Puedes evitar que el usuario elimine filas usando el método deletable(false):

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->deletable(false)
Details

Inyección de utilidades Además de permitir un valor estático, el método deletable() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Editar claves​

Personalizar la etiqueta de los campos de clave​

Puedes personalizar la etiqueta para los campos de clave usando el método keyLabel():

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->keyLabel('Property name')
Details

Inyección de utilidades Además de permitir un valor estático, el método keyLabel() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Añadir placeholders al campo de clave​

También puedes añadir placeholders para los campos de clave usando el método keyPlaceholder():

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->keyPlaceholder('Property name')
Details

Inyección de utilidades Además de permitir un valor estático, el método keyPlaceholder() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Evitar que el usuario edite claves​

Puedes evitar que el usuario edite claves usando el método editableKeys(false):

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->editableKeys(false)
Details

Inyección de utilidades Además de permitir un valor estático, el método editableKeys() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Editar valores​

Personalizar la etiqueta de los campos de valor​

Puedes personalizar la etiqueta para los campos de valor usando el método valueLabel():

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->valueLabel('Property value')
Details

Inyección de utilidades Además de permitir un valor estático, el método valueLabel() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Añadir placeholders al campo de valor​

También puedes añadir placeholders para los campos de valor usando el método valuePlaceholder():

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->valuePlaceholder('Property value')
Details

Inyección de utilidades Además de permitir un valor estático, el método valuePlaceholder() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Evitar que el usuario edite valores​

Puedes evitar que el usuario edite valores usando el método editableValues(false):

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->editableValues(false)
Details

Inyección de utilidades Además de permitir un valor estático, el método editableValues() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Reordenar filas​

Puedes permitir que el usuario reordene las filas dentro de la tabla usando el método reorderable():

use Filament\Forms\Components\KeyValue;

KeyValue::make('meta')
    ->reorderable()
Details

Inyección de utilidades Además de permitir un valor estático, el método reorderable() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Personalizar los objetos de acción de key-value​

Este campo usa objetos de acción para facilitar la personalización de los botones dentro de él. Puedes personalizar estos botones pasando una función a un método de registro de acciones. La función tiene acceso al objeto $action, que puedes usar para personalizarlo. Los siguientes métodos están disponibles para personalizar las acciones:

  • addAction()
  • deleteAction()
  • reorderAction()

Aquí hay un ejemplo de cómo podrías personalizar una acción:

use Filament\Actions\Action;
use Filament\Forms\Components\KeyValue;
use Filament\Support\Icons\Heroicon;

KeyValue::make('meta')
    ->deleteAction(
        fn (Action $action) => $action->icon(Heroicon::XMark),
    )
Details

Inyección de utilidades Los métodos de registro de acción pueden inyectar varias utilidades en la función como parámetros.