[!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
The Ignite UI for Web Components Data Grid supports the ability to resize columns, giving you flexibility over how you wish to display your columns with respect to the width of each.
Web Components Grid Column Resizing Example
Column resizing in the Ignite UI for Web Components 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: 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
The following code snippet demonstrates how to implement column resizing in the Web Components data grid, where the Street column in this case will not be resizable. In this case, the column resizing separator will be 5 pixels wide and the columns that are resizable would animate when resized as well:
import { ColumnResizingMode } from 'igniteui-webcomponents-grids';
import { ColumnResizingAnimationMode } from 'igniteui-webcomponents-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;