Laravel Livewire Tables

https://github.com/rappasoft/laravel-livewire-tables
Admin
A dynamic Laravel Livewire component for data tables.
Tokens:385,889
Snippets:2,806
Trust Score:9.3
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Example combining setIcon and attributes

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/column-types/icon_column.md

Complete example showing both setIcon and attributes together, with three different attribute sets based on value (1, 2, or other).

```php
IconColumn::make('Icon', 'status')
    ->setIcon(function ($row, $value) { if($value == 1) { return "heroicon-o-check-circle"; } else { return "heroicon-o-x-circle"; } })
    ->attributes(function ($row, $value) { 
        if($value == 3) { 
            return [
                'class' => 'w-3 h-3', 
                'stroke' => '#008000'
            ]; 
        } 
        else if($value == 2) { 
            return [
                'class' => 'w-3 h-3', 
                'stroke' => '#0000FF'
            ]; 
        } 
        else 
        {
            return [
                'class' => 'w-3 h-3', 
                'stroke' => '#FF0000'
            ]; 
        } 
    }),
```

--------------------------------

### Install via Composer

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/README.md

Install the package using Composer. Requires Livewire 3 or 4; avoid loading a second copy of Alpine.js.

```bash
composer require rappasoft/laravel-livewire-tables
```

--------------------------------

### Run the build process

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/recommended.md

Execute this command to build your frontend assets.

```bash
npm run build
```

--------------------------------

### Publish the Tables Config

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/recommended.md

Publish the package configuration file to config/livewire-tables.php.

```bash
php artisan vendor:publish --tag="livewire-tables-config"
```

--------------------------------

### Clear Application Caches

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/installation.md

Clear application caches after upgrading to Livewire 4. Run this command after following the Livewire upgrade guide.

```bash
php artisan optimize:clear
```

--------------------------------

### Clear cached views

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/recommended.md

Run this command to clear cached views after configuration changes.

```bash
php artisan view:clear
```

--------------------------------

### Vertical Scrolling Example

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/datatable/styling.md

Demonstrates how to implement a table with a responsive height and vertical scrolling for additional rows using the styling methods.

```APIDOC
## Vertical Scrolling Example

### Description
Demonstrates how to implement a table with a responsive height and vertical scrolling for additional rows using the styling methods.

### Methods Used
- `setTableWrapperAttributes`
- `setTheadAttributes`

### Example
```php
public function configure(): void
{
    $this->setTableWrapperAttributes([
        'class' => 'max-h-56 md:max-h-72 lg:max-h-96 overflow-y-scroll',
    ]);
    $this->setTheadAttributes([
        'class' => 'sticky top-0 '
    ]);
}
```

### Notes
- Adjust the break-points as needed.
- Only call methods from `configure()` once to avoid overriding or conflicting results.
```

--------------------------------

### Import assets in app.js

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/recommended.md

Add this import to resources/js/app.js to bundle the package's assets manually.

```javascript
import '../../vendor/rappasoft/laravel-livewire-tables/resources/imports/laravel-livewire-tables-all.js';
```

--------------------------------

### Non-working example: same component with different parameters

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/multiple-tables.md

This does not work because both instances share the same component and thus the same default table name, causing state conflicts.

```html
<livewire:users-table status="active" />

<livewire:users-table status="pending" />
```

--------------------------------

### Full page component example with setLayout and setSlot

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/usage/creating-components.md

Complete component using setLayout() and setSlot() in configure() for full-page usage. Includes primary key and columns.

```php
<?php

namespace App\Livewire;

use App\Models\User;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UsersTable extends DataTableComponent
{
    protected $model = User::class;

    public function configure(): void
    {
        $this->setPrimaryKey('id')
            ->setLayout('path-to-layout')
            ->setSlot('slot-name-here');
    }

    public function columns(): array
    {
        return [
            Column::make('ID', 'id')
                ->sortable(),
            Column::make('Name')
                ->sortable(),
        ];
    }
}
```

--------------------------------

### Basic DataTableComponent with Columns

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/examples/basic-example.md

Defines a Livewire table component for the User model. Sets the primary key to 'id' and defines three columns: Name, E-mail, and Address, each sortable and searchable, with Address collapsing on tablet.

```php
<?php

namespace App\Livewire;

use App\Models\User;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UsersTable extends DataTableComponent
{
    protected $model = User::class;

    public function configure(): void
    {
        $this->setPrimaryKey('id');
    }

    public function columns(): array
    {
        return [
            Column::make('Name')
                ->sortable()
                ->searchable(),
            Column::make('E-mail', 'email')
                ->sortable()
                ->searchable(),
            Column::make('Address', 'address.address')
                ->sortable()
                ->searchable()
                ->collapseOnTablet(),
        ];
    }
}
```

--------------------------------

### Use wire:navigate with setTableRowUrlTarget

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/rows/clickable-rows.md

To use wire:navigate, return 'navigate' as the target from setTableRowUrlTarget. This example shows the configure() method with that change.

