ng paginable
1.0.0
Il s'agit d'un module angulaire qui fournit un composant de table avec des capacités de tri et de filtrage. Intégration prête à l'emploi avec les réponses Laravel et autres cadres et disposition Boostrap.
| Angulaire | ng-pagination |
|---|---|
| > = 14.0.0 <15.0.0 | v1.x |
Pour installer ce composant, exécutez la commande suivante dans votre répertoire de projet:
npm install ng-paginable --save Pour utiliser ce composant, importez-le dans votre module:
import { NgPaginableModule } from 'ng-paginable' ;
@ NgModule ( {
imports : [ NgPaginableModule . forRoot ( ) ]
} )
export class AppModule { } código del componente < paginable-table [headers] =" headers " [pagination] =" pagination " >
</ paginable-table > Le composant de table paginée accepte un objet PaginableTableOptions pour personnaliser le style et le comportement via la liaison @Input() options .
Les options disponibles sont:
serverSidePagination - Activer la pagination côté serveur. La valeur par défaut est fausse.
cursor - style du curseur lorsqu'il oscille les rangées. 'pointer' ou 'default' .
hoverableRows - Activez la ligne de surbrillance sur Hover. Par défaut false .
striped - Table à rayures 'rows' ou 'columns' .
variant - Variante de couleur pour les tables stylisées. Accepte toute valeur string .
Par exemple:
@Component({
// ...
})
export class TableComponent {
options: PaginableTableOptions = {
serverSidePagination: true,
cursor: 'pointer',
hoverableRows: true,
striped: 'columns',
variant: 'dark'
};
}
Cela permet une pagination côté serveur, un survol de ligne, des rayures de colonne, un curseur personnalisé et une variante de thème sombre.
La propriété variant permet d'appliquer un thème de couleur personnalisé à la table en passant n'importe quelle valeur de chaîne. Certaines options communes sont 'primary' , 'secondary' , 'success' , 'danger' etc.
Cela offre une flexibilité pour personnaliser le style de table en fonction de votre système de conception ou de vos exigences de thème.
Les en-têtes de la table paginée sont configurés en passant un tableau d'objets PaginableTableHeader .
Chaque en-tête peut avoir les propriétés suivantes:
title - Le texte à afficher dans la cellule d'en-tête.
property - Le mappage des clés de la propriété dans les données de ligne.
icon - Une icône facultative à afficher à côté du texte du titre.
align - Alignement du texte, soit 'start' , 'center' ou 'end' . La valeur par défaut est 'start' .
sortable - si la colonne peut être triée. La valeur par défaut est false .
wrapping - Le texte de la colonne peut s'envelopper. Soit 'wrap' ou 'nowrap' . La valeur par défaut est 'nowrap' .
sticky - Collez l'en-tête au 'start' ou à la 'end' de la table lors du défilement.
buttons - Un tableau de boutons ou de listes déroulantes à afficher dans l'en-tête.
filter - Ajouter un filtrage pour la colonne. Peut être un InputFilter ou DropdownFilter .
onlyButtons - Masquez le titre et affichez uniquement les boutons configurés.
La propriété filter sur un en-tête peut être utilisée pour activer le filtrage pour une colonne. Il existe deux types de filtres:
Un filtre d'entrée affiche une entrée de texte dans l'en-tête:
filter: {
type: 'text',
key: 'name',
placeholder: 'Filter names...'
}
Le type peut être 'text' , 'number' , 'date' , etc.
Un filtre déroulant affiche une liste déroulante sélectionnée dans l'en-tête:
filter: {
type: 'dropdown',
key: 'category',
options: [
{ label: 'Electronics', value: 'electronics' },
{ label: 'Furniture', value: 'furniture' }
]
}
Les options peuvent être un tableau, une promesse ou un observable qui fournit les options pour la sélection.
Cela permet d'ajouter de riches options de filtrage pour les en-têtes de table paginés.
Le mode contrôle où l'interface utilisateur du filtre s'affiche - soit en ligne dans la cellule d'en-tête ou dans un menu qui bascule:
mode: 'row' affichera le filtre en ligne, intégré directement dans la cellule d'en-tête:
filter: {
mode: 'row',
type: 'text',
key: 'name'
}
Cela affiche l'interface utilisateur du filtre directement dans la cellule d'en-tête pour cette colonne.
mode: 'menu' masquera l'interface utilisateur du filtre derrière une bascule de menu:
filter: {
mode: 'menu',
type: 'text',
key: 'name'
}
Cela ajoute un bouton de basculement de menu à l'en-tête. Lorsque vous cliquez sur, il ouvre un panneau qui affiche l'interface utilisateur du filtre.
Le mode de menu est utile pour cacher des filtres derrière une bascule et garder l'en-tête plus compact.
Donc en résumé:
mode: 'row' affiche le filtre en ligne dans la cellule d'en-tête.mode: 'menu' cache l'interface utilisateur du filtre derrière une bascule de menu. L'option mode donne une flexibilité dans la façon dont l'interface utilisateur du filtre est présentée dans les en-têtes.
L'entrée batchActions permet de définir les boutons d'action et les déroutes qui s'appliquent aux lignes actuellement sélectionnées.
Il faut un tableau d'objets PaginableTableDropdown , chacun configurant une liste déroulante avec des boutons d'action:
@ Component ( {
// ...
} )
export class TableComponent {
batchActions : PaginableTableDropdown [ ] = [
// Dropdown with action buttons
{
buttons : [
{
icon : 'fa fa-pencil' ,
title : 'Edit' ,
handler : ( ) => {
// edit selected rows
}
} ,
{
icon : 'fa fa-trash' ,
title : 'Delete' ,
color : 'danger' ,
handler : ( ) => {
// delete selected rows
}
}
]
} ,
// Single action button
{
icon : 'fa fa-file-export' ,
title : 'Export' ,
handler : ( ) => {
// export selected rows
}
}
] ;
} < paginable-table
[headers] =" headers "
[rows] =" items "
[batchActions] =" batchActions "
[(ngModel)] =" selected "
>
</ paginable-table > Chaque bouton accepte les propriétés pour icon , title , color et handler .
La méthode handler recevra le tableau des lignes sélectionnées comme argument.
Cela permet d'effectuer des actions en vrac sur les lignes actuellement sélectionnées dans le tableau.
| Nom | Taper | Défaut | Requis | Description |
|---|---|---|---|---|
| options | PaginableTableOptions | - | FAUX | Permet de personnaliser le style, le comportement et la stratégie de pagination de la table à travers un ensemble flexible de propriétés. |
| têtes | PaginableTableHeader | - | vrai | Une valeur booléenne qui détermine si le tableau affichera ou non les en-têtes de colonne. |
| pagination | PaginableTablePagination | PAGINET-PAGINABLETABLE DE LA PAGINAGE> | - | vrai | Une valeur booléenne qui détermine si le tableau affichera ou non le contrôle de la pagination. |
| ordination | PaginableTableDination | - | FAUX | Un objet représentant l'ordination initiale. |
| rangées | Array <yhydin | nul | vrai | Un tableau d'objets, chaque objet représentant une ligne dans le tableau. En este caso la paginación se générará automaticamete |
| lots | Array <PaginableTabledRopdown | PaginableTableButton> | [] | FAUX | Un tableau d'objets, chaque objet représentant une action par lots qui peut être appliquée à plusieurs lignes à la fois. |
| perpageoptions | Array <bumber> | [10, 20, 50, 100] | FAUX | Un tableau de nombres, chaque numéro représentant une option pour le nombre de lignes doit être affichée par page. |
| sensible | 'xs' | 'sm' | 'MD' | 'lg' | 'xl' | nul | FAUX | Une valeur booléenne qui détermine si le tableau répondra ou non aux différentes tailles d'écran. |
| identifiant | chaîne | nul | FAUX | Une valeur de chaîne utilisée comme identifiant pour l'instance de composant de table. |
| showearchInput | booléen | vrai | FAUX | Une valeur booléenne qui détermine si une entrée de recherche sera affichée ou non en haut du tableau. |
| sélectionnable | booléen | FAUX | FAUX | Détermine si les lignes peuvent être sélectionnées ou non en cliquant dessus. |
| multiple | booléen | FAUX | FAUX | Détermine si plusieurs lignes peuvent être sélectionnées en même temps en cliquant dessus. |
| SelectableProperty | chaîne | nul | FAUX | Le nom d'une propriété sur chaque objet de ligne qui indique s'il est sélectionné ou non. |
| position de pagination | 'Bottom' | 'top' | 'les deux' | 'bas' | FAUX | La position où les commandes de pagination doivent être affichées (par exemple, "haut" ou "en bas"). |
| pagination | booléen | vrai | FAUX | Détermine si les informations de pagination sont affichées ou non. |
| clés de recherche | Tableau | [] | FAUX | Détermine dans quelles propriétés la recherche doit être effectuée lorsque la pagination est effectuée par le composant lui-même. Ils peuvent être des propriétés non incluses dans les en-têtes. |
| Sortir | Taper | Description |
|---|---|---|
| (itemclick) | T | Tiré lorsque l'élément est ajouté tandis que [multiple]="true" . Sorties Ajout de l'élément |
| (onPageClick) | nombre | Firé sur SELECT BLUR |
| (onselected) | T | Tableau | Déclenché lorsqu'une ligne ou multiples les lignes sont sélectionnées ou non sélectionnées |
| (onParamschange) | PaginationParamschangeevent | Déclenché lorsque l'ordination ou le changement de page |
| (filterchange) | Filterchangeevent | Déclenché lorsque les filtres changent |
| Nom | Description |
|---|---|
| ouvrir | Ouvre le panneau déroulant Select |
| fermer | Ferme le panneau déroulant Select |
| se concentrer | Concentre l'élément sélectionné |
| se brouiller | Brouille l'élément sélectionné |
Chacun des modèles suivants peut être utilisé à différentes fins:
Le modèle de message sans données peut être utilisé pour afficher un message personnalisé lorsqu'aucun résultat n'est trouvé.
< paginable-table [rows] =" [] " [headers] =" headers " >
< ng-template paginableTableNotFound >
< div class =" d-flex flex-column p-4 text-center " >
< img src =" https://media.giphy.com/media/3ohA2ZD9EkeK2AyfdK/giphy.gif " alt =" Sorry! " class =" m-auto "
style =" width: 256px; " >
< div >
< i class =" fa fa-info-circle " aria-hidden =" true " > </ i > Nothing has been found...
</ div >
</ div >
</ ng-template >
</ paginable-table >Le modèle de cellule d'en-tête peut être utilisé pour personnaliser chaque cellule individuelle dans l'en-tête.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableHeader header =" name " let-header =" header " >
< div class =" animate-character " > Name </ div >
</ ng-template >
</ paginable-table >Le modèle de ligne peut être utilisé pour personnaliser l'intégralité du contenu d'une ligne.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableRow let-item >
< tr >
< td >
< img [src] =" 'assets/avatars/64_' + (item.id % 16 + 1) + '.png' " [alt] =" item.name " >
</ td >
< td > {{ item.name }} </ td >
< td > {{ item.email }} </ td >
< td >
< a class =" btn btn-link " (click) =" item.unfold = !item.unfold " >
< i class =" fa " [ngClass] =" {'fa-chevron-down': !item.unfold, 'fa-chevron-up': item.unfold} " > </ i >
</ a >
</ td >
</ tr >
< ng-container *ngIf =" item.unfold " >
< tr >
< td colspan =" 4 " >
Columna personalizada
</ td >
</ tr >
< tr >
< td >
Columna personalizada 1
</ td >
< td >
Columna personalizada 2
</ td >
< td >
Columna personalizada 3
</ td >
< td >
</ td >
</ tr >
</ ng-container >
</ ng-template >
</ paginable-table >Le modèle de cellule peut être utilisé pour personnaliser chaque cellule individuelle dans une ligne.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableCell header =" avatar " let-item =" item " >
< img
[src] =" 'assets/avatars/64_' + ((item.id % 16) + 1) + '.png' "
[alt] =" item.name "
/>
</ ng-template >
< ng-template paginableTableCell header =" name " let-property =" property " >
< span class =" badge badge-pill badge-info " > customized column </ span >
{{ property }}
</ ng-template >
< ng-template paginableTableCell header =" email " let-item =" item " >
{{ item.email }}
< span class =" badge badge-pill badge-warning " > also customized </ span >
</ ng-template >
</ paginable-table >Le modèle de chargement peut être utilisé pour afficher une animation de chargement pendant que les résultats sont récupérés.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableLoading >
< div class =" text-center " >
< img src =" ../images/loading.svg " >
</ div >
</ ng-template >
</ paginable-table >Le modèle de message d'erreur peut être utilisé pour afficher un message d'erreur personnalisé s'il y a un problème de récupération des résultats.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableError >
< div class =" text-center " >
< img src =" ../images/error.svg " >
</ div >
</ ng-template >
</ paginable-table >Le modèle de ligne extensible peut être utilisé pour définir le contenu qui apparaît lorsque une ligne est étendue.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableExpandingRow let-item =" item " >
< tr class =" bg-warning " >
< td [attr.colspan] =" headers.length + 1 " >
< div class =" d-flex " >
< div class =" align-self-center pr-4 " >
< img [src] =" 'assets/avatars/64_' + (item.id % 16 + 1) + '.png' " [alt] =" item.name " >
</ div >
< div class =" flex-grow " >
< h3 > {{ item.email }} </ h3 >
< h4 > {{ item.name }} </ h4 >
</ div >
</ div >
</ td >
</ tr >
</ ng-template >
< ng-template paginableTableExpandingRow let-item =" item " >
< tr class =" bg-warning " >
< td [attr.colspan] =" headers.length + 1 " class =" bg-success " >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo leo eget elementum
condimentum.
</ p >
</ td >
</ tr >
</ ng-template >
</ paginable-table >Le modèle de filtres peut être utilisé pour personnaliser l'apparence et le comportement des filtres pour chaque colonne.
< paginable-table
(filterChange) =" onFilterChange($event) "
(onParamsChange) =" fetch($event) "
[selectable] =" true "
[headers] =" headers "
[pagination] =" pagination "
>
< ng-template
paginableTableFilter
header =" email "
let-header =" header "
let-formControl =" formControl "
>
...
< div
class =" form-check "
*ngFor =" let option of header.filter.options | async "
>
< input
class =" form-check-input "
type =" checkbox "
[value] =" option.value "
[formControl] =" formControl "
/>
< label class =" form-check-label " >
{{ option.text }}
</ label >
</ div >
</ ng-template >
...
</ paginable-table > Voici la documentation de la liste ng-paginable en anglais:
Le composant ng-paginable-list permet de rendre des données dans une liste hiérarchique imbriquée.
Pour l'utiliser, passez simplement la structure de données à l'entrée tree :
< ng80-paginable-list [tree] =" data " > </ ng80-paginable-list > data = [
{
label : 'Item 1' ,
children : [
{ label : 'Subitem 1' } ,
{ label : 'Subitem 2' } ,
]
} ,
{
label : 'Item 2'
}
] ;Cela générera une liste avec les éléments et les sous-éléments.
Les options disponibles sont:
bindLabel - propriété de l'objet d'élément à utiliser comme étiquetteselectable - Active une sélection unique ou multiple. Valeurs: 'single' | 'multiple' Émet les événements suivants:
itemClick - Lorsque vous cliquez sur un élément. Renvoie l'élément et son état effondré. Vous pouvez utiliser un modèle pour personnaliser le balisage pour chaque élément:
< ng80-paginable-list
[tree] =" data "
[selectable] =" 'multiple' "
(itemClick) =" onSelect($event) " >
< ng-template listItemTpt let-item >
< div class =" custom " >
{{item.label}}
</ div >
</ ng-template >
</ ng80-paginable-list >Cela permet de personnaliser pleinement l'élément rendu.
Le composant implémente ControlValueAccessor pour s'intégrer aux formes réactives.
La valeur sélectionnée sera disponible dans formControl .
Le composant gère correctement la mise au point et la navigation par clavier pour une bonne accessibilité.
Ng-paginable comprend des étiquettes prédéfinies en anglais et en espagnol qui sont utilisées dans l'interface utilisateur du composant.
Ces étiquettes peuvent facilement être remplacées pour prendre en charge d'autres langues ou traductions personnalisées.
Par défaut, Ng-Paginable utilise la langue du navigateur pour sélectionner entre l'anglais et l'espagnol. Cela affiche les étiquettes par défaut sans avoir besoin d'une configuration supplémentaire.
Vous pouvez fournir des traductions personnalisées au PaginableTranslationService :
@ Component ( {
// ..
} )
export class AppComponent {
constructor ( private translationService : PaginableTranslationService ) {
this . translationService . setTranslation ( {
first : 'First' ,
prev : 'Previous' ,
next : 'Next' ,
last : 'Last'
// ...
} ) ;
}
}Cela remplace les étiquettes par défaut.
Pour intégrer NG-Paginable avec des bibliothèques de traduction comme NGX-Translate, vous pouvez vous abonner aux modifications linguistiques:
@ Component ( {
// ...
} )
export class AppComponent {
constructor (
private translate : TranslateService ,
private translationService : PaginableTranslationService
) {
this . translate . onLangChange . subscribe ( ( event ) => {
this . translate . get ( 'PAGINATION' ) . subscribe ( ( translations ) => {
this . translationService . setTranslation ( translations ) ;
} )
} ) ;
}
}De cette façon, lorsque la langue change dans l'application, les étiquettes de pagination sont mises à jour.
Cela permet une traduction complète et intégrée à travers l'interface utilisateur.
Le PaginableTranslationService expose les méthodes suivantes:
setTranslation ( translations : PaginableTranslations ) // sets translations
getTranslation ( key : string ) // gets a specific labelCela fournit un contrôle total sur les étiquettes et le langage utilisés par le composant.
Avec cette API flexible, il est simple d'intégrer NG-paginable à toute stratégie de traduction.
Vous pouvez également définir des messages de configuration et de localisation globaux en passant une configuration à Forroot de NGPAGinableModule, généralement dans votre composant racine, et personnaliser les valeurs de ses propriétés afin de fournir des valeurs par défaut.
@ NgModule ( {
declarations : [ UserListComponent ] ,
imports : [
CommonModule ,
NgPaginableModule . forRoot ( {
mapping : {
currentPage : 'page' ,
data : 'content' ,
lastPage : 'last' ,
total : 'total'
}
} )
] ,
exports : [ UserListComponent ] ,
providers : [ ]
} )
export class UserListModule { } Le composant NG-paginable met en œuvre la détection de modification OnPush , ce qui signifie que la vérification sale vérifie les types de données immuables. Cela signifie que si vous faites des mutations d'objet comme:
this . rows . push ( { id : 1 , name : 'New item' } )Le composant ne détectera pas de changement. Au lieu de cela, vous devez faire:
this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ; Ce composant a été créé pour permettre aux développeurs d'afficher plus facilement des données de Laravel paginée dans une table angulaire sans avoir à écrire de code personnalisé. Au fil du temps, des options de configuration ont été ajoutées pour faciliter l'utilisation avec n'importe quel cadre ou avec des structures de pagination personnalisées.
Si vous trouvez cette bibliothèque utile et que vous souhaitez soutenir son développement, pensez à m'acheter un café. Merci pour votre soutien!
Carlos Morcillo est développeur Web et contributeur open source. Vous pouvez trouver plus de son travail sur ce site Web.
