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

Column resizing in the Ignite UI for React DataGrid is on by default, and can be controlled by using the columnResizingMode property of the grid. This property has three options. Each option is explained below:

• Deferred: The default option. When resizing, a separator will appear showing how large or small the column will become when resized.
• Immediate: When resizing, there will be no separator. The column's width will follow the pointer as you drag the edge of the column and resize accordingly.
• None: Columns cannot be resized.

When column resizing is set to Deferred, the separator that shows up can be modified in color and width by using the columnResizingSeparatorBackground and columnResizingSeparatorWidth properties of the grid, respectively.

You can also animate the columns as they resize when the resizing mode is set to Deferred only. This is done by setting the columnResizingAnimationMode property to 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 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>

API References

• columnResizingAnimationMode
• columnResizingMode
• columnResizingSeparatorBackground
• columnResizingSeparatorWidth
• Deferred
• Interpolate