```php
public function configure(): void
{
    $this->setPrimaryKey('id')
        ->setTableRowUrl(function($row) {
            return route('admin.users.show', $row);
        })
        ->setTableRowUrlTarget(function($row) {
            if ($row->isExternal()) {
                return '_blank';
            }

            return 'navigate';
        });
}
```

--------------------------------

### Tailwind content paths for Livewire components

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/recommended.md

Add these paths to include any Livewire Tables components, ensuring classes used in setTdAttributes are included.

```javascript
    './app/Livewire/*.php',
    './app/Livewire/**/*.php',
```

--------------------------------

### Basic DataTableComponent Example

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/README.md

A basic Livewire table component extending DataTableComponent. Defines the model, primary key, and columns with sorting.

```php
<?php

namespace App\Http\Livewire\Admin\User;

use App\Domains\Auth\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UsersTable extends DataTableComponent
{
    protected $model = User::class;

    public function configure(): void
    {
        $this->setPrimaryKey('id');
    }

    public function columns(): array
    {
        return [
            Column::make('ID', 'id')
                ->sortable(),
            Column::make('Name')
                ->sortable(),
        ];
    }
}

```

--------------------------------

### Example Blade for setFilterPillBlade

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filters/filter-pills.md

Example Blade file that uses the $filterPillData properties to render the filter pill. It includes the wrapper component and displays the filter pill data.

```php
@aware(['tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5'])
@props(['filterKey', 'filterPillData'])
<x-livewire-tables::tools.filter-pills.wrapper :$filterKey :$filterPillData  >

    <span {{ $filterPillData->getFilterPillDisplayData() }}></span>

</x-livewire-tables::tools.filter-pills.wrapper>
```

--------------------------------

### Set custom reorder method with setReorderMethod

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/reordering/setup.md

By default the method called when the save button is clicked is 'reorder'. Change it by calling setReorderMethod with your method name.

```php
public function configure(): void
{
    $this->setReorderMethod('changeOrder');
}
```

--------------------------------

### Tailwind content paths for Livewire Tables

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/recommended.md

Add these paths to the 'content' section of tailwind.config.js to include Livewire Tables core classes.

```javascript
    './vendor/rappasoft/laravel-livewire-tables/resources/views/*.blade.php',
    './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
```

--------------------------------

### Working example: two different table components on the same page

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/multiple-tables.md

Place two different Livewire table components on the same page. This works because each component has a distinct class and therefore a distinct table name.

```html
<livewire:users-table />

<livewire:roles-table />
```

--------------------------------

### Apply default filter at component boot level with setFilter

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filters/applying-filters.md

Use the setFilter() method in the mount() method to apply a default filter when the view is accessed. This example sets the 'created_after' filter to one month before the current date.

```php
public function mount() {
    $this->setFilter('created_after', date('Y-m-d', strtotime('now -1 month')));
}
```

--------------------------------

### Remove Blade directives from layouts

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/recommended.md

Ensure your layouts do not include these Blade directives when using the bundling approach.

```html
    <!-- Adds the Core Table Styles -->
    @rappasoftTableStyles
    
    <!-- Adds any relevant Third-Party Styles (Used for DateRangeFilter (Flatpickr) and NumberRangeFilter) -->
    @rappasoftTableThirdPartyStyles

    <!-- Adds the Core Table Scripts -->
    @rappasoftTableScripts

    <!-- Adds any relevant Third-Party Scripts (e.g. Flatpickr) -->
    @rappasoftTableThirdPartyScripts
```

--------------------------------

### Vertical Scrolling Example: Set table wrapper and thead attributes

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/datatable/styling.md

Implements a table with responsive height and vertical scrolling. Adjust break-points as needed. Only call methods from configure() once to avoid conflicts.

```php
public function configure(): void
{

    $this->setTableWrapperAttributes([
        'class' => 'max-h-56 md:max-h-72 lg:max-h-96 overflow-y-scroll',
        ]);
    $this->setTheadAttributes([
        'class' => 'sticky top-0 '
    ]);
}
```

--------------------------------

### Define filters with MultiSelectFilter, SelectFilter, and DateFilter

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/examples/advanced-example.md

Returns an array of filter definitions for the table. MultiSelectFilter uses a query to populate options and filters by related tags. SelectFilter for email verification uses setFilterPillTitle and custom filter logic. SelectFilter for Active uses setFilterPillValues to map values to labels. SelectFilter for Address Group uses a grouped query for options. DateFilter for Verified From and Verified To apply range filters on email_verified_at.

