Tabla

La función de tabla mejorada proporciona capacidades avanzadas de edición de tablas para Univer Docs, incluido el estilo de celda, personalización de bordes, manipulación de filas y columnas y llenado de datos.

Introducción

En Univer Docs, las tablas mejoradas le permiten:

• Insertar tablas mediante programación: crear tablas con dimensiones específicas.
• Manipular la estructura: agregar, eliminar y mover filas y columnas.
• Estilizar celdas: aplicar bordes, fondos y formato de texto.
• Fusionar y dividir celdas: combinar celdas para diseños complejos.

Modo de complemento

Instalación

pnpm add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

npm install @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

yarn add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

bun add @univerjs-pro/docs-table @univerjs-pro/docs-table-ui

Uso

import { UniverDocsTablePlugin } from '@univerjs-pro/docs-table'import { UniverDocsTableUIPlugin } from '@univerjs-pro/docs-table-ui'import DocsTableUIEnUS from '@univerjs-pro/docs-table-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-table-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DocsTableUIEnUS,     ),  },})univer.registerPlugin(UniverDocsTablePlugin)univer.registerPlugin(UniverDocsTableUIPlugin)

Si tiene una licencia comercial de Univer, consulte Uso de la licencia en el cliente para configuración.

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.

API de fachada

Asegúrese de importar la fachada antes de usar la API:

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

Insertar una tabla

const doc = univerAPI.getActiveDocument()const table = doc?.insertTable(3, 4, { tableId: 'my-table' })table?.setCellText(0, 0, 'Name')

Insertar una tabla a partir de datos

const doc = univerAPI.getActiveDocument()doc?.insertTableFromData([  ['Name', 'Status'],  ['Facade', 'Ready'],], { headerRowCount: 1 })

Obtener todas las tablas

const doc = univerAPI.getActiveDocument()const tables = doc?.getTables() ?? []

Eliminar una tabla

const doc = univerAPI.getActiveDocument()doc?.deleteTable('my-table')

Bordes de tabla

Seleccione una tabla o sus celdas para abrir la pestaña contextual Tabla. El selector ofrece bordes completos, exteriores, interiores, individuales y sin bordes, además de color, grosor y estilo de línea. Estos controles los proporciona UniverDocsTableUIPlugin.

Edición, historial y colaboración

Los setters y cambios estructurales de tablas usan comandos con deshacer/rehacer y colaboración. setTableStyle() agrupa fondo y borde en una entrada del historial. setColumnType() también se deshace y sincroniza; los tipos acompañan a las columnas movidas. setCellText() sustituye el valor completo: las sustituciones simultáneas usan resolución atómica y las ediciones de caracteres usan OT de texto. Una edición rechazada por un control de contenido bloqueado devuelve false sin consumir el historial.

Alinear toda la tabla

En documentos Traditional, seleccione una tabla y use su menú de alineación en el Ribbon para situarla a la izquierda, en el centro o a la derecha del área de contenido. Cambia la posición de la tabla, no la alineación del texto de las celdas. El control está deshabilitado en documentos Modern.

El valor se guarda en tableSource[tableId].align y admite deshacer, rehacer y guardar. Tras registrar el plugin de tablas, también puede ejecutar el comando público siguiente con un ID de tabla existente en el snapshot. Los destinos no válidos, documentos deshabilitados y documentos Modern devuelven false.

import { DocsTableSetTableAlignCommand } from '@univerjs-pro/docs-table'import { TableAlignmentType } from '@univerjs/core'const aligned = await univerAPI.executeCommand(DocsTableSetTableAlignCommand.id, {  unitId: documentId,  tableId,  value: TableAlignmentType.CENTER,})