React Descripción general del cambio de tamaño de las columnas de cuadrícula

    The Ignite UI for React Column Resizing feature in React Grid allows users to easily adjust the width of the columns of the IgrGrid. By default, they will see a temporary resize indicator while the drag resizing operation is in effect. There are several resizing options available - Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, and Auto-Size Columns on Initialization.

    React Ejemplo de cambio de tamaño de columna de cuadrícula

    El redimensionamiento de columnas también está habilitado a nivel por columna, lo que significa que puedenIgrGrid tener una mezcla de columnas redimensionables y no redimensionables. Esto se hace mediante laresizable entrada de elIgrColumn.

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

    Puedes suscribirte alColumnResized evento de paraIgrGrid implementar alguna lógica personalizada cuando una columna se redimensiona. Tanto los anchos de columna anteriores como los nuevos, así como elIgrColumn objeto, quedan expuestos a través de los argumentos de 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>

    Cambiar el tamaño de las columnas en píxeles/porcentajes

    Dependiendo del escenario del usuario, el ancho de la columna se puede definir en píxeles, porcentajes o una combinación de ambos. Todos estos escenarios son compatibles con la función de cambio de tamaño de columna. De forma predeterminada, si una columna no tiene el ancho establecido, se ajusta al espacio disponible con el ancho establecido en píxeles.

    Esto significa que es posible la siguiente configuración:

    <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] Hay una ligera diferencia en la forma en que funciona el cambio de tamaño para las columnas establecidas en píxeles y porcentajes.

    Píxeles

    Cambiar el tamaño de las columnas con ancho en píxeles funciona sumando o restando directamente la cantidad horizontal del movimiento del mouse del tamaño de la columna.

    Porcentajes

    Al cambiar el tamaño de las columnas con ancho en porcentajes, la cantidad horizontal del movimiento del mouse en píxeles se traduce aproximadamente a su porcentaje relativo al ancho de la cuadrícula. Las columnas siguen respondiendo y cualquier cambio de tamaño futuro de la cuadrícula también se reflejará en las columnas.

    Restringir el cambio de tamaño de la columna

    También puedes configurar los anchos mínimos y máximos permitidos de columna. Esto se hace a través de lasminWidth entradas ymaxWidth de laIgrColumn. En este caso, la operación de arrastre del indicador de redimensionamiento está restringida para notificar al usuario que la columna no puede redimensionarse fuera de los límites definidos porminWidth y.maxWidth​

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

    Se permite mezclar los tipos de valores de ancho de columna mínimo y máximo (píxeles o porcentajes). Si los valores establecidos para mínimo y máximo se establecen en porcentajes, el tamaño de columna respectivo se limitará a esos tamaños exactos similares a los píxeles.

    Esto significa que son posibles las siguientes configuraciones:

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

    o

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

    Tamaño automático de columnas al hacer doble clic

    Cada columna puede ser dimensionada automáticamente haciendo doble clic en el lado derecho de la cabecera; la columna se dimensionará hasta el valor de celda visible más largo actualmente, incluyendo la cabecera en sí. Este comportamiento está activado por defecto, no se necesita ninguna configuración adicional. Sin embargo, la columna no se dimensionará automáticamente simaxWidth se establece en esa columna y el nuevo ancho supera esemaxWidth valor. En este caso, la columna se dimensionará según el valor preestablecidomaxWidth.

    También puedes dimensionar una columna dinámicamente usando el método de exposiciónautosize activadoIgrColumn.

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

    Tamaño automático de columnas en la inicialización

    Cada columna puede configurarse para que se ajuste automáticamente al inicializarse configurandowidth en 'auto':

    <IgrColumn width='auto'>

    Cuando la columna se inicializa por primera vez en la vista, resuelve su ancho al tamaño de la celda o encabezado visible más largo. Tenga en cuenta que las celdas que están fuera de las filas visibles no se incluyen.

    Este enfoque optimiza más el rendimiento que la inicialización de publicaciones con tamaño automático y se recomienda especialmente en los casos en los que necesita ajustar el tamaño automáticamente de una gran cantidad de columnas.

    Estilismo

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar el color del controlador de cambio de tamaño, primero debe establecer una clase para la cuadrícula:

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

    Luego establezca la propiedad CSS relacionada para esa clase:

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

    Manifestación

    Referencias de API

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.