React Redimensionamento da coluna da grade

A Ignite UI for React Data Grid suporta a capacidade de redimensionar colunas, dando a você flexibilidade sobre como deseja exibir suas colunas em relação à largura de cada uma.

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.

Cada coluna na grade pode ser determinada se pode ou não ser redimensionada individualmente. Se você quiser habilitar ou desabilitar o redimensionamento em uma coluna específica, você pode definir a propriedade IsResizingEnabled dessa coluna.

Ao redimensionar uma coluna com largura de estrela, ela se tornará uma coluna fixa.

Code Snippet

O seguinte trecho de código demonstra como implementar o redimensionamento de colunas na grade de dados React, onde a coluna Street neste caso não será redimensionável. Neste caso, o separador de redimensionamento de colunas terá 5 pixels de largura e as colunas que são redimensionáveis também serão animadas quando redimensionadas:

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