[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Web Components Grid Column Resizing
A Grade de Dados do Ignite UI for Web Components oferece suporte à capacidade de redimensionar colunas, oferecendo flexibilidade sobre como você deseja exibir suas colunas em relação à largura de cada uma.
Web Components Grid Column Resizing Example
O redimensionamento de coluna no Ignite UI for Web Components DataGrid está ativado por padrão e pode ser controlado usando a columnResizingMode propriedade da grade. Esta 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 snippet de código a seguir demonstra como implementar o redimensionamento de coluna na grade de dados Web Components, em que a coluna Street, nesse caso, não será redimensionável. Nesse caso, o separador de redimensionamento de coluna terá 5 pixels de largura e as colunas redimensionáveis também serão animadas quando redimensionadas:
import { ColumnResizingMode } from 'igniteui-webcomponents-data-grids';
import { ColumnResizingAnimationMode } from 'igniteui-webcomponents-data-grids';
<igc-data-grid id="grid"
auto-generate-columns="false"
height="500px"
width="500px"
column-resizing-mode="Deferred"
column-resizing-animation-mode="Interpolate"
column-moving-separator-width="5" >
<igc-text-column field="FirstName"></igc-text-column>
<igc-text-column field="LastName"></igc-text-column>
<igc-text-column field="Street" is-resizing-enabled=false></igc-text-column>
<igc-text-column field="City"></igc-text-column>
</igc-data-grid>
let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;