Visão geral e configuração do React Grid

A Tabela de Dados/Grade de Dados Ignite UI for React é um componente de grade de React tabular que permite vincular e exibir rapidamente seus dados com pouca codificação ou configuração. Os recursos da grade de dados React em nossa caixa de ferramentas incluem filtragem, classificação, modelos, seleção de linhas, agrupamento de linhas, fixação de linhas e colunas móveis.

As tabelas React são otimizadas para dados de transmissão ao vivo, com a capacidade de lidar com tamanho de conjunto de dados ilimitado em várias linhas ou colunas.

React Data Grid Example

Neste exemplo de Ignite UI for React Grid, você pode ver como os usuários podem fazer filtragem básica e no estilo do Excel, classificação de dados em tempo real e usar resumos de grade, bem como modelos de célula. A demonstração também inclui um conjunto de paginação para exibir 10 itens por página.

Getting Started with React Data Grid

Dependencies

Para começar a usar o React Data Grid, primeiro você precisa instalar os igniteui-react pacotes and igniteui-react-grids.

npm install --save igniteui-react
npm install --save igniteui-react-grids

Você também precisa incluir a seguinte importação para usar a grade:

import "igniteui-react-grids/grids/combined.js";

Os estilos correspondentes também devem ser referenciados. Você pode escolher a opção clara ou escura para um dos temas e, com base na configuração do seu projeto, importá-lo:

import 'igniteui-react-grids/grids/themes/light/bootstrap.css'

Para obter mais detalhes sobre como personalizar a aparência da grade, você pode dar uma olhada na seção de estilo.

Component Modules

O DataGrid requer os seguintes módulos:

import { IgrGridModule } from "igniteui-react-grids";
IgrGridModule.register();

Usage

Agora que temos os pacotes de grade importados, vamos começar com a configuração básica e vincular aos dados locais:

<IgrGrid id="grid1" data={localData} autoGenerate="true"></IgrGrid>

A id propriedade é um valor de string e é o identificador exclusivo da grade que será gerado automaticamente se não for fornecido, enquanto data vincula a grade, neste caso, aos dados locais.

A autoGenerate propriedade informa à grade para gerar automaticamente os componentes da IgrColumn grade com base nos campos da fonte de dados. Ele também tentará deduzir o tipo de dados apropriado para a coluna, se possível. Caso contrário, o desenvolvedor precisará definir explicitamente as colunas e o mapeamento para os campos da fonte de dados.

Editable React Grid

Cada operação para edição de grade 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 de desenvolvedor como uma grade editável com operações CRUD, a grade 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 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.

Grid Column Configuration

IgrColumn é usado para definir a coleção de colunas da grade e para 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:

<IgrGrid id="grid1" autoGenerate="false" allowFiltering="true" data={localData}>
    <IgrColumn field="Name" sortable="true"></igc-column>
    <IgrColumn field="AthleteNumber" sortable="true" header="Athlete number" filterable="false"></IgrColumn>
    <IgrColumn id="trackProgress" field="TrackProgress" header="Track progress" filterable="false"></IgrColumn>
</IgrGrid>

Header Template

O modelo de cabeçalho pode ser definido para modificar os cabeçalhos de coluna. Os snippets abaixo mostram como formatar o texto do cabeçalho em maiúsculas.

function nameHeaderTemplate(ctx: IgrColumnTemplateContext) {
    return (
    <>
     {formatUppercase(ctx.dataContext.column.field)}
    </>
    );
}

function formatUppercase(value: string) {
    return value.toUpperCase();
}

<IgrGrid id="name" field="Name" headerTemplate={nameHeaderTemplate}></IgrGrid>

Observação: 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 de elementos personalizados do modelo de cabeçalho até marcá-los como não arrastáveis. Exemplo abaixo.

function productNameHeaderTemplate(ctx: IgrColumnTemplateContext) {
    return (
        <>
            <div class="text">${ctx.dataContext.column.field}</div>
            <IgrIcon onClick={() => toggleSummary(ctx.dataContext.column)} name="functions" draggable="false"></IgrIcon>
        </>
    );
}