```php
public function filters(): array
{
    return [
        MultiSelectFilter::make('Tags')
            ->options(
                Tag::query()
                    ->orderBy('name')
                    ->get()
                    ->keyBy('id')
                    ->map(fn($tag) => $tag->name)
                    ->toArray()
            )->filter(function(Builder $builder, array $values) {
                $builder->whereHas('tags', fn($query) => $query->whereIn('tags.id', $values));
            })
            ->setFilterPillValues([
                '3' => 'Tag 1',        
            ]),
        SelectFilter::make('E-mail Verified', 'email_verified_at')
            ->setFilterPillTitle('Verified')
            ->options([
                ''    => 'Any',
                'yes' => 'Yes',
                'no'  => 'No',
            ])
            ->filter(function(Builder $builder, string $value) {
                if ($value === 'yes') {
                    $builder->whereNotNull('email_verified_at');
                } elseif ($value === 'no') {
                    $builder->whereNull('email_verified_at');
                }
            }),
        SelectFilter::make('Active')
            ->setFilterPillTitle('User Status')
            ->setFilterPillValues([
                '1' => 'Active',
                '0' => 'Inactive',
            ])
            ->options([
                '' => 'All',
                '1' => 'Yes',
                '0' => 'No',
            ])
            ->filter(function(Builder $builder, string $value) {
                if ($value === '1') {
                    $builder->where('active', true);
                } elseif ($value === '0') {
                    $builder->where('active', false);
                }
            }),
        SelectFilter::make('Address Group')
            ->options([
                '' => 'All',
                AddressGroup::query()
                    ->orderBy('type')
                    ->get()
                    ->groupBy('type')
                    ->map(fn ($addressGroup) => $addressGroup->pluck('type', 'id')->filter())
                    ->toArray(),
            ])
            ->filter(function(Builder $builder, string $value) {
                $builder->where('address_groups.type', $value);
            }),
        DateFilter::make('Verified From')
            ->config([
                'min' => '2020-01-01',
                'max' => '2021-12-31',
            ])
            ->filter(function(Builder $builder, string $value) {
                $builder->where('email_verified_at', '>=', $value);
            }),
        DateFilter::make('Verified To')
            ->filter(function(Builder $builder, string $value) {
                $builder->where('email_verified_at', '<=', $value);
            }),
    ];
}
```

--------------------------------

### Define custom builder with column search

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/examples/advanced-example.md

Returns a query builder for the table, applying search filters on the 'name' and 'email' columns when column search values are present.

```php
public function builder(): Builder
{
    return User::query()
        ->when($this->columnSearch['name'] ?? null, fn ($query, $name) => $query->where('users.name', 'like', '%' . $name . '%'))
        ->when($this->columnSearch['email'] ?? null, fn ($query, $email) => $query->where('users.email', 'like', '%' . $email . '%'));
}
```

--------------------------------

### Tailwind content configuration for production

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/upgrade-guide.md

Add the package's view path to the 'content' array in your Tailwind config to ensure classes are included when building for production. Also consider adding your Livewire folder path to include custom classes.

```javascript
    content: [
        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
    ];
```

--------------------------------

### Advanced UsersTable component with configuration and columns

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/examples/advanced-example.md

Defines a Livewire table component with advanced configuration: reordering, custom filter layout, header/footer attributes, and column definitions including image, boolean, and custom views. Uses model relationships and custom secondary headers.

```php
<?php

namespace App\Livewire;

use App\Models\{Tag,User};
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Rappasoft\LaravelLivewireTables\Views\Columns\{BooleanColumn, ImageColumn};
use Rappasoft\LaravelLivewireTables\Views\Filters\{DateFilter, MultiSelectFilter, SelectFilter};

class UsersTable extends DataTableComponent
{
    public string $tableName = 'users';
    public array $users = [];
    
    public $columnSearch = [
        'name' => null,
        'email' => null,
    ];

    public function configure(): void
    {
        $this->setPrimaryKey('id')
            ->setReorderEnabled()
            ->setSingleSortingDisabled()
            ->setHideReorderColumnUnlessReorderingEnabled()
            ->setFilterLayoutSlideDown()
            ->setRememberColumnSelectionDisabled()
            ->setSecondaryHeaderTrAttributes(function($rows) {
                return ['class' => 'bg-gray-100'];
            })
            ->setSecondaryHeaderTdAttributes(function(Column $column, $rows) {
                if ($column->isField('id')) {
                    return ['class' => 'text-red-500'];
                }

                return ['default' => true];
            })
            ->setFooterTrAttributes(function($rows) {
                return ['class' => 'bg-gray-100'];
            })
            ->setFooterTdAttributes(function(Column $column, $rows) {
                if ($column->isField('name')) {
                    return ['class' => 'text-green-500'];
                }

                return ['default' => true];
            })
            ->setUseHeaderAsFooterEnabled()
            ->setHideBulkActionsWhenEmptyEnabled();
    }

    public function columns(): array
    {
        return [
            ImageColumn::make('Avatar')
                ->location(function($row) {
                    return asset('img/logo-'.$row->id.'.png');
                })
                ->attributes(function($row) {
                    return [
                        'class' => 'w-8 h-8 rounded-full',
                    ];
                }),
            Column::make('Order', 'sort')
                ->sortable()
                ->collapseOnMobile()
                ->excludeFromColumnSelect(),
            Column::make('ID', 'id')
                ->sortable()
                ->setSortingPillTitle('Key')
                ->setSortingPillDirections('0-9', '9-0')
                ->secondaryHeader(function($rows) {
                    return $rows->sum('id');
                })
                ->html(),
            Column::make('Name')
                ->sortable()
                ->searchable()
                ->view('tables.cells.actions')
                ->secondaryHeader(function() {
                    return view('tables.cells.input-search', ['field' => 'name', 'columnSearch' => $this->columnSearch]);
                })
                ->html(),
            Column::make('E-mail', 'email')
                ->sortable()
                ->searchable()
                ->secondaryHeader(function() {
                    return view('tables.cells.input-search', ['field' => 'email', 'columnSearch' => $this->columnSearch]);
                }),
            Column::make('Address', 'address.address')
                ->sortable()
                ->searchable()
                ->collapseOnTablet(),
            Column::make('Address Group', 'address.group.name')
                ->sortable()
                ->searchable()
                ->collapseOnTablet(),
            Column::make('Group City', 'address.group.city.name')
                ->sortable()
                ->searchable()
                ->collapseOnTablet(),
            BooleanColumn::make('Active')
                ->sortable()
                ->collapseOnMobile(),
            Column::make('Verified', 'email_verified_at')
                ->sortable()
                ->collapseOnTablet(),
            Column::make('Tags')
                ->label(fn($row) => $row->tags->pluck('name')->implode(', '))
        ];
    }
```

