Dernière version sur Packagist
Total téléchargements

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

Capture d'écran

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

propriété Arguments Résultat Exemple
maquette Chaîne nom complet du modèle Définir le modèle de base de la table model="AppPost"
verrouiller String | Déployer des définitions de colonne Spécifiez les colonnes que vous souhaitez voir apparaître dans le tableau. La désignation peut commencer par | les délimiteurs sont spécifiés «  include = « nom, email, dob
exclure String | Déployer des définitions de colonne Les colonnes sont exclues du tableau :exclude="['created_at', 'updated_at']"
cacher String | Déployer des définitions de colonne Les colonnes sont présentes, mais commencent à être masquées hidden="email_verified_at"
Événements String | Déployer des définitions de colonne [ and optional format in | delimited string] Les valeurs de colonne sont formatées selon le format de date standard, ou le format peut être converti en chaîne avec | être inclus séparateur « : Dates = « [‘dob
times String|Array of column definitions [optional format in | delimited string] Les valeurs de colonne sont formatées en utilisant le format d’heure standard, ou le format peut être inclus dans la chaîne avec | être inclus séparateur «  ‘Heure du coucher
consultable String | Déployer des noms de colonnes Définit les colonnes à inclure dans la recherche globale searchable="name, email"
Trier par Chaîne la définition de la colonne [and optional ‘asc’ or ‘desc’ (default: ‘desc’) in | delimited string] Spécifie la colonne et la direction du tri initial de la table. La norme est la colonne 0 dans l’ordre décroissant «  sort = « nom
Masquer les en-têtes Valeur booléenne Défaut: Pas correcte La ligne supérieure du tableau avec les en-têtes de colonne est supprimée si tel est le cas true
Pagination de cachette Valeur booléenne Défaut: Pas correcte Les contrôles de pagination seront supprimés si tel est le cas true
par page Entier Par défaut: 10 Nombre de lignes par page per-page="20"
exportable Valeur booléenne Défaut: Pas correcte Permet aux tables d’être exportées <livewire:datatable model="App/Post" exportable />
caché Chaîne Vous permet d’afficher / masquer les colonnes, accepte les chaînes «en ligne», «boutons» ou «sélectionner». <livewire:datatable model="App/Post" hideable="inline" />
beforeTableSlot Chaîne La vue en lame doit être incluse dans le composant immédiatement avant la table pour que les propriétés publiques soient accessibles
afterTableSlot Chaîne La vue en lame doit être incluse dans le composant immédiatement après la table pour que les propriétés publiques soient accessibles démo

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:

classer la description
pilier Colonne générique basée sur une chaîne. Le filtre est une entrée de texte
NuméroColonne Colonne basée sur des nombres. Les filtres sont une plage numérique
BooleanColumn Les valeurs sont automatiquement formatées avec un symbole oui / non, les filtres avec oui / non
DateColonne Les valeurs sont automatiquement formatées au format de date standard. Les filtres sont une plage de dates
HeureColonne Les valeurs sont automatiquement formatées au format d’heure standard. Les filtres sont une plage de temps

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

méthode Arguments Résultat Exemple
statique Nom de famille Chaîne $ colonne Crée une colonne à partir de la définition de colonne, qui peut être éloquente ou en notation SQL dot (voir ci-dessous). Column::name('name')
statique cru Chaîne $ rawSqlStatement Crée une colonne à partir d’une instruction SQL brute. Doit contenir « … AS alias«  » Column::raw("CONCAT(ROUND(DATEDIFF(NOW(), users.dob) / planets.orbital_period, 1) AS `Native Age`")
statique rappeler Array | Chaîne $ Colonnes, Fermeture | Chaîne $ Rappel Passe les colonnes du premier argument au rappel pour autoriser les mutations personnalisées. Le callback peut être une méthode sur la classe de table ou en ligne (voir ci-dessous)
statique portée Chaîne $ portée, Chaîne $ alias Crée une colonne à partir d’une zone du modèle parent Column::scope('selectLastLogin', 'Last Login')
statique Dégager [String $primaryKey default: ‘id’] Ajoute une colonne avec une clé de suppression appelée $this->model::destroy($primaryKey) Column::delete()
statique Case à cocher [String $column default: ‘id’] Ajoute une colonne avec une case à cocher. La composante propriété publique $selected contient un tableau de la colonne nommée à partir des lignes sélectionnées, Column::checkbox()
étiquette Chaîne $ nom Modifie le nom d’affichage d’une colonne Column::name('id')->label('ID)
format [String $format] Formate la valeur de la colonne par type. Les dates / heures utilisent le format ou l’argument standard Column::name('email_verified_at')->filterable(),
cacher Marque la colonne comme masquée Column::name('id')->hidden()
Trier par String | Expression $ colonne Modifie la requête selon laquelle la colonne est triée Column::name('dob')->sortBy('DATE_FORMAT(users.dob, "%m%d%Y")'),
raccourcir [Integer $length (default: 16)]Tronque la colonne à $ length et fournit le texte intégral dans une info-bulle. Les usages view('livewire-datatables::tooltip) Column::name('biography)->truncate(30)
Lié à Chaîne $ modèle, [Integer $pad] Remplace la valeur par un lien vers "/$model/$value". Utile pour les colonnes ID. Remplissage zéro facultatif. Les usages view('livewire-datatables::link) Column::name('id')->linkTo('user')
rond [Integer $precision (default: 0)] Arrondit la valeur à la précision spécifiée Column::name('age')->round()
defaultSort [String $direction (default: ‘desc’)] Marque la colonne comme colonne de recherche par défaut Column::name('name')->defaultSort('asc')
consultable Inclut la colonne dans la recherche globale Column::name('name')->searchable()
filtrable [Array $options], [String $filterScope] Ajoute un filtre à la colonne en fonction du type de colonne. Lorsqu’un tableau d’options est passé, il est utilisé pour remplir une entrée de sélection. Si la colonne est une colonne de plage, le nom de la plage de filtre muyst est également passé Column::name('allegiance')->filterable(['Rebellion', 'Empire'])
vue Chaîne $ viewName Transmet la valeur de la colonne, la ligne entière de valeurs et tous les paramètres supplémentaires à un modèle de vue (voir ci-dessous)
modifiable Marque la colonne comme modifiable (voir ci-dessous)
organiser au centre Aligne l’en-tête de colonne et le contenu au milieu Column::delete()->alignCenter()
organiser au centre Aligne l’en-tête de colonne et le contenu à droite Column::delete()->alignRight()
modifiable Marque la colonne comme modifiable (voir ci-dessous)
excludeFromExport Empêche la colonne d’être modifiée Column::name('email')->exclude

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



Source link

Recent Posts