Tabla

Registrar soporte para tablas

El soporte para tablas de diapositivas se divide en un paquete de modelo y un paquete de interfaz de usuario:

import { UniverSlidesTablePlugin } from '@univerjs-pro/slides-table'import { UniverSlidesTableUIPlugin } from '@univerjs-pro/slides-table-ui'import SlidesTableUIEnUS from '@univerjs-pro/slides-table-ui/locale/en-US'import '@univerjs-pro/slides-table-ui/lib/index.css'import '@univerjs-pro/slides-table/facade'univer.registerPlugin(UniverSlidesTablePlugin)univer.registerPlugin(UniverSlidesTableUIPlugin)

Compatibilidad móvil

Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.

Responsabilidades del paquete

• @univerjs-pro/slides-table almacena elementos de la tabla en el modelo de diapositivas y proporciona API de fachada para operaciones de tablas.
• @univerjs-pro/slides-table-ui agrega interfaz de usuario de edición del navegador, integración de renderizado, comportamiento de selección y operaciones de menú contextual. También proporciona @univerjs-pro/slides-table-ui/locale/* y @univerjs-pro/slides-table-ui/lib/index.css.

Opciones de tiempo de ejecución

Utilice ambos paquetes en un editor de navegador. Para el procesamiento de Node.js, importe solo el paquete del modelo a menos que también necesite la representación del navegador.

univer.registerPlugin(UniverSlidesPlugin)univer.registerPlugin(UniverSlidesTablePlugin)

Registre el soporte de la tabla antes de abrir o importar presentaciones que puedan contener elementos de la tabla; de lo contrario, el tiempo de ejecución no podrá interpretar esos elementos por completo.

Colores de tabla estables

Cuando se inserta una tabla o cambia su estilo, el complemento resuelve la paleta del tema actual en una instantánea propia de la tabla. Las tablas existentes conservan esos colores aunque cambie el tema global de Univer; elegir otro estilo crea una instantánea nueva. Las operaciones estándar de Facade lo gestionan automáticamente.

API de Facade

Importe la entrada de fachada para agregar métodos de tabla a FSlide:

import '@univerjs-pro/slides-table/facade'

Cree una tabla a partir de datos de texto sin formato:

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideById('slide-1')const table = fSlide.insertTableFromData(  [    ['Quarter', 'Owner', 'Status'],    ['Q1', 'Sales', 'Done'],    ['Q2', 'Marketing', 'In progress'],  ],  {    id: 'status-table',    rowHeight: 42,    columnWidth: 160,  },)

Utilice la tabla constructor cuando necesita un control de diseño explícito:

const tableInfo = fSlide.newTable()  .setValues([    ['Metric', 'Value'],    ['Revenue', '$120K'],  ])  .setRows(2)  .setColumns(2)  .setAbsolutePosition(80, 120)  .setSize(420, 180)  .build()const table = fSlide.insertTable(tableInfo)

Leer y actualizar celdas de la tabla:

const table = fSlide.getTableById('status-table') ?? fSlide.getTableAt(0)if (table) {  console.log(table.describe())  console.log(table.getCellText(0, 0))  table.getCell(1, 2)?.setText('Blocked')  table.getCell(0, 0)?.setBackgroundColor('#E8F1FF')}

Actualizar o eliminar una tabla existente:

const table = fSlide.getTableById('status-table')if (table) {  const nextTableInfo = table.toBuilder()    .setValues([      ['Quarter', 'Owner', 'Status'],      ['Q1', 'Sales', 'Done'],      ['Q2', 'Marketing', 'Blocked'],    ])    .setSize(480, 200)    .build()  fSlide.updateTable(nextTableInfo)  fSlide.removeTable(table)}

Los índices de filas y columnas de la tabla tienen base cero. Los recuentos de filas y columnas del generador se expanden para ajustarse a los valores que proporciona, por lo que setValues() se puede utilizar como fuente de verdad para tablas simples.