Propriétés

• Utiliser un modèle ou un générateur de requêtes pour fournir des données
• Mutation et mise en forme des colonnes à l’aide de rappels prédéfinis ou personnalisés
• Trier les données à l’aide d’une colonne ou d’une colonne calculée
• Filtrer avec des valeurs booléennes, des heures, des dates, des sélections ou du texte libre
• Afficher / masquer les colonnes

exigence

installation

Vous pouvez installer le package via Composer:

composer require mediconesystems/livewire-datatables

Optionnel

Vous n’êtes pas obligé de le faire, mais vous pouvez publier le fichier de configuration et les ressources du modèle de lame si vous le souhaitez:

php artisan vendor:publish

Cela vous permet de modifier les vues de la lame et d’appliquer votre propre style. Les vues des tables de données sont publiées dans resources / livewire / datatables. Le fichier de configuration contient les formats d’heure et de date standard utilisés tout au long

• Cela peut être utile lorsque vous utilisez Purge CSS dans votre projet pour vous assurer que toutes les classes Livewire Datatables sont incluses

Certains des composants dynamiques intégrés utilisent Alpine JS. Pour supprimer le scintillement lors du chargement de la page, assurez-vous que vous disposez des éléments suivants

[x-cloak] {
    display: none;
}

quelque part dans votre CSS

Utilisation de base

• Utilisez le livewire-datatable Composant dans votre vue en lame et passer un modèle:

...

<livewire:datatable model="AppUser" />

...

Syntaxe du modèle

• Il existe de nombreuses façons de modifier la table en transmettant des propriétés supplémentaires au composant:

<livewire:datatable
    model="AppUser"
    include="id, name, dob, created_at"
    dates="dob"
/>

accessoires

Syntaxe des composants

Créez un composant Livewire qui sera développé MediconesystemsLivewireDatatablesLivewireDatatable

php artisan livewire:datatable foo -> ‘app / Http / Livewire / Foo.php’

php artisan livewire:datatable tables.bar -> ‘app / Http / Livewire / Tables / Bar.php’

Fournir une source de données en déclarant la propriété publique $model OU ALORS méthode publique builder() qui renverra une instance de IlluminateDatabaseEloquentBuilder

php artisan livewire:datatable users-table --model=user -> ‘app / Http / Livewire / UsersTable.php’ avec public $model = User::class

Déclarer une méthode publique columns cela renverra un tableau contenant un ou plusieurs MediconesystemsLivewireDatatablesColumn

Colonnes

Les colonnes peuvent être créées à l’aide de l’une des méthodes statiques suivantes et leurs attributs peuvent ensuite être attribués à l’aide de chaînes fluides de méthodes. Il existe d’autres types de colonnes spécifiques. NumberColumn, DateColumn, TimeColumnL’utilisation du bon pour votre type de données permet un formatage et un filtrage spécifiques au type:

class ComplexDemoTable extends LivewireDatatable
{

    public function builder()
    {
        return User::query();
    }

    public function columns()
    {
        return [
            NumberColumn::name('id')
                ->label('ID')
                ->linkTo('job', 6),

            BooleanColumn::name('email_verified_at')
                ->label('Email Verified')
                ->format()
                ->filterable(),

            Column::name('name')
                ->defaultSort('asc')
                ->searchable()
                ->filterable(),

            Column::name('planet.name')
                ->label('Planet')
                ->searchable()
                ->filterable($this->planets),

            DateColumn::name('dob')
                ->label('DOB')
                ->filterable()
                ->hide()
        ];
    }
}

Méthodes de colonne

Auditeur

Le composant attend le refreshLivewireDatatable Événement avec lequel vous pouvez mettre à jour la table des composants externes.

Élaborer des noms de colonnes

Les colonnes de relations éloquentes peuvent être insérées en utilisant la notation normale par points éloquents, par ex. planet.nameLivewire Datatables ajoute automatiquement les liens de table nécessaires pour inclure la colonne. Si la relation est de type ‘plusieurs’ (HasMany, BelongsToMany, HasManyThrough) puis Livewire Datatables crée une sous-requête agrégée (ce qui est beaucoup plus efficace qu’une jointure et un groupe. Merci @reinink). Par défaut, le type d’agrégat est count pour une colonne numérique et group_concat pour une colonne de chaîne, mais cela peut être remplacé par un séparateur deux-points;

