README

Livewire 的一个扩展，允许您轻松搭建具有可选分页、搜索和排序功能的表格。

实时演示网站即将推出。

安装

通过 Composer

$ composer require coryrose/livewire-tables

该包将自动注册其服务提供者。

要发布配置文件到 config/livewire-tables.php 运行

php artisan vendor:publish --provider="Coryrose\LivewireTables\LivewireTablesServiceProvider"

使用

创建 Livewire 表格的三步简单步骤

创建一个表格组件类
使用可用选项配置表格类
搭建表格视图（在组件类更改时需要时进行搭建）

创建一个表格组件类

运行 make 命令以生成表格类

php artisan livewire-tables:make UsersTable

App/Http/Livewire/Tables/UsersTable.php

...

class UsersTable extends LivewireModelTable
{
    use WithPagination;
    
        public $paginate = true;
        public $pagination = 10;
        public $hasSearch = true;
    
        public $fields = [
            [
                'title' => 'ID',
                'name' => 'id',
                'header_class' => '',
                'cell_class' => '',
                'sortable' => true,
            ],
            [
                'title' => 'Name',
                'name' => 'name',
                'header_class' => '',
                'cell_class' => '',
                'sortable' => true,
                'searchable' => true,
            ],
            [
                'title' => 'City',
                'name' => 'address.city',
                'header_class' => 'bolded',
                'cell_class' => 'bolded bg-green',
                'sortable' => true,
                'searchable' => true,
            ],
            [
                'title' => 'Post',
                'name' => 'post.content',
                'header_class' => '',
                'cell_class' => '',
                'sortable' => true,
                'searchable' => true,
            ],
        ];
    
        public function render()
        {
            return view('livewire.tables.users-table', [
                'rowData' => $this->query(),
            ]);
        }
    
        public function model()
        {
            return User::class;
        }
    
        public function with()
        {
            return ['address', 'post'];
        }
}

配置组件选项

首先，在以下格式的 model() 方法中设置您的基模型

public function model()
{
    return User::class;
}

要预加载关系，请使用 with() 并返回关系（s）的数组

public function with()
{
    return ['address', 'post'];
}

以下是为表格类设置的公共可编辑属性

$fields

控制您的表格的字段配置

$css

用于在搭建表格时生成 CSS 类。

这些可以在配置文件中全局设置，或者在组件类中按表格设置。

注意： 在组件中设置的 CSS 类将覆盖配置文件中存在的类。

搭建表格视图

准备好后，使用搭建命令搭建表格视图

php artisan livewire-tables:scaffold UsersTable

resources/views/livewire/tables/users-table.blade.php

<div>
    @if ($hasSearch)
    <div>
        <div style="position: relative; display: inline-block;">
        <input type="text" wire:model="search" />
            @if ($search)
                <button wire:click="clearSearch" style="position: absolute; right: 5px;">&#10005;</button>
            @endif
        </div>
    </div>
    @endif
    <table class="table-wrapper">
        <thead>
        <tr>
            <th class="header" wire:click="$emit('sortColumn', 0)">ID</th>
            <th class="header" wire:click="$emit('sortColumn', 1)">Name</th>
            <th class="header bolded" wire:click="$emit('sortColumn', 2)">City</th>
            <th class="header" wire:click="$emit('sortColumn', 3)">Post</th>
        </tr>
        </thead>
        <tbody>
        @foreach ($rowData as $row)
            <tr>
                <td class="table-cell">{{ $row->id }}</td>
                <td class="table-cell">{{ $row->name }}</td>
                <td class="table-cell bolded bg-green">{{ $row->address->city }}</td>
                <td class="table-cell">{{ $row->post->content }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
    @if ($paginate)
    <div>
        {{ $rowData->links() }}
    </div>
    @endif
</div>

您可以在更改父组件类时连续使用搭建命令。

由于渲染的模板是简单的 HTML，因此不需要为自定义创建表格“插槽” - 按照您的需求自定义模板！

待办事项

对比模型更复杂的查询的进一步支持

变更日志

有关最近更改的更多信息，请参阅变更日志

贡献

请参阅 contributing.md 了解详细信息以及待办事项列表。

鸣谢

许可

MIT。有关更多信息，请参阅许可文件

coryrose / livewire-tables

维护者

详细信息