React el cambio de tamaño de la columna de la cuadrícula
La Ignite UI for React Data Grid admite la capacidad de cambiar el tamaño de las columnas, lo que le brinda flexibilidad sobre cómo desea mostrar sus columnas con respecto al ancho de cada una.
React Grid Column Resizing Example
El cambio de tamaño de columna en la Ignite UI for React DataGrid está activado de forma predeterminada y se puede controlar mediante la propiedad columnResizingMode de la cuadrícula. Esta propiedad tiene tres opciones. Cada opción se explica a continuación:
Deferred: la opción predeterminada. Al cambiar el tamaño, aparecerá un separador que muestra qué tan grande o pequeña será la columna cuando se cambie el tamaño.Immediate: Al cambiar el tamaño, no habrá separador. El ancho de la columna seguirá el puntero a medida que arrastre el borde de la columna y cambie el tamaño en consecuencia.None: no se puede cambiar el tamaño de las columnas.
Cuando el cambio de tamaño de la columna se establece en Deferred, el separador que aparece se puede modificar en color y ancho usando las propiedades columnResizingSeparatorBackground y columnResizingSeparatorWidth de la cuadrícula, respectivamente.
También puede animar las columnas a medida que cambian de tamaño cuando el modo de cambio de tamaño está configurado en Solo Deferred. Esto se hace estableciendo la propiedad columnResizingAnimationMode en Interpolate.
Se puede determinar si cada columna de la cuadrícula puede cambiar de tamaño individualmente o no. Si desea habilitar o deshabilitar el cambio de tamaño en una columna en particular, puede configurar la propiedad IsResizingEnabled de esa columna.
Al cambiar el tamaño de una columna de ancho de estrella, cambiará esa columna a una columna fija.
Code Snippet
El siguiente fragmento de código demuestra cómo implementar el cambio de tamaño de la columna en la cuadrícula de datos React, donde en este caso no se podrá cambiar el tamaño de la columna Street. En este caso, el separador de cambio de tamaño de la columna tendrá 5 píxeles de ancho y las columnas cuyo tamaño se puede cambiar también se animarán cuando se cambie su tamaño:
import { ColumnResizingMode } from 'igniteui-react-grids';
import { ColumnResizingAnimationMode } from 'igniteui-react-grids';
<IgrDataGrid ref={this.onGridRef}
height="100%"
width="100%"
columnResizingAnimationMode={ColumnResizingAnimationMode.Interpolate}
columnResizingMode={ColumnResizingMode.Deferred}
columnResizingSeparatorWidth={5}
autoGenerateColumns={false}
dataSource={this.data} >
<IgrTextColumn field="FirstName" headerText="First Name" />
<IgrTextColumn field="LastName" headerText="Last Name" />
<IgrTextColumn field="Street" headerText="Street" isResizingEnabled={false} />
<IgrTextColumn field="City" headerText="City" />
</IgrDataGrid>