<IgrColumn id="productName" field="ProductName" header="Product Name" groupable="true" hasSummary="true" headerTemplate={productNameHeaderTemplate}></IgrColumn>

Como você pode ver, estamos adicionando Draggable o atributo definido como false.

Cell Template

Quando o modelo de célula é definido, ele altera 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 o texto das células pode ser formatado, por exemplo, como maiúsculas e minúsculas.

function formatTitleCase(value: string) {
    return value.toUpperCase();
}

function nameCellTemplate(ctx: IgrCellTemplateContext) {
  return (
  <>
   {formatTitleCase(ctx.dataContext.implicit)}
  </>
  );
}

<IgrColumn id="name" field="Name" bodyTemplate={nameCellTemplate}></IgrColumn>

No trecho acima, fazemos 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 Cell própria instância, conforme mostrado abaixo:

function nameCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <span tabindex="0" keydown={() => deleteRow(ctx.dataContext.cell.id.rowIndex)}>
            {formatTitleCase(ctx.dataContext.cell.value)}
            </span>
        </>
    );
}

function subscriptionCellTemplate(ctx: IgrCellTemplateContext) {
    if (ctx.dataContext.cell.value) {
            return (
                <>
                 <input type="checkbox" checked />
                </>
            );
    } else {
            return (
                <>
                 <input type="checkbox"/>
                </>
            );
    }
}

function deleteRow(rowIndex: number) {
    grid.deleteRow(rowIndex);
}

function formatTitleCase(value: string) {
    return value.toUpperCase();
}

<IgrGrid id="grid" autoGenerate="false" data={data}>
    <IgrColumn id="name" field="Name" dataType="string" bodyTemplate={nameCellTemplate}></IgrColumn>
    <IgrColumn id="subscription" field="Subscription" dataType="boolean" bodyTemplate={subscriptionCellTemplate}></IgrColumn>
</IgrGrid>

Observação: 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.

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 da coluna como true.

function priceCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <label>
                Enter the new price tag
            </label>
            <input name="price" type="number" value={ctx.dataContext.cell.value} 
                change={() => this.updateValue(ctx.dataContext.cell.value)}/>
        </>
    );
}

function updateValue(value: number) {
}

<IgrColumn id="price" field="Price" dataType="number" editable="true" inlineEditorTemplate={priceCellTemplate}></IgrColumn>

Certifique-se de verificar a API para Cell 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 IgrColumn 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.

<IgrGrid>
    {/* Column declarations */}
</IgrGrid>

function normalViewTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div class="user-details">{ ctx.dataContext.cell.value }</div>
            <UserDetailsComponent></UserDetailsComponent>
        </>
    );
}

function smallViewTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div class="user-details-small">{ ctx.dataContext.cell.value }</div>
        </>
    );
}

const column = grid.getColumnByName("User");
// Return the appropriate template based on some condition.
// For example saved user settings, viewport size, etc.
column.bodyTemplate = smallViewTemplate;

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.

function initColumns(grid: IgrGridBaseDirective, args: IgrColumnComponentEventArgs) {
    const column: IgrColumn = args.detail;
    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

Há parâmetros opcionais para formatação:

Format- determina quais partes de data/hora são exibidas, o padrão é 'mediumDate' equivalente 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 final
DigitsInfo- 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, a pipeArgs entrada é exposta. Uma coluna respeitará apenas as propriedades correspondentes para seu tipo de dados, se pipeArgs estiver definido. Exemplo:

const columnPipeArgs = {
    format: "longDate",
    timezone: "UTC",
    digitsInfo: "1.2-2"
};

<IgrColumn field="OrderDate" dataType="date" pipeArgs={columnPipeArgs}></IgrColumn>

A OrderDate coluna respeitará apenas as Format propriedades e Timezone, enquanto a UnitPrice respeitará apenas as propriedades . DigitsInfo

Todos os tipos de dados de coluna disponíveis podem ser encontrados no tópico oficial Tipos de coluna.

Grid Data Structure

O IgrGrid lida com dados simples e POJO 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,
        }
    },
    // ...
  }];

