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
- Cumplimiento de Accesibilidad
- Activación celular
- Edición de cuadrícula
- Selección de celda
- Animación de columna
- Selector de columnas
- Filtrado de columnas
- Columna en movimiento
- Opciones de columna
- Cambio de tamaño de columna
- Clasificación de columnas
- Tipos de columna
- Actuación
- Fijación de filas
- Agrupación de filas
- Resaltado de filas