PHPackages                             artflow-studio/table - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. artflow-studio/table

ActiveLibrary[Templating & Views](/categories/templating)

artflow-studio/table
====================

A custom package to render Livewire components using the @AFtable directive.

1.5.6(2mo ago)02341MITPHPPHP \*CI passing

Since Nov 13Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/rahee554/af-table)[ Packagist](https://packagist.org/packages/artflow-studio/table)[ Docs](https://github.com/artflow-studio/table)[ RSS](/packages/artflow-studio-table/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (8)Versions (46)Used By (1)

🎯 ArtFlow Table — Laravel Livewire Datatable Component
======================================================

[](#-artflow-table--laravel-livewire-datatable-component)

> **A production-ready, trait-based Laravel Livewire 4 datatable component with automatic optimization, N+1 prevention, and zero-config setup.**

**Version:** 1.5.6 | **PHP:** 8.2+ | **Laravel:** 12+ | **Livewire:** 4.x | **Tailwind/Bootstrap:** Compatible

---

✨ What Is ArtFlow Table?
------------------------

[](#-what-is-artflow-table)

ArtFlow Table is a **Livewire 4 component** that builds powerful, performant datatables with:

- ✅ **Automatic sorting, searching, pagination** — Built-in, zero config
- ✅ **N+1 query prevention** — Relations eager-loaded automatically
- ✅ **`raw` column templates** — Full Blade & PHP expression support (`{{ }}`, `{!! !!}`, closures)
- ✅ **Livewire 4 native** — `#[Computed]` caching, `#[On]` events, `wire:model.live`
- ✅ **Static / Array mode** — No model needed; pass any array or Collection
- ✅ **Count aggregations** — `withCount()` without loading relations
- ✅ **Export** — CSV, Excel, PDF (optional)
- ✅ **Column visibility** — Toggle columns client-side
- ✅ **Interactive filters** — per-column with type-specific operators
- ✅ **Date range filtering** — built-in `dateColumn` support
- ✅ **Responsive** — works on mobile & desktop
- ✅ **Docs & Generator** — visit `/aftable/generator` for interactive docs

---

🚀 Installation
--------------

[](#-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)
-------------------------

[](#-quick-start-2-minutes)

### Basic Usage in Blade

[](#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!)

[](#with-relationships-no-n1)

```
@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
---------------------

[](#-performance-metrics)

MetricResultImprovement**Database Queries**1 query98% reduction (51 → 1)**Page Load Time**150-200ms75-80% faster (800ms → 200ms)**Configuration Code**Minimal80% less than competitors**Memory Usage**OptimizedHandles 1M+ records**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
----------------------

[](#-column-configuration)

### Simple (Recommended)

[](#simple-recommended)

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

- Auto-sorted ✅
- Auto-searched ✅

### With Relationship

[](#with-relationship)

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

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

### With Count

[](#with-count)

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

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

### With Actions

[](#with-actions)

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

---

🔧 Common Options
----------------

[](#-common-options)

```
@livewire('aftable', [
    'model'         => App\Models\User::class,
    'columns'       => [...],
    'perPage'       => 25,
    'sortBy'        => 'created_at',
    'sortDirection' => 'desc',
    'searchable'    => true,
    'exportable'    => false,
    'printable'     => false,
    'checkbox'      => false,
    'index'         => false,
    'colvisBtn'     => true,
    'refreshBtn'    => false,
    'extraVars'     => ['currency' => 'PKR'],
    'dateColumn'    => 'created_at',
])
```

---

🎨 Raw Column Templates
----------------------

[](#-raw-column-templates)

`raw` columns support full **Blade syntax** and **PHP expressions**. The current row is available as `$row`.

### Blade expressions (`{{ }}` and `{!! !!}`)

[](#blade-expressions---and--)

```
// Date formatting
['key' => 'date', 'label' => 'Date',
 'raw' => '{{ \Carbon\Carbon::parse($row->date)->format("d M Y") }}']

// Status badge with unescaped HTML
['key' => 'active', 'label' => 'Status',
 'raw' => '{!! $row->active
     ? "Active"
     : "Inactive" !!}']

// Calculated value
['key' => 'amount', 'label' => 'Total',
 'raw' => 'PKR {{ number_format($row->qty * $row->price, 2) }}']
```

> **Livewire 4 note:** `raw` templates use `compileString() + eval()` internally, bypassing Livewire 4's `ExtendedCompilerEngine` which caused compiled PHP to appear as raw text. Both `{{ }}` (escaped) and `{!! !!}` (unescaped) work correctly.

### PHP Closures (fastest, no Blade overhead)

[](#php-closures-fastest-no-blade-overhead)

```
['key' => 'status', 'label' => 'Status',
 'raw' => fn($row) => ''.e($row->status).'']
```

### Extra variables in raw templates

[](#extra-variables-in-raw-templates)

```
@livewire('aftable', [
    'model'     => App\Models\Order::class,
    'extraVars' => ['currency' => 'USD', 'locale' => 'en'],
    'columns'   => [
        ['key' => 'total', 'raw' => '{{ $currency }} {{ number_format($row->total, 2) }}'],
    ],
])
```

---

🆕 Livewire 4 Compatibility
--------------------------

[](#-livewire-4-compatibility)

FeatureOld (LW3)New (LW4)Event listeners`protected $listeners = [...]``#[On('event')]` attributeReactive updates`wire:model``wire:model.live`Computed dataManual caching`#[Computed]` auto-caching`raw` rendering`Blade::render()``compileString() + eval()`Alpine.jsExternal importBundled with Livewire### Events (Livewire 4)

[](#events-livewire-4)

EventHow to dispatch`refreshTable``Livewire.dispatch('refreshTable')``dateRangeSelected``Livewire.dispatch('dateRangeSelected', {startDate, endDate})`---

📚 Documentation & Generator
-------------------------------

[](#-documentation--generator)

Visit **`/aftable/generator`** in your application to:

- 📖 Browse full interactive documentation
- ⚡ Generate `@livewire()` column code with a visual builder
- 👁 Preview all column types and templates

---

📚 Documentation
---------------

[](#-documentation)

### For End Users & Quick Learners

[](#for-end-users--quick-learners)

📖 **[AI\_USAGE\_GUIDE.md](AI_USAGE_GUIDE.md)** - Non-technical guide

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

### For Developers & AI Agents

[](#for-developers--ai-agents)

📖 **[AI\_TECHNICAL\_REFERENCE.md](AI_TECHNICAL_REFERENCE.md)** - Technical deep dive

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

---

🏗️ How It Works
---------------

[](#️-how-it-works)

### The Magic: Automatic Optimization

[](#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

[](#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
---------------------

[](#-real-world-examples)

### Items Inventory Table

[](#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

[](#user-management)

```
@livewire('aftable', [
    'model' => 'App\Models\User',
    'perPage' => 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

[](#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
---------------

[](#-customization)

### Custom Query (restrict rows)

[](#custom-query-restrict-rows)

```
@livewire('aftable', [
    'model' => App\Models\Item::class,
    'query' => Item::query()->where('tenant_id', auth()->user()->tenant_id)->active(),
])
```

### Export & Print

[](#export--print)

```
@livewire('aftable', [
    'model'      => App\Models\User::class,
    'columns'    => [...],
    'exportable' => true,   // CSV / Excel export button
    'printable'  => true,   // Print button (isolated pop-up window)
])
```

### Extra Variables in Raw Templates

[](#extra-variables-in-raw-templates-1)

```
@livewire('aftable', [
    'model'   => App\Models\Order::class,
    'vars'    => ['currency' => 'USD'],  // available as $currency in raw templates
    'columns' => [
        ['key' => 'total', 'raw' => '{{ $currency }} {{ number_format($row->total, 2) }}'],
    ],
])
```

---

🖨️ Isolated Print Window
------------------------

[](#️-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'      => 'Confidential — Internal Use Only',
        '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
----------------------

[](#-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 --}}

{{-- 3. @aftable directive with optional custom table markup --}}
@aftable(['model' => App\Models\User::class, 'columns' => [...]])

@endaftable
```

The live code generator at `/aftable/generator` supports all three via the **Output Syntax** radio group.

---

⚠️ Important Usage Rules
------------------------

[](#️-important-usage-rules)

### ✅ CORRECT - Use in Blade Views

[](#-correct---use-in-blade-views)

```

@livewire('aftable', [
    'model' => 'App\Models\Product',
    'columns' => [...],
])
```

### ❌ INCORRECT - Don't Use in Components

[](#-incorrect---dont-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
-----------------

[](#-troubleshooting)

### "Component not found"

[](#component-not-found)

**Solution:** Run `composer require artflow-studio/table`

### Slow loading / Many queries

[](#slow-loading--many-queries)

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

### Sorting doesn't work

[](#sorting-doesnt-work)

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

### Search returns nothing

[](#search-returns-nothing)

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

### Relationship shows null

[](#relationship-shows-null)

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

---

🔗 Next Steps
------------

[](#-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
---------------------

[](#-documentation-files)

FilePurposeAudience**README.md**This file — Overview & API referenceEveryone**USAGE\_STUB.md**Complete method referenceDevelopers, AI agents**AI\_USAGE\_GUIDE.md**Non-technical usage guideUsers, AI agents**AI\_TECHNICAL\_REFERENCE.md**Architecture deep-diveDevelopers, AI agents**CHANGELOG\_V2.0.0.md**v2.0.0 Livewire 4 upgrade notesDevelopers**CHANGELOG\_V1.8.0.md**v1.8.0 release notesDevelopers> **Interactive docs:** visit `/aftable/generator` in your running app for a live docs browser and column code generator.

---

🤝 Support
---------

[](#-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
---------

[](#-license)

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

---

**ArtFlow Table 2.0.0 - Where Performance Meets Simplicity** ⚡

Make datatables **simple** and **fast** with automatic optimization!

**Last Updated:** July 2025
**Status:** ✅ Production Ready (Livewire 4 / Laravel 12)

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance83

Actively maintained with recent releases

Popularity14

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~11 days

Recently: every ~33 days

Total

45

Last Release

87d ago

Major Versions

v0.09 → v1.02025-06-29

v0.1 → v1.012025-07-02

PHP version history (3 changes)v0.02PHP ^8.0

v0.03PHP ^7.4|^8.0

v0.04PHP \*

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/76494683?v=4)[Raheel Ahmad](/maintainers/rahee554)[@rahee554](https://github.com/rahee554)

---

Top Contributors

[![rahee554](https://avatars.githubusercontent.com/u/76494683?v=4)](https://github.com/rahee554 "rahee554 (42 commits)")

---

Tags

laravellivewirecomponenttabledatatableartflow

### Embed Badge

![Health badge](/badges/artflow-studio-table/health.svg)

```
[![Health](https://phpackages.com/badges/artflow-studio-table/health.svg)](https://phpackages.com/packages/artflow-studio-table)
```

###  Alternatives

[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

725173.0k14](/packages/tallstackui-tallstackui)[livewire/flux

The official UI component library for Livewire.

9527.8M127](/packages/livewire-flux)[laravel/pulse

Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application.

1.7k15.1M131](/packages/laravel-pulse)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9762.4M131](/packages/roots-acorn)[moonshine/moonshine

Laravel administration panel

1.3k253.1k81](/packages/moonshine-moonshine)[wendelladriel/slidewire

Create beautiful presentations powered by Livewire

1342.9k](/packages/wendelladriel-slidewire)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)