AVISO: Os valores de chave não devem conter matrizes.

Se você usar autoGenerate colunas, as chaves de dados deverão ser idênticas.

Grid Data Binding

Antes de prosseguir com a grade, queremos alterar a grade para se vincular ao serviço de dados remoto, que é o cenário comum em aplicativos de grande escala.

Você pode fazer isso buscando os dados de um determinado url, recebendo uma resposta JSON e atribuindo-os à propriedade da data grade que é usada como fonte de dados da grade:

<IgrGrid ref={gridRef}></IgrGrid>

function fetchData(url: string): void {
    fetch(url)
      .then(response => response.json())
      .then(data => onDataLoaded(data));
}
function onDataLoaded(jsonData: any[]) {
    gridRef.current.data = jsonData;
  }

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 IgrGrid suporta a 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

<IgrColumn field="weight.molecular"></IgrColumn>
<IgrColumn field="weight.residue"></IgrColumn>

Uma maneira alternativa de associar dados complexos ou visualizar dados compostos (de mais de uma coluna) no IgrGrid é usar um modelo de corpo personalizado para a coluna. Geralmente, pode-se:

use o value da célula, que contém os dados aninhados

use o cell objeto no modelo, a partir do qual acessar o ctx.dataContext.cell.id.rowIndex ou ctx.dataContext.cell.id.rowID para obter a linha por meio da API da grade e recuperar qualquer valor dele e interpolá-los no modelo.

function getName(rowIndex: number) {
    return grid.getRowByIndex(rowIndex).data["Name"];
}
function getWeight(rowIndex: number) {
    return grid.getRowByIndex(rowIndex).data["weight"]["molecular"];
}

function abbreviationLongCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div>
            <div>
                { ctx.dataContext.cell.value }
                    {getName(ctx.dataContext.cell.id.rowIndex)} 
                    {getWeight(ctx.dataContext.cell.id.rowIndex)}
            </div>
        </div>
        </>
    )
}

<IgrColumn id="abbreviationLong" field="abbreviation.long" bodyTemplate={abbreviationLongCellTemplate}></IgrColumn>

Aqui está um exemplo de como o modelo de corpo é usado para exibir dados complexos. 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:

function addressCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <IgrExpansionPanel>
                <div slot="title" style={{font-size: '1.1em'; font-weight: 'bold'; margin-top: '1rem'; margin-bottom: '0.25rem'}}>
                {ctx.dataContext.cell.value[0].Name}
                </div>
                <div className="description">
                    <div style={{display: 'flex'; align-items: 'center'}}>
                        <div for="title" style={{width: '2rem'; margin: '0rem'}}>Title</div>
                        <input id='Title' type="text" name="title" value="${ctx.dataContext.cell.value[0].Title}" style={{text-overflow: 'ellipsis'}} />
                    </div>
                    <div style={{display: 'flex'; align-items: 'center'}}>
                        <div for="age" style={{width: '2rem'; margin: '0rem'}}>Age</div>
                        <input id='Age' type="text" name="title" value="${ctx.dataContext.cell.value[0].Age}" style={{text-overflow: 'ellipsis'}} />
                    </div>
                </div>
            </IgrExpansionPanel>
        </>
    )
}

<IgrColumn field="Employees" header="Employees" width="40%" bodyTemplate={addressCellTemplate}></IgrColumn>

E o resultado dessa configuração é:

Working with Flat Data Overview

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 IgrGridRow.

Como a grade React é 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:

function getCountry(rowIndex: number) {
    return grid.getRowByIndex(rowIndex).data["Country"];
}

function getCity(rowIndex: number) {
     return grid.getRowByIndex(rowIndex).data["City"];
}

