React Configuring Spreadsheet

    El componente React Spreadsheet permite al usuario configurar muchos aspectos diferentes del control. Esto incluye, entre otros, la edición de celdas, la visibilidad de las líneas de cuadrícula y los encabezados, la protección, el nivel de zoom y varias otras propiedades relacionadas con la hoja de cálculo de Excel.

    Ejemplo de hoja de cálculo de configuración React

    EXAMPLE
    DATA
    TSX

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Configurar la edición de celdas

    Cuando un usuario edita un valor de celda y confirma la nueva entrada, el control IgrSpreadsheet tiene la capacidad de navegar a celdas adyacentes a la celda actualmente activa al presionar la tecla Intro, dependiendo de la configuración de la hoja de cálculo.

    Para habilitar esta navegación con la tecla Enter, puede establecer la propiedad isEnterKeyNavigationEnabled en true. Si se establece en falso, la celda activa permanecerá igual al presionar la tecla Intro.

    También puede configurar la dirección de la celda adyacente a la que se navega al presionar la tecla Intro estableciendo la propiedad enterKeyNavigationDirection en Down, Up, Left o Right.

    Los siguientes fragmentos de código demuestran lo anterior:

    import { SpreadsheetEnterKeyNavigationDirection } from 'igniteui-react-spreadsheet';
    ts
    <IgrSpreadsheet isEnterKeyNavigationEnabled={true} enterKeyNavigationDirection={SpreadsheetEnterKeyNavigationDirection.Left} />
    tsx
    this.spreadsheet.isEnterKeyNavigationEnabled = true;
    this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
    ts
    Ignite UI for React | CTA Banner

    Configurar la barra de fórmulas

    React IgrSpreadsheet le permite configurar la visibilidad de la barra de fórmulas estableciendo la propiedad isFormulaBarVisible del control.

    Los siguientes fragmentos de código demuestran lo anterior:

    <IgrSpreadsheet isFormulaBarVisible={true} />
    tsx
    this.spreadsheet.isFormulaBarVisible = true;
    ts

    Configurar líneas de cuadrícula

    IgrSpreadsheet le permite configurar la visibilidad de sus líneas de cuadrícula configurando la propiedad areGridlinesVisible del control.

    Los siguientes fragmentos de código demuestran lo anterior:

    <IgrSpreadsheet areGridlinesVisible={true} />
    tsx
    this.spreadsheet.areGridlinesVisible = true;
    ts

    Configurar encabezados

    IgrSpreadsheet le permite configurar la visibilidad de sus encabezados configurando la propiedad areHeadersVisible del control.

    Los siguientes fragmentos de código demuestran lo anterior:

    <IgrSpreadsheet areHeadersVisible={true} />
    tsx
    this.spreadsheet.areHeadersVisible = false;
    ts

    Configurar la navegación

    El control IgrSpreadsheet le permite configurar la navegación entre las celdas de una hoja de trabajo configurando si el control está o no en "modo final". El modo de finalización es la funcionalidad en la que, al presionar una tecla de flecha, la celda activa se moverá desde la celda actual hasta el final de la fila o columna donde existen datos en las celdas adyacentes, dependiendo de la dirección de la tecla de flecha presionada. Esta funcionalidad es buena para navegar muy rápidamente hasta el final de grandes bloques de datos.

    Por ejemplo, si está en modo final, hace clic en un bloque grande de datos de 100x100 y presiona la tecla de flecha Right, esto navegará hasta el extremo derecho de la fila en la que se encuentra, hasta la columna de datos más a la derecha. Después de esta operación, IgrSpreadsheet saldrá del modo final.

    El modo de finalización entra en vigor en tiempo de ejecución cuando el usuario presiona la tecla Finalizar, pero se puede configurar mediante programación estableciendo la propiedad isInEndMode del control de hoja de cálculo.

    Los siguientes fragmentos de código demuestran lo anterior, en el sentido de que IgrSpreadsheet comenzará en modo final:

    <IgrSpreadsheet isInEndMode={true} />
    tsx
    this.spreadsheet.isInEndMode = true;
    ts

    Configurar la protección

    IgrSpreadsheet respetará la protección de un libro de trabajo hoja por hoja de trabajo. La configuración para la protección de una hoja de trabajo se puede configurar llamando al método Protect() en la hoja de trabajo para protegerla y al método Unprotect() para desprotegerla.

    Puede activar o desactivar la protección en la hoja de trabajo actualmente activa del control IgrSpreadsheet utilizando el siguiente código:

    this.spreadsheet.activeWorksheet.protect();
    this.spreadsheet.activeWorksheet.unprotect();
    ts

    Configurar la selección

    El control IgrSpreadsheet le permite configurar el tipo de selección permitida en el control y luego el usuario presiona las teclas modificadoras (Shift o Ctrl). Esto se hace estableciendo la propiedad selectionMode de la hoja de cálculo en uno de los siguientes valores:

    • AddToSelection: se agregan nuevos rangos de celdas a la colección cellRanges del objeto SpreadsheetSelection sin necesidad de mantener presionada la tecla Ctrl al arrastrar con el mouse y se agrega un rango con la primera tecla de flecha de navegación después de ingresar al modo. Se puede ingresar al modo presionando Shift+F8.
    • ExtendSelection: el rango de selección en la colección cellRanges del objeto SpreadsheetSelection que representa la celda activa se actualiza cuando uno usa el mouse para seleccionar una celda o navega a través del teclado.
    • Normal: La selección se reemplaza al arrastrar el mouse para seleccionar una celda o rango de celdas. De manera similar, al navegar mediante el teclado se crea una nueva selección. Se puede agregar un nuevo rango manteniendo presionada la tecla Ctrl y usando el mouse y se puede alterar el rango de selección que contiene la celda activa manteniendo presionada la tecla Shift mientras se hace clic con el mouse o se navega con el teclado, como por ejemplo con las teclas de flecha.

    El objeto SpreadsheetSelection mencionado en las descripciones anteriores se puede obtener utilizando la propiedad activeSelection del control IgrSpreadsheet.

    Los siguientes fragmentos de código demuestran la configuración del modo de selección:

    import { SpreadsheetCellSelectionMode } from 'igniteui-react-spreadsheet';
    ts
    <IgrSpreadsheet selectionMode={SpreadsheetCellSelectionMode.ExtendSelection} />
    tsx
    this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
    ts

    La selección del control IgrSpreadsheet también se puede configurar u obtener mediante programación. Para la selección única, puede establecer la propiedad activeCell La selección múltiple se realiza a través del objeto SpreadsheetSelection que devuelve la propiedad activeSelection del control IgrSpreadsheet.

    El objeto SpreadsheetSelection tiene un método AddCellRange() que le permite agregar mediante programación un rango de celdas a la selección de la hoja de cálculo en forma de un nuevo objeto SpreadsheetCellRange.

    El siguiente fragmento de código demuestra cómo agregar un rango de celdas a la selección de la hoja de cálculo:

    this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));
    ts

    Configurar el área de la barra de pestañas

    El control IgrSpreadsheet respeta la configuración de la visibilidad y el ancho del área de la barra de pestañas de WindowOptions del workbook actualmente activo a través de las propiedades tabBarWidth y TabBarVisibility, respectivamente.

    El área de la barra de pestañas es el área que visualiza los nombres de las hojas de trabajo como pestañas en el control.

    Puede configurar la visibilidad y el ancho de la barra de pestañas utilizando el siguiente fragmento de código:

    this.spreadsheet.workbook.windowOptions.tabBarVisible = false;
    
    this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;
    ts

    Configurar el nivel de zoom

    El componente React Spreadsheet permite acercar y alejar la imagen configurando su propiedad zoomLevel. El nivel de zoom puede ser de un máximo del 400 % y un mínimo del 10 %.

    Establecer esta propiedad en un número representa el porcentaje como un número entero, por lo que establecer zoomLevel en 100 equivale a establecerlo en 100%.

    Los siguientes fragmentos de código muestran cómo configurar el nivel de zoom de la hoja de cálculo:

    <IgrSpreadsheet zoomLevel={200} />
    tsx
    this.spreadsheet.zoomLevel = 200;
    ts

    Referencias de API