Filament JSON

Filament plugin for processing JSON field

logo

Installation

You can install the package via composer:

composer require pepperfm/filament-json

You can publish the config file with:

php artisan vendor:publish --tag="filament-json-config"

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-json-views"

Usage

Common case

use PepperFM\FilamentJson\Columns\JsonColumn;

JsonColumn::make('properties');

JsonColumn::make('properties')
    ->asDrawer();

JsonColumn::make('properties')
    ->asModal();

The button() and modal() method accept the type of array|Arrayable|\stdClass, and implements basic properties of button and modal blade components from Filament documentation: Core Concepts - Blade Components

use PepperFM\FilamentJson\Columns\JsonColumn;

$buttonConfig = literal(
    color: 'primary',
    size: 'xs'
);
$modalConfig = [
    'icon' => 'heroicon-m-sparkles',
    'alignment' => 'start',
    'width' => 'xl',
    'closedByEscaping' => true,
    'closed_button' => false, // also accepts camel_case
];

JsonColumn::make('properties')
    ->asModal()
    ->button($buttonConfig)
    ->modal($modalConfig);

DTO schemas of components configuration:

class ButtonConfigDto extends \Pepperfm\Ssd\BaseDto
{
    public string $color = 'primary';

    public string $icon = 'heroicon-o-swatch';

    public ?string $label = null;

    public ?string $tooltip = null;

    public string $size = 'md';

    public ?string $href = null;

    public ?string $tag = null;
}

class ModalConfigDto extends \Pepperfm\Ssd\BaseDto
{
    public ?string $id = null;

    public string $icon = 'heroicon-o-swatch';

    public string $iconColor = 'primary';

    public string $alignment = 'start';

    public string $width = 'xl';

    public bool $closeByClickingAway = true;

    public bool $closedByEscaping = true;

    public bool $closedButton = true;

    public bool $autofocus = true;
}

Displaying nested data

Simple nesting

This json content

{
  "ip": "127.0.0.1",
  "subdata": {
    "1": 321,
    "wow": "123"
  },
  "user_agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36...",
  "fingerprint": null,
  "subDataArray": [
    1,
    2,
    "test"
  ]
}

Should look like:

Deep nesting

This json content with this nesting level

{
  "more_nested_array": [
    "scroll_checking",
    "scroll_checking2",
    {
      "scroll_checking_2_1": 1,
      "scroll_checking_2_2": {
        "data": {
          "some_bool_key": true
        }
      }
    }
  ],
  "arrayWithRandomSubData": [
    1,
    "2",
    {
      "1": 1,
      "2": "qweqwe",
      "response": {
        "data": {
          "some_bool_key": true
        }
      }
    }
  ]
}

Should look like:

Testing

composer test

Socialment

Socialite OAuth Support for Filament

Laravel Starter Kit

A modern, developer-friendly Laravel starter kit featuring a curated selection of tools and a polished, feature-reached admin panel — ready for production from day one.