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
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
MediconesystemsLivewireDatatablesLivewireDatatable
Créez un composant Livewire qui sera développé
php artisan livewire:datatable foo
-> ‘app / Http / Livewire / Foo.php’
php artisan livewire:datatable tables.bar
-> ‘app / Http / Livewire / Tables / Bar.php’
$model
OU ALORS méthode publique builder()
qui renverra une instance de IlluminateDatabaseEloquentBuilder
Fournir une source de données en déclarant la propriété publique
php artisan livewire:datatable users-table --model=user
-> ‘app / Http / Livewire / UsersTable.php’ avecpublic $model = User::class
columns
cela renverra un tableau contenant un ou plusieurs MediconesystemsLivewireDatatablesColumn
Déclarer une méthode publique 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
, TimeColumn
L’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.name
Livewire 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
$value
et 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.