Visão geral do redimensionamento da coluna de grade do React

O recurso de Redimensionamento de Colunas Ignite UI for React no React Grid permite que os usuários ajustem facilmente a largura das colunas doIgrGrid. Por padrão, eles verão um indicador temporário de redimensionamento enquanto a operação de redimensionamento de arrasto estiver em vigor. Existem várias opções de redimensionamento disponíveis - Redimensionamento de Colunas em Pixels/Percentuais, Restrição de Redimensionamento de Colunas, Auto-Dimensionamento de Colunas ao Duplo Clique, e Auto-Dimensionamento de Colunas na Inicialização.

Exemplo de Redimensionamento de Coluna de Grade React

O redimensionamento das colunas também é ativado por nível por coluna, o que significa que podemIgrGrid ter uma mistura de colunas redimensionáveis e não redimensionáveis. Isso é feito por meio daresizable entrada doIgrColumn.

<IgrColumn field="ID" resizable={true} width="100px"></IgrColumn>

Você pode assinar oColumnResized evento de paraIgrGrid implementar alguma lógica personalizada quando uma coluna for redimensionada. Tanto as larguras das colunas anteriores quanto as novas, assim como oIgrColumn objeto, são expostas por meio dos argumentos do evento.

const onResize = (event: IgrColumnResizeEventArgs) => {
  const col = event.detail.column;
  const pWidth = event.detail.prevWidth;
  const nWidth = event.detail.newWidth;
}

<IgrGrid id="grid" autoGenerate={false} onColumnResized={onResize}>
    <IgrColumn field="ID" width="100px" resizable={true}></IgrColumn>
    <IgrColumn field="CompanyName" width="100px" resizable={true}></IgrColumn>
</IgrGrid>

Redimensionamento das Colunas em Pixels/Porcentagens

Dependendo do cenário do usuário, a largura da coluna pode ser definida em pixels, porcentagens ou uma mistura de ambos. Todos esses cenários são suportados pelo recurso Column Resizing. Por padrão, se uma coluna não tiver largura definida, ela se ajusta ao espaço disponível com largura definida em pixels.

Isso significa que a seguinte configuração é possível:

<IgrGrid id="grid" autoGenerate={false}>
    <IgrColumn field="ID" width="10%" resizable={true}></IgrColumn>
    <IgrColumn field="CompanyName" width="100px" resizable={true}></IgrColumn>
    <IgrColumn field="ContactTitle" resizable={true}></IgrColumn>
</IgrGrid>

[! Nota] Há uma pequena diferença na forma como o redimensionamento funciona para colunas definidas em pixels e porcentagens.

Pixels

O redimensionamento de colunas com largura em pixels funciona adicionando ou subtraindo diretamente a quantidade horizontal do movimento do mouse do tamanho da coluna.

Percentagens

Ao redimensionar colunas com largura em porcentagens, a quantidade horizontal do movimento do mouse em pixels se traduz aproximadamente em sua quantidade percentual em relação à largura da grade. As colunas permanecem responsivas e qualquer redimensionamento de grade futuro ainda refletirá nas colunas também.

Restringir o Redimensionamento da Coluna

Você também pode configurar as larguras mínima e máxima das colunas permitidas. Isso é feito viaminWidth as entradas emaxWidth dosIgrColumn o. Nesse caso, a operação de arrastar do indicador de redimensionamento é restrita para notificar o usuário de que a coluna não pode ser redimensionada fora dos limites definidos porminWidth emaxWidth.

<IgrColumn field="ID" width="100px" resizable={true}
            minWidth="60px" maxWidth="230px"></IgrColumn>

É permitido misturar os tipos de valor de largura mínima e máxima da coluna (pixels ou porcentagens). Se os valores definidos para mínimo e máximo forem definidos como porcentagens, o respectivo tamanho da coluna será limitado aos tamanhos exatos semelhantes aos pixels.

Isso significa que as seguintes configurações são possíveis:

<IgrColumn field="ID" width="10%" resizable={true}
            minWidth="60px" maxWidth="230px"></IgrColumn>

<IgrColumn field="ID" width="100px" resizable={true}
            minWidth="5%" maxWidth="15%"></IgrColumn>

Tamanho Automático das Colunas ao Duplo Clique

Cada coluna pode ser dimensionada automaticamente clicando duas vezes no lado direito do cabeçalho – a coluna será dimensionada para o maior valor da célula atualmente visível, incluindo o próprio cabeçalho. Esse comportamento é ativado por padrão, não é necessária nenhuma configuração adicional. No entanto, a coluna não será dimensionada automaticamente casomaxWidth seja definida nessa coluna e a nova largura exceda essemaxWidth valor. Nesse caso, a coluna será dimensionada de acordo com o valor pré-definidomaxWidth.

Você também pode dimensionar automaticamente uma coluna dinamicamente usando o método expostoautosize emIgrColumn.

const column = grid.getColumnByName('ID');
column.autosize();

Colunas de tamanho automático na inicialização

Cada coluna pode ser configurada para tamanho automático na inicialização definindowidth para 'auto':

<IgrColumn width='auto'>

Quando a coluna é inicializada pela primeira vez na exibição, ela resolve sua largura para o tamanho da célula ou cabeçalho mais longo visível. Observe que as células que estão fora das linhas visíveis não são incluídas.

Essa abordagem é mais otimizada em termos de desempenho do que o dimensionamento automático após a inicialização e é recomendada especialmente em casos em que você precisa dimensionar automaticamente um grande número de colunas.

Estilização

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar a cor da alça de redimensionamento, você precisa definir uma classe para a grade primeiro:

<IgrGrid className="grid"></IgrGrid>

Em seguida, defina a propriedade CSS relacionada para essa classe:

.grid {
    --ig-grid-resize-line-color: #f35b04;
}

Demo

Referências de API

Recursos adicionais

Nossa comunidade é ativa e sempre acolhedora para novas ideias.