🎯 ArtFlow Table - Laravel Livewire Datatable Component

A production-ready, trait-based Laravel Livewire datatable component with automatic optimization, N+1 prevention, and 98% query reduction.

Version: 1.8.0 | Status: ✅ Production Ready | PHP: 8.2+ | Laravel: 12+ | Livewire: 4.2+ | Blaze: 1.0+ | Site: https://artflow.pk

✨ What Is ArtFlow Table?

ArtFlow Table is a trait-based Livewire component that builds powerful, performant datatables with:

• ✅ Automatic sorting, searching, pagination - Built-in, no config needed
• ✅ N+1 query prevention - Single query for 50+ items
• ✅ Eager loading - Relationships pre-loaded automatically
• ✅ Count aggregations - Relationship counts without loading items
• ✅ Export functionality - CSV, Excel, PDF support
• ✅ Responsive design - Works on mobile & desktop
• ✅ Zero configuration - Sensible defaults, override when needed
• ✅ #[Computed] caching - Livewire 4 native memoization, no manual hash logic
• ✅ Deferred pagination island - @island(defer: true) keeps initial paint fast
• ✅ Blaze compilation - Child Blade components folded at compile time for instant sub-component rendering

Perfect for: Admin panels, data management, reports, dashboards

🚀 Installation

composer require artflow-studio/table

That's it! Package auto-registers with Laravel. livewire/blaze is bundled as a dependency and activates automatically — no configuration needed.

Optional: Set BLAZE_ENABLED=false in your .env to disable Blaze's Blade compilation step.

💡 Quick Start (2 Minutes)

Basic Usage in Blade

@livewire('aftable', [
    'model' => 'App\Models\Item',
    'columns' => [
        ['key' => 'title', 'label' => 'Item Name'],
        ['key' => 'code', 'label' => 'Code'],
        ['key' => 'amount', 'label' => 'Amount'],
    ],
])

That's all you need! The table automatically:

• ✅ Fetches items from database
• ✅ Adds sorting on all columns
• ✅ Adds search box for filtering
• ✅ Adds pagination
• ✅ Displays with proper styling

With Relationships (No N+1!)

@livewire('aftable', [
    'model' => 'App\Models\Item',
    'columns' => [
        ['key' => 'title', 'label' => 'Name'],
        ['key' => 'category_name', 'label' => 'Category', 'relation' => 'category:name'],
        ['key' => 'department_name', 'label' => 'Department', 'relation' => 'department:name'],
        ['key' => 'subitems_count', 'label' => 'Sub-items'],
    ],
])

System automatically:

• ✅ Eager loads category and department relations
• ✅ Shows count of subitems with withCount()
• ✅ Executes single optimized query
• ✅ No N+1 problem! 🎉

📊 Performance Metrics

Real Example: Displaying 50 products with categories, brands, and variant counts

• Before optimization: 51 queries, 800-1200ms load time
• After optimization: 1 query, 150-200ms load time ✅

🎯 Column Configuration

Simple (Recommended)

['key' => 'title', 'label' => 'Item Name']

• Auto-sorted ✅
• Auto-searched ✅

With Relationship

['key' => 'category_name', 'label' => 'Category', 'relation' => 'category:name']

• Auto eager-loaded (no N+1!) ✅
• Searches in related table ✅

With Count

['key' => 'subitems_count', 'label' => 'Sub-items']

• Auto-detected via _count suffix ✅
• Uses withCount() for efficiency ✅

With Actions

[
    'key' => 'actions',
    'label' => '',
    'actions' => [
        ['type' => 'button', 'label' => 'Edit', 'href' => '/items/{id}/edit'],
        ['type' => 'button', 'label' => 'Delete', 'href' => '/items/{id}', 'method' => 'DELETE'],
    ]
]

🔧 Common Configuration Options

@livewire('aftable', [
    'model' => 'App\Models\Item',                 # Eloquent model
    'columns' => [...],                           # Column definitions
    'records' => 50,                              # Items per page
    'showSearch' => true,                         # Show search box
    'showPagination' => true,                     # Show pagination
    'showColumnVisibility' => true,               # Show column toggles
    'showExport' => true,                         # Show export button
    'exportFormats' => ['csv', 'excel', 'pdf'],  # Available export types
    'customQuery' => Item::active(),              # Custom query builder
])

📚 Documentation

For End Users & Quick Learners

📖 AI_USAGE_GUIDE.md - Non-technical guide

• Simple examples
• Common use cases
• Troubleshooting
• Real-world workflows

For Developers & AI Agents

📖 AI_TECHNICAL_REFERENCE.md - Technical deep dive

• Architecture overview
• Trait organization
• Auto-optimization details
• Performance techniques
• Testing guide
• Debugging tips

🏗️ How It Works

The Magic: Automatic Optimization

1. You define columns (simple list)

   ['key' => 'title', 'label' => 'Title']
   ['key' => 'category_name', 'relation' => 'category:name']
   ['key' => 'subitems_count', 'label' => 'Sub-items']
   

2. System auto-detects

   • Relations → Eager load them
   • Counts → Use withCount()
   • Text fields → Make searchable
   • All columns → Make sortable

3. Single optimized query executes

   SELECT * FROM items
   WITH category
   WITH COUNT subitems
   WHERE title LIKE ?
   ORDER BY created_at ASC
   LIMIT 50
   

4. Results display instantly ⚡

Data Flow

User clicks "Sort by Price"
        ↓
