mrpowerup / filament-json-column
A simple package to view and edit your JSON columns in Filament.
Requires
- php: ^8.1
- filament/forms: ^3.0
- spatie/laravel-package-tools: ^1.15.0
Requires (Dev)
- laravel/pint: ^1.0
- nunomaduro/collision: ^7.9
- nunomaduro/larastan: ^2.0.1
- orchestra/testbench: ^8.0
- pestphp/pest: ^2.1
- pestphp/pest-plugin-arch: ^2.0
- pestphp/pest-plugin-laravel: ^2.0
- phpstan/extension-installer: ^1.1
- phpstan/phpstan-deprecation-rules: ^1.0
- phpstan/phpstan-phpunit: ^1.0
README
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 class. Make sure the column on which it is called is casted to JSON or array within your Eloquent model.
public static function form(Form $form): Form { return $form ->schema([ FilamentJsonColumn::make('example'), ]); }
It provides you with two tabs: Viewer
& Editor
. The Viewer
tab pretty prints your JSON data, while the Editor
tab lets you edit it conveniently.
Personnalize the accent color
The tab selector menu uses the slateblue
CSS color by default. However, you can chose any other color:
FilamentJsonColumn::make('example')->accent('#FFFFFF'); // 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:
FilamentJsonColumn::make('example')->editorOnly(); // Displays only the editor tab FilamentJsonColumn::make('example')->viewerOnly(); // Displays only the viewer tab
Change the editor's height
FilamentJsonColumn::make('example')->editorHeight(500); // Accepts an int, defaults to 300
Credits
I've taken inspiration from the following plugins: Pretty JSON & JSONeditor.
License
The MIT License (MIT). Please see License File for more information.