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 o HammerModule opcionalmente. Ele pode ser importado no módulo raiz do aplicativo para que as interações de toque funcionem conforme o 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 o IgxGridModule em 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 {}
Como alternativa, a partir de 16.0.0 você pode importar o IgxGridComponent como uma dependência autônoma ou usar o IGX_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ê tem o módulo ou as diretivas Ignite UI for Angular Grid importados, pode começar a usar o igx-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.
A autoGenerate propriedade informa igx-grid ao para gerar automaticamente as IgxColumnComponentgrades com base nos campos da fonte de dados. Ele também tentará deduzir o tipo de dados apropriado para a coluna, se possível. Os desenvolvedores também podem definir explicitamente as colunas e o mapeamento para os campos da 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
O IgxGridComponent usa layout de grade css, que não é suportado no IE sem prefixo, conseqüentemente não será renderizado corretamente.
Em Angular a maioria dos estilos são prefixados implicitamente graças ao plugin Autoprefixer.
Para prefixar layouts de grade no entanto, você precisa habilitar o Prefixador automático Propriedade Grid com o comentário /* autoprefixer grid:on */.
Para facilitar seu trabalho, aplique o comentário no src/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 da columns grade e habilitar recursos por coluna, como classificação e filtragem. Modelos de célula, cabeçalho e rodapé também estão disponíveis.
Defining Columns
Vamos desativar a autoGenerate 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 modelada separadamente. A coluna espera Angular diretivas ng-template do módulo de grade.
Ele também expõe additionalTemplateContext a entrada que pode ser usada para propriedades personalizadas e qualquer tipo de contexto de dados que você deseja 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'};
Header Template
igxHeader Direciona o cabeçalho da coluna fornecendo como contexto o próprio objeto de 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.
Cell Template
igxCell aplica o modelo fornecido a todas as células da coluna. O objeto de contexto fornecido no modelo consiste no valor da célula fornecido implicitamente e no próprio objeto de 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, "pegamos" uma referência ao valor da célula fornecido implicitamente. Isso é suficiente se você quiser apenas 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 a CellType própria instância, conforme 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 por meio do modelo de célula usando ngModel, você precisa chamar os métodos de API apropriados para garantir que o valor seja atualizado corretamente na coleta de dados subjacente da grade de Angular. No trecho acima, a ngModelChange chamada passa pela API de edição da grade e passa pelo pipeline de edição da grade, acionando corretamente as transações (se aplicável) e o tratamento de resumos, seleção, etc. No entanto, isso ngModelChange será acionado sempre que o valor da célula for alterado, 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 os tipos de coluna numérica, de cadeia de caracteres, de data e booleana. Por exemplo, a coluna exibirá check um close ícone, em vez de verdadeiro/falso por padrão, para o tipo de coluna booleana.
Se os dados em uma célula estiverem vinculados [(ngModel)] e a alteração de valor não for tratada, o novo valor não será atualizado corretamente na fonte de dados subjacente da grade Angular. Ao lidar com a edição de células com um modelo personalizado, é altamente recomendável usar o modelo de edição de células da célula.
Quando implementado corretamente, o modelo de edição de célula também garante que a célula passe corretamente pelo ciclo de editValue eventos de edição de grade.
Cell Editing Template
A coluna também aceita um último modelo que será usado quando uma célula estiver no modo de edição. Assim como acontece com os outros modelos de coluna, o objeto de contexto fornecido é novamente o valor da célula e o próprio objeto de célula. É claro que, para tornar o modelo de modo de edição acessível aos usuários finais, você precisa definir a editable propriedade do IgxColumnComponent método to true.
<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 API para CellType se acostumar com as propriedades fornecidas que você pode usar em seus modelos.
Column Template API
Cada um dos modelos de coluna pode ser alterado programaticamente em qualquer ponto por meio do IgxColumnComponent próprio objeto. Por exemplo, no código abaixo, declaramos dois modelos para nossos dados de usuário. Em nosso código TypeScript, obteremos referências aos próprios modelos e, com base em alguma condição, renderizaremos o modelo apropriado para a coluna em nosso aplicativo.
<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 da coluna também podem ser definidas no código no columnInit evento que é 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 coluna de data, numérica, moeda e porcentagem são transformados por meio do Angular DatePipe, DecimalPipe, CurrencyPipe e PercentPipe de acordo. Isso não modifica o valor original, apenas o valor exibido na coluna. Portanto, lembre-se de que todas as operações e manipulações de dados são feitas com base nos valores em sua fonte de dados. Por padrão, os valores serão exibidos de acordo com a grade locale (se não for especificado, ele retornará à localidade do aplicativo, que é padronizada para 'en-US').
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, o padrão é equivalente'mediumDate'a'MMM d, y'timezone- a diferença de fuso horário para datas. Por padrão, usa o fuso horário do sistema local do usuário finaldigitsInfo- objetos de representação decimal. O padrão é'1.0-3'
Para permitir a personalização do formato de exibição por esses parâmetros, a pipeArgs entrada é exposta. Uma coluna respeitará apenas as propriedades correspondentes para seu tipo de dados, se pipeArgs estiver 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>
A OrderDate coluna respeitará apenas as format propriedades e timezone, enquanto a UnitPrice respeitará apenas as propriedades . digitsInfo Para obter mais detalhes, consulte a documentação oficial do Angular em Localizando seu aplicativo.
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 de chave não devem conter matrizes.
Se você usar colunas autoGet, as chaves de dados deverão 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 o Injectable decorador, que é um ingrediente essencial em todas as definições de serviço Angular. O HttpClient nos fornecerá a funcionalidade de comunicação com os serviços de back-end. Ele retorna um Observable de algum resultado ao qual nos inscreveremos em nosso componente de grade.
Nota: Antes de 5 de Angular, o HttpClient estava localizado e @angular/http foi nomeado Http.
Como receberemos uma resposta JSON contendo uma matriz de registros, também podemos 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 tipo é sempre recomendada e pode evitar algumas 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 é bastante simples, consistindo em um método: fetchData que retornará um Observable<NorthwindRecord[]>. Nos casos em que a solicitação falhar por qualquer motivo (servidor indisponível, erro de rede, etc.), o retornará HttpClient um erro. Aproveitaremos o catchError operador que intercepta um Observable 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 o e nosso HttpClientModule serviço no módulo de aplicativo e registrar o serviço como um provedor.
// app.module.ts
import { HttpClientModule } from '@angular/common/http';
...
import { NorthwindService } from './northwind.service';
@NgModule({
imports: [
...
HttpClientModule
...
],
providers: [
NorthwindService
]
})
export class AppModule {}
Depois de implementar o serviço, vamos injetá-lo no construtor do nosso componente e usá-lo para recuperar os dados. O ngOnInit gancho do ciclo de vida é um bom lugar para enviar a solicitação inicial.
Observação: no código abaixo, você pode se perguntar por que estamos definindo a propriedade records como uma matriz vazia antes de assinar o serviço. A solicitação Http é assíncrona e, até que seja concluída, a propriedade records será indefinida, o que resultará em um erro quando a grade tentar se associar a ela. Você deve inicializá-lo com um valor padrão ou usar a BehaviorSubject.
// 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>
Observação: é melhor evitar a propriedade grid autoGenerate ao vincular a dados remotos por enquanto. Ele pressupõe que os dados estejam disponíveis para inspecioná-los e gerar as colunas apropriadas. Geralmente, esse não é o caso até que o serviço remoto responda e a grade gere um erro. A disponibilização autoGenerate, ao vincular ao serviço remoto, está em nosso roteiro para versões futuras.
Complex Data Binding
O IgxGridComponent dá suporte à associação a objetos complexos (incluindo aninhamento mais profundo do 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 dão suporte a esse tipo de associação para propriedades foreign key e primary key child key quando aplicável.
Uma maneira alternativa de associar dados complexos ou visualizar dados compostos (de mais de uma coluna) no IgxGrid é usar um modelo de corpo personalizado para a coluna. Geralmente, pode-se: - usar o value da célula, que contém os dados aninhados - usar o cell objeto no modelo, a partir do qual acessar o row.data, portanto, recuperar qualquer valor dele, ou seja cell.row.data[field], e cell.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 simples é semelhante à que já descrevemos acima, mas em vez do valor da célula, usaremos a data propriedade do IgxGridRow.
Como a grade Angular é um componente para renderizar, manipular e preservar registros de dados, ter acesso a todos os registros de dados oferece a oportunidade de personalizar a abordagem de manipulá-los. A data propriedade oferece-lhe esta 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 uma estrutura de persistência de estado é mais fácil do que nunca usando a nova diretiva interna IgxGridState.
Dimensionamento
Consulte o tópico Dimensionamento de grade.
Performance (Experimental)
O design do permite IgxGridComponent que ele aproveite o recurso Event Coalescing que Angular introduzido. Esse recurso permite um desempenho aprimorado em termos de 20% interações e capacidade de resposta. Esse recurso pode ser habilitado no nível do aplicativo simplesmente definindo as ngZoneEventCoalescing propriedades and ngZoneRunCoalescing como true no bootstrapModule método:
platformBrowserDynamic()
.bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true })
.catch(err => console.error(err));
Note
Isso ainda está em recurso experimental para o IgxGridComponent. Isso significa que pode haver alguns comportamentos inesperados na Grade. Em caso de encontrar tal comportamento, entre em contato conosco em nossa página do Github.
Note
Ativá-lo pode afetar outras partes de um aplicativo Angular ao qual o IgxGridComponent não 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
igxGrid usa igxForOf diretiva internamente, portanto, todas as igxForOf limitações são válidas para igxGrid. Para obter mais detalhes, consulte 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