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.5(2mo ago)02061MITPHPPHP \*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 1mo ago

READMEChangelogDependencies (5)Versions (45)Used By (1)

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

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

---

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

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

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

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

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

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

### CSS Classes

[](#css-classes)

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

### Custom Query

[](#custom-query)

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

### Export Formats

[](#export-formats)

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

---

🖨️ 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 `index.html` 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 - OverviewEveryone**USAGE\_STUB.md**Complete method referenceDevelopers, AI agents**AI\_USAGE\_GUIDE.md**How to use (non-technical)Users, AI agents**AI\_TECHNICAL\_REFERENCE.md**How it works (technical)Developers, AI agents**FEATURE\_RECOMMENDATIONS.md**Future features & roadmapArchitects, Planners**CHANGELOG\_V1.8.0.md**v1.8.0 release notes (Blaze, #\[Computed\], @island)Developers**CHANGELOG\_V1.6.0.md**v1.6.0 & v1.7.0 release notesDevelopers---

🤝 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 1.8.0 - Where Performance Meets Simplicity** ⚡

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

**Last Updated:** July 2025
**Status:** ✅ Production Ready

###  Health Score

43

—

FairBetter than 91% of packages

Maintenance88

Actively maintained with recent releases

Popularity14

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity51

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 ~34 days

Total

44

Last Release

60d 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://www.gravatar.com/avatar/998661a880df4a5ad4fc597f7e6c28e5a11047707b58ac7bb171916aacf65253?d=identicon)[rahee554](/maintainers/rahee554)

---

Top Contributors

[![rahee554](https://avatars.githubusercontent.com/u/76494683?v=4)](https://github.com/rahee554 "rahee554 (41 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

[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[tomshaw/electricgrid

A feature-rich Livewire package designed for projects that require dynamic, interactive data tables.

116.6k](/packages/tomshaw-electricgrid)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

413.9k](/packages/mati365-ckeditor5-livewire)

PHPackages © 2026

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