Descripción general de la cuadrícula de datos React

    La Ignite UI for React Data Table/Data Grid es un componente de cuadrícula tabular React 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 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 transmisión de datos en vivo, con la capacidad de manejar tamaños de conjuntos de datos ilimitados en un número de filas o columnas.

    React Data Grid Example

    Esta demostración implementa algunas de las funciones que están disponibles en la cuadrícula: filtrado, agrupación, fijar/desanclar columnas, reposicionar columnas, ordenar y resúmenes.

    Empezando

    Dependencies

    Al instalar el paquete React grid, también se debe instalar el paquete principal.

    npm install --save igniteui-react-core
npm install --save igniteui-react-grids
npm install --save igniteui-react-inputs

    Component Modules

    ​IgrGrid requiere los siguientes módulos:

    import { IgrDataGridModule } from 'igniteui-react-grids';
import { IgrDataGrid } from 'igniteui-react-grids';

IgrDataGridModule.register();

    Optional Modules

    Las funciones opcionales IgrGrid, vistas arriba, requieren los siguientes módulos:

    import { IgrGridColumnOptionsModule } from 'igniteui-react-grids';
import { IgrDataGridToolbarModule } from "igniteui-react-grids";
import { IgrSparklineModule } from 'igniteui-react-charts';

IgrGridColumnOptionsModule.register();
IgrDataGridToolbarModule.register();
IgrSparklineModule.register();

    Sample Data Source

    Ahora que se importa el módulo de cuadrícula de datos React, lo siguiente es la configuración básica de la cuadrícula React que se vincula a los datos locales.

        this.data = [{
        Discontinued: false,
        OrderDate: new Date("2012-02-12"),
        ProductID: 1,
        ProductName: "Chai",
        QuantityPerUnit: "10 boxes x 20 bags",
        ReorderLevel: 10,
        UnitPrice: 18.0000,
        UnitsInStock: 39
    }, {
        Discontinued: false,
        OrderDate: new Date("2003-03-17"),
        ProductID: 2,
        ProductName: "Chang",
        QuantityPerUnit: "24 - 12 oz bottles",
        ReorderLevel: 25,
        UnitPrice: 19.0000,
        UnitsInStock: 17
    }, {
        Discontinued: false,
        OrderDate: new Date("2006-03-17"),
        ProductID: 3,
        ProductName: "Aniseed Syrup",
        QuantityPerUnit: "12 - 550 ml bottles",
        ReorderLevel: 25,
        UnitPrice: 10.0000,
        UnitsInStock: 13
    }, {
        Discontinued: false,
        OrderDate: new Date("2016-03-17"),
        ProductID: 4,
        ProductName: "Chef Antony Cajun Seasoning",
        QuantityPerUnit: "48 - 6 oz jars",
        ReorderLevel: 0,
        UnitPrice: 22.0000,
        UnitsInStock: 53
    }, {
        Discontinued: true,
        OrderDate: new Date("2011-11-11"),
        ProductID: 5,
        ProductName: "Chef Antony Gumbo Mix",
        QuantityPerUnit: "36 boxes",
        ReorderLevel: 0,
        UnitPrice: 21.3500,
        UnitsInStock: 0
    }];

    Auto-Generate Columns

    El siguiente código demuestra cómo vincular la cuadrícula de datos React a los datos locales anteriores.

    <IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    autoGenerateColumns="true"
    defaultColumnMinWidth="100"
    summaryScope="Root"
    isColumnOptionsEnabled="true"
    isGroupCollapsable="true"
    groupSummaryDisplayMode="RowBottom"
    columnMovingMode="Deferred"
    columnMovingAnimationMode="SlideOver"
    columnMovingSeparatorWidth="2"
    columnShowingAnimationMode="slideFromRightAndFadeIn"
    columnHidingAnimationMode="slideToRightAndFadeOut"
    selectionMode="SingleRow"
    cornerRadiusTopLeft="0"
    cornerRadiusTopRight="0"
    />

    Manually Define Columns

    <IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    autoGenerateColumns="false">
    <IgrNumericColumn field="ProductID" headerText="Product ID"/>
    <IgrTextColumn field="ProductName" headerText="Product Name"/>
    <IgrTextColumn field="QuantityPerUnit" headerText="Quantity Per Unit"/>
    <IgrNumericColumn field="UnitsInStock" headerText="Units In Stock"/>
    <IgrDateTimeColumn field="OrderDate" headerText="Order Date"/>
</IgrDataGrid>

    Styling Columns

    El siguiente código demuestra cómo aplicar estilo a columnas específicas utilizando las propiedades de la columna proporcionada.

    <IgrTextColumn
    background="SkyBlue"
    textStyle="Italic Bold 16pt Times New Roman"
/>

    Additional Resources

    API References