Livewire triggers update
        ↓
Component rebuilds query with ORDER BY
        ↓
Query executes (1 query only!)
        ↓
Blade template updates
        ↓
User sees sorted table

✅ Real-World Examples

Items Inventory Table

@livewire('aftable', [
    'model' => 'App\Models\Item',
    'columns' => [
        ['key' => 'title', 'label' => 'Item Name'],
        ['key' => 'code', 'label' => 'Code'],
        ['key' => 'category_name', 'label' => 'Category', 'relation' => 'category:name'],
        ['key' => 'amount', 'label' => 'Amount', 'value_type' => 'price'],
        ['key' => 'items_count', 'label' => 'Related Items'],
        ['key' => 'quantity', 'label' => 'Quantity'],
    ],
])

User Management

@livewire('aftable', [
    'model' => 'App\Models\User',
    'records' => 25,
    'columns' => [
        ['key' => 'name', 'label' => 'Name'],
        ['key' => 'email', 'label' => 'Email'],
        ['key' => 'department_name', 'label' => 'Department', 'relation' => 'department:name'],
        ['key' => 'is_active', 'label' => 'Status', 'value_type' => 'boolean'],
        ['key' => 'created_at', 'label' => 'Joined', 'value_type' => 'date'],
    ],
])

Orders Dashboard

@livewire('aftable', [
    'model' => 'App\Models\Order',
    'columns' => [
        ['key' => 'id', 'label' => 'Order #'],
        ['key' => 'customer_name', 'label' => 'Customer', 'relation' => 'customer:name'],
        ['key' => 'total_amount', 'label' => 'Total', 'value_type' => 'price'],
        ['key' => 'items_count', 'label' => 'Items'],
        ['key' => 'status', 'label' => 'Status'],
        ['key' => 'created_at', 'label' => 'Date', 'value_type' => 'date'],
    ],
])

🎨 Customization

CSS Classes

@livewire('aftable', [
    'tableClass' => 'w-full border-collapse',
    'theadClass' => 'bg-gray-100',
    'rowClass' => 'hover:bg-gray-50',
])

Custom Query

@livewire('aftable', [
    'model' => 'App\Models\Item',
    'customQuery' => Item::active()->whereTenantId(auth()->user()->tenant_id),
])

Export Formats

@livewire('aftable', [
    'showExport' => true,
    'exportFormats' => ['csv', 'excel', 'pdf'],
])

🖨️ Isolated Print Window

Enable printable: true to show a Print button that opens an isolated pop-up window containing only the table — no surrounding layout.

@livewire('aftable', [
    'model'       => App\Models\User::class,
    'columns'     => [...],
    'printable'   => true,
    'printConfig' => [
        'title'       => 'User Report',
        'header'      => '<p>Confidential — Internal Use Only</p>',
        'footer'      => 'HR Department',
        'fontSize'    => 11,          // pt (default 11)
        'orientation' => 'landscape', // portrait | landscape
        'paperSize'   => 'A4',
        'showDate'    => true,
        'showPageNum' => true,
        'tableClass'  => 'table-striped',
    ],
])

Note: Requires the browser to allow pop-ups for your domain.

🔧 Three Syntax Options

All three are equivalent — pick the one that fits your workflow:

{{-- 1. Blade helper (most common) --}}
@livewire('aftable', ['model' => App\Models\User::class, 'columns' => [...]])

{{-- 2. Livewire tag syntax --}}
<livewire:aftable :model="App\Models\User::class" :columns="$columns" />

{{-- 3. @aftable directive with optional custom table markup --}}
@aftable(['model' => App\Models\User::class, 'columns' => [...]])
    <table class="table table-hover my-custom-theme">
        <thead class="bg-dark text-white"><tr></tr></thead>
        <tbody></tbody>
    </table>
@endaftable

The live code generator at index.html supports all three via the Output Syntax radio group.

⚠️ Important Usage Rules

✅ CORRECT - Use in Blade Views

<!-- In resources/views/products/index.blade.php -->
@livewire('aftable', [
    'model' => 'App\Models\Product',
    'columns' => [...],
])

❌ INCORRECT - Don't Use in Components

// DON'T do this:
class MyComponent extends Component {
    public function render() {
        // Don't use @livewire here
    }
}

Rule: Component must be used directly in Blade views, NOT instantiated in PHP!

🐛 Troubleshooting

"Component not found"

Solution: Run composer require artflow-studio/table

Slow loading / Many queries

Solution: Use 'relation' => 'relationName:columnName' format for related data

Sorting doesn't work

Solution: Only database fields are sortable. Use actual column names.

Search returns nothing

Solution: Search only works on text columns. Numbers, dates won't search.

Relationship shows null

Solution: Verify relation exists on model and column name is correct

🔗 Next Steps

1. Start Here: Copy an example from "Real-World Examples" above
2. Customize: Replace model name and columns with your data
3. Test: Open in browser and verify sorting/search works
4. Read More: See documentation files for advanced features
5. Deploy: Use in production!

📖 Documentation Files

🤝 Support

• Documentation: Read the guides in this directory
• Issues: Check troubleshooting section
• Examples: Review real-world examples section
• Questions: Refer to AI_USAGE_GUIDE.md FAQ section

📝 License

This package is open-source and available under the MIT license.

ArtFlow Table 1.8.0 - Where Performance Meets Simplicity ⚡

Make datatables simple and fast with automatic optimization!

Last Updated: July 2025
Status: ✅ Production Ready