--------------------------------

### Define bulk actions for activation and deactivation

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/examples/advanced-example.md

Returns an array mapping action keys to labels. The 'activate' and 'deactivate' actions are used to update the 'active' status of selected users.

```php
public function bulkActions(): array
{
    return [
        'activate' => 'Activate',
        'deactivate' => 'Deactivate',
    ];
}
```

--------------------------------

### setThSortButtonAttributes - Override th sort button attributes

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/columns/styling.md

Sets attributes on the th sort button elements. The callback receives the current column; return an array of attributes to apply. In this example, the 'name' column gets a green background class.

```php
public function configure(): void
{
  // Takes a callback that gives you the current column.
  $this->setThSortButtonAttributes(function(Column $column) {
    if ($column->isField('name')) {
      return [
        'class' => 'bg-green-500',
      ];
    }

    return [];
  });
}
```

--------------------------------

### Custom Model Path with make:datatable

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/commands.md

Pass a custom path to the model when it is not in the `App` or `App\Models` namespaces. The third argument is the model name (e.g., `example`) and the fourth is the path (e.g., `app/Domains/Test/Models/`).

```bash
php artisan make:datatable TestTable example app/Domains/Test/Models/
```

--------------------------------

### setCurrentlyReorderingEnabled: Start Reordering

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/reordering/available-methods.md

Shorthand for $this->setCurrentlyReorderingStatus(true). Starts reordering for the component. Handled by the reorder button, but can be called to start reordering without the button.

```php
public function configure(): void
{
    // Shorthand for $this->setCurrentlyReorderingStatus(true);
    $this->setCurrentlyReorderingEnabled();
}
```

--------------------------------

### FilterPillData Object Example

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filters/filter-pills.md

Example of the FilterPillData object returned by $filterPillData. Shows the structure with properties like filterPillTitle, filterSelectName, filterPillValue, and customPillBlade.

```php
Rappasoft\LaravelLivewireTables\DataTransferObjects\Filters\FilterPillData {
  #filterPillTitle: "Name"
  #filterSelectName: "name"
  #filterPillValue: "A Value Here"
  #separator: ", "
  +isAnExternalLivewireFilter: false
  +hasCustomPillBlade: true
  #customPillBlade: "tests.tables.pills.test"
  #filterPillsItemAttributes: array:4 [▼
    // Any Custom Defined Attributes
  ]
  #separatedValues: null
  #renderPillsAsHtml: false
  #watchForEvents: false
}
```

--------------------------------

### setCurrentlyReorderingEnabled

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/reordering/available-methods.md

Starts reordering for the component. This is a shorthand for calling `setCurrentlyReorderingStatus(true)`. Typically handled by the reorder button, but can be called directly to start reordering without the button.

```APIDOC
## setCurrentlyReorderingEnabled

### Description
Starts reordering for the component. This is a shorthand for calling `setCurrentlyReorderingStatus(true)`. Typically handled by the reorder button, but can be called directly to start reordering without the button.

### Method
setCurrentlyReorderingEnabled

### Request Example
```php
public function configure(): void
{
    // Shorthand for $this->setCurrentlyReorderingStatus(true);
    $this->setCurrentlyReorderingEnabled();
}
```
```

--------------------------------

### Example Dropdown View for Toolbar

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/datatable/configurable-areas.md

