ng paginable
1.0.0
Este es un módulo angular que proporciona un componente de tabla con capacidades de clasificación y filtrado. Integración listosa con respuestas de Laravel y otros marcos y diseño de boostrap.
| Angular | ng-paginación |
|---|---|
| > = 14.0.0 <15.0.0 | v1.x |
Para instalar este componente, ejecute el siguiente comando en su directorio de proyecto:
npm install ng-paginable --save Para usar este componente, importárelo a su módulo:
import { NgPaginableModule } from 'ng-paginable' ;
@ NgModule ( {
imports : [ NgPaginableModule . forRoot ( ) ]
} )
export class AppModule { } código del componente < paginable-table [headers] =" headers " [pagination] =" pagination " >
</ paginable-table > El componente de la tabla paginada acepta un objeto PaginableTableOptions para personalizar el estilo y el comportamiento a través de la unión @Input() options .
Las opciones disponibles son:
serverSidePagination : habilite la paginación del lado del servidor. El valor predeterminado es falso.
cursor - Estilo del cursor al pasar el cierre de filas. 'pointer' o 'default' .
hoverableRows : habilite la fila resaltada en el hover. false predeterminado.
striped - Tabla de rayas 'rows' o 'columns' .
variant : variante de color para tablas de estilo. Acepta cualquier valor string .
Por ejemplo:
@Component({
// ...
})
export class TableComponent {
options: PaginableTableOptions = {
serverSidePagination: true,
cursor: 'pointer',
hoverableRows: true,
striped: 'columns',
variant: 'dark'
};
}
Esto permite la paginación del lado del servidor, el flujo de filas, las rayas de columnas, el cursor personalizado y una variante de tema oscuro.
La propiedad variant permite aplicar el tema de color personalizado a la tabla pasando cualquier valor de cadena. Algunas opciones comunes son 'primary' , 'secondary' , 'success' , 'danger' etc.
Esto proporciona flexibilidad para personalizar el estilo de la tabla según su sistema de diseño o requisitos de tema.
Los encabezados para la tabla paginada se configuran al pasar una matriz de objetos PaginableTableHeader .
Cada encabezado puede tener las siguientes propiedades:
title : el texto a mostrar en la celda del encabezado.
property : la asignación de clave a la propiedad en los datos de la fila.
icon : un icono opcional para mostrar junto al texto del título.
align - Alineación del texto, ya sea 'start' , 'center' o 'end' . El valor predeterminado es 'start' .
sortable : si la columna se puede ordenar. El valor predeterminado es false .
wrapping : si el texto en la columna puede envolver. Ya sea 'wrap' o 'nowrap' . El valor predeterminado es 'nowrap' .
sticky : pegue el encabezado al 'start' o 'end' de la mesa al desplazarse.
buttons : una variedad de botones o menores para mostrar en el encabezado.
filter : agregue el filtrado para la columna. Puede ser un InputFilter o DropdownFilter .
onlyButtons : oculte el título y solo muestre botones configurados.
La propiedad filter en un encabezado se puede usar para habilitar el filtrado para una columna. Hay dos tipos de filtros:
Un filtro de entrada muestra una entrada de texto en el encabezado:
filter: {
type: 'text',
key: 'name',
placeholder: 'Filter names...'
}
El type puede ser 'text' , 'number' , 'date' , etc.
Un filtro desplegable muestra un menú desplegable Seleccionar en el encabezado:
filter: {
type: 'dropdown',
key: 'category',
options: [
{ label: 'Electronics', value: 'electronics' },
{ label: 'Furniture', value: 'furniture' }
]
}
Las options pueden ser una matriz, promesa u observable que proporcione las opciones para la selección.
Esto permite agregar opciones de filtrado ricas para los encabezados de mesa paginados.
El mode controla donde se muestra la interfaz de usuario del filtro, ya sea en línea en la celda del encabezado o en un menú que cambia:
mode: 'row' mostrará el filtro en línea, incrustado directamente en la celda del encabezado:
filter: {
mode: 'row',
type: 'text',
key: 'name'
}
Esto muestra la interfaz de usuario del filtro directamente en la celda del encabezado para esa columna.
mode: 'menu' ocultará la interfaz de usuario del filtro detrás de un menú alternar:
filter: {
mode: 'menu',
type: 'text',
key: 'name'
}
Esto agrega un botón de alternación de menú al encabezado. Cuando se hace clic, abre un panel que muestra la interfaz de usuario del filtro.
El modo de menú es útil para ocultar filtros detrás de una palanca y mantener el encabezado más compacto.
Entonces en resumen:
mode: 'row' muestra el filtro en línea en la celda del encabezado.mode: 'menu' oculta la interfaz de usuario del filtro detrás de un menú. La opción mode da flexibilidad en cómo se presenta la interfaz de usuario del filtro en los encabezados.
La entrada batchActions permite definir botones de acción y desplegables que se aplican a las filas seleccionadas actualmente.
Se necesita una matriz de objetos PaginableTableDropdown , cada uno configurando un menú desplegable con los botones de acción:
@ 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 > Cada botón acepta propiedades para icon , title , color y handler .
El método handler recibirá la matriz de filas seleccionadas como argumento.
Esto permite realizar acciones masivas en las filas seleccionadas actualmente en la tabla.
| Nombre | Tipo | Por defecto | Requerido | Descripción |
|---|---|---|---|---|
| opción | PaginableTableOptions | - | FALSO | Permite personalizar el estilo, el comportamiento y la estrategia de paginación de la tabla a través de un conjunto flexible de propiedades. |
| encabezado | Cabreón paginable | - | verdadero | Un valor booleano que determina si la tabla mostrará o no encabezados de columna. |
| paginación | PaginableTablePagination | Observable <paginableTablePagination> | - | verdadero | Un valor booleano que determina si la tabla mostrará o no control de paginación. |
| ordenación | PaginableTableDordination | - | FALSO | Un objeto que representa la ordenación inicial. |
| hilera | Array <Any Any> | nulo | verdadero | Una matriz de objetos, cada objeto que representa una fila en la tabla. ESTE CASO LA PAGINACO SE Generará Auticamete |
| lotes de lotes | Array <PaginableTableROPDOWN | PaginableTableButton> | [] | FALSO | Una matriz de objetos, cada objeto que representa una acción por lotes que se puede aplicar a múltiples filas a la vez. |
| perpagos | Array <Número> | [10, 20, 50, 100] | FALSO | Una variedad de números, cada número que representa una opción para cuántas filas deben mostrarse por página. |
| sensible | 'XS' | 'SM' | 'MD' | 'lg' | 'SG' | nulo | FALSO | Un valor booleano que determina si la tabla responderá o no a diferentes tamaños de pantalla. |
| identificación | cadena | nulo | FALSO | Un valor de cadena que se usa como identificador para la instancia de componente de tabla. |
| shoSearchInput | booleano | verdadero | FALSO | Un valor booleano que determina si se mostrará o no una entrada de búsqueda en la parte superior de la tabla. |
| seleccionable | booleano | FALSO | FALSO | Determina si las filas se pueden seleccionar o no haciendo clic en ellas. |
| múltiple | booleano | FALSO | FALSO | Determina si varias filas se pueden seleccionar o no a la vez haciendo clic en ellas. |
| selectableProperty | cadena | nulo | FALSO | El nombre de una propiedad en cada objeto de fila que indica si se puede seleccionar o no. |
| posición de paginación | 'Bottom' | 'Top' | 'ambos' | 'abajo' | FALSO | La posición donde se deben mostrar los controles de paginación (por ejemplo, "superior" o "abajo"). |
| paginacióninfo | booleano | verdadero | FALSO | Determina si se muestra o no información de paginación. |
| kilómetros de búsqueda | Formación | [] | FALSO | Determina en qué propiedades se debe realizar la búsqueda cuando el componente realiza la paginación. Pueden ser propiedades no incluidas en los encabezados. |
| Producción | Tipo | Descripción |
|---|---|---|
| (ArtemClick) | T | Disparado cuando el elemento se agrega mientras [multiple]="true" . Salidas Artículo agregado |
| (onpageclick) | número | Disparado en Select Blur |
| (OnSelected) | T | Formación | Activado cuando una fila o múltiples filas se seleccionan o no se seleccionan |
| (OnParamsChange) | PaginationParamsChangeEvent | Activado cuando cambia la ordenación o la página |
| (FilterChange) | FiltreChangeEvent | Activado cuando cambian los filtros |
| Nombre | Descripción |
|---|---|
| abierto | Abre el panel de desplegable Seleccionar |
| cerca | Cierra el panel de desplegable Seleccionar |
| enfocar | Enfoca el elemento seleccionar |
| difuminar | Desduza el elemento Seleccionar |
Cada una de las siguientes plantillas se puede utilizar para diferentes propósitos:
La plantilla de mensajes de no datos se puede usar para mostrar un mensaje personalizado cuando no se encuentran resultados.
< 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 >La plantilla de celda del encabezado se puede usar para personalizar cada celda individual dentro del encabezado.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableHeader header =" name " let-header =" header " >
< div class =" animate-character " > Name </ div >
</ ng-template >
</ paginable-table >La plantilla de fila se puede usar para personalizar todo el contenido de una fila.
< 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 >La plantilla de celda se puede usar para personalizar cada celda individual dentro de una fila.
< 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 >La plantilla de carga se puede usar para mostrar una animación de carga mientras los resultados se obtienen.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableLoading >
< div class =" text-center " >
< img src =" ../images/loading.svg " >
</ div >
</ ng-template >
</ paginable-table >La plantilla de mensaje de error se puede usar para mostrar un mensaje de error personalizado si hay un problema para obtener resultados.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableError >
< div class =" text-center " >
< img src =" ../images/error.svg " >
</ div >
</ ng-template >
</ paginable-table >La plantilla de fila expandible se puede usar para definir el contenido que aparece cuando se expande una fila.
< 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 >La plantilla de filtros se puede usar para personalizar la apariencia y el comportamiento de los filtros para cada columna.
< 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 > Aquí está la documentación para la lista NG-Paginable en inglés:
El componente ng-paginable-list permite hacer datos en una lista jerárquica anidada.
Para usarlo, simplemente pase la estructura de datos a la entrada tree :
< ng80-paginable-list [tree] =" data " > </ ng80-paginable-list > data = [
{
label : 'Item 1' ,
children : [
{ label : 'Subitem 1' } ,
{ label : 'Subitem 2' } ,
]
} ,
{
label : 'Item 2'
}
] ;Esto generará una lista con los elementos y subitems.
Las opciones disponibles son:
bindLabel - Propiedad del objeto de elemento para usar como etiquetaselectable : habilita la selección única o múltiple. Valores: 'single' | 'multiple' Emite los siguientes eventos:
itemClick : al hacer clic en un elemento. Devuelve el elemento y su estado colapsado. Puede usar una plantilla para personalizar el marcado para cada elemento:
< 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 >Esto permite personalizar completamente el elemento renderizado.
El componente implementa ControlValueAccessor para integrarse con formas reactivas.
El valor seleccionado estará disponible en formControl .
El componente administra correctamente el enfoque y la navegación del teclado para una buena accesibilidad.
Ng-Paginable incluye etiquetas predefinidas en inglés y español que se utilizan en la interfaz de usuario del componente.
Estas etiquetas se pueden reemplazar fácilmente para admitir otros idiomas o traducciones personalizadas.
Por defecto, NG-Paginable utiliza el idioma del navegador para seleccionar entre inglés y español. Esto muestra las etiquetas predeterminadas sin necesidad de configuración adicional.
Puede proporcionar traducciones personalizadas al PaginableTranslationService :
@ Component ( {
// ..
} )
export class AppComponent {
constructor ( private translationService : PaginableTranslationService ) {
this . translationService . setTranslation ( {
first : 'First' ,
prev : 'Previous' ,
next : 'Next' ,
last : 'Last'
// ...
} ) ;
}
}Esto anula las etiquetas predeterminadas.
Para integrar ng-paginable con bibliotecas de traducción como NGX-Translate, puede suscribirse a los cambios de idioma:
@ 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 esta manera, cuando el idioma cambia en la aplicación, se actualizan las etiquetas de paginación.
Esto permite una traducción completa e integrada a través de la interfaz de usuario.
El PaginableTranslationService expone los siguientes métodos:
setTranslation ( translations : PaginableTranslations ) // sets translations
getTranslation ( key : string ) // gets a specific labelEsto proporciona un control total sobre las etiquetas y el lenguaje utilizado por el componente.
Con esta API flexible, es sencillo integrar Ng-Paginable con cualquier estrategia de traducción.
También puede establecer mensajes de configuración y localización global pasando un método de configuración a FORROOT de NGPAGInableModule, típicamente en su componente raíz, y personalizar los valores de sus propiedades para proporcionar valores predeterminados.
@ NgModule ( {
declarations : [ UserListComponent ] ,
imports : [
CommonModule ,
NgPaginableModule . forRoot ( {
mapping : {
currentPage : 'page' ,
data : 'content' ,
lastPage : 'last' ,
total : 'total'
}
} )
] ,
exports : [ UserListComponent ] ,
providers : [ ]
} )
export class UserListModule { } El componente ng-paginable implementa la detección de cambios OnPush , lo que significa las verificaciones de verificación sucia para los tipos de datos inmutables. Eso significa que si haces mutaciones de objetos como:
this . rows . push ( { id : 1 , name : 'New item' } )El componente no detectará un cambio. En su lugar, necesitas hacer:
this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ; Este componente fue creado para facilitar que los desarrolladores muestren datos de objetos paginados de Laravel en una tabla angular sin tener que escribir un código personalizado. Con el tiempo, se agregaron opciones para la configuración para facilitar el uso de cualquier marco o con estructuras de paginación personalizadas.
Si encuentra útil esta biblioteca y desea apoyar su desarrollo, considere comprarme un café. ¡Gracias por su apoyo!
Carlos Morcillo es un desarrollador web y colaborador de código abierto. Puede encontrar más de su trabajo en este sitio web.
