Visão geral do componente Angular Data Grid
Angular Data Grid Example
Maratona de Boston 2021 – Neste exemplo de grade angular, você pode ver como os usuários podem fazer filtragem básica e no estilo do Excel, classificação de dados ao vivo, bem como o uso de resumos de grade e modelos de células que incluem nosso componente Sparkline, componente Indicador de Progresso Circular e Ícones. A demonstração também inclui paginação personalizada e parte de uso por página da paginação Angular.
Getting Started with Ignite UI for Angular Data Grid
Note
Este componente pode utilizar opcionalmenteHammerModule. Ele pode ser importado no módulo raiz da aplicação para que as interações por toque funcionem como esperado.
Para começar a usar o componente Ignite UI for Angular Data Grid, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:
ng add igniteui-angular
Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.
O próximo passo é importar issoIgxGridModule no seu arquivo app.module.ts.
// app.module.ts
import { IgxGridModule } from 'igniteui-angular';
// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxGridModule,
...
]
})
export class AppModule {}
Alternativamente,16.0.0 você pode importarIgxGridComponent como uma dependência independente ou usar oIGX_GRID_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.
// home.component.ts
import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
// import { IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-grid [data]="localData" [autoGenerate]="true"></igx-grid>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_GRID_DIRECTIVES]
/* or imports: [IgxGridComponent] */
})
export class HomeComponent {
public data: Product [];
}
Agora que você importou o módulo ou diretivas Ignite UI for Angular Grid, pode começar a usar oigx-grid componente.
Using the Angular Data Grid
<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="true"></igx-grid>
A propriedade data associa a grade, neste caso, à matriz local de objetos.
AautoGenerate propriedade indicaigx-grid que os gerem automaticamente os s IgxColumnComponent comda grade base nos campos fonte de dados. Também tentará deduzir o tipo de dado apropriado para a coluna, se possível. Os desenvolvedores também podem definir explicitamente as colunas e o mapeamento para os campos fonte de dados.
Angular Bootstrap Grid Definition
Ignite UI for Angular inclui uma poderosa grade de bootstrap, como o sistema de layout baseado em flex. Espera-se que qualquer aplicativo moderno hoje siga uma abordagem de web design responsivo, o que significa que ele pode ajustar normalmente o layout dos elementos HTML com base no tamanho do dispositivo ou simplesmente redimensionando o navegador. Um layout de grade de bootstrap Angular foi a abordagem mais usada no passado, mas um sistema de layout baseado em flex como CSS grid se tornou mais popular, pois funciona em qualquer navegador. A Diretiva de Layout Ignite UI for Angular permite o fluxo vertical e horizontal, incluindo quebra de conteúdo/texto, justificação e alinhamento. A grade Ignite UI for Angular suporta um layout responsivo usando CSS, dando a você a máxima flexibilidade em como a grade se comporta no redimensionamento.
Angular Grid Styling Configuration
Note
EleIgxGridComponent usa layout de grade css, que não é suportado no IE sem prefixação, consequentemente não renderiza corretamente.
Em Angular a maioria dos estilos são prefixados implicitamente graças ao plugin Autoprefixer.
Para prefixação Layouts de grade No entanto, você precisa ativar o Autoprefixer Propriedade da grade com o comentário/* autoprefixer grid:on */.
Para facilitar seu trabalho, aplique o comentário nosrc/styles.scss arquivo.
// src/styles.scss
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
@include core();
/* autoprefixer grid:on */
@include theme($default-palette);
Editable Grid Angular
Cada operação para edição de grade Angular inclui operações em lote, o que significa que a API oferece a opção de agrupar edições em uma única chamada de servidor, ou você pode executar operações de edição/atualização de grade conforme elas ocorrem com interações de grade. Juntamente com uma ótima experiência do desenvolvedor como uma grade de Angular editável com operações CRUD, a grade Angular inclui navegação por teclado semelhante ao Excel. A navegação em grade padrão comum está incluída, além da opção de substituir qualquer opção de navegação para atender às necessidades de seus clientes. Uma grade editável em Angular com um ótimo esquema de navegação é fundamental para qualquer aplicativo moderno de linha de negócios, com a grade Ignite UI facilitamos.
Seguindo este tópico, você aprenderá mais sobre o modelo de célula e o modelo de edição e edição de célula.
Angular Grid Column Configuration
IgxColumnComponenté usado para definir a coleção dacolumns grade e para habilitar recursos por coluna, como ordenação e filtragem. Modelos de célula, cabeçalho e rodapé também estão disponíveis.
Defining Columns
Vamos desligar aautoGenerate propriedade e definir a coleção de colunas na marcação:
<igx-grid #grid1 [data]="data | async" [autoGenerate]="false" (columnInit)="initColumns($event)"
(selected)="selectCell($event)" [allowFiltering]="true">
<igx-column field="Name" [sortable]="true" header=" "></igx-column>
<igx-column field="AthleteNumber" [sortable]="true" header="Athlete number" [filterable]="false"></igx-column>
<igx-column field="TrackProgress" header="Track progress" [filterable]="false">
<ng-template igxCell let-value>
<igx-linear-bar [stripped]="false" [value]="value" [max]="100"></igx-linear-bar>
</ng-template>
</igx-column>
<igx-paginator [perPage]="6">
</igx-paginator>
</igx-grid>
Cada uma das colunas da grade pode ser moldada separadamente. A coluna esperang-template Angular diretivas de módulo de grade.
Também expõeadditionalTemplateContext entradas que podem ser usadas para propriedades personalizadas e qualquer tipo de contexto de dados que você queira passar para a própria coluna:
<igx-column [additionalTemplateContext]="contextObject">
<ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
{{ props.firstProperty }}
</ng-template>
</igx-column>
public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1'};
Modelo de cabeçalho
igxHeaderMira no cabeçalho da coluna que fornece como contexto o próprio objeto coluna.
...
<igx-column field="Name">
<ng-template igxHeader let-column>
{{ column.field | uppercase }}
</ng-template>
</igx-column>
...
Note
Sempre que um modelo de cabeçalho é usado junto com a funcionalidade de agrupamento/movimentação, a área do cabeçalho da coluna se torna arrastável e você não pode acessar a parte dos elementos personalizados do modelo de cabeçalho até marcá-los como não arrastáveis. Exemplo abaixo.
<igx-column #col field="ProductName" header="Product Name"
[groupable]="true" [hasSummary]="true">
<ng-template igxHeader let-col>
<div class="text">{{col.field}}</div>
<igx-icon (click)="toggleSummary(col)" [attr.draggable]="false">functions
</igx-icon>
</ng-template>
</igx-column>
Como você pode ver, estamos adicionando o atributo arrastável definido como false.
Template de Célula
igxCellAplica o template fornecido a todas as células da coluna. O objeto de contexto fornecido no template consiste no valor da célula fornecido implicitamente e no próprio objeto célula. Ele pode ser usado para definir um modelo onde as células podem crescer de acordo com seu conteúdo, como no exemplo abaixo.
...
<igx-column field="Name">
<ng-template igxCell let-value>
{{ value | titlecase }}
</ng-template>
</igx-column>
...
No trecho acima, "tomamos" uma referência ao valor da célula implicitamente fornecido. Isso é suficiente se você só quiser apresentar alguns dados e talvez aplicar algum estilo personalizado ou transformações de pipe sobre o valor da célula. No entanto, ainda mais útil é pegar aCellType instância em si, como mostrado abaixo:
<igx-grid #grid [data]="data">
<igx-column dataType="string" field="Name">
<ng-template igxCell let-cell="cell">
<!-- Implement row deleting inside the cell template itself -->
<span tabindex="0" (keydown.delete)="grid.deleteRow(cell.row.index)">{{ cell.value | titlecase }}</span>
</ng-template>
</igx-column>
<igx-column dataType="boolean" field="Subscribtion">
<ng-template igxCell let-cell="cell">
<!-- Bind the cell value through the ngModel directive and update the data source when the value is changed in the template -->
<input type="checkbox" [ngModel]="cell.value" (ngModelChange)="cell.update($event)" />
</ng-template>
</igx-column>
<igx-grid>
Ao alterar dados pelo modelo de célula,ngModel você precisa chamar os métodos de API apropriados para garantir que o valor seja atualizado corretamente na coleta de dados subjacente da Angular grade. No trecho acima, angModelChange chamada passa pela API de edição da grade e pelo pipeline de edição da grade, acionando corretamente as transações (se aplicável) e lidando com resumos, seleção, etc. No entanto, issongModelChange vai disparar toda vez que o valor da célula mudar, não apenas quando o usuário terminar de editar, resultando em muito mais chamadas de API.
Note
A grade expõe um tratamento padrão para número, string, data e tipos de colunas booleanas. Por exemplo, a coluna será exibidacheck ou umclose ícone, em vez de verdadeiro/falso por padrão, para o tipo de coluna booleana.
Se os dados em uma célula forem limitados e[(ngModel)] a mudança de valor não for tratada, o novo valor não será devidamente atualizado na fonte de dados subjacente da Angular grade. Ao lidar com edição de células com um template personalizado, é fortemente recomendado usar o template de edição de células da célula.
Quando implementado corretamente, o modelo de edição de células também garante que as célulaseditValue passarão corretamente pelo ciclo de eventos de edição em grade.
Cell Editing Template
A coluna também aceita um último modelo que será usado quando uma célula estiver em modo de edição. Assim como nos outros modelos de coluna, o objeto de contexto fornecido é novamente o valor da célula e o próprio objeto célula. Claro, para tornar o modelo de modo de edição acessível aos usuários finais, você precisa definir aeditable propriedade doIgxColumnComponent totrue.
<igx-column dataType="number" editable="true" field="Price">
<ng-template igxCellEditor let-cell="cell">
<label for="price">
Enter the new price tag
</label>
<input name="price" type="number" [(ngModel)]="cell.editValue" />
</ng-template>
</igx-column>
Certifique-se de verificar a APICellType para se acostumar com as propriedades fornecidas que você pode usar nos seus templates.
Column Template API
Cada um dos modelos de coluna pode ser alterado programaticamente a qualquer momento através doIgxColumnComponent próprio objeto. Por exemplo, no código abaixo, declaramos dois modelos para nossos dados de usuário. No nosso código TypeScript, obteremos referências aos próprios templates e, com base em alguma condição, renderizaremos o template apropriado para a coluna em nossa aplicação.
<igx-grid>
<!-- Column declarations -->
</igx-grid>
<ng-template #normalView let-value>
<div class="user-details">{{ val }}</div>
<user-details-component></user-details-component>
</ng-template>
<ng-template #smallView let-value>
<div class="user-details-small">{{ val }}</div>
</ng-template>
@ViewChild("normalView", { read: TemplateRef })
public normalView: TemplateRef<any>;
@ViewChild("smallView", { read: TemplateRef })
public smallView: TemplateRef<any>;
....
const column = this.grid.getColumnByName("User");
// Return the appropriate template based on some conditiion.
// For example saved user settings, viewport size, etc.
column.bodyTemplate = this.smallView;
As propriedades das colunas também podem ser definidas no código nocolumnInit evento emitido quando as colunas são inicializadas na grade.
public initColumns(column: IgxGridColumn) {
const column: IgxColumnComponent = column;
if (column.field === 'ProductName') {
column.sortable = true;
column.editable = true;
}
}
O código acima tornará a coluna ProductName classificável e editável e instanciará a interface do usuário dos recursos correspondentes (como entradas para edição etc.).
Custom Display Format
Todos os valores de uma data, número, moeda e coluna percentual são transformados através do AngularDatePipe eDecimalPipeCurrencyPipePercentPipe de acordo. Isso não modifica o valor original, apenas o valor exibido na coluna. Portanto, tenha em mente que todas as operações e manipulações de dados são feitas com base nos valores da sua fonte de dados. Por padrão, os valores serão exibidos de acordo com a gradelocale (se não especificado, ela retorna para a localização da aplicação, que é padrão para'en-US' ela).
Consulte Configurando a localidade do seu aplicativo para obter mais detalhes.
Além disso, há parâmetros opcionais para formatação:
format- determina quais partes de data/hora são exibidas, como padrão'mediumDate', equivalente a'MMM d, y'timezone- o desfasamento do fuso horário para datas. Por padrão, usa o fuso horário local do sistema do usuário finaldigitsInfo- objetos de representação decimal. Padrão para'1.0-3'
Para permitir a personalização do formato de exibição por esses parâmetros, apipeArgs entrada é exposta. Uma coluna respeitará apenas as propriedades correspondentes para seu tipo de dado, sepipeArgs for definido. Exemplo:
const pipeArgs: IColumnPipeArgs = {
format: 'longDate',
timezone: 'UTC',
digitsInfo: '1.1-2'
}
<igx-column field="OrderDate" dataType="date" [pipeArgs]="pipeArgs"></igx-column>
<igx-column field="UnitPrice" dataType="number" [pipeArgs]="pipeArgs"></igx-column>
AOrderDate coluna respeitará apenas asformat propriedades etimezone e respeitará.UnitPricedigitsInfo Para mais detalhes, por favor, consulte a documentação oficial Angular em Localização do seu app.
Todos os tipos de dados de coluna disponíveis podem ser encontrados no tópico oficial Tipos de coluna.
Angular Grid Data Structure
O IgxGridComponent lida com dados simples e POJOs aninhados (objetos Java antigos simples). A estrutura de dados específica para renderização está no formato:
const OBJECT_ARRAY = [{
ObjectKey1: value1,
ObjectKey2: value2,
.
.
.
ObjectKeyN: valueN
},
.
.
.
}];
const POJO = [{
ObjectKey1: value1,
ObjectKey2: value2,
.
.
.
ObjectKeyN: {
ObjectKeyN1: value1,
ObjectKeyN2: value2,
.
.
.
ObjectKeyNM: valueNM,
}
},
.
.
.
}];
Warning
Os valores-chave não devem conter arrays. Se você usar colunas autoGenerat, as chaves de dados devem ser idênticas.
Angular Grid Data Binding
Antes de prosseguir com a grade, queremos alterar a grade Angular para se vincular ao serviço de dados remoto, que é o cenário comum em aplicativos de grande escala. Uma boa prática é separar toda a lógica relacionada à busca de dados em um serviço de dados separado, portanto, vamos criar um serviço que lidará com a busca de dados do servidor.
Vamos implementar nosso serviço em um arquivo separado
// northwind.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map } from 'rxjs/operators';
Estamos importando oInjectable decorador, que é um ingrediente essencial em toda definição de serviço Angular. ElesHttpClient nos fornecerão a funcionalidade para nos comunicar com serviços de backend. Ele retorna umObservable de algum resultado ao qual iremos subscrever em nosso componente de grade.
Nota: Antes de Angular 5, eleHttpClient ficava em@angular/http e recebia seu nomeHttp.
Como receberemos uma resposta JSON contendo um array de registros, podemos muito bem nos ajudar especificando que tipo de dados esperamos que sejam retornados no observável, definindo uma interface com a forma correta. A verificação de tipos é sempre recomendada e pode te poupar dores de cabeça no futuro.
// northwind.service.ts
export interface NorthwindRecord {
ProductID: number;
ProductName: string;
SupplierID: number;
CategoryID: number;
QuantityPerUnit: string;
UnitPrice: number;
UnitsInStock: number;
UnitsOnOrder: number;
ReorderLevel: number;
Discontinued: boolean;
CategoryName: string;
}
O serviço em si é bem simples, consistindo em um método:fetchData que devolve umObservable<NorthwindRecord[]>. Nos casos em que a solicitação falha por qualquer motivo (servidor indisponível, erro de rede, etc.), oHttpClient erro retorna um erro. Vamos usar ocatchError operador que intercepta um Observável que falhou e passa o erro para um manipulador de erros. Nosso manipulador de erros registrará o erro e retornará um valor seguro.
// northwind.service.ts
@Injectable()
export class NorthwindService {
private url = 'http://services.odata.org/V4/Northwind/Northwind.svc/Alphabetical_list_of_products';
constructor(private http: HttpClient) {}
public fetchData(): Observable<NorthwindRecord[]> {
return this.http
.get(this.url)
.pipe(
map(response => response['value']),
catchError(
this.errorHandler('Error loading northwind data', [])
)
);
}
private errorHandler<T>(message: string, result: T) {
return (error: any): Observable<any> => {
console.error(`${message}: ${error.message}`);
return of(result as T);
};
}
}
Certifique-se de importar tanto oHttpClientModule serviço quanto o nosso no módulo de aplicação e registre-o como provedor.
// app.module.ts
import { HttpClientModule } from '@angular/common/http';
...
import { NorthwindService } from './northwind.service';
@NgModule({
imports: [
...
HttpClientModule
...
],
providers: [
NorthwindService
]
})
export class AppModule {}
Após implementar o serviço, vamos injetá-lo no construtor do nosso componente e usá-lo para recuperar os dados. OngOnInit gancho do ciclo de vida é um bom lugar para despachar a solicitação inicial.
Nota: No código abaixo, você pode se perguntar por que estamos configurando a propriedade de registros para um array vazio antes de assinar o serviço. A requisição Http é assíncrona e, até que seja concluída, a propriedade de registros ficará indefinida, o que resultará em erro quando a grade tentar se vincular a ela. Você deve inicializá-lo com um valor padrão ou usar umBehaviorSubject.
// my.component.ts
@Component({...})
export class MyComponent implements OnInit {
public records: NorthwindRecord[];
constructor(private northwindService: NorthwindService) {}
ngOnInit() {
this.records = [];
this.northwindService.fetchData().subscribe((records) => this.records = records);
}
}
e no modelo do componente:
<igx-grid [data]="records">
<igx-column field="ProductId"></igx-column>
<!-- rest of the column definitions -->
...
</igx-grid>
Nota: A propriedade de gradeautoGenerate é melhor evitar ao vincular dados remotos por enquanto. Ele assume que os dados estão disponíveis para inspecioná-los e gerar as colunas apropriadas. Isso geralmente não acontece até que o serviço remoto responda, e a grade gera um erro. DisponibilizarautoGenerate, quando vinculado ao serviço remoto, está no nosso roteiro para versões futuras.
Complex Data Binding
O IgxGridComponent suporta vinculação a objetos complexos (incluindo aninhamento a mais profundidade que um nível) por meio de um "caminho" de propriedades no registro de dados.
Dê uma olhada no seguinte modelo de dados:
interface AminoAcid {
name: string;
abbreviation: {
short: string;
long: string;
}
weight: {
molecular: number;
residue: number;
},
formula: {
molecular: string;
residue: string;
}
...
}
Por exemplo, para exibir os pesos de um determinado aminoácido na grade, o seguinte trecho será suficiente
<igx-column field="weight.molecular"></igx-column>
<igx-column field="weight.residue"></igx-column>
Consulte o exemplo abaixo para obter informações adicionais. Esse tipo de associação dá suporte a todas as funcionalidades padrão que você esperaria da grade. Ou seja, todas as operações de classificação e filtragem funcionam imediatamente, sem nenhuma configuração adicional. O mesmo vale para operações de agrupamento e edição com ou sem transações, bem como a capacidade de modelar as células da coluna vinculada.
Warning
As grades não suportam esse tipo de binding paraprimary key,foreign key echild key propriedades quando aplicável.
Uma forma alternativa de vincular dados complexos, ou visualizar dados compostos (de mais de uma coluna) no IgxGrid, é usar um modelo personalizado de corpo para a coluna. Geralmente, pode-se: - usar ovalue da célula que contém os dados aninhados - usar ocell objeto no template, a partir do qual acessar orow.data, portanto recuperar qualquer valor dele, oucell.row.data[field] seja, ecell.row.data[field][nestedField]
e interpolá-lo aqueles no modelo.
<igx-column field="abbreviation.long" header="Long">
<ng-template igxCell let-cell="cell">
<div>
<div>
{{ cell.value }}
{{ cell.row.data['name'] }}
{{ cell.row.data['weight']['molecular'] }}
</div>
</div>
</ng-template>
</igx-column>
Abaixo estão os dados que vamos usar:
export const EMPLOYEE_DATA = [
{
Age: 55,
Employees: [
{
Age: 43,
HireDate: new Date(2011, 6, 3),
ID: 3,
Name: "Michael Burke",
Title: "Senior Software Developer"
},
{
Age: 29,
HireDate: new Date(2009, 6, 19),
ID: 2,
Name: "Thomas Anderson",
Title: "Senior Software Developer"
},
{
Age: 31,
HireDate: new Date(2014, 8, 18),
ID: 11,
Name: "Monica Reyes",
Title: "Software Development Team Lead"
},
{
Age: 35,
HireDate: new Date(2015, 9, 17),
ID: 6,
Name: "Roland Mendel",
Title: "Senior Software Developer"
}],
HireDate: new Date(2008, 3, 20),
ID: 1,
Name: "John Winchester",
Title: "Development Manager"
},
...
O modelo personalizado para a coluna, que renderizará os dados aninhados:
...
<igx-column field="Employees" header="Employees" [cellClasses]="{ expand: true }" width="40%">
<ng-template #nestedDataTemp igxCell let-people let-cell="cell">
<div class="employees-container">
<igx-expansion-panel *ngFor="let person of people">
<igx-expansion-panel-header iconPosition="right">
<igx-expansion-panel-description>
{{ person.Name }}
</igx-expansion-panel-description>
</igx-expansion-panel-header>
<igx-expansion-panel-body>
<div class="description">
<igx-input-group (keydown)="stop($event)" style="--ig-size: var(--ig-size-small)">
<label igxLabel for="title">Title</label>
<input type="text" name="title" igxInput [(ngModel)]="person.Title" style="text-overflow: ellipsis;" />
</igx-input-group>
<igx-input-group (keydown)="stop($event)" style="--ig-size: var(--ig-size-small); width: 15%;">
<label igxLabel for="age">Age</label>
<input type="number" name="age" igxInput [(ngModel)]="person.Age" />
</igx-input-group>
</div>
</igx-expansion-panel-body>
</igx-expansion-panel>
</div>
</ng-template>
</igx-column>
...
E o resultado dessa configuração é:
Working with Flat data
A abordagem de vinculação de dados planos é semelhante à que já descrevemos acima, mas em vez do valor da célula, vamos usar adata propriedade IgxGridRow.
Como a grade de Angular é um componente para renderização, manipulação e preservação de registros de dados, ter acesso a cada registro de dados oferece a oportunidade de personalizar a abordagem de manuseamento deles. Odata imóvel oferece essa oportunidade.
Abaixo estão os dados que vamos usar:
export const DATA: any[] = [
{
Address: "Obere Str. 57",
City: "Berlin",
CompanyName: "Alfreds Futterkiste",
ContactName: "Maria Anders",
ContactTitle: "Sales Representative",
Country: "Germany",
Fax: "030-0076545",
ID: "ALFKI",
Phone: "030-0074321",
PostalCode: "12209",
Region: null
},
...
]
O modelo personalizado:
...
<igx-column field="Address" header="Address" width="25%" editable="true">
<ng-template #compositeTemp igxCell let-cell="cell">
<div class="address-container">
// In the Address column combine the Country, City and PostCode values of the corresponding data record
<span><strong>Country:</strong> {{cell.row.data.Country}}</span>
<br/>
<span><strong>City:</strong> {{cell.row.data.City}}</span>
<br/>
<span><strong>Postal Code:</strong> {{cell.row.data.PostalCode}}</span>
</div>
</ng-template>
</igx-column>
Lembre-se de que, com o modelo definido acima, você não poderá fazer operações de edição, portanto, precisamos de um modelo de editor.
<igx-column field="Address" header="Address" width="25%" editable="true">
<ng-template igxCellEditor let-cell="cell">
<div class="address-container">
<span>
<strong>Country:</strong> {{cell.row.data.Country}}
<igx-input-group width="100%">
<input igxInput [(ngModel)]="cell.row.data.Country" />
</igx-input-group>
</span>
<br/>
<span><strong>City:</strong> {{cell.row.data.City}}</span>
<igx-input-group width="100%">
<input igxInput [(ngModel)]="cell.row.data.City" />
</igx-input-group>
<br/>
<span><strong>Postal Code:</strong> {{cell.row.data.PostalCode}}</span>
<igx-input-group width="100%">
<input igxInput [(ngModel)]="cell.row.data.PostalCode" />
</igx-input-group>
</div>
</ng-template>
</igx-column>
...
E o resultado é:
Keyboard Navigation
A navegação por teclado do Grid fornece uma grande variedade de interações de teclado para o usuário. Melhora a acessibilidade e permite uma navegação intuitiva através de qualquer tipo de elementos internos (célula, linha, cabeçalho de coluna, barra de ferramentas, rodapé, etc.). Confira estes recursos para obter mais informações:
- Navegação do teclado em grade
- Navegação pelo teclado TreeGrid
- Navegação do teclado da grade hierárquica
- Postagem do blog- Melhorando a usabilidade, acessibilidade e conformidade com ARIA com navegação por teclado em grade
Persistência de estado
Alcançar um framework de persistência de estado é mais fácil do que nunca usando a nova diretiva embutidaIgxGridState.
Dimensionamento
Consulte o tópico Dimensionamento de grade.
Performance (Experimental)
OIgxGridComponent design permite que ele aproveite o recurso de Unificação de Eventos que Angular introduzido. Esse recurso permite melhorar o desempenho com aproximadamente em20% termos de interações e resposta. Esse recurso pode ser ativado no nível da aplicação simplesmente definindo asngZoneEventCoalescing propriedades engZoneRunCoalescing notruebootstrapModule método:
platformBrowserDynamic()
.bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true })
.catch(err => console.error(err));
Note
Isso ainda está em um recurso experimental para oIgxGridComponent. Isso significa que pode haver alguns comportamentos inesperados na Grade. Caso encontre esse tipo de comportamento, por favor, entre em contato conosco em nossa página no Github.
Note
Ativar isso pode afetar outras partes de uma Angular aplicação às quais nãoIgxGridComponent está relacionado.
Known Limitations
| Limitação | Descrição |
|---|---|
As larguras das colunas definidas empercentage epx |
Atualmente, não oferecemos suporte à mistura de larguras de coluna com% epx. |
Ao tentar filtrar uma coluna do tiponumber |
Se um valor diferente do inseridonumber na entradaNaN de filtragem for retornado devido a uma conversão incorreta. |
Grid width does not depend on the column widths |
Owidth de todas as colunas não determina a abrangência da grade em si. Ele é determinado pelas dimensões do contêiner pai ou pela grade definida.width |
| Grade aninhada no contêiner pai | Quando awidth grade não está definida e é colocada em um contêiner pai com dimensões definidas, a grade se estende até esse contêiner. |
Estratégia de Detecção de Mudança de GradeOnPush |
A grade opera comChangeDetectionStrategy.OnPush isso, sempre que alguma personalização aparecer, certifique-se de que a grade seja notificada sobre as alterações que acontecem. |
As colunas têm uma largura mínima permitida. Dependendo do valor da variável CSS [--ig-size], eles são os seguintes:"pequeno": 56px "médio": 64px "grande": 80px |
Se a largura for menor que o mínimo permitido for definida, isso não afetará os elementos renderizados. Eles serão renderizados com a largura mínima permitida para o [--ig-size]. Isso pode levar a um comportamento inesperado com a virtualização horizontal e, portanto, não é suportado. |
| A altura da linha não é afetada pela altura das células que não estão renderizadas no momento. | Devido à virtualização, uma coluna com um modelo personalizado (que altera a altura da célula) que não está no modo de exibição não afetará a altura da linha. A altura da linha será afetada somente enquanto a coluna relacionada for rolada na exibição. |
Note
igxGridusaigxForOf diretiva internamente, portanto todasigxForOf as limitações são válidas paraigxGrid. Para mais detalhes, veja a seção igxForOf Problemas Conhecidos.
API References
Theming Dependencies
- Tema IgxIcon
- Tema IgxInputGroup
- Tema IgxChip
- Tema IgxRipple
- Tema IgxButton
- Tema IgxOverlay
- Tema IgxDropDown
- Tema IgxCalendar
- Tema IgxSnackBar
- Tema IgxBadge
Tutorial video
Saiba mais sobre como criar uma grade de dados Angular em nosso breve vídeo tutorial:
Additional Resources
- Dimensionamento de grade
- Virtualização e desempenho
- Paginação
- Filtragem
- Classificação
- Resumos
- Movimentação de Colunas
- Fixação de coluna
- Redimensionamento de colunas
- Escolha
- Tipos de dados de coluna
- Crie operações CRUD com igxGrid
GitHub