Descripción general y configuración de la red de React

La tabla de datos Ignite UI for React / cuadrícula de datos es un componente de cuadrícula de React tabular que le permite vincular y mostrar rápidamente sus datos con poca codificación o configuración. Las características de la cuadrícula de datos React en nuestra caja de herramientas incluyen filtrado, clasificación, plantillas, selección de filas, agrupación de filas, fijación de filas y columnas móviles.

Las tablas React están optimizadas para datos de transmisión en vivo, con la capacidad de manejar un tamaño ilimitado de conjunto de datos en un número de filas o columnas.

React Data Grid Example

En este ejemplo de cuadrícula Ignite UI for React, puede ver cómo los usuarios pueden realizar filtrados básicos y de estilo Excel, clasificación de datos en vivo y usar resúmenes de cuadrícula, así como plantillas de celdas. La demostración también incluye un conjunto de paginación para mostrar 10 elementos por página.

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Getting Started with React Data Grid

Dependencies

Para comenzar con React Data Grid, primero debe instalar los igniteui-react paquetes and igniteui-react-grids.

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

También debe incluir la siguiente importación para usar la cuadrícula:

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

También se debe hacer referencia a los estilos correspondientes. Puede elegir la opción clara u oscura para uno de los temas y, según la configuración de su proyecto, importarlo:

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

Para obtener más detalles sobre cómo personalizar la apariencia de la cuadrícula, puede consultar la sección de estilo.

Component Modules

El DataGrid requiere los siguientes módulos:

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

Usage

Ahora que hemos importado los paquetes de cuadrícula, comencemos con la configuración básica y vinculemos a los datos locales:

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

La propiedad id es un valor de cadena y es el identificador único de la cuadrícula que se generará automáticamente si no se proporciona, mientras que data vinculan la cuadrícula, en este caso a los datos locales.

La propiedad autoGenerate le dice a la grilla que genere automáticamente los componentes IgrColumn de la grilla en función de los campos de la fuente de datos. También intentará deducir el tipo de datos apropiado para la columna, si es posible. De lo contrario, el desarrollador debe definir explícitamente las columnas y la asignación a los campos de la fuente de datos.

Editable React Grid

Cada operación de edición de cuadrícula incluye operaciones por lotes, lo que significa que la API le brinda la opción de agrupar ediciones en una sola llamada al servidor o puede realizar operaciones de edición/actualización de cuadrícula a medida que ocurren con las interacciones de cuadrícula. Junto con una excelente experiencia para desarrolladores como cuadrícula editable con operaciones CRUD, la cuadrícula incluye navegación con teclado similar a la de Excel. Se incluye la navegación de cuadrícula predeterminada común, además de la opción de anular cualquier opción de navegación para satisfacer las necesidades de sus clientes. Una cuadrícula editable con un excelente esquema de navegación es fundamental para cualquier aplicación de línea de negocios moderna, con la cuadrícula Ignite UI lo hacemos fácil.

Después de este tema, aprenderá más sobre la plantilla de celdas y la plantilla de edición de celdas y la edición.

Grid Column Configuration

IgrColumn se utiliza para definir la colección de columnas de la cuadrícula y para habilitar funciones por columna como ordenar y filtrar. También se encuentran disponibles plantillas de celdas, encabezados y pies de página.

Defining Columns

Desactivemos la propiedad autoGenerate y definamos la colección de columnas en el marcado:

<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>
tsx

Header Template

La plantilla de encabezado se puede configurar para modificar los encabezados de las columnas. Los fragmentos a continuación le muestran cómo formatear el texto del encabezado en mayú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>
tsx

Nota: Cada vez que se usa una plantilla de encabezado junto con la funcionalidad de agrupar/mover, el área del encabezado de la columna se puede arrastrar y no puede acceder a la parte de elementos personalizados de la plantilla de encabezado hasta que los marque como no arrastrables. Ejemplo a continuación.

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>
tsx

Como puede ver, estamos agregando el atributo Draggable establecido en falso.

Cell Template

Cuando se establece la plantilla de celda, cambia todas las celdas de la columna. El objeto de contexto proporcionado en la plantilla consiste en el valor de celda proporcionado implícitamente y el propio objeto de celda. Se puede usar para definir una plantilla en la que el texto de las celdas se podría formatear, por ejemplo, como título.

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

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

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

En el fragmento de código anterior, tomamos una referencia al valor de celda proporcionado implícitamente. Esto es suficiente si solo desea presentar algunos datos y tal vez aplicar algún estilo personalizado o transformaciones de barra vertical sobre el valor de la celda. Sin embargo, aún más útil es tomar la Cell instancia en sí, como se muestra a continuación:

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>
tsx

