PHPackages                             idkwhoami/flux-tables - 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. idkwhoami/flux-tables

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

idkwhoami/flux-tables
=====================

This package provides a reusable, configurable table livewire component styled using Flux

2.2.20(10mo ago)186[2 issues](https://github.com/dev-idkwhoami/flux-tables/issues)MITPHPPHP ^8.3

Since Dec 31Pushed 7mo ago2 watchersCompare

[ Source](https://github.com/dev-idkwhoami/flux-tables)[ Packagist](https://packagist.org/packages/idkwhoami/flux-tables)[ Docs](https://github.com/idkwhoami/flux-tables)[ RSS](/packages/idkwhoami-flux-tables/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (14)Versions (50)Used By (0)

Flux Tables
===========

[](#flux-tables)

[![Latest Version on Packagist](https://camo.githubusercontent.com/86937abd30da06d548c31fbc14db0167c0d504ab6b58faf68afe58724ad64c6b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f69646b77686f616d692f666c75782d7461626c65732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/idkwhoami/flux-tables)

A comprehensive Laravel Livewire table component package built on top of [Flux UI](http://fluxui.dev) that provides a modular, customizable way to create data tables with advanced features like filtering, sorting, searching, and PostgreSQL-specific functionality.

Important

This package is NOT "in development". If I need to extend it i will do so. Feel free to fork it or use it as is. But feature requests are probably being ignored. Same for pull requests

Warning

This package is meant to be used in combination with a PostgreSQL database as it provides utils that most databases dont have. For example json path walking & vectors.

What This Package Does
----------------------

[](#what-this-package-does)

Flux Tables provides a complete table solution for Laravel applications with:

- **Modular Architecture**: Use traits to build custom table components with only the features you need
- **Rich Column Types**: Text, DateTime, Boolean, JSON, Component, Action, and List columns
- **Advanced Filtering**: Boolean, Date Range, Select, Value Present, and Deleted filters with session persistence
- **PostgreSQL Features**: JSON path querying, advanced sorting, and database-specific optimizations
- **Livewire Integration**: Reactive components with real-time updates and state management
- **Flux UI Integration**: Beautiful, accessible UI components out of the box

How It's Meant to Be Used
-------------------------

[](#how-its-meant-to-be-used)

The package offers two main approaches:

1. **Quick Setup**: Use the pre-built `SimpleTable` component for rapid development
2. **Custom Components**: Build your own table components using the modular trait system

The modular design allows you to pick and choose features:

- `HasEloquentTable` - Core Eloquent query functionality
- `HasFilters` - Filter management and application
- `HasSorting` - Column sorting with PostgreSQL JSON support
- `HasSearch` - Global search functionality
- `HasActions` - Row-level actions (edit, delete, etc.)
- `HasToggleableColumns` - Show/hide columns
- `HasDynamicPagination` - Configurable pagination

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require idkwhoami/flux-tables
```

Run the installation command:

```
php artisan flux-tables:install
```

This will use the `flux:icon` artisan command to fetch the [Lucide](https://lucide.dev/) icons used in the package.

Quick Start
-----------

[](#quick-start)

Here's a basic example using the pre-built SimpleTable component:

```
$filters = [
    \Idkwhoami\FluxTables\Concretes\Filter\DeletedFilter::make('deleted')
        ->label('Deletion State')
        ->default(\Idkwhoami\FluxTables\Enums\DeletionState::WithoutDeleted->value),
    \Idkwhoami\FluxTables\Concretes\Filter\DateRangeFilter::make('created')
        ->property('created_at')
        ->label('Created'),
    \Idkwhoami\FluxTables\Concretes\Filter\ValuePresentFilter::make('email_verified')
        ->property('email_verified_at')
        ->label('Exclude unverified')
        ->description('Hide all users that haven\'t verified their email address.')
        ->pillContent('Unverified excluded'),
    \Idkwhoami\FluxTables\Concretes\Filter\BooleanFilter::make('banned')
        ->property('banned'),
];

$columns = [
    \Idkwhoami\FluxTables\Concretes\Column\ComponentColumn::make('name')
        ->label('Username')
        ->sortable()
        ->searchable()
        ->component('columns.user-name-input')
        ->property('name'),
    \Idkwhoami\FluxTables\Concretes\Column\DatetimeColumn::make('created')
        ->humanReadable()
        ->label("Created")
        ->sortable()
        ->property('created_at'),
    \Idkwhoami\FluxTables\Concretes\Column\TextColumn::make('posts')
        ->count()
        ->label('Posts')
        ->relation('posts')
        ->property('posts_count'),
    \Idkwhoami\FluxTables\Concretes\Column\DatetimeColumn::make('email_verified')
        ->label("Email Verified At")
        ->sortable()
        ->property('email_verified_at'),
    \Idkwhoami\FluxTables\Concretes\Column\BooleanColumn::make('banned')
        ->label('Banned')
        ->property('banned'),
    \Idkwhoami\FluxTables\Concretes\Column\DatetimeColumn::make('deleted')
        ->label("Deleted")
        ->default('n/a')
        ->property('deleted_at'),
    \Idkwhoami\FluxTables\Concretes\Column\ActionColumn::make('actions')
        ->actions([
            Idkwhoami\FluxTables\Abstracts\Action\ModalAction::make('open')
                ->label('Open')
                ->icon('arrow-top-right-on-square')
                ->link()
                ->component('user-delete-confirmation'),
            Idkwhoami\FluxTables\Abstracts\Action\DirectAction::make('delete')
                ->visible(fn(\Illuminate\Database\Eloquent\Model $model) => auth()->user()->isNot($model) && !$model->deleted_at)
                ->label('Delete')
                ->icon('trash-2')
                ->operation(\Idkwhoami\FluxTables\Concretes\Operation\DeleteOperation::make('delete')),
            Idkwhoami\FluxTables\Abstracts\Action\DirectAction::make('restore')
                ->visible(fn(\Illuminate\Database\Eloquent\Model $model) => auth()->user()->isNot($model) && $model->deleted_at)
                ->label('Restore')
                ->icon('rotate-ccw')
                ->operation(\Idkwhoami\FluxTables\Concretes\Operation\RestoreOperation::make('restore')),
        ]),
];
```

```

```

API Documentation
-----------------

[](#api-documentation)

### Abstract Classes

[](#abstract-classes)

#### Action (`Idkwhoami\FluxTables\Abstracts\Action\Action`)

[](#action-idkwhoamifluxtablesabstractsactionaction)

Base class for all table actions.

**Methods:**

- `label(string $label): static` - Set the action label
- `icon(string $icon): static` - Set the action icon (Lucide icon name)
- `variant(?string $variant): static` - Set the action variant (default, danger, outline, filled, primary, ghost, subtle)
- `visible(Closure|bool $visible): static` - Set visibility condition
- `access(Closure|bool $access): static` - Set access control condition
- `link(bool $link = true): static` - Render as link instead of button
- `render(mixed $id): string|HtmlString|View|null` - Abstract method to render the action

#### Column (`Idkwhoami\FluxTables\Abstracts\Column\Column`)

[](#column-idkwhoamifluxtablesabstractscolumncolumn)

Base class for all table columns.

**Methods:**

- `label(?string $label): static` - Set the column label
- `sortable(bool $sortable = true): static` - Make column sortable
- `searchable(bool $searchable = true): static` - Make column searchable
- `toggleable(bool $toggleable): static` - Make column toggleable
- `visible(bool|Closure $visible = true): static` - Set visibility condition
- `render(object $value): string|HtmlString|View|null` - Abstract method to render the column

#### PropertyColumn (`Idkwhoami\FluxTables\Abstracts\Column\PropertyColumn`)

[](#propertycolumn-idkwhoamifluxtablesabstractscolumnpropertycolumn)

Extends Column for property-based columns.

**Methods:**

- `property(string $property): static` - Set the model property
- `relation(string $relation): static` - Set the relation name
- `count(bool $count = true): static` - Count relation items
- `default(mixed $default): static` - Set default value
- `transform(Closure $transform): static` - Transform the value before rendering

#### Filter (`Idkwhoami\FluxTables\Abstracts\Filter\Filter`)

[](#filter-idkwhoamifluxtablesabstractsfilterfilter)

Base class for all table filters.

**Methods:**

- `label(string $label): static` - Set the filter label
- `default(mixed $default): static` - Set default value
- `visible(Closure|bool $visible): static` - Set visibility condition
- `apply(Builder $query): void` - Abstract method to apply filter to query
- `component(): string` - Abstract method to return Livewire component name
- `renderPill(): string|HtmlString|View` - Abstract method to render filter pill

#### Table (`Idkwhoami\FluxTables\Abstracts\Table\Table`)

[](#table-idkwhoamifluxtablesabstractstabletable)

Base class for table configuration.

**Methods:**

- `columns(array $columns): static` - Set table columns
- `filters(array $filters): static` - Set table filters
- `getColumns(): array` - Get visible columns
- `getFilters(): array` - Get visible filters
- `getColumn(string $key): Column` - Get specific column by key

### Concrete Column Implementations

[](#concrete-column-implementations)

#### TextColumn (`Idkwhoami\FluxTables\Concretes\Column\TextColumn`)

[](#textcolumn-idkwhoamifluxtablesconcretescolumntextcolumn)

Simple text column for displaying string values.

#### DatetimeColumn (`Idkwhoami\FluxTables\Concretes\Column\DatetimeColumn`)

[](#datetimecolumn-idkwhoamifluxtablesconcretescolumndatetimecolumn)

Column for displaying dates and times.

**Methods:**

- `format(string $format): static` - Set date format (default: 'm/d/Y H:i:s')
- `humanReadable(bool $readable = true): static` - Display as human-readable format (e.g., "2 hours ago")

#### BooleanColumn (`Idkwhoami\FluxTables\Concretes\Column\BooleanColumn`)

[](#booleancolumn-idkwhoamifluxtablesconcretescolumnbooleancolumn)

Column for displaying boolean values as badges or icons.

#### JsonColumn (`Idkwhoami\FluxTables\Concretes\Column\JsonColumn`)

[](#jsoncolumn-idkwhoamifluxtablesconcretescolumnjsoncolumn)

PostgreSQL-specific column for querying JSON data.

**Methods:**

- `path(array|string $path): static` - Set JSON path (e.g., 'user.name' or \['user', 'name'\])
- `type(JsonPropertyType $type): static` - Set PostgreSQL cast type (text, integer, boolean, etc.)

#### ComponentColumn (`Idkwhoami\FluxTables\Concretes\Column\ComponentColumn`)

[](#componentcolumn-idkwhoamifluxtablesconcretescolumncomponentcolumn)

Column that renders a custom Blade component.

**Methods:**

- `component(string $component): static` - Set the component name

#### ActionColumn (`Idkwhoami\FluxTables\Concretes\Column\ActionColumn`)

[](#actioncolumn-idkwhoamifluxtablesconcretescolumnactioncolumn)

Column for displaying row actions.

**Methods:**

- `actions(array $actions): static` - Set the actions array

#### ListColumn (`Idkwhoami\FluxTables\Concretes\Column\ListColumn`)

[](#listcolumn-idkwhoamifluxtablesconcretescolumnlistcolumn)

Column for displaying arrays or collections as lists.

### Concrete Filter Implementations

[](#concrete-filter-implementations)

#### BooleanFilter (`Idkwhoami\FluxTables\Concretes\Filter\BooleanFilter`)

[](#booleanfilter-idkwhoamifluxtablesconcretesfilterbooleanfilter)

Filter for boolean values with true/false/all options.

#### DateRangeFilter (`Idkwhoami\FluxTables\Concretes\Filter\DateRangeFilter`)

[](#daterangefilter-idkwhoamifluxtablesconcretesfilterdaterangefilter)

Filter for date ranges with start and end date inputs.

**Methods:**

- `property(string $property): static` - Set the date property to filter

#### DeletedFilter (`Idkwhoami\FluxTables\Concretes\Filter\DeletedFilter`)

[](#deletedfilter-idkwhoamifluxtablesconcretesfilterdeletedfilter)

Filter for soft-deleted models with options for all/only deleted/without deleted.

#### SelectFilter (`Idkwhoami\FluxTables\Concretes\Filter\SelectFilter`)

[](#selectfilter-idkwhoamifluxtablesconcretesfilterselectfilter)

Filter with predefined options in a select dropdown.

**Methods:**

- `options(array $options): static` - Set the available options

#### ValuePresentFilter (`Idkwhoami\FluxTables\Concretes\Filter\ValuePresentFilter`)

[](#valuepresentfilter-idkwhoamifluxtablesconcretesfiltervaluepresentfilter)

Filter to show/hide records based on whether a field has a value.

**Methods:**

- `property(string $property): static` - Set the property to check
- `description(string $description): static` - Set filter description
- `pillContent(string $content): static` - Set the pill display text

### Action Implementations

[](#action-implementations)

#### DirectAction (`Idkwhoami\FluxTables\Abstracts\Action\DirectAction`)

[](#directaction-idkwhoamifluxtablesabstractsactiondirectaction)

Action that executes immediately when clicked.

**Methods:**

- `operation(Operation $operation): static` - Set the operation to execute

#### ModalAction (`Idkwhoami\FluxTables\Abstracts\Action\ModalAction`)

[](#modalaction-idkwhoamifluxtablesabstractsactionmodalaction)

Action that opens a modal component.

**Methods:**

- `component(string $component): static` - Set the modal component name

### Operations

[](#operations)

#### DeleteOperation (`Idkwhoami\FluxTables\Concretes\Operation\DeleteOperation`)

[](#deleteoperation-idkwhoamifluxtablesconcretesoperationdeleteoperation)

Operation for soft-deleting models.

#### RestoreOperation (`Idkwhoami\FluxTables\Concretes\Operation\RestoreOperation`)

[](#restoreoperation-idkwhoamifluxtablesconcretesoperationrestoreoperation)

Operation for restoring soft-deleted models.

#### RouteOperation (`Idkwhoami\FluxTables\Concretes\Operation\RouteOperation`)

[](#routeoperation-idkwhoamifluxtablesconcretesoperationrouteoperation)

Operation for redirecting to a route.

**Methods:**

- `route(string $route): static` - Set the route name
- `parameters(array $parameters): static` - Set route parameters

### Traits for Custom Components

[](#traits-for-custom-components)

#### HasEloquentTable

[](#haseloquenttable)

Core trait for Eloquent-based tables.

**Methods:**

- `table(string $model, array $columns, array $filters): Table` - Configure the table
- `getQuery(): Builder` - Get the base query
- `optimizeSelects(bool $optimize): static` - Enable/disable select optimization
- `applyRelations(Builder $query): void` - Apply relation joins
- `applyColumns(Builder $query): void` - Apply column selections

#### HasFilters

[](#hasfilters)

Adds filtering functionality.

**Methods:**

- `applyFilters(Builder $query): void` - Apply active filters to query
- `getFilters(): array` - Get all filters
- `getActiveFilters(): array` - Get currently active filters
- `resetFilter(string $filter): void` - Reset specific filter
- `resetFilters(): void` - Reset all filters
- `hasActiveFilters(): bool` - Check if any filters are active

#### HasSorting

[](#hassorting)

Adds sorting functionality with PostgreSQL JSON support.

**Properties:**

- `?string $sortingColumn` - Current sort column
- `?string $sortingDirection` - Current sort direction

**Methods:**

- `applySorting(Builder $query): void` - Apply sorting to query
- `sort(string $column): void` - Sort by column (cycles through asc/desc/none)
- `resetSorting(): void` - Reset sorting
- `getSortingColumn(): string` - Get current sort column
- `getSortingDirection(): string` - Get current sort direction
- `defaultSortingColumn(): string` - Default sort column
- `defaultSortingDirection(): string` - Default sort direction

#### HasSearch

[](#hassearch)

Adds global search functionality.

**Properties:**

- `string $search` - Current search term

**Methods:**

- `applySearch(Builder $query): void` - Apply search to query
- `resetSearch(): void` - Clear search

#### HasActions

[](#hasactions)

Adds row-level actions functionality.

**Methods:**

- `getActions(): array` - Get all actions
- `executeAction(string $action, mixed $id): void` - Execute an action

#### HasToggleableColumns

[](#hastoggleablecolumns)

Adds column visibility toggling.

**Methods:**

- `toggleColumn(string $column): void` - Toggle column visibility
- `getToggledColumns(): array` - Get currently visible columns
- `defaultToggledColumns(): array` - Default visible columns

#### HasDynamicPagination

[](#hasdynamicpagination)

Adds configurable pagination.

**Methods:**

- `getPaginationOptions(): array` - Get pagination size options
- `defaultPaginationValue(): int` - Get default pagination size

### Enums

[](#enums)

#### DeletionState (`Idkwhoami\FluxTables\Enums\DeletionState`)

[](#deletionstate-idkwhoamifluxtablesenumsdeletionstate)

- `All` - Show all records
- `OnlyDeleted` - Show only soft-deleted records
- `WithoutDeleted` - Show only non-deleted records

#### JsonPropertyType (`Idkwhoami\FluxTables\Enums\JsonPropertyType`)

[](#jsonpropertytype-idkwhoamifluxtablesenumsjsonpropertytype)

PostgreSQL cast types for JSON properties:

- `Text` - Cast as text
- `Integer` - Cast as integer
- `Boolean` - Cast as boolean
- `Numeric` - Cast as numeric

### Livewire Components

[](#livewire-components)

#### SimpleTable (`Idkwhoami\FluxTables\Livewire\SimpleTable`)

[](#simpletable-idkwhoamifluxtableslivewiresimpletable)

Pre-built table component with all features enabled.

**Properties:**

- `string $title` - Table title
- `string $model` - Eloquent model class
- `array $columns` - Column definitions
- `array $filters` - Filter definitions
- `?string $create` - Create component name
- `array $defaultToggledColumns` - Initially visible columns

Custom Table Example
--------------------

[](#custom-table-example)

Here's how to create a custom table component using the modular trait system. This example demonstrates building a comprehensive table with all available features:

### 1. Create the Livewire Component

[](#1-create-the-livewire-component)

```