webkernel/platform-tables

08-text-input

Sur cette page

title: Text input column

Introduction

The text input column allows you to render a text input inside the table, which can be used to update that database record without needing to open a new page or a modal:

use Webkernel\Platform\Tables\Columns\TextInputColumn;

TextInputColumn::make('email')

Validation

You can validate the input by passing any Laravel validation rules in an array:

use Webkernel\Platform\Tables\Columns\TextInputColumn;

TextInputColumn::make('name')
    ->rules(['required', 'max:255'])

Customizing the HTML input type

You may use the type() method to pass a custom HTML input type:

use Webkernel\Platform\Tables\Columns\TextInputColumn;

TextInputColumn::make('background_color')->type('color')

Setting the HTML input mode

You may use the inputMode() method to set the HTML inputmode attribute, which hints at the type of keyboard to show on mobile. For numeric inputs, use inputMode('decimal') for decimal values or inputMode('numeric') for integers:

use Webkernel\Platform\Tables\Columns\TextInputColumn;

TextInputColumn::make('quantity')
    ->type('number')
    ->inputMode('decimal')

Setting the numeric step

When using type('number'), you may use the step() method to set the HTML step attribute. Use step('any') for decimal values or step('1') for integers:

use Webkernel\Platform\Tables\Columns\TextInputColumn;

TextInputColumn::make('quantity')
    ->type('number')
    ->inputMode('decimal')
    ->step('1')

Adding affix text aside the field

You may place text before and after the input using the prefix() and suffix() methods:

use Webkernel\Platform\Tables\Columns\TextInputColumn;

TextInputColumn::make('domain')
    ->prefix('https://')
    ->suffix('.com')

<UtilityInjection set="tableColumns">As well as allowing static values, the prefix() and suffix() methods also accept a function to dynamically calculate them. You can inject various utilities into the function as parameters.</UtilityInjection>

Using icons as affixes

You may place an icon before and after the input using the prefixIcon() and suffixIcon() methods:

use Webkernel\Platform\Tables\Columns\TextInputColumn;
use Webkernel\Platform\Support\Icons\Heroicon;

TextInputColumn::make('domain')
    ->prefixIcon(Heroicon::GlobeAlt)
    ->suffixIcon(Heroicon::CheckCircle)

<UtilityInjection set="tableColumns">As well as allowing static values, the prefixIcon() and suffixIcon() methods also accept a function to dynamically calculate them. You can inject various utilities into the function as parameters.</UtilityInjection>

Setting the affix icon's color

Affix icons are gray by default, but you may set a different color using the prefixIconColor() and suffixIconColor() methods:

use Webkernel\Platform\Tables\Columns\TextInputColumn;
use Webkernel\Platform\Support\Icons\Heroicon;

TextInputColumn::make('status')
    ->suffixIcon(Heroicon::CheckCircle)
    ->suffixIconColor('success')

<UtilityInjection set="tableColumns">As well as allowing static values, the prefixIconColor() and suffixIconColor() methods also accept a function to dynamically calculate them. You can inject various utilities into the function as parameters.</UtilityInjection>

Lifecycle hooks

Hooks may be used to execute code at various points within the input's lifecycle:

TextInputColumn::make()
    ->beforeStateUpdated(function ($record, $state) {
        // Runs before the state is saved to the database.
    })
    ->afterStateUpdated(function ($record, $state) {
        // Runs after the state is saved to the database.
    })

Security

Authorization

Text input columns do not automatically check model policies. Without an authorization check, users can update the column for records accessible through the table query, even if the record's update() policy denies access to its edit page. Use disabled() with your authorization logic, for example disabled(fn ($record) => $record->user_id !== auth()->id()). Platform checks this condition on the server before saving.

Check permission for the specific attribute being changed. If the column updates a related model or pivot, authorize that operation too. Alternatively, use a resource edit page or a policy-backed EditAction to apply the resource's edit authorization.