README

Tailwind, Alpine.js, Laravel, 和 Livewire 简单数据表

安装

您可以通过 composer 安装 TALL 数据表包。

composer require docirana/tall-datatables

Tailwind 配置

::: info 如果您打算自定义视图，则可以跳过此步骤。 ::

TALL 数据表包含视图，因此您需要调整您的 Tailwind CSS 配置。

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        // ...

        "./vendor/docirana/tall-datatables/src/views/**/*.blade.php"
    ]
}

发布视图

为了让表格融入您项目的风格，您可能需要更改布局。这可以通过发布视图并按您喜欢的任何方式进行自定义来完成。

php artisan vendor:publish --provider="Docirana\TallDatatables\Providers\TallDatatablesServiceProvider"

示例

php artisan livewire:make ExampleComponent

<?php

namespace App\Http\Livewire;

use Docirana\TallDatatables\TallDatatables;
use Illuminate\Database\Eloquent\Builder as EloquentBuilder;
use Illuminate\Database\Query\Builder as QueryBuilder;
use Illuminate\Support\Collection;

class ExampleComponent extends TallDatatables
{
    public function headerData(): Collection
    {
        // TODO: Implement headerData() method.
    }

    public function dataRaw(): array|Collection|QueryBuilder|EloquentBuilder
    {
        // TODO: Implement dataRaw() method.
    }
}

!!! 通过 dataRaw 您只需要指定一个返回类型 !! 这取决于您的数据。

docirana / tall-datatables

维护者

详细信息

README

安装

Tailwind 配置

发布视图

示例