function getPostalCode(rowIndex: number) {
     return grid.getRowByIndex(rowIndex).data["PostalCode"];
}

function addressCellTemplate(ctx: IgrCellTemplateContext) {
    return (
        <>
            <div className="address-container">
            // In the Address column combine the Country, City and PostCode values of the corresponding data record
                <span><strong>Country:</strong> {getCountry(ctx.dataContext.cell.id.rowIndex)}</span>
                <br/>
                <span><strong>City:</strong> {getCity(ctx.dataContext.cell.id.rowIndex)}</span>
                <br/>
                <span><strong>Postal Code:</strong> {getPostalCode(ctx.dataContext.cell.id.rowIndex)}</span>
            </div>
        </>
    );
}

<IgrColumn field="Address" header="Address" width="25%" editable="true" bodyTemplate={addressCellTemplate}></IgrColumn>

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.

function webGridCompositeAddressEditCellTemplate(ctx: IgrCellTemplateContext) {
    var cell = ctx.dataContext.cell as any;
    if (cell === undefined || cell.row === undefined || cell.row.data === undefined) {
        return (<></>)
    }

    function keyUpHandler(event: any, ctx: IgrCellTemplateContext) {
        var cell = ctx.dataContext.cell as any;
        if (cell !== undefined && cell.row !== undefined && cell.row.data !== undefined) {
            cell.row.data[event.target.id] = event.target.value;
        }
    }

    return (
        <>
            <div className="address-container--edit" style={{display: 'inline-grid'}}>
            <div>
                <span><strong>Country:</strong></span>
                <input id='Country' keyup={(e: any) => keyUpHandler(e, ctx)} value={cell.dataContext.row.data.Country}></input>
                <br>
                <span><strong>City:</strong></span>
                <input id='City' keyup={(e: any) => keyUpHandler(e, ctx)} value={cell.dataContext.row.data.City}></input>
            </div>
            <div>
                <span><strong>Postal Code:</strong></span>
                <input id='PostalCode' keyup={(e: any) => keyUpHandler(e, ctx)} value={cell.dataContext.row.data.PostalCode}></input>
                <br>
                <span><strong>Selected:</strong></span>
                <input id='Phone' keyup={(e: any) => keyUpHandler(e, ctx)} value={cell.dataContext.row.data.Phone}></input>
            </div>
            <br>
        </div>
        </>
    );
}

<IgrColumn field="Address" dataType="number" width="25%" editable="true" inlineEditorTemplate={webGridCompositeAddressEditCellTemplate}></IgrColumn>

Working with Flat Data Example

O uso de trechos de código da seção anterior resultará no seguinte exemplo de IgrGrid

A navegação pelo IgrGrid teclado fornece uma rica 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.).

Styling React Grid

Nota: A grade usa o layout de grade css, que não é suportado no IE sem prefixação, conseqüentemente não será renderizado corretamente.

Além dos temas predefinidos, a grade pode ser personalizada ainda mais definindo algumas das propriedades CSS disponíveis. Caso você queira alterar o plano de fundo do cabeçalho e a cor do texto, você precisa definir uma classe para a grade primeiro:

<IgrGrid className="grid"></IgrGrid>

Em seguida, defina as--header-background propriedades e--header-text-color CSS para essa classe:

.grid {
    --header-background: #494949;
    --header-text-color: #FFF;
}

Known Limitations

Limitação	Descrição
As larguras das colunas definidas em`percentage` e`px`	Atualmente, não oferecemos suporte à mistura de larguras de coluna com`%` e`px`.
Ao tentar filtrar uma coluna do tipo`number`	Se um valor diferente do inserido`number` na entrada`NaN` de filtragem for retornado devido a uma conversão incorreta.
A grade`width` não depende das larguras das colunas	O`width` 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 a`width` 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 Grade`OnPush`	A grade opera com`ChangeDetectionStrategy.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 da`--ig-size` variável CSS, 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 correspondente`--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.

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.