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

O redimensionamento de colunas na Ignite UI for React DataGrid está ativado por padrão e pode ser controlado usando a propriedade columnResizingMode da grade. Essa propriedade tem três opções. Cada opção é explicada abaixo:

• Deferred: A opção padrão. Ao redimensionar, um separador aparecerá mostrando o quão grande ou pequena a coluna ficará quando redimensionada.
• Immediate: Ao redimensionar, não haverá separador. A largura da coluna seguirá o ponteiro conforme você arrasta a borda da coluna e redimensiona de acordo.
• None: as colunas não podem ser redimensionadas.

Quando o redimensionamento da coluna é definido como Deferred, o separador exibido pode ser modificado em cor e largura usando as propriedades columnResizingSeparatorBackground e columnResizingSeparatorWidth da grade, respectivamente.

Você também pode animar as colunas conforme elas são redimensionadas quando o modo de redimensionamento é definido como Deferred only. Isso é feito definindo a propriedade columnResizingAnimationMode como 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