Json Column

• v4.0 - Filament 5 Support
• Version Compatibility
• Installation
• Usage
  • Personalize the accent color
  • Display a single tab
  • Change the height
  • Editor modes
  • Validation
• Translations
• Credits
• License

#v4.0 - Filament 5 Support

Now supports Filament 5.x (with Livewire 4)!

#Version Compatibility

• v4.x: Filament 5.x, Laravel 11.x / 12.x, PHP 8.2+

A simple package to view and edit your JSON columns in Filament.

#Installation

You can install the package via composer:

composer require valentin-morice/filament-json-column

#Usage

The filament-json-column plugin works as any other Filament Form Builder classes. Make sure the column on which it is called is cast to JSON or array within your Eloquent model.

use ValentinMorice\FilamentJsonColumn\JsonColumn;
use ValentinMorice\FilamentJsonColumn\JsonInfolist;
use Filament\Schemas\Schema;

public static function form(Schema $schema): Schema
    {
        return $schema
            ->schema([
                JsonColumn::make('example'),
            ]);
    }

// An infolist component is also available.
public static function infolist(Schema $schema): Schema
    {
        return $schema
            ->schema([
                JsonInfolist::make('example'),
            ]);
    }

The form component provides you with two tabs: Viewer & Editor. The Viewer tab pretty prints your JSON data, while the Editor tab lets you edit it conveniently. All the methods provided by the plugin accept closures, injected with standard Filament [utilities](https://filamentphp.com/docs/5.x/schemas/overview#component-utility-inje ction).

#Personalize the accent color

The tab selector menu uses the slateblue CSS color by default. However, you can choose any other color:

JsonColumn::make('example')->accent(string '#FFFFFF'|Closure); // The input needs to be a valid CSS color

#Display a single tab

If you'd like to use only one of the tabs, without giving your user the possibility to switch to another, use the following methods:

JsonColumn::make('example')->editorOnly(bool|Closure); // Displays only the editor tab
JsonColumn::make('example')->viewerOnly(bool|Closure); // Displays only the viewer tab

#Change the height

JsonColumn::make('example')->editorHeight(int 500|Closure); // Accepts an int, defaults to 300
JsonColumn::make('example')->viewerHeight(int 500|Closure); // Accepts an int, defaults to 300

#Editor modes

Customize the editor modes. Accepted values (and default) are: ['code', 'form', 'text', 'tree', 'view', 'preview']

JsonColumn::make('example')->modes(array|Closure ['code', 'text', 'tree']);

#Validation

Values are validated as proper JSON by default.

#Translations

The Viewer and Editor tab labels are translatable. Publish the translation files to customize them or add your own locale:

php artisan vendor:publish --tag="filament-json-column-translations"

This copies the files to lang/vendor/filament-json-column/{locale}/json-column.php. The displayed language follows your application's locale.

#Credits

I've taken inspiration from the following plugins: Pretty JSON & JSONeditor.

#License

The MIT License (MIT). Please see License File for more information.