React Cambio de tamaño de las columnas 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 redimensionamiento de columnas en el Ignite UI for React DataGrid está activado por defecto y puede controlarse usando lacolumnResizingMode propiedad de la cuadrícula. Esta propiedad tiene tres opciones. Cada opción se explica a continuación:
Deferred: La opción predeterminada. Al redimensionar, aparecerá un separador que indica si la columna será grande o pequeña al redimensionarse.Immediate: Al redimensionar, no habrá separador. El ancho de la columna seguirá el puntero mientras arrastras el borde de la columna y redimensionas en consecuencia.None: Las columnas no pueden redimensionarse.
Cuando el redimensionamiento de columna está configurado en ,Deferred el separador que aparece puede modificarse en color y ancho usando lascolumnResizingSeparatorBackground propiedades ycolumnResizingSeparatorWidth de la cuadrícula, respectivamente.
También puedes animar las columnas a medida que se redimensionan cuando el modo de redimensionamiento está configurado enDeferred solo. Esto se hace configurando lacolumnResizingAnimationMode propiedad paraInterpolate.
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 columnas en la cuadrícula de datos React, donde la columna Street en este caso no se podrá cambiar de tamaño. En este caso, el separador de cambio de tamaño de columnas tendrá 5 píxeles de ancho y las columnas que se puedan cambiar de tamaño también se animarán cuando se cambie su tamaño:
import { ColumnResizingMode } from 'igniteui-react-data-grids';
import { ColumnResizingAnimationMode } from 'igniteui-react-data-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>