Angular Redimensionamento da coluna da grade

    Com o redimensionamento da coluna de grade adiada, o usuário verá um indicador de redimensionamento temporário enquanto a operação de redimensionamento de arrastar Angular estiver em vigor. A nova largura da coluna de grade é aplicada quando a operação de arrastar é concluída.

    Angular Grid Column Resizing Example

    O redimensionamento de coluna também é habilitado por nível de coluna, o que significa que a grade igx pode ter uma combinação de colunas redimensionáveis e não redimensionáveis. Isso é feito por meio da resizable entrada do igx-column.

    <igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>

    Você pode assinar o columnResized evento do igx-grid para implementar alguma lógica personalizada quando uma coluna é redimensionada. As larguras de coluna anteriores e novas, bem como o IgxColumnComponent objeto, são expostas por meio dos argumentos do evento.

    <igx-grid [data]="data" (columnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'ID'" width="100px" [resizable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" width="100px" [resizable]="true"></igx-column>
</igx-grid>

    public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}

    Resizing columns in pixels/percentages

    Dependendo do cenário do usuário, a largura da coluna pode ser definida em pixels, porcentagens ou uma combinação de ambos. Todos esses cenários são compatíveis com o recurso Redimensionamento de Coluna. Por padrão, se uma coluna não tiver largura definida, ela se ajustará ao espaço disponível com largura definida em pixels.

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

    <igx-grid [data]="data" (columnResized)="onResize($event)" [autoGenerate]="false">
    <igx-column [field]="'ID'" width="10%" [resizable]="true"></igx-column>
    <igx-column [field]="'CompanyName'" width="100px" [resizable]="true"></igx-column>
    <igx-column [field]="'ContactTitle'" [resizable]="true"></igx-column>
</igx-grid>
    Note

    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.

    Restrict column resizing

    Você também pode configurar as larguras mínimas e máximas permitidas de coluna. Isso é feito por meio das minWidth entradas e maxWidth do igx-column. 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 por minWidth e maxWidth.

    <igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

    É 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:

    <igx-column [field]="'ID'" width="10%" [resizable]="true"
            [minWidth]="'60px'" [maxWidth]="'230px'"></igx-column>

    ou

    <igx-column [field]="'ID'" width="100px" [resizable]="true"
            [minWidth]="'5%'" [maxWidth]="'15%'"></igx-column>

    Auto-size columns on double click

    Cada coluna pode ser dimensionada automaticamente clicando duas vezes no lado direito do cabeçalho - a coluna será dimensionada para o valor de célula visível mais longo no momento, incluindo o próprio cabeçalho. Esse comportamento é habilitado por padrão, nenhuma configuração adicional é necessária. No entanto, a coluna não será dimensionada automaticamente caso maxWidth seja definida nessa coluna e a nova largura exceda esse maxWidth valor. Neste caso, a coluna será dimensionada de acordo com o valor predefinido maxWidth.

    Você também pode dimensionar automaticamente uma coluna dinamicamente usando o método exposto autosize() ativado IgxColumnComponent.

    @ViewChild('grid') grid: IgxGridComponent;

let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
column.autosize();

    Auto-size columns on initialization

    Cada coluna pode ser definida para tamanho automático na inicialização, definindo width como 'auto':

    <igx-column 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 visível mais longo. Observe que as células que estão fora das linhas visíveis não estão incluídas. Essa abordagem é mais otimizada para desempenho do que o dimensionamento automático após a inicialização e é recomendada especialmente nos casos em que você precisa dimensionar automaticamente um grande número de colunas.

    Estilização

    Para começar a estilizar a linha de redimensionamento da coluna Grid, precisamos importar o arquivo de índice, onde estão todas as funções do tema e mixins de componentes:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    A abordagem mais simples para conseguir isso é criar um novo tema que estenda o e aceite muitos parâmetros, grid-theme bem como o $resize-line-color parâmetro.

    $custom-grid-theme: grid-theme(
  $resize-line-color: #0288d1
);
    Note

    Em vez de codificar os valores de cor como acabamos de fazer, podemos obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.

    O último passo é incluir os mixins de componentes com seu respectivo tema:

    @include css-vars($custom-grid-theme);

    Demo

    Note

    A amostra não será afetada Change Theme pelo tema global selecionado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.