Nota: la cuadrícula expone un manejo predeterminado para los tipos de columna numérica, cadena, fecha y booleana. Por ejemplo, la columna mostrará el icono check o close, en lugar de verdadero/falso de forma predeterminada, para el tipo de columna booleana.

Cuando se implementa correctamente, la plantilla de edición de celdas también garantiza que el EditValue de la celda pase correctamente por el ciclo de eventos de edición de la cuadrícula.

Cell Editing Template

La columna también acepta una última plantilla que se utilizará cuando una celda esté en modo de edición. Al igual que con las otras plantillas de columnas, el objeto de contexto proporcionado es nuevamente el valor de la celda y el objeto de la celda en sí. Por supuesto, para que la plantilla del modo de edición sea accesible para los usuarios finales, debe establecer la propiedad editable de la columna en verdadero.

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>
tsx

Asegúrese de consultar la API para Cell familiarizarse con las propiedades proporcionadas que puede usar en sus plantillas.

Column Template API

Cada una de las plantillas de columna se puede cambiar mediante programación en cualquier momento a través del propio objeto IgrColumn. Por ejemplo, en el código siguiente, hemos declarado dos plantillas para nuestros datos de usuario. En nuestro código TypeScript obtendremos referencias a las plantillas mismas y luego, según alguna condición, representaremos la plantilla apropiada para la columna en nuestra aplicación.

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

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;
tsx

Las propiedades de columna también se pueden establecer en código en el evento ColumnInit que se emite cuando las columnas se inicializan en la cuadrícula.

function initColumns(grid: IgrGridBaseDirective, args: IgrColumnComponentEventArgs) {
    const column: IgrColumn = args.detail;
    if (column.field === 'ProductName') {
        column.sortable = true;
        column.editable = true;
    }
}
tsx

El código anterior hará que la columna ProductName se pueda ordenar y editar y creará una instancia de la interfaz de usuario de las funciones correspondientes (como entradas para editar, etc.).

Custom Display Format

Hay parámetros opcionales para formatear:

Format: determina qué partes de fecha/hora se muestran; el valor predeterminado es 'mediumDate', equivalente a 'MMM d, y'
Timezone: el desplazamiento de la zona horaria para las fechas. De forma predeterminada utiliza la zona horaria del sistema local del usuario final.
DigitsInfo: objetos de representación decimal. Predeterminado a 1.0-3

Para permitir personalizar el formato de visualización mediante estos parámetros, se expone la entrada pipeArgs. Una columna respetará solo las propiedades correspondientes para su tipo de datos, si se establece pipeArgs. Ejemplo:

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

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

La columna OrderDate solo respetará las propiedades Format y Timezone, mientras que UnitPrice solo respetará DigitsInfo.

Todos los tipos de datos de columna disponibles se pueden encontrar en el tema oficial Tipos de columna.

Grid Data Structure

IgrGrid maneja datos planos y POJO (objetos Java antiguos) anidados. La estructura de datos específica para la representación tiene la forma:

const OBJECT_ARRAY = [{
        ObjectKey1: value1,
        ObjectKey2: value2,
        // ...
        ObjectKeyN: valueN
    },
    // ...
  }];

const POJO = [{
        ObjectKey1: value1,
        ObjectKey2: value2,
        // ...
        ObjectKeyN: {
          ObjectKeyN1: value1,
          ObjectKeyN2: value2,
          // ...
          ObjectKeyNM: valueNM,
        }
    },
    // ...
  }];
typescript

ADVERTENCIA: Los valores clave no deben contener matrices.

Si utiliza columnas autoGenerate las claves de datos deben ser idénticas.

Grid Data Binding

Antes de continuar con la red, queremos cambiar la red para vincularla al servicio de datos remoto, que es el escenario común en aplicaciones a gran escala.

Puede hacer esto obteniendo los datos de una URL determinada, recibiendo una respuesta JSON y asignándolos a la propiedad de data de la cuadrícula que se utiliza como fuente de datos de la cuadrícula:

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

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

Nota: Por ahora, es mejor evitar la propiedad grid autoGenerate al vincular datos remotos. Se supone que los datos están disponibles para inspeccionarlos y generar las columnas apropiadas. Por lo general, este no es el caso hasta que el servicio remoto responde y la red arroja un error. Hacer que autoGenerate esté disponible, cuando se vincula al servicio remoto, está en nuestra hoja de ruta para versiones futuras.

Complex Data Binding

IgrGrid admite la vinculación a objetos complejos (incluido el anidamiento a más de un nivel) a través de una "ruta" de propiedades en el registro de datos.

