React estilo condicional de cuadrícula
La función Ignite UI for React Conditional Styling en React Grid permite un estilo personalizado a nivel de fila o celda. La funcionalidad de estilo condicional IgrGrid
se utiliza para enfatizar o resaltar visualmente datos que cumplen con ciertos criterios, lo que facilita a los usuarios identificar información o tendencias importantes dentro de la cuadrícula.
Grid Conditional Row Styling
El componente IgrGrid
en Ignite UI for React proporciona dos formas de aplicar estilos condicionales a las filas según reglas personalizadas.
- By setting
rowClasses
input on theIgrGrid
component; - Al configurar la entrada
rowStyles
en el componenteIgrGrid
;
Más adelante en este tema los cubriremos ambos con más detalle.
Using Row Classes
Puede diseñar condicionalmente las filas IgrGrid
configurando la entrada rowClasses
y definiendo reglas personalizadas.
<IgrGrid id="grid" height="600px" width="100%" rowClasses={rowClasses}>
</IgrGrid>
La entrada rowClasses
acepta un objeto literal, que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano.
const rowClasses = {
activeRow: (row: IgrRowType) => row.index === 0
}
.activeRow {
border: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
Demo
Using Row Styles
El control IgrGrid
expone la propiedad rowStyles
que permite aplicar estilos condicionales a las filas de datos. Similar a rowClasses
acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar un peinado regular (sin condiciones).
The callback signature for both
rowStyles
androwClasses
is:
(row: IgrRowType) => boolean
Definamos nuestros estilos:
const rowStyles = {
'background': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
'border': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
'border-color': (row: IgrRowType) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
};
<IgrGrid id="grid" height="600px" width="100%" rowStyles={rowStyles}>
<IgrGrid>
Demo
Grid Conditional Cell Styling
Descripción general
El componente IgrGrid
en Ignite UI for React proporciona dos formas de aplicar estilos condicionales a las celdas según reglas personalizadas.
- Configurando las
cellClasses
de entradaIgrColumn
en un objeto literal que contiene pares clave-valor. La clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano. El resultado es una cómoda colocación del material en la celda.
Using Cell Classes
Puede diseñar condicionalmente las celdas IgrGrid
configurando la entrada IgrColumn
cellClasses
y definiendo reglas personalizadas.
<IgrColumn field="BeatsPerMinute" dataType="Number" cellClasses={beatsPerMinuteClasses}></IgrColumn>
La entrada cellClasses
acepta un objeto literal, que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano.
function upFontCondition(rowData: any, columnKey: any): boolean {
return rowData[columnKey] > 95;
}
function downFontCondition(rowData: any, columnKey: any): boolean {
return rowData[columnKey] <= 95;
}
const beatsPerMinuteClasses = {
downFont: downFontCondition,
upFont: upFontCondition
};
.upFont {
color: green !important;
}
.downFont {
color: red !important;
}
Demo
- Utilizando la entrada
IgrColumn
cellStyles
que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación.
La firma de devolución de llamada para
cellStyles
ycellClasses
ahora se cambia a:
(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
Using Cell Styles
Las columnas exponen la propiedad cellStyles
que permite aplicar estilos condicionales a las celdas de las columnas. Al igual que cellClasses
acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar el peinado habitual con facilidad (sin condiciones).
Definamos nuestros estilos:
const webGridCellStyles = {
background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
color: (rowData, columnKey, cellValue, rowIndex) => {
if (columnKey === "Position") {
switch (cellValue) {
case "up": return "#28a745";
case "down": return "#dc3545";
case "current": return "#17a2b8"
}
}
}
}
<IgrColumn cellStyles={webGridCellStyles}></IgrColumn>
Demo
Known issues and limitations
- Si hay celdas vinculadas a la misma condición (de diferentes columnas) y una celda se actualiza, las otras celdas no se actualizarán según el nuevo valor, si se cumple la condición.
let backgroundClasses = {
myBackground: (rowData: any, columnKey: string) => {
return rowData.Col2 < 10;
}
};
function editDone(grid, evt) {
backgroundClasses = {...backgroundClasses};
}
<IgrGrid id="grid1" height="500px" width="100%" onCellEdit={editDone}>
<IgrColumn id="Col1" field="Col1" dataType="number" cellClasses={backgroundClasses}></IgrColumn>
<IgrColumn id="Col2" field="Col2" dataType="number" editable="true" cellClasses={backgroundClasses}></IgrColumn>
<IgrColumn id="Col3" field="Col3" header="Col3" dataType="string" cellClasses={backgroundClasses}></IgrColumn>
</IgrGrid>
API References
Additional Resources
- Virtualización y rendimiento
- Edición
- Paginación
- Filtración
- Clasificación
- resúmenes
- Columna en movimiento
- Fijación de columnas
- Cambio de tamaño de columna
- Ocultación de columnas
- Selección
- buscando
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.