Blade view for a dropdown in the toolbar, using Tailwind CSS and Alpine.js. Includes theme conditionals for Tailwind and Bootstrap; if no conditional is specified, the view appears on all themes.

```html
@aware(['component'])

@if ($component->isTailwind())
    <div class="w-full mb-4 md:w-auto md:mb-0">
        <div
            x-data="{ open: false }"
            @keydown.window.escape="open = false"
            x-on:click.away="open = false"
            class="relative z-10 inline-block w-full text-left md:w-auto"
            wire:key="my-dropdown-button-{{ $component->getTableName() }}"
        >
            <div>
                <span class="rounded-md shadow-sm">
                    <button
                        x-on:click="open = !open"
                        type="button"
                        class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600"
                        aria-haspopup="true"
                        x-bind:aria-expanded="open"
                        aria-expanded="true"
                    >
                        @lang('My Dropdown')

                        <svg class="w-5 h-5 ml-2 -mr-1" x-description="Heroicon name: chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </span>
            </div>

            <div
                x-cloak
                x-show="open"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="transform opacity-0 scale-95"
                x-transition:enter-end="transform opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="transform opacity-100 scale-100"
                x-transition:leave-end="transform opacity-0 scale-95"
                class="absolute right-0 z-50 w-full mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg md:w-48 ring-1 ring-black ring-opacity-5 focus:outline-none"
            >
                <div class="bg-white rounded-md shadow-xs dark:bg-gray-700 dark:text-white">
                    <div class="py-1" role="menu" aria-orientation="vertical">
                        <button
                            wire:click="my-action"
                            wire:key="my-dropdown-my-action-{{ $component->getTableName() }}"
                            type="button"
                            class="flex items-center block w-full px-4 py-2 space-x-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 dark:text-white dark:hover:bg-gray-600"
                            role="menuitem"
                        >
                            <span>My Action 1</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@elseif ($component->isBootstrap())
    <div><!-- Implement Other Themes if needed--></div>
@endif
```

--------------------------------

### Run Tests

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/README.md

Run the package's test suite using Composer.

```bash
composer test
```

--------------------------------

### Tailwind purge configuration for V2 and V3

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/configuration.md

Add the package's view path to Tailwind's purge/content configuration to prevent CSS purge from removing needed table styles. The V2 example uses 'purge' with 'mode: jit', while the V3 example uses 'content'.

```js
// V2
module.exports = {
    mode: 'jit',
    purge: [
        ...
        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
    ],
    ...
};
```

```js
// V3
module.exports = {
    content: [
        ...
        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
    ],
    ...
};
```

--------------------------------

### TextFilter::notStartsWith()

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filter-types/filters-text.md

Helper method that filters results where the specified field does not start with the filter value.

```APIDOC
## TextFilter::notStartsWith()

### Description
Helper method that filters results where the specified field does not start with the filter value.

### Method
`notStartsWith(string $field)`

### Parameters
- **$field** (string) - Required - The database column to apply the filter on.

### Usage Example
```php
TextFilter::make('Name')
    ->config([
        'placeholder' => 'Search Name',
        'maxlength' => '25',
    ])
    ->notStartsWith('users.name')
```

### Response
Returns the `TextFilter` instance for chaining.

```

--------------------------------

### TextFilter::startsWith()

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filter-types/filters-text.md

Helper method that filters results where the specified field starts with the filter value.

```APIDOC
## TextFilter::startsWith()

### Description
Helper method that filters results where the specified field starts with the filter value.

### Method
`startsWith(string $field)`

### Parameters
- **$field** (string) - Required - The database column to apply the filter on.

### Usage Example
```php
TextFilter::make('Name')
    ->config([
        'placeholder' => 'Search Name',
        'maxlength' => '25',
    ])
    ->startsWith('users.name')
```

### Response
Returns the `TextFilter` instance for chaining.

```

--------------------------------

### Implement configure method

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/usage/configuration.md

Required method to implement on your component for configuration.

```php
public function configure(): void {}
```

--------------------------------

### setCurrentlyReorderingStatus: Start/Stop Reordering

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/reordering/available-methods.md

Disabled by default. Use this method to start or stop reordering for the component.

```php
public function configure(): void
{
    $this->setCurrentlyReorderingStatus(true);
    $this->setCurrentlyReorderingStatus(false);
}
```

--------------------------------

### TextFilter with notStartsWith helper

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filter-types/filters-text.md

Uses the notStartsWith helper to filter results where the field does not start with the filter value.

```php
public function filters(): array
{
    return [
        TextFilter::make('Name')
            ->config([
                'placeholder' => 'Search Name',
                'maxlength' => '25',
            ])
            ->notStartsWith('users.name'),
    ];
}
```

--------------------------------

### TextFilter with startsWith helper

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filter-types/filters-text.md

Uses the startsWith helper to filter results where the field starts with the filter value.

```php
public function filters(): array
{
    return [
        TextFilter::make('Name')
            ->config([
                'placeholder' => 'Search Name',
                'maxlength' => '25',
            ])
            ->startsWith('users.name'),
    ];
}
```

