README

LiveWire 表

LiveWire tables 是一个 Laravel/livewire 项目的附加组件，它允许您在几分钟内创建美观的数据表。它包含了 Table 和 Column 类，用于处理数据表的逻辑。

安装

composer require aashan/livewire-table

使用方法

安装此包后，以下是如何使用 livewire 表的逐步指南。

1. 在 livewire 组件目录（app/Http/Livewire）内创建一个名为 UsersTable 的类
2. 打开 \App\Http\Livewire\UsersTable 类，并按以下方式进行设置

   class UsersTable extends \LivewireTable\Components\Table {
        protected function columns() : array{
            return [
                ...
            ];   
        }
   
        protected function builder(): \Illuminate\Database\Query\Builder {
             return \App\Models\User::query(); 
        }    
   }

3. 打开您希望显示表格的视图，并添加 livewire 组件名称 @livewire('users-table')

就这样。您应该能在视图中看到表格。

但是等等？

您可能会想知道为什么表格是空的。这是因为我们还没有添加任何列。记得我们刚才留空的 columns 方法吗？现在，是该填充实际列的时候了。

protected function columns(): array
{
    return [
        \LivewireTable\Table\Column::make('id', 'ID'),
        \LivewireTable\Table\Column::make('name', 'Name'),
        \LivewireTable\Table\Column::make('email', 'Email'),
        \LivewireTable\Table\Column::make('created_at', 'Created At'),
    ]
}

现在当您刷新页面时，您应该能看到带有其值的列。

使列可排序、可搜索和转换数据

非常简单，只需在列类上使用 sortable、searchable 和 transform 方法。

示例

protected function columns(): array 
{
    return [
        \LivewireTable\Table\Column::make('id', 'ID')->sortable(),
        \LivewireTable\Table\Column::make('name', 'Name')
            ->sortable()
            ->searchable()
            -onSearch(fn (Builder $builder, $value) => $builder->where('name', 'like', '%' . $value . '%' )),
        \LivewireTable\Table\Column::make('email', 'Email')
            ->sortable()
            ->filterable()
            -onFilter(fn (Builder $builder, $value) => $builder->where('email', 'like', '%' . $value . '%' )),
    ]   
}

警告 对于 searchable 和 filterable 方法，它们应该始终在列中存在 onSearch 和 onFilter 方法。如果不存在，搜索和过滤将无法工作。

API

• \LivewireTable\Components\Table::class
  • public $perPage - 决定每页显示的行数
• \LivewireTable\Table\Column::class
  • 属性
    • $key: 通常对应于实际的数据库列名
    • $label: 数据库列的 UI 标题
    • $searchable: 决定列是否可搜索
    • $sortable: 决定列是否可排序
    • $filterable: 决定列是否可过滤
    • $transformClosure: 动作类名或转换数据的闭包
    • $searchClosure: 动作类名或处理搜索结果的闭包
    • $filterClosure: 与 searchClosure 类似，只是它处理过滤
  • 方法
    • public function searchable(bool $value = true): static: 设置 $searchable 属性
    • public function sortable(bool $value = true): static: 设置 $sortable 属性
    • public function filterable(bool $value = true): static: 设置 $filterable 属性
    • public function transform($row): string: 使用转换闭包转换给定的行
    • public function onSearch(callable|string $action): static: 设置 $searchClosure 属性
    • public function onFilter(callable|string $action): static: 设置 $filtetrClosure 属性
    • public function onTransform(callable|string $action): static: 设置 $transformClosure 属性