ng paginable
1.0.0
Este é um módulo angular que fornece um componente de tabela com recursos de classificação e filtragem. Integração pronta para uso com respostas do Laravel e outras estruturas e layout de impulsionamento.
| Angular | Ng-Paginação |
|---|---|
| > = 14.0.0 <15.0.0 | v1.x |
Para instalar este componente, execute o seguinte comando no diretório do seu projeto:
npm install ng-paginable --save Para usar este componente, importe -o para o seu 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 > O componente de tabela paginado aceita um objeto PaginableTableOptions para personalizar o estilo e o comportamento por meio da ligação @Input() options .
As opções disponíveis são:
serverSidePagination - Ative a paginação do lado do servidor. O padrão é falso.
cursor - estilo cursor ao pairar linhas. 'pointer' ou 'default' .
hoverableRows - Ative a linha de destaque no Hover. Padrão false .
Tabela striped - Tabela de listras 'rows' ou 'columns' .
variant - Variante de cor para tabelas com estilo. Aceita qualquer valor string .
Por exemplo:
@Component({
// ...
})
export class TableComponent {
options: PaginableTableOptions = {
serverSidePagination: true,
cursor: 'pointer',
hoverableRows: true,
striped: 'columns',
variant: 'dark'
};
}
Isso permite a paginação do lado do servidor, pairando de linha, listras de coluna, cursor personalizado e uma variante de tema escuro.
A propriedade variant permite a aplicação de temas de cores personalizadas na tabela, passando qualquer valor de string. Algumas opções comuns são 'primary' , 'secondary' , 'success' , 'danger' etc.
Isso fornece flexibilidade para personalizar o estilo de tabela com base no seu sistema de design ou requisitos de tema.
Os cabeçalhos da tabela paginada são configurados passando uma variedade de objetos PaginableTableHeader .
Cada cabeçalho pode ter as seguintes propriedades:
title - O texto a ser exibido na célula do cabeçalho.
property - o mapeamento de chaves para a propriedade nos dados da linha.
icon - Um ícone opcional para exibir ao lado do texto do título.
align - Alinhamento do texto, 'start' , 'center' ou 'end' . O padrão é 'start' .
sortable - se a coluna pode ser classificada. O padrão é false .
wrapping - se o texto na coluna pode envolver. 'wrap' ou 'nowrap' . O padrão é 'nowrap' .
sticky - coloque o cabeçalho no 'start' ou 'end' da tabela ao rolar.
buttons - Uma matriz de botões ou suspensos para exibir no cabeçalho.
filter - Adicione a filtragem para a coluna. Pode ser um InputFilter ou DropdownFilter .
onlyButtons - oculte o título e os botões configurados apenas show.
A propriedade filter em um cabeçalho pode ser usada para ativar a filtragem para uma coluna. Existem dois tipos de filtros:
Um filtro de entrada exibe uma entrada de texto no cabeçalho:
filter: {
type: 'text',
key: 'name',
placeholder: 'Filter names...'
}
O type pode ser 'text' , 'number' , 'date' , etc.
Um filtro suspenso mostra um menu suspenso selecionado no cabeçalho:
filter: {
type: 'dropdown',
key: 'category',
options: [
{ label: 'Electronics', value: 'electronics' },
{ label: 'Furniture', value: 'furniture' }
]
}
As options podem ser uma matriz, promessa ou observável que fornece as opções para a seleção.
Isso permite adicionar ricas opções de filtragem para os cabeçalhos de mesa paginados.
O mode controla onde a interface do usuário do filtro é exibida - embutida na célula do cabeçalho ou em um menu que alterna:
mode: 'row' exibirá o filtro embutido, incorporado diretamente na célula do cabeçalho:
filter: {
mode: 'row',
type: 'text',
key: 'name'
}
Isso exibe a interface do usuário do filtro diretamente na célula do cabeçalho dessa coluna.
mode: 'menu' ocultará a interface do usuário do filtro atrás de uma alternância do menu:
filter: {
mode: 'menu',
type: 'text',
key: 'name'
}
Isso adiciona um botão de alternância do menu ao cabeçalho. Quando clicado, ele abre um painel que exibe a interface do usuário do filtro.
O modo de menu é útil para ocultar filtros atrás de uma alternância e manter o cabeçalho mais compacto.
Então, em resumo:
mode: 'row' exibe o filtro embutido na célula do cabeçalho.mode: 'menu' esconde a interface do usuário do filtro atrás de uma alternância do menu. A opção mode oferece flexibilidade na forma como a interface do usuário do filtro é apresentada nos cabeçalhos.
A entrada batchActions permite definir botões de ação e suspensos que se aplicam às linhas atualmente selecionadas.
É preciso uma variedade de objetos PaginableTableDropdown , cada um configurando um suspensão com botões de ação:
@ 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ão aceita propriedades para icon , title , color e handler .
O método handler receberá a matriz de linhas selecionadas como argumento.
Isso permite executar ações em massa nas linhas atualmente selecionadas na tabela.
| Nome | Tipo | Padrão | Obrigatório | Descrição |
|---|---|---|---|---|
| opções | PaginableTableOptions | - | falso | Permite personalizar o estilo, o comportamento e a estratégia de paginação da tabela por meio de um conjunto flexível de propriedades. |
| cabeçalhos | PaginableTableHeader | - | verdadeiro | Um valor booleano que determina se a tabela exibirá ou não cabeçalhos de coluna. |
| paginação | PaginableTablePagination | Observável <PaginableTablePagination> | - | verdadeiro | Um valor booleano que determina se a tabela exibirá ou não o controle de paginação. |
| ordenação | PaginableTableordination | - | falso | Um objeto que representa a ordenação inicial. |
| linhas | Array <alguma> | nulo | verdadeiro | Uma matriz de objetos, cada objeto que representa uma linha na tabela. En este caso la paginación se generará automático |
| Lotes | Array <paginableTabledRopdown | PaginableTableButton> | [] | falso | Uma variedade de objetos, cada objeto que representa uma ação em lote que pode ser aplicada a várias linhas de uma só vez. |
| perpagemOptions | Array <número> | [10, 20, 50, 100] | falso | Uma matriz de números, cada número que representa uma opção para quantas linhas devem ser exibidas por página. |
| responsivo | 'xs' | 'sm' | 'md' | 'LG' | 'xl' | nulo | falso | Um valor booleano que determina se a tabela responderá ou não a diferentes tamanhos de tela. |
| eu ia | corda | nulo | falso | Um valor de sequência que é usado como identificador para a instância do componente da tabela. |
| SHOSSearchInput | booleano | verdadeiro | falso | Um valor booleano que determina se uma entrada de pesquisa será exibida ou não na parte superior da tabela. |
| selecionável | booleano | falso | falso | Determina se as linhas podem ou não ser selecionadas clicando nelas. |
| múltiplo | booleano | falso | falso | Determina se várias linhas podem ou não ser selecionadas de uma só vez clicando nelas. |
| selectableProperty | corda | nulo | falso | O nome de uma propriedade em cada objeto de linha que indica se é ou não selecionável. |
| PaginaçãoPosition | 'Bottom' | 'top' | 'ambos' | 'fundo' | falso | A posição em que os controles de paginação devem ser exibidos (por exemplo, "top" ou "inferior"). |
| PaginaçãoInfo | booleano | verdadeiro | falso | Determina se as informações de paginação são exibidas ou não. |
| Pesquisa | Variedade | [] | falso | Determina em quais propriedades a pesquisa deve ser realizada quando a paginação é realizada pelo próprio componente. Eles podem ser propriedades não incluídas nos cabeçalhos. |
| Saída | Tipo | Descrição |
|---|---|---|
| (ItemClick) | T | Disparado quando o item é adicionado enquanto [multiple]="true" . Saídas Item adicionado |
| (OnPageclick) | número | Disparado em seleto borrão |
| (OnSelected) | T | Variedade | Acionado quando uma linha ou múltiplos linhas são selecionadas ou não selecionadas |
| (OnParamSchange) | PaginaçãoParamSchangeEvent | Acionado quando a ordenação ou mudança de página |
| (FilterChange) | FilterChangeEvent | Acionado quando os filtros mudam |
| Nome | Descrição |
|---|---|
| abrir | Abre o painel suspenso selecionado |
| fechar | Fecha o painel suspenso selecionado |
| foco | Concentra o elemento selecionado |
| borrão | Obscurece o elemento selecionado |
Cada um dos modelos a seguir pode ser usado para diferentes fins:
O modelo de mensagem de dados NO pode ser usado para exibir uma mensagem personalizada quando nenhum resultado for encontrado.
< 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 >O modelo de célula do cabeçalho pode ser usado para personalizar cada célula individual dentro do cabeçalho.
< paginable-table [headers] =" headers " [rows] =" items " >
< ng-template paginableTableHeader header =" name " let-header =" header " >
< div class =" animate-character " > Name </ div >
</ ng-template >
</ paginable-table >O modelo de linha pode ser usado para personalizar todo o conteúdo de uma linha.
< 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 >O modelo de célula pode ser usado para personalizar cada célula individual dentro de uma linha.
< 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 >O modelo de carregamento pode ser usado para exibir uma animação de carregamento enquanto os resultados estão sendo buscados.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableLoading >
< div class =" text-center " >
< img src =" ../images/loading.svg " >
</ div >
</ ng-template >
</ paginable-table >O modelo de mensagem de erro pode ser usado para exibir uma mensagem de erro personalizada se houver um problema buscar resultados.
< paginable-table [headers] =" headers " [pagination] =" pagination " >
< ng-template paginableTableError >
< div class =" text-center " >
< img src =" ../images/error.svg " >
</ div >
</ ng-template >
</ paginable-table >O modelo de linha expansível pode ser usado para definir o conteúdo que aparece quando uma linha é expandida.
< 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 >O modelo de filtros pode ser usado para personalizar a aparência e o comportamento dos filtros para cada coluna.
< 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 > Aqui está a documentação para a lista NG-Paginable em inglês:
O componente ng-paginable-list permite renderizar dados em uma lista hierárquica aninhada.
Para usá -lo, basta passar a estrutura de dados para a entrada tree :
< ng80-paginable-list [tree] =" data " > </ ng80-paginable-list > data = [
{
label : 'Item 1' ,
children : [
{ label : 'Subitem 1' } ,
{ label : 'Subitem 2' } ,
]
} ,
{
label : 'Item 2'
}
] ;Isso gerará uma lista com os itens e subitems.
As opções disponíveis são:
bindLabel - propriedade do objeto de item a ser usado como rótuloselectable - Ativa uma seleção única ou múltipla. Valores: 'single' | 'multiple' Emite os seguintes eventos:
itemClick - Ao clicar em um item. Retorna o item e seu estado em colapso. Você pode usar um modelo para personalizar a marcação para cada item:
< 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 >Isso permite personalizar totalmente o item renderizado.
O componente implementa ControlValueAccessor para se integrar às formas reativas.
O valor selecionado estará disponível no formControl .
O componente gerencia corretamente o foco e a navegação do teclado para obter uma boa acessibilidade.
Ng-Paginable inclui rótulos predefinidos em inglês e espanhol que são usados na interface do usuário do componente.
Esses rótulos podem ser facilmente substituídos para suportar outros idiomas ou traduções personalizadas.
Por padrão, o NG-Paginable usa o idioma do navegador para selecionar entre inglês e espanhol. Isso exibe os rótulos padrão sem precisar de configuração adicional.
Você pode fornecer traduções personalizadas para o PaginableTranslationService :
@ Component ( {
// ..
} )
export class AppComponent {
constructor ( private translationService : PaginableTranslationService ) {
this . translationService . setTranslation ( {
first : 'First' ,
prev : 'Previous' ,
next : 'Next' ,
last : 'Last'
// ...
} ) ;
}
}Isso substitui os rótulos padrão.
Para integrar o NG-PAGINABLE com bibliotecas de tradução como o NGX Translate, você pode se inscrever nas alterações do 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 ) ;
} )
} ) ;
}
}Dessa forma, quando o idioma muda no aplicativo, os rótulos da paginação são atualizados.
Isso permite uma tradução completa e integrada na interface do usuário.
O PaginableTranslationService expõe os seguintes métodos:
setTranslation ( translations : PaginableTranslations ) // sets translations
getTranslation ( key : string ) // gets a specific labelIsso fornece controle total sobre os rótulos e o idioma usado pelo componente.
Com esta API flexível, é simples integrar o NG-Paginable com qualquer estratégia de tradução.
Você também pode definir mensagens globais de configuração e localização passando uma configuração para o método FORROOT do NGPAGINABLEMODULE, normalmente no seu componente raiz, e personalizando os valores de suas propriedades para fornecer valores padrão.
@ NgModule ( {
declarations : [ UserListComponent ] ,
imports : [
CommonModule ,
NgPaginableModule . forRoot ( {
mapping : {
currentPage : 'page' ,
data : 'content' ,
lastPage : 'last' ,
total : 'total'
}
} )
] ,
exports : [ UserListComponent ] ,
providers : [ ]
} )
export class UserListModule { } O componente NG-PAGINABLE implementa a detecção de alterações OnPush , o que significa que as verificações de verificação sujas para tipos de dados imutáveis. Isso significa que se você faz mutações de objeto como:
this . rows . push ( { id : 1 , name : 'New item' } )O componente não detectará uma alteração. Em vez disso, você precisa fazer:
this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ; Esse componente foi criado para facilitar os desenvolvedores de exibir dados de objetos paginados em Laravel em uma tabela angular sem precisar escrever código personalizado. Com o tempo, foram adicionadas opções de configuração para facilitar o uso de qualquer estrutura ou estruturas de paginação personalizadas.
Se você achar essa biblioteca útil e deseja apoiar seu desenvolvimento, considere me comprar um café. Obrigado pelo seu apoio!
Carlos Morcillo é desenvolvedor da Web e colaborador de código aberto. Você pode encontrar mais do trabalho dele neste site.