Eche un vistazo al siguiente modelo de datos:

interface AminoAcid {
    name: string;
    abbreviation: {
        short: string;
        long: string;
    }
    weight: {
        molecular: number;
        residue: number;
    },
    formula: {
        molecular: string;
        residue: string;
    }
}
typescript

Por ejemplo, para mostrar los pesos de un aminoácido dado en la cuadrícula, bastará con el siguiente fragmento

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

Una forma alternativa de vincular datos complejos o visualizar datos compuestos (de más de una columna) en IgrGrid es utilizar una plantilla de cuerpo personalizada para la columna. Generalmente se puede:

use el value de la celda, que contiene los datos anidados

use el objeto cell en la plantilla, desde el cual acceder a ctx.dataContext.cell.id.rowIndex o ctx.dataContext.cell.id.rowID para obtener la fila a través de la API de la cuadrícula y recuperar cualquier valor de ella e interpolar aquellos en la plantilla.

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>
tsx

Aquí hay un ejemplo de cómo se usa la plantilla del cuerpo para mostrar datos complejos. A continuación se muestran los datos que vamos a utilizar:

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"
    }
]
typescript

La plantilla personalizada para la columna, que representará los datos anidados:

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>
tsx

Y el resultado de esta configuración es:

Working with Flat Data Overview

El enfoque de enlace de datos planos es similar al que ya describimos anteriormente, pero en lugar del valor de la celda usaremos la propiedad de data de IgrGridRow.

Dado que la cuadrícula React es un componente para renderizar, manipular y preservar registros de datos, tener acceso a cada registro de datos le brinda la oportunidad de personalizar el enfoque de su manejo. La data propiedad le brinda esta oportunidad.

A continuación se muestran los datos que vamos a utilizar:

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
    }
]
typescript

La plantilla personalizada:

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>
tsx

Tenga en cuenta que con la plantilla definida anteriormente no podrá realizar operaciones de edición, por lo que necesitamos una plantilla 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>
tsx

Working with Flat Data Example

El uso de fragmentos de código de la sección anterior dará como resultado el siguiente ejemplo de IgrGrid

La navegación con el teclado de IgrGrid proporciona una rica variedad de interacciones con el teclado para el usuario. Mejora la accesibilidad y permite la navegación intuitiva a través de cualquier tipo de elementos internos (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.).

Styling React Grid

Nota: la cuadrícula usa el diseño de cuadrícula css, que no es compatible con IE sin prefijo, por lo que no se representará correctamente.

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar el fondo del encabezado y el color del texto, primero debe configurar una clase para la cuadrícula:

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

Luego configure las propiedades CSS--header-background y--header-text-color para esa clase:

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

Known Limitations

Limitación	Descripción
Anchos de columna establecidos en`percentage` y`px`	Actualmente no admitimos la combinación de anchos de columna con`%` y`px`.
Al intentar filtrar una columna de tipo`number`	Si un valor diferente a`number` se ingresa en la entrada de filtrado,`NaN` se devuelve debido a una conversión incorrecta.
Red`width` no depende del ancho de las columnas	El`width` de todas las columnas no determina la extensión de la cuadrícula en sí. Está determinado por las dimensiones del contenedor principal o por las dimensiones de la cuadrícula definida.`width`.
Cuadrícula anidada en el contenedor principal	Cuando la cuadrícula`width` no está configurado y se coloca en un contenedor principal con dimensiones definidas, la cuadrícula se extiende hasta este contenedor.
Red`OnPush` Estrategia de detección de cambios	La red opera con`ChangeDetectionStrategy.OnPush` Entonces, cada vez que aparezca alguna personalización, asegúrese de que se notifique a la cuadrícula sobre los cambios que ocurren.
Las columnas tienen un ancho de columna mínimo permitido. Dependiendo de la`--ig-size` variable CSS, son los siguientes: "pequeño": 56px "medio": 64px "grande": 80px	Si se establece un ancho inferior al mínimo permitido, no afectará a los elementos renderizados. Se renderizarán con el ancho mínimo permitido para el correspondiente`--ig-size`. Esto puede provocar un comportamiento inesperado con la virtualización horizontal y, por lo tanto, no es compatible.
El alto de la fila no se ve afectado por el alto de las celdas que no se representan actualmente a la vista.	Debido a la virtualización, una columna con una plantilla personalizada (que cambia la altura de la celda) que no está en la vista no afectará la altura de la fila. La altura de la fila se verá afectada solo mientras la columna relacionada se desplaza en la vista.

API References

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.