valentin-morice / filament-json-column
A simple package to view and edit your JSON columns in Filament
Installs: 165 606
Dependents: 4
Suggesters: 0
Security: 0
Stars: 49
Watchers: 2
Forks: 11
Open Issues: 1
Requires
- php: ^8.1
- filament/forms: ^3.0
- filament/notifications: ^3.3
- 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 (Stable)
You can install the stable version of the package via composer:
composer require valentin-morice/filament-json-column
Pre-Release / Dev Version (v3.0)
To try out the upcoming v3.0, compatible with Filament v4, you can require the dev
branch directly.
Thanks to @safwendammak for his pull-request.
Note: This branch is under active development and may contain unstable code.
Add the following to your composer.json
:
{ "require": { "valentin-morice/filament-json-column": "dev-dev" }, "minimum-stability": "dev", "prefer-stable": true }
Then run composer update
:
composer update valentin-morice/filament-json-column
Usage
The filament-json-column
plugin works as any other Filament Form Builder or Infolist 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; public static function form(Form $form): Form { return $form ->schema([ JsonColumn::make('example'), ]); } // An infolist component is also available. public static function infolist(Infolist $infolist): Infolist { return $infolist ->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.
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.
Credits
I've taken inspiration from the following plugins: Pretty JSON & JSONeditor.
License
The MIT License (MIT). Please see License File for more information.