--------------------------------

### Column::make with default field names

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/columns/creating-columns.md

Shows that only the header is needed; the field is inferred via Str::snake, e.g., 'Name' maps to 'name' and 'Email' to 'email'.

```php
public function columns(): array
{
    return [
        Column::make('Name'), // Looks for column `name`
        Column::make('Email'), // Looks for column `email`
    ];
}
```

--------------------------------

### Accept passed properties in mount method

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/rendering.md

Declare the property and optionally initialize it in the mount method. The property is available as $this->status in the class or $status in views.

```php
// Available as $this->status in datatable class or $status in views (if necessary)
public string $status;

// Optional, but if you need to initialize anything
public function mount(string $status): void {}
```

--------------------------------

### Prompt for Missing Inputs with make:datatable

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/commands.md

Running `make:datatable` without arguments prompts for missing inputs interactively.

```bash
php artisan make:datatable
```

--------------------------------

### setFooterTdAttributes with conditional class

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/footer/styling.md

Sets attributes on footer row cells. This example applies a class only when the column is the 'id' field.

```php
public function configure(): void
{
    $this->setFooterTdAttributes(function(Column $column, $rows) {
        if ($column->isField('id')) {
            return ['class' => 'text-red-500'];
        }
    });
}
```

--------------------------------

### Livewire 'On' style listeners for show/hide buttons

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/hiding-the-table.md

Define columns with buttons that dispatch Livewire events 'showTable.sales' and 'hideTable.sales' to trigger the corresponding listeners. This approach allows passing more detail into the table.

```php
    Column::make('Show')
    ->label(
        fn($row, Column $column) => "<button x-on:click=\"\$dispatch('showTable.sales')\">Show Sales Table</button>"
    )->html(),
    Column::make('Hide')
    ->label(
        fn($row, Column $column) => "<button x-on:click=\"\$dispatch('hideTable.sales')\">Hide Sales Table</button>"
    )->html(),
```

--------------------------------

### Append Updated At column

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/columns/reusable-columns.md

Example of appending a column for 'Updated At' using the appendColumns method. This column will appear last in the table.

```php
public function appendColumns(): array
{
    return [
        Column::make('Updated At', 'updated_at'),
    ];
}
```

--------------------------------

### setCurrentlyReorderingStatus

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/reordering/available-methods.md

Starts or stops reordering for the component. This method is disabled by default and accepts a boolean parameter to control the reordering state.

```APIDOC
## setCurrentlyReorderingStatus

### Description
Starts or stops reordering for the component. This method is disabled by default and accepts a boolean parameter to control the reordering state.

### Method
setCurrentlyReorderingStatus

### Parameters
- **status** (bool) - Required - Set to `true` to start reordering, `false` to stop.

### Request Example
```php
public function configure(): void
{
    $this->setCurrentlyReorderingStatus(true);
    $this->setCurrentlyReorderingStatus(false);
}
```
```

--------------------------------

### Deactivate selected users

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/examples/advanced-example.md

Updates the 'active' column to false for all selected user IDs, then clears the selection.

```php
public function deactivate()
{
    User::whereIn('id', $this->getSelected())->update(['active' => false]);

    $this->clearSelected();
}
```

--------------------------------

### Activate selected users

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/examples/advanced-example.md

Updates the 'active' column to true for all selected user IDs, then clears the selection.

```php
public function activate()
{
    User::whereIn('id', $this->getSelected())->update(['active' => true]);

    $this->clearSelected();
}
```

--------------------------------

### Query string with default key

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filters/creating-filters.md

The resulting query string when using the default key 'active'.

```text
?table[filters][active]=yes
```

--------------------------------

### Tailwind dark mode class configuration

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/upgrade-guide.md

Set 'darkMode' to 'class' in your Tailwind config to enable class-based dark mode styling.

```javascript
    darkMode: 'class',
```

--------------------------------

### setLayout() method for custom layout

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/usage/creating-components.md

Sets a custom layout path for full-page component usage. Expects a string path to the layout.

```php
    public function configure(): void
    {
        $this->setLayout('path-to-layout');
    }
```

--------------------------------

### Import LivewireComponentArrayFilter

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filter-types/filters-livewire-component-array.md

Required import to use the LivewireComponentArrayFilter class.

```php
use Rappasoft\LaravelLivewireTables\Views\Filters\LivewireComponentArrayFilter;
```

--------------------------------

### Recommended fix: use different components for different parameters

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/multiple-tables.md

Create separate components for each parameter set to avoid table name conflicts.

```html
<livewire:active-users-table />

<livewire:pending-users-table />
```

--------------------------------

### Set default reorder sort with setDefaultReorderSort

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/reordering/setup.md

By default the reorder column is 'sort' and direction 'asc'. Change it by calling setDefaultReorderSort with your column and direction.

```php
public function configure(): void
{
    $this->setDefaultReorderSort('order', 'desc');
}
```

