README

A powerful Filament table column component that generates QR codes based on URLs in your record data. Built on top of lara-zeus/simple-qrcode.

Features

• 🎯 Generate QR codes from record URLs
• 🎨 Customizable button labels and modal headings
• 📏 Adjustable QR code size
• 🖼️ Multiple format support (SVG, PNG, EPS, PDF)
• 🔒 Error correction level configuration (L, M, Q, H)
• 💬 Modal or inline display modes
• ⚡ Dynamic URL generation using closures
• 🎭 Full Filament theming support

Installation

You can install the package via composer:

composer require matthijs-neijenhuijs/filament-qr-button

The package will automatically register its service provider.

Dependencies

This package automatically installs lara-zeus/simple-qrcode which provides QR code generation capabilities.

Publishing Configuration (Optional)

You can optionally publish the config file:

php artisan vendor:publish --tag="filament-qr-button-config"

You can optionally publish the views:

php artisan vendor:publish --tag="filament-qr-button-views"

Quick Start

Basic Usage

use MatthijsNeijenhuijs\FilamentQrButton\QrCodeColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            TextColumn::make('name'),
            
            QrCodeColumn::make('qr_code')
                ->qrUrl('url') // Column containing the URL
                ->buttonLabel('View QR'),
        ]);
}

Dynamic URL Generation

QrCodeColumn::make('qr_code')
    ->qrUrl(fn ($record) => route('products.show', $record))
    ->buttonLabel('Product QR')
    ->modalHeading('Product QR Code')

Configuration Options

Note: We use qrUrl() instead of url() to avoid conflicts with Filament's built-in url() method on table columns, which is used for making the entire column clickable.

URL Source

Define where to get the URL from:

// From a database column
QrCodeColumn::make('qr_code')
    ->qrUrl('product_url')

// Using a closure for dynamic URL generation
QrCodeColumn::make('qr_code')
    ->qrUrl(fn ($record) => "https://example.com/track/{$record->tracking_code}")

QR Code Size

Set the size of the generated QR code (in pixels):

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->size(200) // Default is 150

Button Label

Customize the button text:

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->buttonLabel('Show QR Code')

Modal Configuration

Control the modal display:

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->showInModal(true) // Default is true
    ->modalHeading('Scan this QR Code')

Display Inline (Without Modal)

Show the QR code directly in the table:

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->showInModal(false)
    ->size(80) // Smaller size for inline display

Error Correction Level

Set the QR code error correction level:

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->errorCorrectionLevel('H') // High error correction

Error correction levels:

• L - Low (7% correction)
• M - Medium (15% correction) - Default
• Q - Quartile (25% correction)
• H - High (30% correction)

Output Format

Choose the output format:

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->format('svg') // svg, png, eps, pdf (default: svg)

Real-World Examples

Product URL QR Code

QrCodeColumn::make('product_qr')
    ->label('Product QR')
    ->qrUrl(fn ($record) => route('products.public', $record))
    ->buttonLabel('QR Code')
    ->modalHeading('Product QR Code')
    ->size(200)
    ->errorCorrectionLevel('H')

Order Tracking QR Code

QrCodeColumn::make('tracking_qr')
    ->label('Tracking')
    ->qrUrl(fn ($record) => "https://tracking.example.com/{$record->tracking_number}")
    ->buttonLabel('Track')
    ->modalHeading('Track Your Order')

Warehouse Location QR Code

QrCodeColumn::make('location_qr')
    ->label('Location')
    ->qrUrl(fn ($record) => route('warehouse.location', ['location' => $record->location_code]))
    ->buttonLabel('Location QR')
    ->size(150)

Invoice QR Code (Inline Display)

QrCodeColumn::make('invoice_qr')
    ->label('Invoice QR')
    ->qrUrl(fn ($record) => route('invoices.download', $record))
    ->showInModal(false)
    ->size(60)

Advanced Usage

Conditional Display

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->visible(fn ($record) => $record->is_active && $record->url !== null)

Dynamic Button Labels

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->buttonLabel(fn ($record) => $record->qr_label ?? 'QR Code')

Dynamic Size

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->size(fn ($record) => $record->is_important ? 200 : 150)

Custom Modal Headings

QrCodeColumn::make('qr_code')
    ->qrUrl('url')
    ->modalHeading(fn ($record) => "QR Code for {$record->name}")

Complete Example

Here's a complete example in a Filament resource:

<?php

namespace App\Filament\Resources;

use App\Models\Product;
use MatthijsNeijenhuijs\FilamentQrButton\QrCodeColumn;
use Filament\Resources\Resource;
use Filament\Tables\Table;
use Filament\Tables\Columns\TextColumn;

class ProductResource extends Resource
{
    protected static ?string $model = Product::class;

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('reference_code')
                    ->searchable(),
                    
                TextColumn::make('name')
                    ->searchable(),
                    
                TextColumn::make('ean')
                    ->label('EAN')
                    ->searchable(),
                    
                QrCodeColumn::make('product_qr')
                    ->label('QR Code')
                    ->qrUrl(fn ($record) => route('products.show', $record))
                    ->buttonLabel('View QR')
                    ->modalHeading('Product QR Code')
                    ->size(180)
                    ->errorCorrectionLevel('H'),
            ]);
    }
}

Configuration File

The default configuration can be customized in config/filament-qr-button.php:

return [
    'default_size' => 150,
    'default_error_correction' => 'M',
    'default_format' => 'svg',
    'default_button_label' => 'QR Code',
    'show_in_modal' => true,
    'default_modal_heading' => 'QR Code',
];

Tips & Best Practices

1. Performance: For large tables, enable pagination to avoid generating too many QR codes at once
2. Size: Keep QR codes between 100-200px for optimal scanning
3. Error Correction: Use higher error correction (Q or H) for QR codes that might be damaged
4. URLs: Ensure URLs are publicly accessible if QR codes will be scanned by external users
5. Testing: Always test QR codes with different scanner apps

Troubleshooting

QR Code Not Displaying

• Ensure the URL attribute exists on your model
• Check that the URL is not null or empty
• Verify dependencies are installed: composer show lara-zeus/simple-qrcode

Modal Not Opening

• Clear your browser cache
• Ensure Livewire is properly loaded
• Check browser console for JavaScript errors

QR Code Quality Issues

• Increase the size() parameter
• Use a higher errorCorrectionLevel() (Q or H)
• Consider using SVG format for better quality

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email your.email@example.com instead of using the issue tracker.

Credits

• Your Name
• Built on lara-zeus/simple-qrcode
• Built for Filament PHP
• All Contributors

License

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