NumberColumn::name('students.age:sum')->label('Student Sum'),

NumberColumn::name('students.age:avg')->label('Student Avg'),

NumberColumn::name('students.age:min')->label('Student Min'),

NumberColumn::name('students.age:max')->label('Student Max'),

Noms de colonnes personnalisés

Il est toujours possible de prendre le contrôle total de votre table. Vous pouvez en définir un builder Méthode dans laquelle vous prenez n’importe quelle requête, utilisez vos propres jointures, groupez-les, puis nommez vos colonnes en utilisant votre syntaxe SQL normale:

Publicité une fonction constructeur() {
    revenir utilisateur:: ::mettre en doute() ->joint gauche(("Planètes", 'planets.id', 'users.planet_id') ->joint gauche(("Lunes", 'moons.id', 'planets.moon_id') ->par groupe(('users.id');  }}

Publicité une fonction Colonnes() {
    revenir [
        NumberColumn::name('id')
            ->filterable(),

        Column::name('planets.name')
            ->label('Planet'),

        Column::raw('GROUP_CONCAT(planets.name SEPARATOR " | ") AS `Moon`'),

        ...
}

Callbacks

Callbacks give you the freedom to perform any mutations you like on the data before displaying in the table.

• The callbacks are performed on the paginated results of the database query, so shouldn’t use a ton of memory
• Callbacks will receive the chosen columns as their arguments.
• Callbacks can be defined inline as below, or as public methods on the Datatable class, referenced by passing the name as a string as the second argument to the callback method.

class CallbackDemoTable extends LivewireDatatable
{
    public model = User::class

    public function columns()
    {
        return [
            Column::name('users.id'),

            Column::name('users.dob')->format(),

            Column::callback(['dob', 'signup_date'], une fonction (($dob, $Date de dépôt) {
                $Âge = $Date de dépôt->diffèrent en années(($dob);
                revenir $Âge > 18e
                    ? '' . $Âge . ''
                    :: $Âge;;  }),

            ...
    }}

Vues

Vous pouvez choisir que la sortie d’une colonne soit directement dirigée vers un modèle de vue de lame distinct.

• Le modèle est spécifié à l’aide de la syntaxe d’aide standard de la vue Laravel
• Les vues reçoivent la valeur de la colonne comme $valueet la ligne de requête entière en tant que $row

class CallbackDemoTable extends LivewireDatatable
{
    public model = User::class

    public function columns()
    {
        return [
            Column::name('users.id'),

            Column::name('users.dob')->view('tables.dateview'),

            Column::name('users.signup_date')->format(),
        ];
    }

'tables/dateview.blade.php'
<span class="mx-4 my-2 bg-pink-500">
    <x-date-thing :value="$value" />
</span>

Colonnes modifiables

Vous pouvez marquer une colonne comme modifiable avec editable
Cela profite de la view() Méthode ci-dessus pour transmettre les données à un composant Alpine / Livewire qui peut mettre à jour directement les données de la base de données sous-jacente. Doit avoir la colonne column défini à l’aide de la dénomination Laravel standard. Ceci est inclus à titre d’exemple. Les méthodes de rappel ou d’affichage ci-dessus peuvent être utilisées pour créer des colonnes modifiables personnalisées beaucoup plus riches avec validation, etc.

class EditableTable extends LivewireDatatable
{

    public $model = User::class;

    public function columns()
    {
        return [
            Column::name('id')
                ->label('ID')
                ->linkTo('job', 6),

            Column::name('email')
                ->editable(),

            ...
        ];
    }
}

coiffant

Je sais que ce n’est pas cool de proposer un package avec des tonnes de balisage et de style en option. La plupart des autres packages semblent avoir emprunté la voie du passage de classes optionnelles en tant qu’arguments ou variables de configuration. À mon avis, vous pouvez publier les modèles et faire ce que vous voulez, car il ne s’agit que d’une feuille de vent arrière. Il devrait être évident où se trouvent les pièces mobiles du Livewire et de l’Alpine.

Vous pouvez également remplacer la méthode de rendu dans la classe de votre table pour fournir différents modèles pour différentes tables.

Crédits et influences