--------------------------------

### DateRangeFilter::setFilterPillValues

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filter-types/filters-daterange.md

Sets the values displayed for the Min/Max Date values in the filter pills. This method customizes the labels shown for the start and end dates.

```APIDOC
## DateRangeFilter::setFilterPillValues

### Description
Sets the values displayed for the Min/Max Date values in the filter pills. This method customizes the labels shown for the start and end dates.

### Method
Instance method

### Parameters
- **values** (array) - Required - An array with two elements: index 0 for the minimum date label and index 1 for the maximum date label.

### Return Value
- **DateRangeFilter** - The current instance for chaining.

### Example
```php
->setFilterPillValues([0 => 'minDate', 1 => 'maxDate'])
```
```

--------------------------------

### Define LivewireComponentFilter in filters() method

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filter-types/filters-livewire-component.md

Creates a LivewireComponentFilter with a unique name, sets the Livewire component path, and defines a filter callback to apply the value to the query builder.

```php
    public function filters(): array
    {
        return [ 
            LivewireComponentFilter::make('My External Filter')
            ->setLivewireComponent('my-test-external-filter')
            ->filter(function (Builder $builder, string $value) {
                $builder->where('name', 'like', '%'.$value.'%');
            }),
        ];
    }
```

--------------------------------

### actions() - define action buttons

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/actions.md

Define your actions using the actions() method. Example creates an Action with a route to 'dashboard'.

```php
public function actions(): array
{
    return [
        Action::make('View Dashboard')
        ->setRoute('dashboard'),
    ];
}
```

--------------------------------

### Publish package assets with artisan vendor:publish

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/configuration.md

Run these commands to publish the package's config, views, translations, and public assets. Publishing is optional unless you need to customize the package; the note advises against publishing views unless necessary because they change often.

```bash
php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-config

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-views

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-translations

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-public
```

--------------------------------

### TextFilter with setWireLive()

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filters/available-filter-methods.md

Forces the filter to use a wire:model.live approach, updating the component live as the user types.

```php
    TextFilter::make('Name')
    ->config([
        'placeholder' => 'Search Name',
        'maxlength' => '25',
    ])
    ->setWireLive()
```

--------------------------------

### Update Livewire Tables Config

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/recommended.md

Set these configuration options to false in config/livewire-tables.php to disable asset caching and automatic injection.

```php
    /**
     * Cache Rappasoft Frontend Assets
     */
    'cache_assets' => false,

    /**
     * Enable or Disable automatic injection of core assets
     */
    'inject_core_assets_enabled' => false,

    /**
     * Enable or Disable automatic injection of third-party assets
     */
    'inject_third_party_assets_enabled' => false,

    /**
     * Enable Blade Directives (Not required if automatically injecting or using bundler approaches)
     */
    'enable_blade_directives' => false,
```

--------------------------------

### configuring

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/lifecycle-hooks.md

Called immediately prior to the configure() method being called. This will be overridden by anything you define in configure().

```APIDOC
## configuring

### Description
Called immediately prior to the configure() method being called. This will be overridden by anything you define in configure().

### Method
Lifecycle Hook

### Usage
Define this method in your Table Component or trait to execute custom logic before the configure() method runs.
```

--------------------------------

### Set custom pills separator with setPillsSeparator

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/filter-types/filters-livewire-component-array.md

Defines a custom separator between pill values for the array filter. Default is ', '; this example uses ' OR '.

```php
    public function filters(): array
    {
        return [ 
            LivewireComponentArrayFilter::make('My External Filter')
            ->setLivewireComponent('my-test-external-filter')
            ->setPillsSeparator(' OR ')
            ->filter(function (Builder $builder, array $values) {
                $builder->whereIn('foreign_id', $values);
            }),
        ];
    }
```

--------------------------------

### Client-side listeners for show/hide buttons

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/hiding-the-table.md

Define columns with buttons that dispatch client-side events 'show-table' and 'hide-table' with the tableName parameter. This is the more efficient client-side approach.

```php
    Column::make('Show')
        ->label(
            fn($row, Column $column) => "<button x-on:click=\"\$dispatch('show-table',{'tableName': 'sales' })\">Show Sales Table</button>"
        )->html(),
    Column::make('Hide')
        ->label(
            fn($row, Column $column) => "<button x-on:click=\"\$dispatch('hide-table',{'tableName': 'sales' })\">Hide Sales Table</button>"
        )->html(),
```

--------------------------------

### Set theme per table with theme attribute

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/start/rendering.md

Override the default theme for a specific table by adding the theme attribute. Example uses 'bootstrap-4'.

```html
<livewire:users-table theme="bootstrap-4" />
```

--------------------------------

### Render a view in format method

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/columns/available-methods.md

Uses format to render a custom view, passing the value.

```php
Column::make('Name')
    ->format(
        fn($value, $row, Column $column) => view('my.custom.view')->withValue($value)
    ),
```

--------------------------------

### setSearchThrottle

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/search/available-methods.md

Tell Livewire to throttle updates.

```APIDOC
## setSearchThrottle

### Description
Sets a throttle interval in milliseconds for search updates.

### Method
PHP method

### Endpoint
`setSearchThrottle(int $milliseconds)`

### Parameters
- **$milliseconds** (int) - Required - The throttle interval in milliseconds.

### Request Example
```php
public function configure(): void
{
    $this->setSearchThrottle(1000);
}
```
```

--------------------------------

### Hide reorder column unless reordering with setHideReorderColumnUnlessReorderingEnabled

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/reordering/setup.md

If your reorder column is part of your table definition, it is visible by default. Call this method to hide it unless reordering is active.

```php
public function configure(): void
{
    $this->setHideReorderColumnUnlessReorderingEnabled();
}
```

--------------------------------

### Using the builder method

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/usage/the-query.md

Implement the builder method for more control over the query, allowing eager loading, joins, and selects.

```php
public function builder(): Builder
{
    return User::query()
        ->with() // Eager load anything
        ->join() // Join some tables
        ->select(); // Select some things
}
```

--------------------------------

### Retrieve table state with getTableStateToArray()

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/saving-state.md

Call this method to get the current table state as an array, useful for saving filters, search parameters, or the current page.

```php
$this->getTableStateToArray();
```

--------------------------------

### setSearchLive

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/search/available-methods.md

Tell Livewire to immediately update the search.

```APIDOC
## setSearchLive

### Description
Configures the search to update immediately as the user types.

### Method
PHP method

### Endpoint
`setSearchLive()`

### Request Example
```php
public function configure(): void
{
    $this->setSearchLive();
}
```
```

--------------------------------

### Customize Sorting Pill Directions

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/columns/available-methods.md

Customizes the direction labels on the sorting pill. For example, instead of 'Name: A-Z' it will say 'Name: Asc'.

```php
Column::make('Name')
    // Instead of Name: A-Z it will say Name: Asc
    ->setSortingPillDirections('Asc', 'Desc'),
```

--------------------------------

### Column::make

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/columns/creating-columns.md

Creates a new column instance for the table. The first parameter is the header text, and the optional second parameter specifies the field name. If no field name is provided, it is derived from the header using Str::snake.

```APIDOC
## Column::make

### Description
Creates a new column instance for the table. The first parameter is the header text, and the optional second parameter specifies the field name. If no field name is provided, it is derived from the header using Str::snake.

### Method
Constructor

### Parameters
#### Parameters
- **header** (string) - Required - The header text of the column.
- **field** (string) - Optional - The field name to reference. If omitted, it is derived from the header using Str::snake.

### Example
```php
Column::make('Name')
Column::make('ID', 'id')
```
```

--------------------------------

### ArrayColumn emptyValue method

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/column-types/array_column.md

Defines the default/empty value for the array column using the emptyValue method. In this example, empty values display as 'Unknown'.

```php
ArrayColumn::make('notes', 'name')
    ->emptyValue('Unknown'),
```

--------------------------------

### columnsSet

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/lifecycle-hooks.md

Called immediately after the Columns are set up.

```APIDOC
## columnsSet

### Description
Called immediately after the Columns are set up.

### Method
Lifecycle Hook

### Usage
Define this method in your Table Component or trait to execute custom logic after the columns are set up.
```

--------------------------------

### User Model: things() HasMany Relationship

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/one-of-many-example.md

Defines the HasMany relationship from User to Things. This is part of the work-around for retrieving OneOfMany without duplicate records.

```php
    public function things(): \Illuminate\Database\Eloquent\Relations\HasMany
    {
        return $this->hasMany(Things::class);
    }
```

--------------------------------

### SalesTable component with hidden by default

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/misc/hiding-the-table.md

Example of a SalesTable component that hides the table by default. The tableName property is required to keep the call specific. setShouldBeHidden() is called in mount, not configure.

```php
class SalesTable extends DataTableComponent
{
    public string $tableName = 'sales'; // Required to keep the call specific

    public function mount()
    {
        $this->setShouldBeHidden(); // Defaults the table to be hidden, note that this is in MOUNT and not CONFIGURE
    }

    // Configure/Columns/Filters etc
}
```

--------------------------------

### setSearchLive - Immediate search update

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/search/available-methods.md

Tell Livewire to immediately update the search. Only one search modifier can be set at a time.

```php
public function configure(): void
{
    // Send the search request immediately
    $this->setSearchLive();
}
```

--------------------------------

### Define columns method with Column::make

Source: https://github.com/rappasoft/laravel-livewire-tables/blob/master/docs/columns/creating-columns.md

Returns an array of Column objects in the order they appear on the table. The first parameter is the header; the field name is derived using Str::snake.

```php
public function columns(): array
{
    return [
        Column::make('Name'),
        Column::make('Email'),
    ];
}
```
Tokens:
Raw